ブログテンプレート「ゆいレール」の答えを設定しました。
質問があれば答えが無くてはなりませんから、CSSでヘッダー画像の右下に配置。
使用した画像はスタッフIHAのブログテンプレート制作目録のgnaviで使用している画像です。
左がOFFで右がONです。
入力するソースは「続きを読む…」に書いてあります。
まずはCSSです。
#header {
position:relative; /*画像の答えのために設定*/
}
/*-- グローバルナビ（テスト版） --*/
ul.gnavi {
position: absolute;
right: 20px;
bottom: 10px;
font-size: 85%;
list-style-type: none;
text-align: center;
}
/*-- リスト項目 --*/
ul.gnavi li {
width: 160px;
float: right;
line-height: 100%;
}
/*-- リンクエリア --*/
ul.gnavi li a {
display: block;
/*position: relative;*/
padding: 5px 2px;
color: #ffffff;
background: url(/blog/blogtemplate/file/51a33e5035.JPG) center top repeat-x; /* off時 */
border: solid 2px #0033ff; /* #0033ff 青 */
/*border-style: solid;*/
border-top-left-radius: 40px; /* CSS3の表記 左上角丸 */
border-bottom-right-radius: 40px; /* CSS3の表記 右下角丸 */
text-decoration: none;
}
/*-- ポイント時・アクティブ時 --*/
ul.gnavi li a:hover,
ul.gnavi li a:active {
border: solid 2px #00ff00;
background: url(/blog/blogtemplate/file/6604cf0485.JPG) center top repeat-x; /* on時 */
color: #ffde00; outline: none; font-weight: bold;
}
最後にHTMLですが、トップページ・個別ページ・アーカイブページのどちらにも記載した方がいいと思いますが、まあ任意です。#header内の<h2>の下に入力して下さい。
<ul class="gnavi"><!-- ここはどの駅でしょうか？の答えページ -->
<li><a href="/blogtemplate/entry-684.html#answer" title="ブログテンプレート「ゆいレール」が完成">答えはこちら</a></li>
</ul>
それから背景画像はダウンロードしてサーバにアップロードしてからご使用下さい。
※当ブログからの直接リンクはお止め下さい。
