Blogger Beta Tips: ラベルをメニューのように使う

　Blogger betaは”Label"機能を入れていますから、ラベルで記事を分類したり、カテゴリとして使えます。今回はラベルをメニューのように（このブログ上部のメニュー実はラベルです）使う方法を紹介します。

　前準備：テンプレートのバックアップ（毎回言ってますが^_^）
　メニューを作るにはCSSとHTMLの知識が必要ですが、でもネットでたくさんのメニュー生成ソフトがありますから、うまく利用すれば、簡単にきれいなメニューを作れますよ。僕はCSS Tab Designerというソフトを使っていました。どんなソフトでもいいですから、メニュー用のCSSが生成できればいいです。

手順１：ブログの上部にメニューを置きたいなら（このブログのように）、ちょっと準備が必要です、サイドバーに置くなら、この手順は不要です。
　　テンプレートに以下のコードを見つけ出し、
<b:section class="header" id="header" maxwidgets="1" showaddelement="no">
上のコードを下のように修正します。
<b:section class="header" id="header" maxwidgets="2" showaddelement="yes">

手順２：上のコードを修正したら、Template->Page Elementsに戻ります、ヘーダに”Add a Page Element”でラベルを追加します、完了図は下のようです。

手順３：メニューのCSSスタイルをテンプレートの<head>～</head>に貼り付けます。僕はCSS Tab Designerで生成したCSSは下の感じです。
ここで注意してほしいのはCSSで使ってる画像ファイルアドレスも合わせて修正する必要があります。


/*- Menu Tabs E--------------------------- */

#tabsE {
   float:left;
   width:100%;
   background:$headerBgColor;
   font-size:45%;
   line-height:normal;
   }
#tabsE ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
   }
#tabsE li {
   display:inline;
   margin:0;
   padding:0;
   }
#tabsE a {
   float:left;
   background:url("tableftE.gif") no-repeat left top;
   margin:0;
   padding:0 0 0 4px;
   text-decoration:none;
   }
#tabsE a span {
   float:left;
   display:block;
   background:url("tabright.gif") no-repeat right top;
   padding:5px 15px 4px 6px;
   color:#FFF;
   }
 /* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsE a span {float:none;}
 /* End IE5-Mac hack */
#tabsE a:hover span {
   color:#FFF;
   }
#tabsE a:hover {
   background-position:0% -42px;
   }
#tabsE a:hover span {
  background-position:100% -42px;
   }
#tabsE #current a {
  background-position:0% -42px;
}
#tabsE #current a span {
  background-position:100% -42px;
}

手順４：テンプレートのHTMLコードで先ほど追加した"Label"に対応するコードを見つけ出します。こんな様子でしょう。


<b:section class='header' id='header' maxwidgets='2'
showaddelement='yes'>
　　.
　　.
　　.
<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
 <h2><data:title/></h2>
</b:if>
<div class='widget-content'>
 <ul>
 <b:loop values='data:labels' var='label'>
   <li>
     <b:if cond='data:blog.url == data:label.url'>
       <data:label.name/>
     <b:else/>
       <a expr:href='data:label.url><data:label.name/></a>
     </b:if>
     (<data:label.count/>)
   </li>
 </b:loop>
 </ul>
 <b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>

上のコードを下のように修正します。


<b:section class='header' id='header' maxwidgets='2'
showaddelement='yes'>
　　.
　　.
　　.
<b:widget id='Label2' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<div id='tabsE'>
 <ul>
 <b:loop values='data:labels' var='label'>
   <li>
    <a expr:href='data:label.url><span>
       <data:label.name/></span></a>
   </li>
 </b:loop>
 </ul>
</div>
</b:includable>
</b:widget>
</b:section>

テンプレートを保存して、エラーが無ければ成功です。

Blogger Beta Tips

ラベルをメニューのように使う

2 コメント:

コメントを投稿

最新の記事

最新コメント

このブログを検索

ブログのアーカイブ

ラベル

Links

Blog Ranking