ダメ人間ブログ

30代職歴なしニートの闇を放出してるブログです

人のブログのカスタマイズって気にならない?このブログで使ってるテーマ「Innocent」のカスタマイズを紹介

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


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


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


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


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


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


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


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


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


それで、もし「このダメ人間ブログのデザインってどうやってるの?」なんて思う人がいたら役に立つかなぁって思って今までやってきたカスタマイズを紹介しようと思いました。


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


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


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


見出しのカスタマイズ

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


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

h3見出しサンプル

あとこんなのも。

h4見出しサンプル

私は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;
}


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


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


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


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


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


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


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


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


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


リンク色のカスタマイズ

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


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


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


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


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


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


3行目の「color: #0E1BBB;」が普段のリンク色のカラー。6行目の「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にコピペしておけば、とりあえずこのブログと同じグローバルメニューの文字色と背景色になります。


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


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

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


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


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


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


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

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


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


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


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


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


グローバルメニューのカスタマイズ

ブログのタイトル下にあるメニューをグローバルメニューとかグローバルナビゲーションと言います。


これがあるとブログに来た人の案内に便利なので、ぜひ設定しておきましょう。


「Innocent」だとテーマの中に内臓しているので製作者のサイトのコードをコピペすれば設定できます。こちらです。


はてなブログテーマ「Innocent」のカスタマイズ(ナビゲーションバー編) - MoonNote


詳しくは上記のサイトに書いてあるのを参考にしてください。


これは「Innocent」の人専用なのでほとんどの人には役に立たない情報ですね。


「Innocent」じゃない方はYukihyさんのサイトを参考にするといいかもしれません。こちらです。


はてなブログでグローバルメニューとトグルメニューを両立させレスポンシブスタイルにするカスタマイズ - Yukihy Life


グローバルナビゲーションは設定しておいて損はないので記事が増えてカテゴリーも増えてきたら設定しておきましょう。


タイトルとグローバルメニューの中央寄せ

「Innocent」は初期設定だとブログタイトルとグローバルメニューが左寄せになっているので中央寄せに設定しました。


グローバルメニューの中央寄せは先ほどのサイトに書いてあるコードでできます。


はてなブログテーマ「Innocent」のカスタマイズ(ナビゲーションバー編) - MoonNote


上記のページの一番下に書いてあるのでそれで設定しましょう。


グローバルナビを中央寄せにしたらブログタイトルも中央寄せにしないとバランスが悪いのでやっておきましょう。


ブログタイトルを中央寄せにするコードはこちら。


#blog-title {
text-align: center;
}


これをCSSにコピペしてください。


これでブログタイトルとグローバルナビが中央寄せになります。バランスがよくなってちょっと見やすくなりますね。


シェアボタンのカスタマイズ

記事の上下にあるシェアボタンもコードをコピペして設定してあります。


参考にしたサイトはこちら。


はてなブログのシェア数付きソーシャルボタンカスタマイズでフラットボタンのコピペコードを追加です。(vol2) - Yukihy Life


上記のサイトに書かれている通り、コードをコピペすれば完了です。


シェアボタンは色々な方が色々なデザインの物を作っているのでお好みの物を探して設定しましょう。


カエレバのカスタマイズ

Amazonアソシエイト、楽天アフィリエイトをやっている方なら使っているであろうツール「カエレバ」もデザインを変更しています。


上記のアフィリエイトをやっているのにまだカエレバを使っていないという方は便利ですから使ったほうが良いですよ。こちらです。


https://kaereba.com/


カスタマイズに参考にしたサイトはこちら。またもYukihyさんです。


ヨメレバ・カエレバのデザインをCSSで変更するカスタマイズ! - Yukihy Life


こちらのサイトのコードをコピペすると、寂しいデザインだったカエレバもこうなります。




カエレバをお使いでしたらそのままじゃなくこのようにカスタマイズして使った方がいいですよ。クリック率が変わってくると思います。


最後に

このブログに行ったカスタマイズはこんな感じです。


シンプルでそんなにいじってないように見えるけどけっこういじってるでしょ?


色々紹介しているので混乱するかもしれませんが、とりあえずこのブログを見てもらえればどんな風になるかが分かると思います。


このデザインを1つでもやってみたいと思ったら紹介した通りにやってみてください。


コードをコピペするだけでできるのでけっこう簡単にできますよ。


1つでも「こんな感じにカスタマイズしたかった」というのがあった方の参考になれば幸いです。