チャレンジの行く末

数々のチャレンジ&数々の失敗を赤裸々に記録していきます

ブログ初心者の備忘録-グローバルメニューつけました-

こんにちは、ぴるくるです。

はてなPROにしてからずっとつけたかったグローバルメニュー。

CSSに興味を持ったきっかけがグローバルメニューでした。

まだ理想の形ではないけれど、

とりあえず形にはなってきたので、

設置することにしました!

今回はその設置過程を記録したいと思います。

 まずやったこと-ダミーブログの設置

はてなPROにした当初から

グローバルメニューの設置に憧れていたのですが、

いかんせん、ブログ初心者なもので

CSSについて、まったく知識のないまま始めています。

デザインの変更するたびに、失敗して、

元のデザイン設定に戻して、というのを何度も繰り返していました。

いろいろなブログを読み漁っていくうちにこちら↓の記事を読みました。

www.naenote.net

はてなPROにしたおかげで、ブログが10個も作れるみたいなんです。

当初、こんなに作れるわけがない、と思ってバカにしていた(←失礼)んですが、

こういう時に役に立つのか!!と気づきました。

はてなPROにしてよかった!!^^

 

ということでバックアップ用ブログ&ダミーブログを設置しました。

あくまでカスタマイズ用ということで非公開(公開を自分のみ)にしています。

このブログを作ることによって安心してデザインをいじることができました。

 

 グローバルメニューの設置

 さて、ここからが本番です。

 恒例の参考にさせていただいた記事はこちら↓

akira-t.com

残念ながら、まだ記事数が少ないので、

せっかくのプルダウン効果を発揮させることができません。

ということで、もろもろ自分仕様に変更させていただきました。

 

こちらのサイトはどのコードが、どういう役割を果たしているか

わかりやすく書かれているので、大変役に立ちました!

でも、初心者の自分にとってはまだまだ分からないところもあったので

わからなかったところを自分なりに解説?を付け加えさせてもらいます。

やることは

  1. HTMLをデザイン→ヘッダに貼りつける
  2. CSSを貼りつける

だけです。

 

 1.HTMLをデザイン→ヘッダに貼り付ける

まずコピーするところを選択します

f:id:urukurip:20161021163655p:plain

いったんどこか(→ダミーブログ)に貼りつけてからいじっていきます

子要素のところを削除します

 

f:id:urukurip:20161021164121p:plain

HOMEのところにアイコンをいれたかったので

f:id:urukurip:20161021165631p:plain

このようにしました。

参考にした記事はこちら↓

shirokai.hatenablog.com

貼りたいHTMLコードができたら

デザイン→カスタマイズ→ヘッダ→タイトル下のHTMLのところに貼りつけます。

すると、こんな感じになります↓

 

一瞬焦ると思いますが、落ち着いて次の作業をしましょう。

2.CSSを貼りつける

f:id:urukurip:20161021170101p:plain

こちらはすべてコピーしてから

いったんどこか(→ダミーブログ)に貼りつけて、いじっていきます

参考記事をもとに

角を付けたり、色の変更をしたりします。

子要素に対応するCSSも削除します。

↓色の参考にした記事です

midashi-maker.v-colors.com

で、編集が終わったら、

デザイン→カスタマイズ→デザインCSSに貼りつけます。

これが何のCSSかわかりやすくするため

貼りつける前と後に

/*グローバルメニュー*/

を付けました。

f:id:urukurip:20161021172136p:plain

f:id:urukurip:20161021172147p:plain

 

完成!!

色はまだ気に入っていないところもあるので、

ちょっとずついじっていきたいと思います。

 

いつか記事数増やしてプルダウン効果も使えるようにしたいと思います!!

あぁ~疲れた。。。

 

 NAEさん、AKIRAさん、しろかい!さん、YUKIさんありがとうございました!

 

スポンサーリンク