北京棒球小僧トップページへ矢印:赤(右3) カープキャップ1Blog technique 矢印:赤(右3)カープユニフォーム1パンくずリストの追加方法

2006年03月27日

カープユニフォーム1 パンくずリストの追加方法

ブログカスタマイズ ONE POINTアドバイス第32弾!!
今回はパンくずリストの追加方法です。
これがあると以前よりはどのカテゴリの記事なのか分かりやすくなるので閲覧者にとって非常に便利になると思います。
設置方法は至って簡単です。

まず、カテゴリページと記事ページでの設置場所&設置方法が違いますのでくれぐれも混同しないでください。

・カテゴリページに設置する方法
記事コンテンツ→HTML編集
<% if:page_name eq 'category' -%>
<div class="crumb"><a
href="<% blog.page_url %>">TOP</a>>
<% category.name %></div>
<% /if -%>
※赤字が追加部分です。追加位置は“navi”設定の上です。
・記事ページに設置する方法
<% if:page_name eq 'article' -%>
<div class="crumb">
<a href="<% blog.page_url %>">Top</a>>
<% loop:list_article -%>
<a href="<% article_category.page_url %>">
<% article_category.name %>
</a>><% article.subject %>
<% /loop -%></div>

<div class="navi">
<% if:previous_article -%><<<a href="<% previous_article.page_url
%>"><% previous_article.subject | tag_break %></a>| <%
/if -%>
<a href="<% blog.page_url %>">Main</a>
<% if:next_article -%>| <a href="<% next_article.page_url %>"><%
next_article.subject | tag_break %></a>>><% /if -%>
</div>
<% /if -%>
※赤字が追加部分です。追加位置は“navi”設定の上です。

最後にスタイルシートを設定します。
/* パンくず設定 */
.crumb{
color:#000; /* テキストカラー:黒 */
font-size:90%; /* px(ピクセル)でも可能 */
text-align:left; /* テキスト左添え */
margin:0px;
width:100%;
padding : 5px;
}
 /* パンくずリンク部設定 */
.crumb a{
color:#000; /* リンクカラー:黒 */
font-size:90%; /* px(ピクセル)でも可能 */
text-align:left; /* テキスト左添え */
margin:0px;
width:100%;
padding : 5px;
}

ここまでやれば後は再構築で完了です。
どうですか?かなり簡単だったのでは?
posted by むさC16 at 23:10 | Comment(11) | TrackBack(0) | カープキャップ1Blog technique 上へジャンプ
この記事へのコメント
言われると簡単なのですが、通常の他ブログのカスタマイズなんかだと、「あとはスタイルシートに設置して下さい」なんて他人事のような終り方なので、正直やりたくてもやれないのが現状でした。

今、再構築中ですが、またおかしな所があればご指摘お願いします[ビックリ(字)][ビックリ(字)][豚さん(動物)]
コメント用アイコン1Posted by ドカベン at 2006年03月28日 09:34
しかし、「荒川」「乳首」って根強いですね。
これをネタに1年ぐらい過ごせそうです。
コメント用アイコン1Posted by きむ1 at 2006年03月28日 12:11
最初の設定は出来ましたが、色とフォントサイズとhomeアイコンとアンダーラインとカッコをいじったら、全て改行になってしまってます。
また初歩的なミスなのでしょうか。。。[照れ顔(パンダ)]
コメント用アイコン1Posted by ドカベン at 2006年03月28日 12:36
>ドカベンさん
自分も同じ現象になりました。
改行とかを無くせば直ったと思うんだけど[焦る(ヒヨコ)]
スタイルシートを見る限り同じなんですよね。
HTML編集での工夫だったと思います[自慢顔(ヒヨコ)]

>きむ1
お主が変なコメントしてくれたお陰で大繁盛だよ[笑顔(ヒヨコ)]
コメント用アイコン1Posted by むさC16 at 2006年03月28日 14:53
問題解決[ビックリ(字)][ビックリ(字)]
理由がわからないのですが、1つ1つ更新していきましたところ、crumb aの部分ではアンダーラインの削除とフォントカラーの指定、crumb a:hoverの部分ではフォントカラーの指定だけをスタイルシートに入力したら正常に戻りました。

要は、必要なものを重複させてはいけないということなのでしょうか[疑問(字)]
コメント用アイコン1Posted by ドカベン at 2006年03月28日 15:57
記憶に残ってないと言う事だからあんまり大して困らなかった事なんでしょうね。
あと、ドカベンさんの方にパンくずの上の空間の取り方記述しときましたので御参考までに[普通顔(ヒヨコ)]
よ[〜(字)]し[ビックリ(字)]次は何しましょうか[疑問(字)]
コメント用アイコン1Posted by むさC16 at 2006年03月28日 16:03
次は絵文字アイコンの設定がいいなぁ〜[ニヤリ顔(パンダ)]
コメント用アイコン1Posted by ドカベン at 2006年03月28日 16:31
よ[〜(字)]し[ビックリ(字)][ビックリ(字)]
いっちょ行ってみますか[疑問(字)]
これ、説明が長いから。。。。。[焦る(ヒヨコ)]
途中まで自力で。。。。
御願いします。。。。
コメント用アイコン1Posted by むさC16 at 2006年03月28日 17:05
き、却下[ビビリ顔(パンダ)]
コメント用アイコン1Posted by ドカベン at 2006年03月28日 17:08
や、やりますよ[怒る(ヒヨコ)]
ただ、ちょいと待ってくださいな〜。
急がば回れっちゅ〜事で[自慢顔(ヒヨコ)]
コメント用アイコン1Posted by むさC16 at 2006年03月28日 17:13
別件ですが、記事のバックグランドに背景を入れて、バックグランドだけを透過(記事や写真は100%で映るように)させる事はできるんでしょうか?
スタイルシートの部分なんかはわかるので、できるのであればどういう順番で何を入れればよいか教えてください[焦る(ヒヨコ)]
コメント用アイコン1Posted by ドカベン at 2006年03月28日 23:31
上へジャンプ
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのTrackBack URL

上へジャンプ
さくらインターネット株式会社 株式会社ぐるなび 株式会社オートウェイ 損保ジャパンの海外保険 オクトパストラベル・ジャパン
中国醸造株式会社 有限会社BBシステム 日本シグマックス株式会社 日本シグマックス株式会社 株式会社コーエイプランニング OTAIRECORD株式会社