« ココログのカスタムCSSの編集~2段組レイアウトの設定~ | トップページ | ココログのカスタムCSSの編集~Google検索ボックスの設置~ »

2008年2月 3日 (日)

ココログのカスタムCSSの編集~メニューの作成~

「カスタムCSSの編集」を使ってブログのトップにメニューを作成してみます。メニューはブログの先頭に表示したいので、「ブログのサブタイトル」を使って書きます。「ブログのサブタイトル」は管理ページの「設定」タブで設定できます。
メニューには、このブログのトップページへのリンクと、ココログ関連カテゴリへのリンクを設定したいと思います。

  • カスタムCSSの編集
    次のCSSを追加します。
      div.mymenu{
        position:absolute;
        font-weight:bold;
        top:80px;
        left:20px;
      }
    • positionはレイアウトの座標の指定方法です。absoluteはレイアウトを絶対座標で表示する設定です。
    • font-weightは、フォントの太さの設定。ここではボールド体に設定しています。
    • top,leftは、このレイアウトの表示位置の指定です。position:absolute設定をしているので、絶対座標、つまりこのページの左上からの位置の指定になります。
  • HTMLの編集
    ブログ記事に追加するのではなく、ブログのサブタイトルに追加します。
      <div class="mymenu">| <a href="http://shirabemono.cocolog-nifty.com/blog/">T O P</a> | <a href="http://shirabemono.cocolog-nifty.com/blog/cat8169838/index.html">ココログ関連</a> |</div>

ブログページトップのタイトルの下に[TOP]と[ココログ関連]というメニューを表示することができます。

« ココログのカスタムCSSの編集~2段組レイアウトの設定~ | トップページ | ココログのカスタムCSSの編集~Google検索ボックスの設置~ »

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/506297/17941659

この記事へのトラックバック一覧です: ココログのカスタムCSSの編集~メニューの作成~:

« ココログのカスタムCSSの編集~2段組レイアウトの設定~ | トップページ | ココログのカスタムCSSの編集~Google検索ボックスの設置~ »