このページの記事目次 （タグ: 変数 の検索結果 23 件）
total 6 pages 次のページ →
カテゴリーの一覧（カテゴリーリスト）は どのサイトでも表示されていると思いますが、それが カテゴリー毎の画像（もしくはアイコン等）になっていたら どのような内容なのか一目で分かるので、文字だけの時よりも目立つようにできますね。
以前、コメントで似たような質問を受けたことがありますが、最近また FC2ユーザーフォーラム でトピックが上がっていたので、それにも回答し 記事に残しておくことにしました。
図は 完成イメージの一例です。
画像部分とテキスト全体をリンクにしてあります。 背景画像を使っているので、サイズ次第で アイコンのようにすることもできますし、一部のカテゴリーを非表示 にすることも簡単です。 （非表示の方法は 「CSS で見えなくする方法」 と、「FC2ブログの仕様と変数を利用し、ソース自体にそのカテゴリーを載せないようにする方法」 があります。）
色々応用できると思いますが、図を例にして 方法を紹介します。
FC2ブログ カテゴリーリストに それぞれの画像を入れる方法
1. プラグイン「カテゴリー」 の 【 HTMLの編集 】
環境設定： プラグインの設定 で 該当するプラグイン の 【 詳細 】 をクリック → プラグインの改造 【 HTMLの編集 】 をクリックで 表示される内容を書き換えます。 プラグインを使わず、テンプレートに直接記入してもOK です。
<ul class="catlist">
<!--category-->
<li class="
cat<%category_no>"><a href="<%category_link>" title="カテゴリー: <%category_name> へ"><%category_name> (<%category_count>)</a>
</li>
<!--/category-->
</ul>
2. スタイルシートの設定
環境設定： テンプレートの設定 で スタイルシートに以下を追加します。 （テスト中は 複製のテンプレートなどで作業をすると良いと思います。）
/* 画像の大きさが （幅200px） 高さ38px の場合 */
ul.catlist {
list-style:none;
margin:auto 0;
padding:0;
font-size:12px;
}
.catlist li a {
display:block;
margin:0 2px 12px 2px;
padding:40px 2px 0 2px;
color:#999; /* リンクの色を他と変える必要がなければ不要 */
}
.cat24 { background:url(A画像のパス) no-repeat center top; } /* カテゴリー名メモ */
.cat0 { background:url(http://blog-imgs-53.fc2.com/a/r/i/arinogotokuatumarite/test_cat_img0.png) no-repeat center top; } /* テスト用 */
.cat19 { background:url(C画像のパス) no-repeat center top; } /* カテゴリー名メモ */
.cat20 { background:url(D画像のパス) no-repeat center top; } /* カテゴリー名メモ */
/* 以下同様 */
/* 非表示にしたいカテゴリーがある場合 */
.cat31 { display:none; }
応用： 親子カテゴリーの場合
親子カテゴリーを利用している場合で、親と子に見た目の変化をつけたい場合には 以下のようなソースを利用すると良いと思います。 この場合にも 非表示カテゴリー が利用可能です。
<ul class="catlist">
<!--category-->
<!--category_parent-->
<li class="
c_oya cat<%category_no>"><b><a href="<%category_link>" title="親カテゴリー: <%category_name> へ [ total <%category_count> 件 ]"><%category_name></a></b></li>
<!--/category_parent-->
<!--category_sub_hasnext-->
<li class="cat<%category_no>"><a href="<%category_link>" title="カテゴリー: <%category_name> へ"><%category_name> -<%category_count></a></li>
<!--/category_sub_hasnext-->
<!--category_sub_end-->
<li class="cat<%category_no>"><a href="<%category_link>" title="カテゴリー: <%category_name> へ"><%category_name> -<%category_count></a></li>
<!--/category_sub_end-->
<!--/category-->
</ul>
- 親カテゴリー部分のスタイルに c_oya を追加してある以外は 基本形と同じです。
- 必要に応じて li.c_oya { 親カテゴリーの時のスタイル } を追加してください。
この記事では スタイルシートで各カテゴリーの背景画像を設定する方法 を紹介しましたが、背景ではなく 直接画像タグ（<img>）を使うことも可能です。 ここで紹介していないものについては、フォーラムのコメントなどを参考にしてみてください。
キーワード検索 ： 画像 カテゴリー FC2ブログ プラグイン 変数
スポンサーリンク
前回の記事 FC2 スマホ用テンプレートに 関連記事リストを追加する方法 では、「スマートフォン用テンプレートでは FC2ブログの関連記事リスト がまだ使えないので、Google Feed API を利用して...」 と書いていたのですが、その投稿翌日には（2012/07/12～）仕様が変更されたようで、スマートフォン用テンプレートでも FC2ブログの関連記事リスト が使えるようになっていました。
(^_^;) という訳で、前回の方法ではなくてもOK になりましたので、FC2の変数を使う方法なども 一応紹介しておきます。 前回の方法と殆ど違いはないと思いますが、多少軽くはなるかも。。 好きな方を選んでご利用ください。
上図は「テンプレート変数のみ」としていますが、それ以外の場合（「個別ページの記事下」など テンプレートに自分で変数を追加しない場合）でも利用できます。
FC2ブログ 関連記事リストの設置方法 （スマートフォン版）
1. スマートフォン用テンプレート の表示したい場所に ソースを追加
※「テンプレート変数」 を使う場合のみ追加。
個別記事ページ表示エリア（<!--permanent_area-->） の <!--topentry--> ～ <!--/topentry--> の間に入れておけばOKです。
※「テンプレート変数」 を使わない場合、関連記事リストの設定｜FC2ブログ公式マニュアル に載っているようなソースが 自動で追加されます。 表示場所を選べない上に、PCと同じ表示項目（日付の有無など）になるので、自由度は少し低くなると思います。
<!--relate_list_area-->
<div class="relate_dl">
<ul>
<!--relate_list-->
<li>
<!--relate_entry_other--><a href="<%topentry_relate_url>
&sp"><!--/relate_entry_other--><%topentry_relate_title><!--relate_entry_other--></a><!--/relate_entry_other--></li>
<!--/relate_list-->
</ul>
</div>
<!--/relate_list_area-->
リンクは ?no=記事番号 に張られます。 &sp を追加しておくと ?no=記事番号&sp になりますので、必要に応じて入れてみてください。不要なら削除してOK。 （デフォルトでは入っていませんが、私の共有テンプレートであれば 入れておいた方が自然かも。。）
変数の詳細 や これ以外の設定方法 については以下を参考に
入れる位置のイメージ
スマホ用共有テンプレート 『sp_custom』 『sp_ari_custom』 『sp_pattern』
の場合、このようなソースになっていますので、この範囲内に1ヶ所のみ追加すればOKです。
それ以外のテンプレートでも 似たような場所があるはずなので探してください。
<!--▼▼個別記事ページ▼▼-->
<!--topentry-->
（中略）
<div id="entry_box">
（中略：記事内容など）
【 自動表示での表示場所 】
<div class="entry_category">
（カテゴリー名）
【 候補地 ：1 】
（コメント数・トラバ数）
</div>
</div><!--/class=entry_box-->
【 候補地 ：2 】
<!--/topentry-->
<!--▲▲個別記事ページ▲▲-->
<!--/permanent_area-->
2. スマートフォン用テンプレート の CSS 一例
※「テンプレート変数」 を使う場合， 使わない場合 共通です。
特に何も設定しなくてもOKですが、共有テンプレート 『sp_custom』 『sp_ari_custom』 『sp_pattern』 の場合の設定例 を載せておきます。 以下のような項目が入っているので 緑文字部分のみを スタイルシートに追加してください。
/*================================
記事装飾 （削除可，自由に追加してください）
================================*/
.relate_dl,
blockquote {
margin: 20px 5px 20px 10px;
padding: 10px;
overflow: auto;
background: #f5f5f5;
font-size: 13px;
line-height: 1.3;
border-left: 4px solid #ccc;
}
もしくは ↓ こんな感じの設定でもいいかも。。 私のは大体こんな感じです。 一行分だけ表示して はみ出す部分は ... と省略されます。
実際のページ
.relate_dl ul {
margin: 0 !important;
}
.relate_dl ul li {
list-style: none;
margin: 10px;
padding-left: 19px;
background: url(リスト用の画像のパス) no-repeat left center;
width: 90%;
overflow: hidden;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
}
キーワード検索 ： 関連記事リスト 変数 FC2ブログ スマートフォン テンプレート
スポンサーリンク
別に 検索結果以外でも使えるのですが、FC2ブログで使える変数（公式マニュアル）に <%total_num> が追加されているはご存じですか？ これ、どうやら元々使えていたらしいのですが、マニュアルに載ったのは 2012年1月 あたり？比較的最近かなと思います。
<%total_num> 「公開」状態の記事の数
※どこでも有効な単変数 の項目に入っていますが、○○件 などのように表示させたい場合には、エリアを限定して表示させる必要があると思います。
この変数は トップページなどでは 全記事件数、 カテゴリー別ページでは そのカテゴリーに該当する記事件数、 検索結果ページでは その該当記事件数... というようにエリアによって表示される値が異なります。 PC版，スマートフォン版，携帯版 それぞれのテンプレートで機能しますので、上手く利用すれば閲覧性が良くなるかも。。
クリックで画像を拡大します [
実際の検索結果ページ ]
と、いう訳で ページ上部の 便利ナビ のところに追加してみました。 ここには元々 エリア変数 を入れてあるので、<%total_num> 件 などを追加するだけでOKです。
[ 実際のカテゴリー別ページ ]
スマホ用テンプレート や 携帯用テンプレート でも使えますが、PC用テンプレート とは エリア変数の分類 が少し異なりますので、そこだけ間違わないように。。
※スマホ版・携帯版の <!--page_area--> には <!--index_area--> の他に <!--category_area--> と <!--date_area--> も含まれます。
単純に... こんな感じで指定すればOK！
<!--category_area-->
<%sub_title>（<%total_num> 件）
<!--/category_area-->
また、エリア限定ですが 「トップページなどでは 全記事件数」 なのでこれまでスクリプトで算出していた 総記事件数の表示 がこの変数だけで表示できるようにもできます。
色々試してみると、意外と 使い道の多い変数 ですよ。。
キーワード検索 ： FC2ブログ テンプレート 変数 ブログ内検索 便利ナビ
スポンサーリンク
ブログは ほぼ毎日チェックしているのに、最近はすっかり更新をサボっている状態の私。。 先日初めて、「1ヶ月更新なし広告」 が表示されてしまいました。 しかも、一度最後に書いた記事の日付をズラして（インチキとも言う..） 広告表示を回避したのに、またうっかり表示されていて。。ちょっと焦りました。
この広告は、システムが強制的に入れるもので、色々な場所を変換して表示されるのですが、私のテンプレートの場合 一部がちょっと変な状態になっちゃうのです。。 実は前から気付いていたのですが、自分のサイトでも広告が表示されているのを見て このバグを回避する方法を考えてみました。
ついでに 新変数 <%topentry_rlink> を見つけたので それについても紹介します。
上の画像の赤枠部分、ソースを見ると以下のようになっています。 リンクテキストのところに http://xxxxxxx.blog129.fc2.com/?overture" target="_new という中途半端なテキストが入っているのが分かるでしょうか。。
<div class="entry_bottom">
<p class="url"><a rel="nofollow" href="http://blog129.fc2.com/control.php?mode=editor&process=load&eno=" target="_blank" class="edit" title="管理用">（記事編集）</a> <a href="http://xxxxxxx.blog129.fc2.com/?overture" target="_new" title="個別記事URL">http://xxxxxxx.blog129.fc2.com/?overture" target="_new</a></p>
--/--/-- | <b>Comment</b> (-) | <a href="./" title="トップページへ">HOME</a> | <a href="#top" title="このページの先頭へ">↑ ページ先頭へ ↑</a> |
</div><!--/class=entry_bottom-->
文法的エラーなどになっている訳ではないので、気にする必要もないかもしれませんが...
これまで、元のテンプレソースは 以下のようなものでした。（概略）
<p class="url"><a rel="nofollow" href="<%server_url>control.php?mode=editor&process=load&eno=<%topentry_no>" target="_blank" class="edit" title="管理用">（記事編集）</a> <a href="<%topentry_link>" title="個別記事URL"><%topentry_link></a></p>
で、↑ この部分を 以下のものに変更するとバグのないスッキリした表示にすることが可能でした。 たかだかこれを見つけるのに 小一時間、変数と格闘しました。 （理由は後に..）
【 修正版 】
<p class="url"><a rel="nofollow" href="<%server_url>control.php?mode=editor&process=load&eno=<%topentry_no>" target="_blank" class="edit" title="管理用">（記事編集）</a> <a href="./blog-entry-<%pno>.html" title="個別記事URL"><%url>blog-entry-<%pno>.html</a></p>
<p class="url"><a rel="nofollow" href="<%server_url>control.php?mode=editor&process=load&eno=<%topentry_no>" target="_blank" class="edit" title="管理用">（記事編集）</a> <a href="./blog-entry-<%topentry_no>.html" title="個別記事URL"><%url>blog-entry-<%topentry_no>.html</a></p>
追記 （2012/02/04） ：
<%pno> だと、ページエリア（カテゴリー別ページ や 月別ページ 等） の表示に不具合があったことを見落としていました。 <%topentry_no> を利用してください。
まぁ、もっとも この広告が表示されることがないように、1ヶ月以上 更新を怠らなければよいだけの話ではあるのですが。。 共有テンプレートユーザーさん、及び それ以外のテンプレートでの広告のバグに困っている方 などの参考まで。
http://xxxxxxx.blog123.fc2.com/blog-entry-212.html を出力させる方法 は4通りもあるのです。
システムが 「1ヶ月更新なし広告」 や 「スポンサーサーチ（検索結果ページと その後の個別記事ページで表示される広告）」 を表示する場合など、大抵は テンプレートから的となる変数を見つけてそれを書き換えたり、その部分に挿入したりということがされているのですが、今回のバグのような表示も それが大きく関係しています。
個別記事のアドレス http://xxxxxxx.blog123.fc2.com/blog-entry-212.html を、広告なしの通常の状態で、表示させる方法は 現在4通りあります。 どれを使っても、広告なしでは同じなのに 広告が入ると4通りの違うものが出来てしまうのです。。
- <%topentry_link>
- <%url><%topentry_rlink>
- <%url>blog-entry-<%pno>.html
- <%url>blog-entry-<%topentry_no>.html
topentry 関連の変数は <!--topentry--> と <!--/topentry--> の間でのみ有効です。
<%topentry_rlink> というのは、多分 最近追加された変数だと思います。 blog-entry-212.html 部分だけ出力できるので、知っていると 多少ソースが軽量化できるかも。。
<%pno> は、個別記事ページ と コメント編集ページ でのみ出力されます。
テンプレート用 変数一覧｜FC2ブログ公式マニュアル
今回 【 修正版 】 に至るまで時間が掛かったのは 全部テストしてみたからなのですが、結果が異なるので厄介ではありましたね。。(^_^;)
関連記事
追記 （2013/08/01） ：
現在 FC2ブログの有料プラン を適応中です。
キーワード検索 ： FC2ブログ テンプレート 変数
スポンサーリンク
申し訳ありません。 お探しの記事は現在、この ユーザータグ （Keyword） を設定していない可能性があります。 右上の検索BOXで 再度用語を短めに入力していただくと記事が見つかる場合があります。
