高校中退からの人生ガイドライン

高校を中退した人に役立つ情報を集めています。

はてなブログでナビゲーションメニューを入れる方法

ブログをかっこよくしてみよう!

はてなブログを始めたばかりの人にとって、ブログのカスタマイズっていうのは、けっこう大きな壁だと思います。

私自身も最初はデザインテーマを入れてもカスタマイズの仕方が分からず、思い通りのページを作れませんでした。

今回はこのブログで使っているカスタマイズについて、ざっくりと画像付きで説明してみたいと思います。

カスタマイズ手順

以下の通りにやるだけで、このブログと全く同じデザインになります。

※このブログは、はてなプロには課金してないです

目次

まずこのテーマをインストール!

Brooklyn - テーマ ストア

私のブログで使わせていただいているテーマです。

※無料です

やり方

ページの右側にこんな感じのがあるので、手順に沿ってインストールしてください。

f:id:tacha42:20171002225636p:plain

グローバルナビゲーションを入れてみる

こちらの記事を参考にカスタマイズしていきます。

はてなブログの超便利なデザインテーマ「Brooklyn」を作りました - NO TITLE

タイトル下にCSSを入れる

f:id:tacha42:20171002230131p:plain

 

このタイトル下というところにCSSを書いていきます。

この画面からだと編集しづらいので、メモ帳などに書いてからコピーペーストしましょう。

 

サンプルコード

<div id="global-menu">
<ul class="global-menu-list">
<li><a href="ここのところ"><i class="fa fa-home" aria-hidden="true"></i>ここのところ</a></li>
<li><a href="ここのところ"><i class="fa fa-info-circle" aria-hidden="true"></i>ここのところ</a></li>
<li><a href="ここのところ"><i class="fa fa-envelope" aria-hidden="true"></i>ここのところ </a></li>
<li><a href="ここのところ"><i class="fa fa-graduation-cap" aria-hidden="true"></i> ここのところ </a></li>
<li><a href="ここのところ"><i class="fa fa-desktop" aria-hidden="true"></i>ここのところ</a></li>
</ul>
</div>

これを書き直していきます。

<a href="ここのところ"><i class="fa-icon"></i>ここのところ</a>

 

5つ書き換えるだけなので簡単だと思います。

 

手前の「ここのところ」にURLをhttp://〜から、後ろの「ここのところ」に表示したい名前を入れてください。

 

あとはこれをさっきのところに貼るだけですが、1文字でも間違っていると動かないので、要注意です!

コード直接書くのは難しいですね。

うまくいかなかった方へ

作りながら学ぶ HTML/CSSデザインの教科書

作りながら学ぶ HTML/CSSデザインの教科書

 

 

少しhtmlを勉強するだけでも、カスタマイズをするだけの知識が身につけられます。

自分自身はこちらの本を1ヶ月ぐらい勉強しただけですが、それでもかなりコードを覚えることができて、編集するのが楽になりました。ぜひぜひ勉強してみてください。

当サイトについて

たっちゃんです。当サイトは、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。