ヘッダー画像下にメニューを付ける
ヘッダ画像の下に、
「TOP」 「IMAGE」 「SITEMAP」
のリンクメニューを付けてみました。
TOP をクリックすると、ブログのトップページを表示します。
IMAGE は、各記事の最初の画像を表示します。
SITEMAP は、ブログのサイトマップを表示します。
IMAGE と SITEMAP は、滋賀咲くブログに備わっている機能を利用しています。
手順は、
1. カスタムプラグインの設定
2. スタイルシートの編集
です。
1. カスタムプラグインの設定
下のソースを滋賀咲くブログの「ブログ環境設定」内にある「カスタムプラグイン」に貼り付けて、「記事一覧の上部」に表示する設定にします。
<!-- ヘッダー画像下のメニュー -->
<div id="menutag">
<br>
<a href="<%BlogUrl%>" title="トップページへ">TOP</a>
<a href="<%BlogUrl%>album.html" title="記事画像">IMAGE</a>
<a href="<%BlogUrl%>sitemap.html" title="サイトマップ">SITEMAP</a>
<br><br>
</div>
<!-- ヘッダー画像下のメニュー -->
スタイルシートの後ろに、つぎのコードを追記します。
/* ################################################
* ヘッダー画像下のメニュー表示設定
* ################################################ */
#menutag a{
color:#FFFFFF;
background:#000000;
padding:1px 5px 1px 5px;
text-decoration:none;
}
#menutag a:link{
color:#FFFFFF;
background:#000000;
padding:1px 5px 1px 5px;
text-decoration:none;
}
#menutag a:visited{
color:#FFFFFF;
background:#000000;
padding:1px 5px 1px 5px;
text-decoration:none;
}
#menutag a:active{
color:#999999;
background:#000000;
padding:1px 5px 1px 5px;
text-decoration:none;
}
#menutag a:hover{
color:#999999;
background;#000000;
padding:1px 5px 1px 5px;
text-decoration:none;
}
カスタムプラグインの設定で使っている <%BlogUrl%> というタグは、「置換タグ」と言われているものです。
滋賀咲くブログで使える置換タグについては、
滋賀咲くブログのトップページ右上の「
ヘルプ」の一項目として、紹介されています。
+ 置換タグについて／ブログヘルプ目次(clog) +
http://help.clog.jp/e1690131.html
関連記事