シンプルなブログテーマ「Innocent」のカスタマイズに使ったコードを紹介します

ブログにハマってくるとデザインのカスタマイズにもこだわってきますよね。

そうなってくると人のブログのデザインもちょっと気になったりしません？

「この人のブログデザイン、カッコイイなぁ、どうやってるんだろ？」

「あのブログのデザインみたいにしてみたい」

「あれってどうやってるのかな？どのテーマを使ってるのかな？」

なんて思ったりしません？

デザインが気になったブログを参考にして、自分のブログもそんな憧れのブログみたいにデザインしたい、そう思う事もあると思うんです。

私もそういう時期があって、このブログもどこかで見て「良いな」と思って憧れたデザインを寄せ集めてできています。

色々見てきた中で、見やすくて分かりやすいのを中心に選んだ感じですね。

それで、もし

「このダメ人間ブログのデザインってどうやってるの？」

なんて思う人がいたら役に立つかなぁって思って今までやってきたカスタマイズを紹介しようと思いました。

別にそんな人がいなくても、もし何かでミスをしてコードを削除してしまった時にすぐ修正できるように自分のためにも記録しておこうとも思ったので・・・

扱っているコードは基本的なものが多いので、少しは初心者の役に立つかなぁとは思うんですけどね。

もし今回の記事がヒントになって、ちょっとでも誰かの役に立ったら嬉しいです。

見出しのカスタマイズ
リンク色のカスタマイズ
サイドバーのカスタマイズ
グローバルメニューのカスタマイズ
タイトルとグローバルメニューの中央寄せ
シェアボタンのカスタマイズ
カエレバのカスタマイズ
最後に

見出しのカスタマイズ

見出しは多分、最初の頃にみんながやる基本的なカスタマイズですよね。

見出しって言うのはコレね。このバーみたいなやつ。色々なブログでよく見ますよね。

あとこんなのも。

私はh3タグで上の、h4タグで下の見出しを設定しています。

これはCSSにコードを入力すればできます。私が使っているコードはこちら。

.entry-content h3{
    color: #ffffff;
    background: #00008b;
    padding: 15px 15px;
    }

.entry-content h4{
    color: #000000;
    padding: 10px 15px;
    border-left:10px solid #0000ff;
    border-bottom: 1px solid #0000ff;
    }

これをそのままCSSにコピペすれば上記の見出しと同じ見出しになります。

違う色がいいという場合にはカラーコードを変更すれば好きな色に変更できます。

カラーコードはこちらを参照してください。

WEB色見本原色大辞典 - HTMLカラーコード

色の変更方法をh3の見出しを例に説明します。

.entry-content h3{
    color: #ffffff;
    background: #00008b;
    padding: 15px 15px;
    }

２行目の「color: #ffffff;」が文字色で、３行目の「background: #00008b;」が背景色です。

この「#」の部分のコードを好きなカラーコードに変更すればお好みの色の見出しに変更できます。

４行目の「padding;」は余白の幅です。見出しをもうちょっと細くしたかったら「15px」を少なくしてください。

このブログで使っているのは上記の見出しですが、見出しは設定次第で色々なバリエーションがあります。

違うのがいいという場合にはこちらのサイトを参考にして自分なりに設定してみましょう。

CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選

それぞれのブログで色々な見出しが使われていますが、基本は一緒です。

みんな好きなデザインのコードのコピペとカラーコードの変更で自分好みの見出しを設定しています。

好みの見出しを見つけて自分のブログらしい見出しを設定しましょう。

リンク色のカスタマイズ

「Innocent」の初期設定だとサイドバーや記事タイトルのリンク色は黒で設定されています。

でもリンク色って青色のイメージがありませんか？YahooもGoogleもリンク色は青色ですよね。

黒よりは青の方がリンクだと分かりやすくてクリックされやすい傾向があります。なので私は青に変更しました。

コードはこちら。こちらのコードをCSSにコピペするだけです。

a:link,
a:visited {
  color: #0E1BBB;
}
a:hover {
  color: #CC3434;
}

これも先ほどと同じ、「#」の部分のカラーコードを変えれば好きな色に設定できます。

３行目の「color: #0E1BBB;」が普段のリンク色のカラー。６行目の「color: #CC3434;」がカーソルを乗せた時のカラーです。

とりあえず現在の色は昔のYahooと同じ色に設定してあるので無難かと思います。

普段のリンク色は「青」、カーソルを載せると「赤」っていうよくあるやつです。

ただ「Innocent」の場合、このリンク色を設定するとグローバルメニューのリンク色も同じ色になってしまうので、グローバルメニューの色次第では合わない場合があります。

グローバルメニューの色も改めてCSSで設定する必要が出てきます。そういうのがめんどくさいなら初期のままやるのが無難です。

一応、私が設定してるグローバルメニューの色指定のCSSも載せておきます。

main-navigation,
.main-navigation a {
    color: #ffffff; /* 文字色 */
    font-size: 16px ;/* 文字の大きさ */
}

.main-navigation a:hover {
    color: #ffffff; /* マウスオーバー時の文字色 */
    background-color: #696969;/* 背景色 */
}

このコードをCSSにコピペしておけば、とりあえずこのブログと同じグローバルメニューの文字色と背景色になります。

色を変えたければ「#」の部分のカラーコードをお好きな色に変更してください。

サイドバーのカスタマイズ

サイドバーは初期のままだとシンプルすぎてちょっと物足りない感じがあります。

なのでちょっといじりました。

・アイコンをつける
・文字を大きくする
・ラインを引く

の３つをね。参考にしたサイトはこちら。

はてなブログのサイドバーのカスタマイズ方法 [コピペで使える]
　

サイドバーのそれぞれの項目にアイコンを付けたかったら上記のサイトを参考にしてください。

私のブログと同じような文字の大きさや二重線を上下に引きたかったらこちらのコードをCSSにコピペしてください。

 .hatena-module-title{
   font-size: 18pt;
   color: #000000;
   border-top: double 5px #0E1BBB;
   border-bottom: double 5px #0E1BBB;
   padding: 7px 7px;
}

もうおなじみ、線の色を変えたければ４行目と５行目の「#」の所のカラーコードを変更しましょう。

文字の大きさを変えたければ２行目の「font-size: 18pt;」の18の数値を変更してください。