jQuery UI Extra-6 : パンくずリストをHTML要素のマウスホバー時に光源がカーソルに追従するエフェクトで実装する

過去記事で書いた…

 jQuery UI Extra-3 : Bloggerで自作パンくずリストをボタン化してスタイリッシュにする


…は…ボタンの背景を「jQuery」で読み込みますから…

当然ながら…「jQuery」の読み込みが完了するまでの間…構造がネタバレします

なので…現在は…「HTML」で背景を読み込む…

 jQuery UI Extra-5 : HTML要素のマウスホバー時に光源がカーソルに追従するエフェクト


「Fantasic Light」を…パンくずリスト（Bread Crumb）に対応させています…

「Fantasic Light」バージョンを導入したい方は…

お読みになって…事前に「CSS」を導入しておいて下さい…

尚…パンくずリスト（Bread Crumb）の導入には…

こちらの過去記事も合わせてお読み下さい…

 Bloggerでパンくずリスト(Bread Crumb/Topic Path)を自動生成させる記述

Bread Crumb

過去記事のように導入すると…

「テンプレート」「HTMLの編集」から…

パンくずリストは…こんな感じになっています…

「▶」をクリックして中身を展開して「HTML」を書き換えます…

書き換える…パンくずリスト用の「HTML」

<b:includable id='breadcrumb' var='posts'>
  <b:if cond='data:blog.homepageUrl != data:blog.url'>
    <div id='breadcrumb'>
    <ul class='light bc-light'>
      <li class='light-r'><a expr:href='data:blog.homepageUrl' rel='home'>
        <span class='id114' style='vertical-align:baseline;' title='Home'/> <span class='id28' title='Next'/>
      </a></li>
      <b:if cond='data:blog.homepageUrl == data:blog.url'>
        <b:else/>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:loop values='data:posts' var='post'>
            <b:if cond='data:post.labels'>
              <b:loop values='data:post.labels' var='label'>
                <li class='light-w'><a expr:href='data:label.url' rel='tag'>
                  <span style='color: #1E90FF;vertical-align:baseline;'>
                    <data:label.name/> <span class='id28' title='Next'/>
                  </span>
                </a></li>
                <b:if cond='data:label.isLast != &quot;true&quot;'>
                  ,
                </b:if>
              </b:loop>
              <b:else/>
              <li class='light-w'><a>
                Unlabeled
              </a></li>
            </b:if>
            <li><a>
              <data:post.title/>
            </a></li>
          </b:loop>
          <b:else/>
          <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
            <li><a>
             <data:blog.pageName/>
            </a></li>
            <b:else/>
            <b:if cond='data:blog.pageType == &quot;archive&quot;'>
              <li><a>
                <data:blog.pageName/>
              </a></li>
              <b:else/>
              <b:if cond='data:blog.pageType == &quot;index&quot;'>
                <b:if cond='data:blog.pageName == &quot;&quot;'>
                  <li><a>
                    All Posts
                  </a></li>
                  <b:else/>
                  <li><a>
                    <span style='color:#F15B55;vertical-align:baseline;'>Search this site :: </span>
                    <data:blog.pageName/>
                  </a></li>
                </b:if>
              </b:if>
            </b:if>
          </b:if>
        </b:if>
      </b:if>
    </ul><br/><br/>
    </div>
  </b:if>
</b:includable>

「ul」タグを「Fantasic Light」のナビゲーションで整列させています…

解説用として…「ul」タグ部分を簡略化して置いておきます…

下記「CSS」のクラス名とも対比させながら…暇な方は…見ておいて下さい…

最後の行の改行タグは…ご自身のサイトの設定により適宜調整して下さい…

【解説用】「ul」タグの構造

<ul class='light bc-light'>
　<li class='light-r'>Home の表記</li>
　■投稿ページでの表記
　<li class='light-w'>投稿ラベルの表記</li>
　複数のラベルが付与されている場合の区切り（,）
　<li class='light-w'>ラベル無し投稿の表記（Unlabeled）</li>
　<li>投稿タイトルの表記</li>
　■静的ページでの表記
　<li>ページタイトルの表記</li>
　<li>アーカイブページの場合はページ名を表記</li>
　<li>検索結果が全投稿の場合の表記（All Posts）</li>
　<li>検索結果にページ名があれば表記</li>
</ul><br/><br/>

「<span class='id114' style='vertical-align:baseline;' title='Home'/>」
「<span class='id28' title='Next'/>」

…の部分は…ホーム「」と東向き三角形「」の画像を…

「CSS Sprites」で表示しています…

 Google Bloggerで絵文字を使うためのTips【CSS Sprites 編】


お好きな文字列…例えば東向き三角形「」は…

「>（&gt;）」「»（&raquo;）」「▶（&#9654;）」にも置き換えられますし…

「Fantasic Light」の「CSS」の「Triangle 」部分の…表示するポジションを…

右側にするクラスを新たに設定してクラス名で対応する事も出来ます…

ご自身で工夫して下さいな…

続けて…「Fantasic Light」の「CSS」に以下を追加します…

追加する…パンくずリスト用の「Fantasic Light」CSS

/* Bread Crumb  Light */
ul.bc-light{width:auto;height:25px;margin:0;padding:0;float:left}
ul.bc-light li{list-style:none;display:inline-block;zoom:1;float:left;margin:0;padding:0;position:relative}
ul.bc-light li a{display:block;line-height:25px;text-decoration:none;color:#fff;font-size:10px;margin:0;padding:0 5px}
ul.bc-light li a:hover{font-weight:normal}

「テンプレートを保存」して完了です…

最後まで…お読みいただきましてありがとうございます…

Prev 1 2 3 4 5 6 7 8 9 Extra Next

Design jQuery JavaScript Current-Label : jQuery / Extra