はてなブログに移行してから19日目。
なんとか落ち着いてきたので、私のカスタマイズを記録していきます。
とにかく私は失敗が多いので、初心者の方がそのあたりを参考にしてもらえたらと思います。
デザインテーマはシンプルな”Innocent”で
公式テーマは数が少ないので、はてなブログのテーマストアで好みのテーマを選びます。
実はテーマ選びには苦労をして、かなりの数のテーマを試してみて最終的に”Innocent”に落ち着きました。
何に苦労したかと言えば、実際にインストールしていじってみると思うようにいかないのです。
ナビゲーションバーは絶対に導入したかったので、”Innocent”でうまくいったときの喜びようはなかった。
”Innocent”はナビゲーションバーを内蔵しているため、設置がスムーズです。
そして、他のテーマではうまくいかなかった見出しのカスタマイズも一発。
ということは自由さが高いので、好きなイメージにカスタマイズができて、大変気に入っています。
カスタマイズ前の準備
1.テキストエディタ
Web ページを作成する時に使われるのが、HTML言語やCSS（レイアウト）やJavaScript（動き）。
webページの画面で、右クリック⇒ソースの表示を選択すると、そのページのソースコードが見られます。
それらはwindows付属のメモ帳でも書けるのですが、私は過去にメモ帳で作成していてソースが壊れてしまったことがあるので、無料のテキストエディタTeraPadを使用しています。
初心者の方なら、シンプルで国産で使いやすく十分です。
2.テスト用に新しいブログを作成
念のためにテスト用のブログを作成して、「公開設定」で”自分のみ”にチェックを入れておきます。
テスト用もテーマは”Innocent”にしておきます。
ナビゲーションバーの設置
”Innocent”を作成された半月さんがカスタマイズも教えてくれています。
設置の手順は
①jQuery をフッターに記述する
②HTML をヘッダーに記述する
これだけでＰＣとスマホ・タブレット用のメニューが展開できるようになります。
ホント素晴らしい！
”Innocent”川*'O')ﾉﾔｯﾎｰ♪
一応、私のカスタマイズ例を載せておきます。
はてなのダッシュボード⇒デザイン⇒スパナマーク⇒{}デザインＣＳＳ
コピペすると、revivelのナビゲーションになるので、色やボーダーを変えてオシャレにしてみてください。
/* ナビゲーションバーここから */
@media screen and (min-width: 1024px) {
.main-navigation {
text-align: center;
}
}
.main-navigation,
.main-navigation ul ul {
background-color: #f8f5ee;/* 注)ナビの背景色 */
color: #000000;/* 注)ナビの文字色 */
border-top: 2px solid #000;/* 注)ナビ上ボーダー */
border-bottom: 2px solid #000;/* 注)ナビ下ボーダー */
}
.main-navigation a {
text-decoration: none;
color: #000000;/* リンクの文字色 */
}
.main-navigation a:hover {
color: #4169e1;/* マウスを載せたときの文字色 */
}
.main-navigation a,
.menu-toggle { color: #000000; }/* 注)スマホ用トグルボタンのリンク色 */
.main-navigation a:hover,
.menu-toggle:hover { color: #4169e1; }
/* ナビゲーションバーーここまで */
↑の/* ナビゲーションバーここから */などの表記は、web上には見えません。
自分でわかりやすくするために記載しています。
