【ブログ大幅リニューアル】オリジナリティを出したデザインに変更しました！
こんにちは、うどんです。
随分前からブログのデザインを変えよう変えよう思っていたのですが、ずっと放置してました。
スマホ版で見ている方は知らないでしょうが、このブログの背景ピンクだし、何かちっちゃい子いるし…
男性の読者さんも多いことを考えるとデザインちょっと女性向け過ぎる…
PCでドピンクな背景だったら、第一印象もあまりよろしくないのでは…
以前から考えていたデザインも含めブログを大幅リニューアルしてみました！
ブログのデザインを変更
～Before～
～After～
いい歳こいたおばさんなので落ち着いた配色にしよう！シンプルイズザベスト！と選んだのがレスポンシブデザインの「Brooklyn」です。
ブラックとホワイトを基調としたシンプルなデザインのテーマです。
レスポンシブデザインでスマートフォンにも対応しています。
そして、カスタマイズ用のCSSも記述されているので、様々なカスタマイズが簡単に行えます。
今まではレスポンシブ対応でなかったため、スマホでブログを見るとデザインが変わっていたのですが、「Brooklyn」であればPCでもスマホでも同じデザインで表示されるようになりました。
結構ブログのデザインって重要ですよね。
見やすさを重視してデザインを変更してみました。
広告の位置変更
レスポンシブ対応の「Brooklyn」に変更したため、今までの設定では広告がうまく表示されなかったり、GoogleAdSense側でNGな表示のされ方になってしまいました。
こちらの記事に対策が載っていたので、広告の配置をパクらせてもらいました！笑
大分、広告の位置を変更したので、これが吉と出るか凶と出るか…
様子を見つつ、試行錯誤していこうと思います。
記事内の見出しを変更
今までの見出しは、タイトル名を太文字＋文字サイズ（中）＋色変更してました。
今回のリニューアルでオリジナリティを出そう！と思い、試行錯誤した結果がこちら。
リニューアル前の見出し
リニューアル後の見出し
大幅に変更してみました。
タイトル前には可愛らしいにこちゃんマークを入れてみました。
この画像を入れる作業がなかなかうまくいかず…
30分近く「あーでもない。こーでもない。」と悪戦苦闘してました(;´▽｀A``
CSSで<h3>の設定を変更したので、これからはHTML側でちまちま変更しなくても済みます♪
面倒くさがらず、もっと早くCSSいじっとけばよかった…(￣▽￣;)
サムネイル画像を表示
サイドバーに「最新記事」「注目記事」「関連記事」を表示させましたが、今まではタイトル名だけ表示されてました。
今回のリニューアルでタイトル名の横にサムネイル画像を表示されるよう設定を変更。
画像があるだけで、印象が大分変り記事に興味を持ってもらいやすくなるのでは？と期待を込めて変更してみました。
検索エンジン最適化の設定
今回、設定したのは「ブログの概要」と「ブログのキーワード」です。
ちなみに、「ブログの概要」はGoogleやYahoo！で自然検索した際にタイトルの下に表示される文言です。
概要は110文字程度が理想的らしいです。
「ブログのキーワード」は自然検索した際に検索キーワードに引っかかりやすくする効果があります。
今回は深く考えずに今まで投稿していた記事に関わりのあるワードを片っ端から登録してみました。
多すぎるとあまり効果が出ないようなので、今後選定した方が良さそう…(￣▽￣;)
Googleアナリティクスの設定
Googleの解析システムを使用するための設定。
特に設定したからと言ってPV数が伸びるわけではないですが、こういった検索ワードでプログにたどり着いているのかを確認できるようになりました。
まとめ
ブログ大幅リニューアルをしましたが、半日潰れてしまいました(;´･ω･)
貴重な休日が…明日も仕事か…
退職後は主な収入源がブログになるので、今のうちにいろいろ変更しておいた方がよかったんだ！時間は無駄にしてない！と自分に言い聞かせてます。
