読者です 読者をやめる 読者になる 読者になる

化学系の転職など。イロハ

どーなってんだ化学系、こんなはずじゃ…と思ったら見て

グローバルメニューを設置できたよ。ブログ初心者の私が。こちら現場。

雑記

どーしてもグローバルメニューを設置したかったの。

ポジ熊さんが読者に分かりやすいようにしなさいとか

言っている記事でサラッとグローバルメニューとか出てきて。

www.pojihiguma.com

 

グローバルメニューて何それ美味しいの。

 

率直な感想です。

高級レストランでもありそうなメニューだぬ。

 

違った。

 

グローバルメニューはヘッダの下にあるリンク項目のやつ。

私のはデザインがショボいけど、

とりあえず形が出来ただけでも歓喜

何故か文字の色変えられなかった。汗

出来れば良いんだできれば。

 

実際ね、プログラミングなんて

HTMLとかCSSでも何が違うのかわからない。

私のようなブログ初心者には手も足もでない。

 

だからとりあえず簡単なグローバルメニューの形だけあって、

色を変えたり幅を変えたり出来るコードを

探しておりました。

あったよ、神様のようなブログが。

 

rnmtsu.hatenablog.com

 

この方のコードを使えばなんとか私でも

グローバルメニューなるものを設置できました。

他のブログでも色々説明されていますが、

難しすぎてなんのこっちゃ。

カンタン!と思ったら有料だったりね。ガッデム。時間を返せ。

 

なので、ITとか分かりきっているはてなブログの人たちには

この記事は逆に「はてな」かもしれません。

 

グローバルメニューを作ってみよう

 

超初心者が出来た手順で現場からお伝えするよ!

順を追って説明しますね。

 

1)HTMLコードをコピーする

rnmtsu.hatenablog.com

上記にアクセス。

記事にHTMLと書いてあって、

その下にコード(<ul id~~~~>みたいな)があります。

これを全部コピーします。

 

2)HTMLコードを自分のブログの「ヘッダ下HTML」に貼り付ける

自分のブログの「デザイン」画面を開きます。

「カスタマイズ(スパナマーク)」→「ヘッダ」

→「タイトル下(HTMLを記入できますって書いてある)の白くて四角い所」

の順にクリック。

するとホワイトボード的なもの(ポップアップっていうの?)が出てくるので、

そこにコピーしたものを貼り付け。

ブログプレビュー画面でヘッダの下に何か出てくるけど今は無視で。

デザイン画面は重たいので一旦保存した方が良いかも。

 

3)CSSコードをコピーする

rnmtsu.hatenablog.com

上記に再びアクセス。

記事にCSSと書いてあって、

その下にコード(#gnav~~~~みたいな)があります。

そのコードを全部コピーします。

 

4)CSSコードを自分のブログのヘッダ下HTMLに貼り付ける

再び自分のブログの「デザイン」画面を開きます。

「カスタマイズ(スパナマーク)」→「{}デザインCSS

の順にクリック。

またホワイトボード的なもの(ポップアップっていうの?)が出てくるので、

そこにコピーしたものを貼り付け。

 

5)形だけは完成。

どうですか?一応形だけは出来ましたか?

しかしこれだけでは音楽とライフハックのブログになってしまいますね。

 

6)自分の好きな項目にする

デザイン画面を開いた状態で、

「ヘッダ下HTML」に貼り付けたコードを見てください。

「音楽」とか「ライフハック」と書いてある部分がありますね。

この部分を自分の貼りたいリンクのタイトルにしてください。

私の場合はブログカテゴリーのリンクを貼りたかったので、

ここに「化学」や「転職」などを入れました。

 

7)リンク先のURLを入れる

ここまで出来ればしめたものです。

あとはリンク先に飛べればグローバルメニューが完成ですから。

リンク先は「音楽」とか書いてあった左に

「http://」って書いてあると思います。

これを消して、貼りたいURL(自分のブログのトップ画面のURLとか)を

それぞれの項目に貼りつけてください。

 

8)出来上がり?

これで読者の方も目的のページにすぐ飛べますね!

 

ちょ、まてよ。

 

いくら便利でもデザインが浮きすぎるだろおお!

ってなると思います。

そこでCSSが活躍します。

 

9)幅を変える

デザイン画面を開いた状態で、

「{}デザインCSS」に貼り付けたコードを見てください。

ずっと見ていくと「任意の幅で」と書いてあると思います。

この左に800pxと書いてあるので、1000pxに書き換えてください。

さらに下の項目を見ると「任意の幅」と書いてあります。

その左に133pxとあるので、162pxにしてください。

これでグローバルメニューがヘッダの幅と一致します。

私はデザインテーマに「Report」を使用しているので、

それ以外のデザインテーマを使用していてヘッダとズレがある方は、

ご自分で幅を微調整してみてください。160pxとか。

 

10)背景色を変える

まだ浮いていますよね。

全体的に赤基調のブログなら良いんですけど。

彗星のシャアのようでかっこいいと思う。

グローバルメニューの背景色を変えましょう。

 

「{}デザインCSS」に貼り付けたコードを見てください。

ずっと見ていくと「任意の色」と3か所書いてあると思います。

一つ目が背景色です。

二つ目はよくわかりません。ごめんなさい。

三つめはマウス矢印を項目の上に持って来た時になる背景色です

 

まず、一つ目の「任意の色」の左に#4d4d4dと書いてあります。

これを自分の好きなWEB色に変えましょう。

ちなみにWEB色とか分かります?

#ffffffとか言われて、ああ白だねとか言えるなら凄いと思う。

普通は分からないと思うので、

WEB色見本原色大辞典というサイトで確認してみて下さい。

www.colordic.org

 

色を決めたら4d4d4dを消して、お好みの色に変更してください。

fffadaとかね。

三つ目の「任意の色」も同様です。お好みで。

 

私の場合はマウスを項目の上に持ってくると、

背景色が黄緑色から深緑色に変わるように設定しました。

 

11)完成

ここまでが私のやったことです。

未だにグローバルメニューの文字の色が変えられません。

とりあえず形だけ。

細かい所は気が向いたらやろうと思います。