僕は僕でだれかじゃない

ビジネスとテクノロジーと健康についてあれこれ

MENU

【保存版】はてなブログをカスタマイズ!まずは、この3つの設定をやればOK!誰でも簡単にできるよ。

id:sitkです。

はてなブログに乗り換えて、数日がたちました。
その中で、僕が行った作業をメモ。

使いやすさと見やすさと。
追い求めるなら、下記をご参考に!

■まずは「もくじ」を付ける!

よく見かける「もくじ」
意外とあっさり付けることができました。
これも、先人のおかげですねw
ありがとうございます。

hisoka02.hatenablog.com

■「グローバルナビゲーション」を付ける!

Wordpressから、はてなブログに変えてちょっと不便だなと思ったのが、このグローバルナビの存在。
ブログをサイトっぽく見せれないというか、そのあたりどうしたもんかなぁと思ってたら。。。
やはり、先人の方々が対処済みですw
ありがとうございます。

とはいえ、私もHTML/CSSを書いてご飯食べてます。
簡易なものなら、さくっと書いてしまえば。。。
あっという間に、ナビゲーションの完成です。

いろいろ記事を見てたら、海外のサイトでCSSを吐き出してくれるサービスとかありますが、
最後に金払えー!とかいうアラートが出てくるので、諦めた所存です。
めんどくさいと思いながらも、自分でコーディングするのが一番ですね♪

ということで、簡単に手順説明!

ダッシュボード>カスタマイズ>ヘッダー

f:id:sitk:20150424092702p:plain

こちらに、ソースコードを挿入!

<div id="gnav">
<ul>
<li><a href="URL">Top</li>
<li><a href="URL">Note</li>
<li><a href="URL">Contact</li>
</ul>
</div>

ダッシュボード>カスタマイズ>デザインCSS

f:id:sitk:20150424091806p:plain

/*グローバルナビ*/
#gnav {
    padding:20px 0;
    text-align:center;
    border-bottom: 1px solid #e4e4e4;
}
#gnav ul {
    list-style-type:none;
    margin:0;
    padding:0;
}
#gnav ul li {
    display:inline-block;
    padding-left:10px;
    padding-right:10px;
    border-left:1px solid #e4e4e4;
}
#gnav ul li:first-child {
    border-left:none;
}

■お問い合わせを付ける!

こちらは、Googleフォームでさくっとに作成!
便利ですねぇ。

www.google.com

■さいごに

いかがでしたでしょうか。
これから、はてなブログをカスタマイズされるかたは、参考にしていただければと思います!

でわでわ!

追伸:
さくっと勉強するなら、大藤幹さんの書籍がわかりやすいですよー。

ご参考まで。