batabata-kaachan’s diary

バタバタな母ちゃんの子育て、潰瘍性大腸炎、雑記ブログ

パソコン初心者がはてなブログをカスタマイズ 憧れのタイトル下にメニュー

パソコン初心者の私は1時間掛かりましたが、

それを同じくらいの初心者の方が

苦労せずにできる方法を説明します。

 

f:id:batabata-kaachan:20191229010042j:plain

 

 

まずタイトル下のメニュー

ナビゲーションメニューっていうんですね。

そんな状況から始めました(笑)

 

 

そしてそんな言葉も知らずに憧れをもっていました。

 

スポンサーリンク

 

 

 

検索して一番分かりやすかったのと、

シンプルで素敵なデザインだったので

こちらを使用させていただきました。

 

hitsuzi.hatenablog.com

 

私もブログを始めて1か月経ちましたが

まだ毎日分からないことだらけです。

2020年は今以上に勉強して

ブログ知識をつけていきたいです☆

 

この分かりやすい説明のカスタマイズ説明を見ながら試行錯誤。

パソコンカスタマイズ無知の為、1時間程かかりました(笑)

 

コピペ可能の方を参考+使用させて頂いていますが、

英語並べられるとパニックになって

どこを修正すればいいか分からないんです、

すみません。。。

 

そんな私のような本当に、本当に初心者中の初心者でも簡単にカスタマイズしていただきたいので、こどみすさんのを更に説明します。

 

注:コピペは↑こどみすさんのをコピペしてくださいね

  (私はCSSコピペの画像を貼り付けできない初心者なので。笑)

 

 コピーしたものを分かりやすくマーク付けました。

 

<nav id="gnav">
<div class="gnav-inner" id="menu-scroll">
<div class="menu"><a href="★URL★"><i class="♡fa fa-home♡aria-hidden="true"></i> ☆HOME☆</a></div>
<div class="menu"><a href="★URL★"><i class="♡fa fa-info-circle♡" aria-hidden="true"></i> ☆ABOUT☆</a></div>
<div class="menu"><a href="★URL★"><i class="♡fa fa-bolt♡" aria-hidden="true"></i> ☆TIPS☆</a></div>
<div class="menu"><a href="★URL★"><i class="♡fa fa-graduation-cap♡" aria-hidden="true"></i> ☆STUDY☆</a></div>
<div class="menu"><a href="★URL★"><i class="♡fa fa-wrench♡" aria-hidden="true"></i> ☆DESIGN☆</a></div>
<div class="menu"><a href="★URL★"><i class="♡fa fa-envelope-o♡" aria-hidden="true"></i> ☆CONTACT☆</a></div>
</div>

</nav>

 

 

重要なのは色の付いている部分のみ修正します。

色ついている部分は削除して入力してください!

 

1.☆   ☆は自分が表示したい項目を入れてください。

(例、HOME、自分のカテゴリー名、お問い合わせ 等)

 

2.♡   ♡☆   ☆で設定した項目の前に付けるマークを入れます。

入れる文字はこちらモギィさんのブログが分かりやすいので、

選んでコピーしてください↓↓↓

 

moghouse.hatenablog.com

 

3.★URL★ には☆項目☆をクリックすると飛ぶページのURLを入れます。

 

その際に注意したいのが、設定画面が左側に出ている状態でそのページのURLをコピーして★URL★に貼り付けても、エラーが出てしまいます。

 

面倒ではありますが、設定を一度保存して設定画面を閉じてから飛ばしたいページのURLをコピーして、再度設定画面に戻り★URL★に貼り付けてください。

 

 

これで初心者に憧れの

 

ナビゲーションメニュー

 

の出来上がりです!!

 

 

これを見ていただけたら、

超初心者でも私のように1時間かかることなく

やっていただけるでしょう!!

 

最後まで見ていただきましてありがとうございました。

 

 

スポンサーリンク