ちえママのミニマリスト的シニアライフ

シニアからの面白い暮らし!

グローバルメニューの設置を試みました

グローバルメニュー?何それ?

Google先生「えっ、無いの?無くていいの?ユーザーさんの配慮無くていいの?」

はっ、はい! 早速作ります💦

 目次

 

パソコンへのグローバルメニュー設置完了!

出来ました!

グローバルメニューをヘッダーの下に設置しましたよ~

 

これを設置するために、

「はてなブログ」の先輩方のブログを渡り歩きました。

 

f:id:Freelife-chiemama:20190322213751j:plain

一発で設置出来なかった理由

・背景カラーが黒から他の色に変更出来ない

・メニューが左に寄ってしまい、中央に表示来ない

・メニューがブログデザインからはみ出してしまう

 

この事象は「はてなブログ」の先輩方の説明がNGではなく、

ただただ、私の知識が無いせいなんです(泣)

「HTML」って何?

「CSS」って何?

 

こんな何も知らない私でも、ようやくメニュー設置出来たのは

やはり、はてなの先輩方の説明のおかげです。

有難いです。

 

ただ、まだ問題が・・・

スマホ画面がこんなことになっています。

ハハハ笑

 f:id:Freelife-chiemama:20190330142708j:plain

 

スマホにメニューバーを設置する

今も切れたままです。

課題です笑

 

グローバルメニューを設定するために入力した内容

※はてなproでない場合

カスタマイズの可否がわからないので、もし、出来なかったらごめんなさい。

 

2箇所に設定します。

 ①デザイン→カスタマイズ(スパナの絵)→ヘッダー→タイトル下

HTMLで以下の内容を入力します。

これでメニューが出来ます。

・「URL」のところにご自分が設置したい項目のURLを入力します。

・「コンテンツ」のところは「ホーム」とか具体的な名称を入力しましょう。

<span class="menu-toggle"><i class="blogicon-reorder lg"></i>MENU</span>

<ul id='menu'>

<div class="menu-inner">

<li><a href='URL'>コンテンツ1</a></li>

<li><a href='URL'>コンテンツ2</a></li>

<li><a href='URL'>コンテンツ3</a></li>

<li><a href='URL'>コンテンツ4</a></li>

</div>

</ul>

 

②デザイン→カスタマイズ(スパナの絵)→デザインCSS

以下の内容を入力します。

 #menu {

position: relative;

width: 100%;

padding-left: 0px;

height: 40px;

background: #4169e1;/*グローバルメニュー背景色*/

}

.menu-inner{

width: 968px;

margin: 0 auto;

height: 40px;

}

#menu li {

list-style-type: none;

float: left;

height: 40px;

text-align: center;

width:17%

}

#menu li a {

display: block;

color: #ffffff;/*グローバルメニュー文字色*/

font-size: 80%;

font-weight: bold;

line-height: 40px;

}

#menu li:hover a {

color: #00DFFC;

background: #ffffff;

transition: all .5s;

}

.menu-toggle{

display: none;

}


/*パソコン1カラム*/

@media screen and (max-width:968px){

.menu-inner{

width: 768px;

}

}

 

 これでパソコンへのメニューバーは大丈夫なんですが、

スマホに正しく設置出来ていないので、あまり参考にならないですね。

 

スマホが出来るようになりましたら、またご報告します。

 

♪にほんブログ村に参加してます♪

にほんブログ村 ライフスタイルブログ シニアのシンプルライフへ
にほんブログ村