2014年08月08日
ブログタイトルの下にメニューバーを作る①
こんばんは～Samyです ＾ ＾
ブログタイトルの下にメニューバーを作る
こんな感じ▼
メニューバー作製は、
☆HTMLとCSS
☆JavaScript
☆画像を貼るタイプ。。。
やり方がいろいろありますが、
今回はシンプルにHTMLとCSSで作る方法です。
①お店などのメニューをブログ記事としてＵＰする。
②テンプレート編集画面で下記のコードを記述
（コピペして色やサイズを好みに調整してください）
ＣＳＳ▼
ＨＴＭＬ▼
☆<title>～</title>下に記述します
☆#部分に表示したいブログ記事のリンクを入れます
☆○○○部分にメニュー名を入れます
TOP、個別記事、アーカイブの<title>～</title>下にも記述するのをお忘れなく～。
ブログタイトルの下にメニューバーを作る
こんな感じ▼
メニューバー作製は、
☆HTMLとCSS
☆JavaScript
☆画像を貼るタイプ。。。
やり方がいろいろありますが、
今回はシンプルにHTMLとCSSで作る方法です。
①お店などのメニューをブログ記事としてＵＰする。
②テンプレート編集画面で下記のコードを記述
（コピペして色やサイズを好みに調整してください）
ＣＳＳ▼
/*メニュー設定*/
#menu ul{
margin: 10 10 10 10;
padding: 10 10 10 10;
list-style: none;
}
#menu li{
display: inline;
padding: 0;
margin: 0;
float: left;
}
#menu li a{
display: block;
border: 2px solid #87ceeb;
background-color: #add8e6;
padding: 3px;
text-decoration: none;
font-weight:bold;
color: #4682b4;
width: 130px;
height:40px;
margin: 2px;
text-align: center;
font-size: 15px;
}
#menu li a:hover{
background-color: #87ceeb;
color: #fff;
}
#menu ul{
margin: 10 10 10 10;
padding: 10 10 10 10;
list-style: none;
}
#menu li{
display: inline;
padding: 0;
margin: 0;
float: left;
}
#menu li a{
display: block;
border: 2px solid #87ceeb;
background-color: #add8e6;
padding: 3px;
text-decoration: none;
font-weight:bold;
color: #4682b4;
width: 130px;
height:40px;
margin: 2px;
text-align: center;
font-size: 15px;
}
#menu li a:hover{
background-color: #87ceeb;
color: #fff;
}
ＨＴＭＬ▼
☆<title>～</title>下に記述します
☆#部分に表示したいブログ記事のリンクを入れます
☆○○○部分にメニュー名を入れます
<div id="menu">
<ul>
<li><a href="#">○○○</a></li>
<li><a href="#">○○○</a></li>
<li><a href="#">○○○</a></li>
<li><a href="#">○○○</a></li>
</ul>
</div>
※ＨＴＭＬコードは、<ul>
<li><a href="#">○○○</a></li>
<li><a href="#">○○○</a></li>
<li><a href="#">○○○</a></li>
<li><a href="#">○○○</a></li>
</ul>
</div>
TOP、個別記事、アーカイブの<title>～</title>下にも記述するのをお忘れなく～。
Posted by 初心者のためのブログカスタマイズ ： Samy(サミー) at 20:04│Comments(4)
│メニューを作る
この記事へのコメント
ブログカスタマイズの参考にさせていただいています。
・リストをかわいくする
・タグの部分をかわいく表示する
・NO PHOTOの画像をかわいくする
・記事の下のほうにでてくる「同じカテゴリーの記事」の背景部分をかわいくする
・スマホテンプレートがださすぎるのでなんとかしたい
などもぜひお願いします。＾＾
・リストをかわいくする
・タグの部分をかわいく表示する
・NO PHOTOの画像をかわいくする
・記事の下のほうにでてくる「同じカテゴリーの記事」の背景部分をかわいくする
・スマホテンプレートがださすぎるのでなんとかしたい
などもぜひお願いします。＾＾
Posted by めぐみ＠離島ネオ
at 2014年08月14日 20:47
at 2014年08月14日 20:47めぐみ＠離島ネオさん、こんにちわ（＾ｖ＾）
リクエストありがとうございます。
記事に反映させていただきますね~
Samy
リクエストありがとうございます。
記事に反映させていただきますね~
Samy
Posted by 初心者のためのブログカスタマイズ ： Samy(サミー) at 2014年08月18日 13:05
at 2014年08月18日 13:05はじめまして竹田と申します。
さみーさんのブログを参考に自分のCSSとHTMLの方法でブログのメニュー作りに挑戦していますが、タイトルは作れたものの、そこから記事へのリンクがうまくできません。
リンク記事の指定の仕方をもう少し詳しく教えていただきたいです。
また、リンクの指定は１つしかできないのでしょうか？
たとえば講座というタイトルに講座関係の記事を集めるときはカテゴリを同じにして記事を書けばいいのでしょうか？
ブログ初心者で的を得ていない質問かもしれませんがよろしくお願いいたします。
さみーさんのブログを参考に自分のCSSとHTMLの方法でブログのメニュー作りに挑戦していますが、タイトルは作れたものの、そこから記事へのリンクがうまくできません。
リンク記事の指定の仕方をもう少し詳しく教えていただきたいです。
また、リンクの指定は１つしかできないのでしょうか？
たとえば講座というタイトルに講座関係の記事を集めるときはカテゴリを同じにして記事を書けばいいのでしょうか？
ブログ初心者で的を得ていない質問かもしれませんがよろしくお願いいたします。
Posted by shane at 2014年11月22日 14:26
at 2014年11月22日 14:26竹田さんはじめまして（＾ｖ＾）
コメントありがとうございます。
『講座』カテゴリでＵＰした記事は全て、
メニューの“講座”ボタンを押すと見ることができます♪
リンクのやり方は、カテゴリのＵＲＬをコピペするのですが、
文章説明だけだと、ちょっと把握しづらいかもですね。。。
画像があった方がわかりやすいと思いますので、
記事に反映させていただきます。
ブログをカスタマイズに
お役立てくださりありがとうございます♪
コメントありがとうございます。
『講座』カテゴリでＵＰした記事は全て、
メニューの“講座”ボタンを押すと見ることができます♪
リンクのやり方は、カテゴリのＵＲＬをコピペするのですが、
文章説明だけだと、ちょっと把握しづらいかもですね。。。
画像があった方がわかりやすいと思いますので、
記事に反映させていただきます。
ブログをカスタマイズに
お役立てくださりありがとうございます♪
Posted by 初心者のためのブログカスタマイズ ： Samy(サミー) at 2014年11月23日 12:14
at 2014年11月23日 12:14※このブログではブログの持ち主が承認した後、コメントが反映される設定です。
画像一覧