revivel~毎日が現実逃避~

スマホゲームに読書に映画にBeatlesに現実逃避の日々

はてなブログのカスタマイズはテーマInnocentでナビゲーションバーから

f:id:revivel:20200203144804j:plain

はてなブログに移行してから19日目。

なんとか落ち着いてきたので、私のカスタマイズを記録していきます。
とにかく私は失敗が多いので、初心者の方がそのあたりを参考にしてもらえたらと思います。

デザインテーマはシンプルな”Innocent”で

公式テーマは数が少ないので、はてなブログのテーマストアで好みのテーマを選びます。

blog.hatena.ne.jp


実はテーマ選びには苦労をして、かなりの数のテーマを試してみて最終的に”Innocent”に落ち着きました。
何に苦労したかと言えば、実際にインストールしていじってみると思うようにいかないのです。
ナビゲーションバーは絶対に導入したかったので、”Innocent”でうまくいったときの喜びようはなかった。

moonnote.hateblo.jp

”Innocent”はナビゲーションバーを内蔵しているため、設置がスムーズです。

そして、他のテーマではうまくいかなかった見出しのカスタマイズも一発。
ということは自由さが高いので、好きなイメージにカスタマイズができて、大変気に入っています。

カスタマイズ前の準備

1.テキストエディタ

Web ページを作成する時に使われるのが、HTML言語やCSS(レイアウト)やJavaScript(動き)。
webページの画面で、右クリック⇒ソースの表示を選択すると、そのページのソースコードが見られます。
それらはwindows付属のメモ帳でも書けるのですが、私は過去にメモ帳で作成していてソースが壊れてしまったことがあるので、無料のテキストエディタTeraPadを使用しています。

tera-net.com

初心者の方なら、シンプルで国産で使いやすく十分です。

2.テスト用に新しいブログを作成

念のためにテスト用のブログを作成して、「公開設定」で”自分のみ”にチェックを入れておきます。
テスト用もテーマは”Innocent”にしておきます。

ナビゲーションバーの設置

moonnote.hateblo.jp

”Innocent”を作成された半月さんがカスタマイズも教えてくれています。

設置の手順は
①jQuery をフッターに記述する
②HTML をヘッダーに記述する

これだけでPCとスマホ・タブレット用のメニューが展開できるようになります。


ホント素晴らしい!
”Innocent”川*'O')ノヤッホー♪


一応、私のカスタマイズ例を載せておきます。
はてなのダッシュボード⇒デザイン⇒スパナマーク⇒{}デザインCSS
コピペすると、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上には見えません。
自分でわかりやすくするために記載しています。







c 2020 revivel.