パソコンが好きになるブログ〜表技・裏技・便利技伝授!

北海道札幌市中央区 大通駅徒歩7分のパソコンスクール「リズ札幌・ライフデザインスクール」パソコンインストラクター川上雄大によるパソコン・IT・ワンポイントレッスン。
スクールでのいろんな方のパソコンレッスンだったり、パソコンとは関係ない話だったり…


テーマ:

こんにちは、パソコンインストラクターの川上雄大です。

 

 

以前(2013年11月28日(木) )、

 

アメブロ 記事中にメニューリンクを囲みたい【記事のメニューバー】

 

という記事を書きましたが・・・

 

この記事内のメニューバーが

 

 

飽きてきた(笑)という方のために、

 

記事内のメニューバーも、ヘッダー画像下のメニューバーと同じようなのを記事にしてみました。

 

下記のHTMLタグ(英語でずらずらと書かれている固まり)を、

 

「HTML表示」欄で、コピペしてお使いくださいませ^^!

 

 

 

 

3カラムの方には、こちら↓

 

 

(画像で表示しています↑)

 

 

 

 

(実際の表示です↑)

 

 

<style type="text/css">#navi3{width:auto;font-size:10px;}#navi3 ul{margin:0;padding:1px 0;list-style: none;}#navi3 ul li{margin:0;padding:0 0 0 1px;display:inline;width: 80px;line-height: 2;float: left;overflow: hidden;white-space:nowrap;}#navi3 ul li a{display:block;text-align:center;font-weight: bold;background-color:#ffb6c1;color:#ffffff;text-decoration:none;border:1px solid #ffffff;}#navi3 ul li a:hover{background-color: #ffffff;color: #7B746B;border: 1px solid #ffb6c1;}</style><div id="navi3"><ul><li><a href="#">メニュー1</a></li><li><a href="#">メニュー2</a></li><li><a href="#">メニュー3</a></li><li><a href="#">メニュー4</a></li><li><a href="#">メニュー5</a></li></ul></div>

 

 

 

 

のところは、リンク先のURLに入れ替えてください。

 

メニュー1メニュー2メニュー3メニュー4メニュー5のところは、項目名に入れ替えてください。

 

 

2カラムの方にはこちら↓

 

(画像での表示です↑)

 

 

 

 

(実際の表示です↑)

 

 

<style type="text/css">#navi2{width:auto;font-size:11px;}#navi2 ul{margin:0;padding:1px 0;list-style: none;}#navi2 ul li{margin:0;padding:0 0 0 1px;display:inline;width: 120px;line-height: 3;float: left;overflow: hidden;white-space:nowrap;}#navi2 ul li a{display:block;text-align:center;font-weight: bold;background-color:#ffb6c1;color:#ffffff;text-decoration:none;border:1px solid #ffffff;}#navi2 ul li a:hover{background-color: #ffffff;color: #7B746B;border: 1px solid #ffb6c1;}</style><div id="navi2"><ul><li><a href="#">メニュー1</a></li><li><a href="#">メニュー2</a></li><li><a href="#">メニュー3</a></li><li><a href="#">メニュー4</a></li><li><a href="#">メニュー5</a></li></ul></div>

 

 

 

 

背景のピンク色を修正するには、

 

 

<style type="text/css">#navi2{width:auto;font-size:11px;}#navi2 ul{margin:0;padding:1px 0;list-style: none;}#navi2 ul li{margin:0;padding:0 0 0 1px;display:inline;width: 120px;line-height: 3;float: left;overflow: hidden;white-space:nowrap;}#navi2 ul li a{display:block;text-align:center;font-weight: bold;background-color:#ffb6c1;color:#ffffff;text-decoration:none;border:1px solid #ffffff;}#navi2 ul li a:hover{background-color: #ffffff;color: #7B746B;border: 1px solid #ffb6c1;}</style><div id="navi2"><ul><li><a href="#">メニュー1</a></li><li><a href="#">メニュー2</a></li><li><a href="#">メニュー3</a></li><li><a href="#">メニュー4</a></li><li><a href="#">メニュー5</a></li></ul></div>

 

 

 

background-color:#ffb6c1;

 

のカラーコードを変更してくださいませ。

 

 

そして、文字の色を変更したい時は、

 

 

<style type="text/css">#navi2{width:auto;font-size:11px;}#navi2 ul{margin:0;padding:1px 0;list-style: none;}#navi2 ul li{margin:0;padding:0 0 0 1px;display:inline;width: 120px;line-height: 3;float: left;overflow: hidden;white-space:nowrap;}#navi2 ul li a{display:block;text-align:center;font-weight: bold;background-color:#ffb6c1;color:#ffffff;text-decoration:none;border:1px solid #ffffff;}#navi2 ul li a:hover{background-color: #ffffff;color: #7B746B;border: 1px solid #ffb6c1;}</style><div id="navi2"><ul><li><a href="#">メニュー1</a></li><li><a href="#">メニュー2</a></li><li><a href="#">メニュー3</a></li><li><a href="#">メニュー4</a></li><li><a href="#">メニュー5</a></li></ul></div>

 

 

 

文字の色(白色)

color:#ffffff

 

のカラーコードを変更してくださいませ。

 

 

 

 


以上、記事内のメニューバーでした。


LIDS札幌・ライフデザインスクール
川上 雄大

 

いいね!した人  |  コメント(8)  |  リブログ(4)

川上雄大・パソコンインストラクターさんの読者になろう

ブログの更新情報が受け取れて、アクセスが簡単になります

SNSアカウント