http://adan.noor.jp/ameba_newhttp://adan.noor.jp/ameba_new
「横メニュー」は、リンクタグとCSSを組み合わせて使います。英語フォントとの組み合わせもオススメ。
◎PCインストールフォント
◎Google Web font(30書体セレクト見本)
タグ作成ページで、横メニューのタグを作成、ブログ・「フリースペース」画面に入力し、サイドバーの配置で、ブログ画面に表示するように配置してください。
CSS編集画面で、CSSに下記を追加。ヘルパー様向け短縮版は別ページ。
/*▼横メニューCSSposition:relative;未設定ならここから*/
.skinContentsArea2{
position:relative;
padding-top:27px;
}
/*（position:relative;設定済みならここから）*/
#navi00{
position:absolute;
left:0; /* 数字大きくすると右下へ*/
top:0; /* 数字大きくすると下へ */
width:980px;
text-align:center;
}
/* 各メニューの設定 */
#navi00 a{
display:inline-block; /* 背景を指定できるように */
width:130px; /* ★各メニューの幅（後述†）にあわせて決めてください*/
height:24px; /* 各メニューの「高さ」 */
line-height:24px; /* 各メニューの「高さ」 */
font-size:18px;
margin-right:3px; /* 各メニューの「隙間」 */
}
/* 各メニューの設定（未訪問＆訪問済） */
#navi00 a:link,
#navi00 a:visited{
background:#ffffff; /* ★各メニューの「背景色」 */
color:#000000; /* ★各メニューの「文字色」 */
border:1px solid #000000; /* ★各メニューの「囲み罫線」 */
text-decoration:none;
}
/* 各メニューの設定（マウスカーソル触れたとき） */
#navi00 a:hover{
background:#000000; /* ★触れたときの「背景色」 */
color:#ffffff; /* ★触れたときの「文字色」 */
border:1px solid #ffffff; /* ★触れたときの「囲み罫線」 */
text-decoration:none;
}
/*▲横メニューCSSここまで*/
†メニュー幅の出し方
メニュー全体の幅「980px」
罫線太さ「1px」
各メニュー隙間「3px」
メニュー個数「6px」 の場合
各メニューの幅は、
(980-(1×2+3)×6)÷6 = 158px
◎リンクタグ：ブログ「脇カラム」「メッセージ欄」/「ルーム」向き（区切り文字あり）
◎ロゴつきメニュー(別ページ)