こんにちは、なべです。
つい最近、このブログ「なべの美容日記。」を大幅にリニューアルしました。
リニューアルといっても、コンセプトや内容が変わったのではありません。ブログ全体のデザインや、アドセンス広告配置などを変更しました。
今回使用させていただいたテーマは、「Cappuccino」です。カスタマイズを加えなくともオシャレですが、色々とカスタマイズしました。
そこで、今回おこなったカスタマイズを記録したいと思います。たくさんの方のブログを参考にさせていただきましたので、そちらもリンクを貼ります〜。
コードを使用するときは、バックアップを取って、自己責任でお願いします！
はてなブログテーマ『Cappuccino』
まずはてなブログのテーマはこちらから。
製作者様が、デモブログなどでカスタマイズを紹介してくれているので、とても助かりました。
ブログ全体のカラー変更
もともと、12種類の着せ替えデザインがありますが、私はジェネレーターを使用しました。
ジェネレーターを使用すれば、細かく色が設定できるので、オリジナルにしたい方はおすすめです。
こちらの記事の最後の方にある「ジェネレーターを使う」という部分から説明があります。記事内からデモサイトへ飛んで、コードが作成できますよ。
ヘッダー画像の設定
前回までは、ヘッダー画像の設定にかなり手こずっていました・・。
それは、レスポンシブ対応であってもスマホでは綺麗に表示されない、ということが多々あったからです。
しかしながら、今回は難なくクリア。ポイントは、用意する画像は「1000×200px」のサイズで作ることですね。
これさえ守ればあとは思い通り〜！
Cappuccinoの製作者様、ありがとうございます！
ヘッダーリンクの消去
はてなブログでは、ヘッダーの上部にはてなオリジナルのヘッダーリンクがあります。ダッシュボードに飛んだりできるものですね。
↑ちょっと細くなってますがこういうやつです。
これを表示しないようにカスタマイズしています。ヘッダーリンクを消すと、そこに余白ができてしまうので、それもセットで削除します。
/*元ヘッダーリンク部分の余白を消す*/
#container {
padding-top: 0px;
}
/*はてなブログヘッダーリンクを消去 */
#globalheader-container {
display: none;
}
こちらのコードを入れればできると思います。
グローバルナビゲーションの設定
カテゴリーなどを設定できるグローバルナビゲーション。
こちらも製作者様の記事から、このテーマに合わせたものが簡単に作れます。
グローバルメニューもレスポンシブなのですが、スマホからだとトグルメニューになってしまうので注意。
私は今まで、スマホから見てもグローバルメニュー は帯になるようにしてきました。トグルメニューだと、見つけてもらえないこともあるからです。
ただ、今回は少し妥協しました・・笑
それでも、コードに当てはめるだけで簡単に綺麗なメニューが作られるので、十分です！
ヘッダー（タイトル）下のおすすめ記事を追加
先ほどのグローバルメニューの話とかぶりますが、スマホから見ると、カテゴリーが探しにくい可能性があったので、代わりに「おすすめ記事」を表示しました。
PCから見ても、もちろん問題はありません。
こちらから、コード作成ができます。
このおすすめ記事4つは、ヘッダー下だけではなく、記事下やサイドバーにも表示可能です。
私の場合、記事下には「関連記事広告」を配置しているので、そこだとごちゃついてしまうな〜と思い、ヘッダー下にしました。
プロフィールとフォローボタンの設定
プロフィールも、簡単にオシャレにできちゃいます。いや〜すごいね・・。
私はデザイン3を採用しました。デザイン的には、デザイン6以降のものが好みではあったのですが・・。
自分の顔写真を使っているので、それを当てはめたらかなり大きくて・・笑 サイドバーにあるプロフィール写真の存在感がえぐいな、と思ったのでやめました。
プレビューもあるので、色々みながら調整してみてください。
そして読者登録のボタンもカスタマイズしました。
上のプロフィールカスタマイズで、はてなのフォローボタン（読者登録ボタン）も作ることができますが、ちょっと目立たないなと思ったので変更。
こちらの記事を参考に作り、サイドバーに設置しました。
記事内の文字サイズを変更
デフォルトの文字サイズだと、ちょっと小さいな〜と感じていたので、これは前から設定を変えていました。
今回も引き続き、18pxにしております。ここら辺はお好みで。
記事一覧のアイキャッチサイズを変更
今回のカスタマイズで一番大変だったのが、アイキャッチサイズ変更ですね。
私は今まで、アイキャッチを正方形で作ってきました。長方形のサイズでは、アイキャッチがトリミングされてしまっていたので、正方形なら安全だったからです。
しかし、はてなの仕様が変わったので、いまは長方形でも収まるようになりました。
これがまた問題だったんですよ・・。
記事一覧のアイキャッチが正方形で表示されるテーマならいいのですが、「Cappuccino」は長方形で表示されます。
そのため、今までの正方形アイキャッチでは、上下がトリミングされてしまいました。アイキャッチのサイズを全部変えるか？と思いましたが、だいぶキツイので却下。
「長方形アイキャッチが、正方形にトリミングされて見切れる」という問題を解決してくれる記事はたくさんありました。
けれど、正方形のアイキャッチが見切れる問題を解決する記事にはなかなかたどり着けず・・。
最後に見つけたのがこちらの記事です。
数値は、自分が用意したアイキャッチ画像に合わせて変えればOK。
私の設定では、端っこに文字を入れているとちょっと見切れちゃいますが、ほとんど影響がないのでこれでいきます。
デザイン関係のカスタマイズは大体これくらいです。
続いてはアドセンス広告の設定に移ります〜。
Googleアドセンス広告の設定
アドセンスを導入してからもうすぐ3年になります。
色々と配置を考えてやっていたときもありましたが、最近まで自動広告を採用していました。楽だけどまぁ見づらいですね。笑
トップページにドドーンと出てくるし、微妙。
ということでまた任意の場所に表示されるようにしました。
アドセンス自動広告の表示をストップ
Googleアドセンスの設定画面で、自動広告をオフするのはもちろんなのですが、それだけでは不完全。
ということで、こちらの記事にある通り、はてなの設定も変更しました。
これで、自動広告がストップし、好きなところに広告を設置できますね。
記事中の好きな場所にアドセンス広告を表示
いつもお世話になっているのがこちらの記事です。
記事中で、アドセンスを表示させたい見出しの前後を選択し、コードをコピペして終了。簡単・・。
はてなブログは、標準だと大見出しが（h3）から始まります。私はそこを（h2）から始まるようにカスタマイズしているので、「その他のタグ」の欄にh2を入力しました。
これを駆使すれば、タイトル下や目次の下などにもサクッと入れられます。
記事下に関連コンテンツ広告を入れる
関連コンテンツが解放されるまでは、記事の終わりにも普通の広告を入れていました。
関連コンテンツが解放されてからは、そちらを利用しています。関連コンテンツは、関連記事に紛れて表示されるので、記事下に設置。
普通に設定してしまうと、ソーシャルボタンの下に広告が設置されてしまいます。
なので、こちらの記事を参考に、記事の文章が終わった後すぐに表示されるようにしました。
検索エンジンの設定
Googleアドセンスの広告に、検索エンジンが追加されていました。
私は、ブログ内検索を元々設置していたので、それをGoogleの検索エンジンに変更しました。
サイト内検索ができるように設定するときに、「ドメイン全体」を入力することがポイントです。
下の記事内にもあるとおり、私の場合だと「nabepanman.com」のみを入力します。
検索窓にGoogleの文字が出るので、それが気になる方もいるかもしれませんね。
今後も、見栄えや広告のデータを見て考えながら、色々と試してみようと思います。
トップ記事一覧のインフィード広告設定
トップの記事一覧の間に、溶け込むインフィード広告を入れました。
これもなかなかすんなりいかずに困りました・・。
しかし、こちらの記事の通りに設定すると、うまくできたのでよかったです。
clean-copy-of-onenote.hatenablog.com
Googleで検索すると、似たようなコードを載せているブログがたくさんヒットします。
それらも試して見ましたが、ちゃんと表示されたのはこちらの記事だけでした・・。ちょっとずつ変わっていたり、誤りがあったりしたのでしょうか。
とりあえず、ちゃんとできたので安心です。
サイドバーの広告設定、画面横ずれ防止
サイドバーにも一つ、ディスプレイ広告を設置しました。
サイドバーは、スマホ表示になると、記事一覧の下に表示されるようになります。そのとき、普通のレスポンシブ設定のままだとうまくいきませんでした。
PC表示の時は問題ないのですが、スマホ表示の時には、横幅が大きすぎたようです。
ただはみ出ているくらいならまだましですが、大きさがあっていないことにより、スマホの画面が横ずれしてしまうのが大問題です。
めっちゃ見にくいし、操作性が悪すぎる・・。
ということで設定変更！！
一般的なカスタマイズとして、広告コードの一部を変更するという方法があります。
こちらの記事にあるように、「true」から「false」に変更してみましたが、それでだけでは安定せず・・。
その下に書いてあった、【data-ad-format=”auto”】を【data-ad-format=”rectangle”】に変更する方法も試しました。
こうすることにより、綺麗なサイズでおさまってくれましたよ！！
これは使用しているテーマやレイアウトによって変わると思うので、調整するしかなさそうですね。
見やすくオシャレな有益ブログを目指して
こうして書き出すと、わりと色々カスタマイズしてるな〜と思います。笑 自分で一からコードを書けるわけではないので、世の皆さんに感謝です。
ブログのデザインとかって、やり始めると止まらないし、いくらでもこだわることができる部分だとは思います。
とはいえ、「ある程度」で辞めるのも大事ですよね。ある程度見やすければ合格かなと・・。
どんなにブログの外面を良くしても、内容（記事）が良くなければ意味がないので・・。
そう思いながらも、今回は久々に一からデザインをかえてしまいました。笑 自分の思い描いたブログデザインに仕上がると楽しいのよ・・。
これでまぁ、大体は整ったので、しばらくはこのデザインでいきます。
ちゃんと記事も更新して、より良いブログにするぞー！
というわけで、ブログカスタマイズまとめでした！読んでくださってありがとうございます！
