2007年10月05日

ナビゲーションの設定とリンク

さて、次はナビゲーションの設定の説明をします。
ナビゲーションの作り方にもいくつか方法がありますが、ここではせっかくですから最初に選んだデザインをそのまま活用したナビゲーションの設定をします。

最初に、右か左のナビゲーション、(ある人は両サイドかもしれませんが)を選んでいますね。まず、マイブログから【デザイン】→【コンテンツ】タグからページを開き、左、もしくは右サイドバーの部分に『自由形式』を追加します。追加した『自由形式』のリンクをクリックすると自由形式の編集画面が現れます。そこにHTMLソースを書き込むことでサイドナビを作成します。
jiyu1.gif
私の場合、自由形式のボックスはそのままにしておいて、「メニュー」と表示を変更し、その下にHTMLソースでそれぞれのリンク先に飛ぶように設定をしました。

もしあまりHTMLやスタイルシートに詳しくないのであればこの方法が1番簡単だと思います。
<div class="sample01 "> ←わかりやすい名前をつけてください。
<ul>
<li><A href="http://www.〜リンク先" >リンク1</A>

*赤で示した<>は黒でそのまま表示してください。そうすると、以下のように見えます。
  • リンク2

  • リンク3




  • タグで表示されるマーカーの形を disc(既定値:黒丸)、circle(白丸)、square(四角)、decimal(1, 2, 3...)、lower-roman(i, ii, iii...)、upper-roman(I, II, III...)などで指定します。ブラウザーによりサポート状況は異なります。

    ================================

    もしメニューに独自のアイコンを使う場合には、「自由形式」のボックス内でイメージをアップしてそのイメージにリンクを貼ることも可能です。つまり外部からアイコンを持ってきて貼り付けリンクさせます。
    iconsample1.gif

    ================================

    独自にCSSを作成し、既存のスタイルシートに追加することでボックスを作ることも可能です。(ただしこれは何回も確認してからUpするようにしてください。失敗が多いです。)

    その場合、タグは自分が付け足したものとわかる名前をつけてなおかつ
    「自由形式」内の<div class>につけた名前と一致するようにしてください。以下はサンプルです。

    *自分が後から付け加えたものと識別できるようにCSSの一番後ろに自作のスタイルシートを貼り付けます。

    iconsample2.gif

    ●以下がソースサンプルです。色は自由に変えてください。
    .sample01 li {
      list-style-type:none;
      width:200px;
      margin:0 0 6px 0;
       background: #333333;
      color:#FFFFFF;
      }
    .sample01 a {
      display:block;
      width:188px;
      padding:12px 0 12px 12px;
      text-decoration:none;
      background:#(背景の色);
      color:#FFFFFF;
      background-image:url(背景画像へのパス);
      background-repeat:repeat-y;
      }
    .sample01 a:hover {
      position:relative;
      top:-4px;
      left:-6px;(ずらして影をつける感じになります。)
      }

    <a>タグは前後に改行が入らないインラインレベル要素なのでリンクの幅を設定するためにブロックレベル要素に変更します。更に、ホバー時に浮いたような動きをつけるために、ブロックレベル要素に変更したボックス領域を相対指定でマイナス方向へ数ピクセルずらし、<li>タグの背景を黒に設定して影のように見せています。
    ================================

    ◎さて、もしフッターにも、リンクを張りたい場合には以下の手順で張ることが可能です。もちろん、記事の中にそれぞれのリンク先を入れることもできますが、フッターに入れると一度で済むという利点があるのですべてのページを作成し終えてから張ることをお勧めします。

    コンテンツから「記事」を選んでクリックします。そこから、コンテンツHTML編集をクリックします。
    http://****.seesaa.net/article/*****.htmlといったように、URLにarticleが表示されるところがナビゲーションリンクの設定です。

    <% if:page_name eq 'article' -%>

    <% /if -%>までをコピペします。

    記事設定HTMLソースの一番最後の<% content. footer -%>という部分の下に貼り付けて完了です。しつこいようですが、失敗も多々あると思うのでセーブ確定する前にプレビューで確認してください。

    *追加
    とてもシンプル&機能的なドロップダウンのナビゲーションを表示しているサイトがあるのでご紹介しておきます。
    http://temp-css.seesaa.net/article/4272449.html
  • ×

    この広告は1年以上新しい記事の投稿がないブログに表示されております。