引っ越しました

テーマ:
この度、結婚のため
兵庫県から大阪府に引っ越しをいたしました教会

出会ってからあっという間のスピード婚でしたが
「あ、この人なんだなあ」とすぐにわかり
自然にすーっと目の前のドアがどんどん開いていくような展開でした。

お互い再婚同士で、目立つことや派手なことが苦手なのもあり
指輪の交換だけのシンプルな結婚でした。
ひとりの時よりも自分らしくいられるようになった、
そんな楽しく穏やかな生活です。

現在携わらせていただいているお仕事が落ち着いたら
個人でのお仕事も再開できればと思っています。
しばらくペースを落とすことになりそうですが、
また再開の目処がたったらブログにてご報告させていただきます。

よろしくお願いいたしますゴメンネ


AD
こんばんは
BOSCO WORKSの森です。

今年も残すところあとわずかとなり、
非常に慌ただしい年の瀬をむかえております。

現在も引き続きIT企業様に常駐してお仕事をさせていただいております。
個人では受けることのできないような大きな案件に携わらせていただいており、
帰ってからも勉強に追われる毎日ですあせ

そのため、当面の間受注をストップさせていただきます。

また再開できそうな目処がたちましたら
こちらでご連絡させていただきたいと思います。

よろしくお願いいたしますゴメンネ

AD
こんにちは
アメブロカスタマイズの BOSCO WORKSです。

数あるカスタマイズの中でも人気のあるカスタマイズといえば
ヘッダーの下にグローバルナビゲーションメニューをつけることではないでしょうか?
サービス内容の案内、地図、お問い合わせなどのボタンをつけて
ブログをホームページのように活用したい!!

でも、どうやったらできるの???
HTMLとかCSSってよくわからない。。。

でも大丈夫です!
今回はコピー&ペーストだけで
簡単にヘッダーメニューをつける方法をご紹介させていただきます!

その前に
こちらの準備はお済みですか?

→カスタム可能なCSS編集用デザインに変更する方法はこちら
→ヘッダー画像を変更する方法はこちら

ヘッダーの下にナビゲーションメニューをつける

前回はヘッダー画像を変更しました。
今回はヘッダーの下にナビゲーションメニューをつける方法ですこれ



今回お伝えするナビゲーションメニューを設置する手順は
「フリースペース」を「使用する機能」に追加
「フリースペース」にメニュー項目を追加
CSSを編集
たったこれだけです。

では早速カスタマイズをしていきます!


サイドバーの設定→サイドバーの配置から「フリースペース」を使用できるようにします。


次に、フリースペースの編集をします。
下記のソースコードをフリースペースにコピー&ペーストしてください。

<div id="headerMenu"><!--
--><ul class="menu"><!--
--><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><!--
--><li><a href="(移動先のURL)">(メニュ名ー5)</a></li><!--
--></ul><!--
--></div>
移動先のURLとメニュー名はそれぞれ設定してくださいね。

移動先のURL=ボタンをクリックしたら表示させるページ
メニュー名=ボタンの中に表示される文字

となります。


次に、CSSの編集画面の一番下に
下記のCSSをにコピー&ペーストしてください。

/* ▼アメブロにメニューバーを設置 */

.skinContentsArea{
position:relative;
}
#headerMenu{
position:absolute;
margin:0;
padding:0;
}
#headerMenu ul.menu{
margin:0;
padding:0;
list-style: none;
}
#headerMenu ul.menu li{
display:inline;
}
#headerMenu ul.menu li a{
display:block;
float:left;
margin:0;
padding:0;
white-space:nowrap;
overflow:hidden;
text-align:center;
}

/* ▼メニューバー全体の幅・高さ・位置 */

.skinContentsArea{
padding-top:55px; /* メニューの高さ */
}
#headerMenu{
top:0px; /* メニューの配置(上部) */
left:0px; /* メニューの配置(左側) */
width:980px; /* メニュー全体の幅 */
}

/* ▼メニューボタンの幅・高さ・文字サイズ */

#headerMenu ul.menu li a{
width:196px; /* ボタンの幅 */
line-height:45px; /* ボタンの高さ */
font-size:14px; /* ボタンの文字サイズ */
}

/* ▼メニューボタン(通常時)の高さ・幅・色などの調整 */

#headerMenu ul.menu li a{
width:196px; /* メニューの幅 */
line-height:40px; /* メニューの高さ */
font-size:14px; /* メニューの文字サイズ */
color:#ffffff; /* 文字色(白) */
font-weight:bold; /* 太字(適用) */
text-decoration:none; /* 下線(なし) */
background-color:#79B834; /* 背景色*/
}

/* ▼メニューボタン(カーソルが乗った時)の高さ・幅・色などの調整 */

#headerMenu ul.menu li a:hover{ /* カーソルが乗った時 */
color:#ffffff; /* 文字色(白) */
font-weight:bold; /* 太字(適用) */
text-decoration:none; /* 下線(なし) */
background-color:#97CF58; /* 背景色 */
}

ヘッダーの下にナビゲーションメニューを追加する方法は以上です。
メニューボタンの色などはお好きなように設定ください。
色のサンプルコードはカラーチャートを参考にするとイメージしやすいと思います。
矢印カラーチャートはこちら

CSSに変更を加えるときは
画面でどのように変更されているかこまめにチェックしながら進めてくださいね。

よければ参考にしてくださいね(*'∀`*)v

今回の記事がお役にたちましたら、『読者登録していただけるととっても嬉しいですハート


AD