Gimlet

デザインテーマの導入

 

デザインテーマを入れよう

自分好みのカスタマイズへの初めの一歩は

「デザインテーマの導入」が不可欠だといえます。

 

おススメのデサインテーマ

今回使ったテーマはとてもシンプルで、

はてなブログで多くの方が使われているデザイン「innocent」を導入しました。

moonnote.hateblo.jp

 

次はカスタマイズだ

デザインテーマが決まれば、次はそれぞれのカスタマイズです。

 

ほかの方のブログを参考にしていますので、ぜひ参考にして見てくださいね。

ナビゲーションバーを付けよう 

はてなブログカスタマイズと調べると、一番よく見かけたものは

ナビゲーションバーをつけようということでした。
moonnote.hateblo.jp

こちらのページからコピーさせていただきまして、

ついに、このブログにもナビゲーションバーが付きました!

 

ちなみに

このブログでは、背景色は#2e8b57

マウスオーバーした時の色は#99ffbb

ラインの色は#008b8bとしています。

 

ナビゲーションバーの色の変更

/*-----------------------------------
ナビゲーションの色
--------------------------------------*/
.main-navigation,
.main-navigation ul ul {
background-color: #2e8b57;/* 背景色 */
border-top: 3px solid #808080;/* 上の線 */
border-bottom: 3px solid #808080;/* 下の線*/
}
main-navigation,
.main-navigation a {
color: #f5f5f5; /* 文字色 */
font-size: 16px ;/* 文字の大きさ */
}
.main-navigation a:hover {
color: #99ffbb; /* マウスオーバー時の文字色 */
}

 

最後に

他にもサイドバーやブログタイトルのカスタマイズなどをやりました

HTML初心者でも、調べればほとんど出てくるので

かなり満足のいくブログにカスタマイズできるとおもいますよ!

 

しばらくは「innocent」を導入してから

カスタマイズしたことを書いていこうと思っています。

こういう本も出ていますので、買って勉強するのもいいですね!

はてなブログカスタマイズガイド―HTML & CSSで「はてなブログ」を次のステッ

はてなブログカスタマイズガイド―HTML & CSSで「はてなブログ」を次のステッ