ブログをやり始めたら自分の好きなように変えてみたい！
そうなりますよね！
そのままでも大丈夫なんでしょうけど、
中にはグーグルアドセンスの審査に関係ありそうなものもあります。
私のブログで行なったカスタマイズを紹介します。
紹介と言っても私にそんな知識はないので、
カスタマイズを書かれている方の紹介になります。
感謝です！
カスタマイズする時は追加する前に追加前のバックアップを取っておいた方がいいですよ。
コードにコメントを付けてくれている方もいらっしゃいますが、
たくさん追加すると訳が分からなくなってしまいますので。
使用したテンプレート
ブログを始めた頃はかわいい感じにしようとかわいいテンプレートにしていたのですが、
いろいろカスタマイズしていくにつれカスタマイズしやすくてシンプルなデザインの
Innocentに落ち着きました。
レスポンシブ対応なのもいいです。
カスタマイズを行なった項目
・グローバルメニューの設置
・シェアボタンの変更
・上に戻るボタンの設置
・見出しデザインの変更
・吹き出しの設定
・文章を枠で囲む設定
・サイドバーの変更
・404ページの変更
・目次の変更
・フッタにコピーライト設置
・一覧形式の画像を変える
・フォントサイズと行間の変更
カスタマイズの説明と参考にさせていただいた方
・グローバルメニュー
ブログのトップにあるカーソルを合わせるとにょーんと出てくるリンクですね。
これはグーグルアドセンスの審査にも影響すると言われてたので即設置しました。
元CAバンビ (id:zuboraca)さんの記事を参考に自分のブログに合わせてあります。
www.bambi.pro
・シェアボタンの変更
Twitterとかのボタンですね。
これはもう見た目で変えてやろうと。
SHIROMAさんの記事を参考にしました。
www.notitle-weblog.com
上手く表示されない時はCSSの上の方に追加するといいです。
私も最初、一番下に追加したらうまくいきませんでした…
他のは普通に一番下に追加していけばいいと思いますが、
これと次の上に戻るボタンだけは出来るだけ上に追加したほうがいいです。
また、記事ではheadに要素を追加しなければいけないと書かれているのですが、
消去しても機能してるんですよね。
一回追加したら消しても大丈夫なのかな？
・上に戻るボタンの設置
右下に常駐してボタンをクリックすると最上部まで一気に行けるボタンですね。
記事が長くなると最初に戻るのも面倒になってくるのであると訪問者の方に優しいです。
移住者さんの記事を参考にしました。
www.gipsyjazznyumon.com
これもなぜか最初は上手くいかなかったんですよね…
そもそもボタンが表示されないかったりしました。
これもCSSの上の方に追加すると機能するようになりました。
そして、同じくこれもheadに追加が必要なんですが、機能するようになってから
headに追加したものを削除しても機能してます。
・見出しデザインの変更
H2やH3などの見出しのデザインを変更します。
これはもう完全に趣味の域ですね。
SHIROMAさんの記事を参考に気に入ったものでやりました。
www.notitle-weblog.com
他にもいろいろあるので、気に入ったのがあるかもですよ。
・吹き出しの設定
わーい！
こんな感じで吹き出しにするやつですね。SHIROMAさんの記事を参考にしました。
www.notitle-weblog.com
他のとは違いただコードをコピペすればいいと言うわけではないのでちょっと大変です。
でも、一度設定してしまえば後は楽です。
画像は自分で用意しないといけませんがなかなか面白いですよ。
面白がって使いまくってしまいましたが、くどそうだったのでやめました。
アクセントとしてやるくらいがいいですね。
・文章を枠で囲む設定
単に箇条書きにしただけだと見にくいので、枠で囲うことによって見栄えを良くしました。
詳しくはこちらに記事にしています。
・サイドバーの変更
プロフィールやリンクなど常に表示されているサイドバー。
ここもカスタマイズして見栄え良くしました。
移住者さんの記事を参考にさせていただきました。
www.gipsyjazznyumon.com
・404ページ(not foundページ)の変更
これも私の趣味で。
関連記事も表示するようになるからいいかなと思ったけど、
サイドバーに注目記事があるからこれはあまり意味ないかな。
H.S.Hige (id:herrscherinnen)さんの記事を参考にさせていただきました。
h-s-hige.hateblo.jp
・目次の変更
目次も味気なかったので、可愛くしてみました。
２代目つな (id:pea-nut）さんの記事を参考にさせていただきました。
pea-nut.hatenablog.com
他にもかわいいカスタマイズがいっぱいありますよ。
・フッタにコピーライト設置
ブログの一番下にコピーライトとプライバシーポリシーなどを設置しました。
グーグルアドセンスに合格するにあたって、
プライバシーポリシーやお問い合わせフォームの設置は必須なので導入しました。
でも、結局サイドバーにも設置したので審査にはあまり影響しないかも。
なんか見た目が格好良かったので残しました（笑）
移住者さんの記事を参考にさせていただきました。
www.gipsyjazznyumon.com
・一覧形式の画像を変える
ausnichts (id:ausnichts)さんの記事を参考にさせていただきました。
www.imuza.com
jpg, png, gif 対応版へのリンクがページ中程にあります。
アイキャッチ画像をTwitter投稿用に横長にしたら正方形に見切れてしまったので
カスタマイズしたのですが、スマホだとうまくいってないみたいですね…
ううむ…
・フォントサイズと行間の変更
少しでも記事が読みやすくなるようにと変更してみました。
OHAMAstyleさんの記事を参考にさせていただきました。
ohama-style.com
ちなみにこのブログではフォントサイズ16px、行間1.7、段落の余白1.8emに設定してます。
まとめ
テンプレートにも可愛いものはたくさんあるのだけれど、
どうせなら自分の好きなように変えてみたい。
グーグルアドセンスに関係しそうなのはグローバルメニューくらいなのかな？
なので、自分の好きなようにカスタマイズしていいと思います。
ただ、headにコードを入れちゃうと良くないっぽいので、
その辺だけ気を付けてください。
今回紹介したカスタマイズにはheadに要素を追加するものもありますが、
グーグルアドセンス申請時にheadの要素を削除してもきちんと機能しています。
現在も削除した状態ですが、きちんと機能しているはず…
自分のブログがどんどん変わっていくの面白いですよね。
でも、カスタマイズに夢中になりすぎて、肝心の記事が疎かにならないようにね。
他力本願でごめんね…
いつか自分でもできるようになりたいな！
