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

過去記事で書いた…

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


…の…「パンくずリスト(Bread Crumb / Topic Path)」を…

「jQuery UI」の「Button」を使ってスタイリッシュにする方法です…

大前提として「jQuery UI」の部分を追記する形ですから…上記過去記事と…

上部か下部のページャーから…

第１回「導入」と第２回「Button」をお読みください…

更には…「CSS Sprites」も使用していますので…

必要に応じて…こちらの過去記事も併せてお読みください…

 Tonttu/テンプレート編集に必須な「CSS Sprites」作成ツールの使い方と「HTML」マークアップ

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

「パンくずリスト」

導入すると…

こんな感じになります…

先ずは…「CSS」から…

source : 「パンくずリスト」の「CSS」

#breadcrumb{margin:0;padding-bottom:5px;width:800px}
#breadcrumb a{font-size:8px}

画像-2 : 各種「CSS」設定

全体幅は「800px」ですが…

別途…記事部分の「main-wrapper」に…

記事領域幅を超えた部分は表示しないように…

「overflow:hidden;」を設定していますので…

記事領域幅を超えた部分は表示されません…

表示されるかされないかは…ご自身の「CSS」に依存します…

表示されるかされないかではなく…

ソコソコ長いタイトルでも改行されないために設定しています…

全体幅が「800px」を超えると…

ホバー表示されているページタイトル部分が改行されます…

文字サイズやマージンとともに…ご自由に弄って下さい…

尚…「CSS」は「style」属性で「HTML」にも記述しています…

過去記事通りに設定すると…「パンくずリスト」は…

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

「パンくずリスト」の「HTML」

こんな感じになっていると思われます…

折りたたまれているでしょうから…

「▶」をクリックして展開して…

「HTML」を以下のように書き換え「保存」します…

source : 「パンくずリスト」の「HTML」

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<div class='button-set' id='breadcrumb'>
  <a class='east2' expr:href='data:blog.homepageUrl' rel='home'><span class='id114' style='vertical-align:baseline;' title='Home'/></a>
<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'>
          <a class='east2' expr:href='data:label.url' rel='tag'><span style='color: #1E90FF;vertical-align:baseline;'><data:label.name/></span></a>
            <b:if cond='data:label.isLast != &quot;true&quot;'>,
            </b:if>
        </b:loop>
      <b:else/>
      <a class='ui-state-hover'>Unlabeled</a>
      </b:if>
      <a class='ui-state-hover'><span style='vertical-align:baseline;'><data:post.title/></span></a>
    </b:loop>
  <b:else/>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
      <a class='ui-state-hover'><data:blog.pageName/></a>
    <b:else/>
      <b:if cond='data:blog.pageType == &quot;archive&quot;'>
        <a class='ui-state-hover'><data:blog.pageName/></a>
      <b:else/>
        <b:if cond='data:blog.pageType == &quot;index&quot;'>
          <b:if cond='data:blog.pageName == &quot;&quot;'>
            <a class='ui-state-hover'>All Posts</a>
          <b:else/>
            <a class='ui-state-hover'>Search this site / <span style='color:#F15B55;'>Label</span> :: <data:blog.pageName/></a>
          </b:if>
        </b:if>
      </b:if>
    </b:if>
  </b:if>
</b:if>
</div>
</b:if>
</b:includable>

「Home」のアイコン () は「CSS Sprites」で表示させています…

4列目「class='id114'」の部分を…ご自身のクラス名に変更して下さい…

文字列で OK ってな方は…

4列目「<span class='id114' style='vertical-align:baseline;' title='Home'/>」

…の部分を「Home」などとして下さい…

２箇所ある右向き三角形 (画像-2) を変更したい場合は…

第２回「Button」で設定したご自身のクラス名に…

4列目・11列目の「class='east2'」を変更して下さい…

ラベル名の文字色 (画像-2) を変更したい場合は…

11列目の「color: #1E90FF;」を変更して下さい…

31列目の「color:#F15B55;」は…

サイト内検索結果ページでのラベル名の前の…

「Label」という文字列の文字色ですのでお間違えなく…

ページ読み込みが完了すると…

「パンくずリスト(Bread Crumb / Topic Path)」のタイトル部分は…

ホバー状態 (画像-2) でハイライト表示されます…不要な場合は…

16列目・18列目・22列目・25列目・29列目・31列目と…

６箇所ある「class='ui-state-hover'」を削除して下さい…

以上です…お疲れ様でした…

こちらの記事もお薦めです…

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

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

Design jQuery JavaScript Current-Label : jQuery / Extra