このページの記事目次 (カテゴリー: ブログカスタマイズ中級 15 件)
total 4 pages 次のページ →
~ 4
カテゴリーの一覧(カテゴリーリスト)は どのサイトでも表示されていると思いますが、それが カテゴリー毎の画像 (もしくはアイコン等)になっていたら どのような内容なのか一目で分かるので、文字だけの時よりも目立つようにできますね。
以前、コメントで似たような質問を受けたことがありますが、最近また 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です。
それ以外のテンプレートでも 似たような場所があるはずなので探してください。
<!--permanent_area-->
<!--▼▼個別記事ページ▼▼-->
<!--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ブログ スマートフォン テンプレート
スポンサーリンク
PC用テンプレートでは 定番となった 関連記事リスト(多くは 同じカテゴリーの新着記事などを表示しているもの)、PC用では 管理画面の設定 や FC2の変数を使うことで簡単に利用できるようになりましたが、スマートフォン用テンプレート では その機能がまだ使えません。
そのうち仕様が変わるかな という気がしなくもありませんが、先日 ユーザーさんから 「関連記事を表示できたら...」 と質問がありましたので、その方法を探して2つ試してみました。
追記 (2012/07/12) :
関連記事リスト スマホ用でも動くように変わったようです(^_^;) そのうち.. は翌日でしたw
最終的に 「Google AJAX Feed API 」 を利用して 同一カテゴリーの新着記事を表示する という方法がスッキリしましたので、紹介します。
リストに “表示中の記事” が含まれている場合には 区別できるようにもしてみました。 カテゴリーのRSSフィード と javascript を使っていますが、PC用で使う 関連記事リスト とほぼ同様に使えると思います。
関連記事リストの設置方法 (FC2ブログ スマートフォン版)
1. スマートフォン用テンプレート の表示したい場所に ソースを追加
個別記事ページ表示エリア(<!--permanent_area-->) の <!--topentry--> ~ <!--/topentry--> の間に入れておけばOKです。
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
var xmlUrl = "<%url>?xml&category=<%topentry_category_no>"; // feedのURL
var setNum = 7; // 表示件数
var setID = "feed"; // 表示させる箇所のID
google.load("feeds", "1");
function initialize() {
var html = '';
var feed = new google.feeds.Feed(xmlUrl);
feed.setNumEntries(setNum);
feed.load(function(result) {
if (!result.error){
var container = document.getElementById(setID);
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var title = entry.title; // 記事タイトル取得
var link = entry.link; // 記事のリンクを取得
// 日付を取得し年月日を整形(使ってないので削除してOK)
// var publishedDate = entry.publishedDate;
// var pubDD = new Date(publishedDate);
// yy = pubDD.getYear();if (yy < 2000) { yy += 1900; }
// mm = pubDD.getMonth() + 1;dd = pubDD.getDate();
// var pubDate = yy +'年'+ mm +'月'+ dd +'日';
// 表示する部分を整形
if(entry.link.match(/blog-entry-<%topentry_no>/)) {
html += '<li>' + title +'</li>';
}
else {
html += '<li><a href="' + link + '?sp ">' + title +'</a></li>';
// ?sp はお好みで... PC からでもスマホ版で開きたい場合には 入れておく。
}
}
container.innerHTML = html;
}
});
}
google.setOnLoadCallback(initialize);
</script>
<div class="kanrenbox">このカテゴリーの新着記事
<ul id="feed">
<li>読み込み中</li>
</ul>
</div>
// でコメントアウトしている部分 はサンプルでは使っていないので、削除してOKです。 関連記事リストに 日付を追加したい場合などには それを利用してください。
記事数が少ない場合(50件以下など) や 記事番号が変則的になることの多い場合、この条件式 if(entry.link.match(/blog-entry-<%topentry_no>/)) では足りないかもしれませんが、その場合は blog-entry-<%topentry_no>.html まで追加しても良いかも。 ただ、テストした感じだと .html まで加えると何故か重くなってしまうようなので、デフォルトでは省略して書いてます。 取得できる日付データは 2012年7月7日 のような形式で FC2の 2012年07月07日 とは形式が異なるので、条件を追加するなら 記事タイトルくらいかも。。
入れる位置のイメージ
スマホ用共有テンプレート 『sp_custom』 『sp_ari_custom』 『sp_pattern』 の場合、このようなソースになっていますので、この範囲内に1ヶ所のみ追加すればOKです。
それ以外のテンプレートでも 似たような場所があるはずなので探してください。
<!--permanent_area-->
<!--▼▼個別記事ページ▼▼-->
<!--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』 の場合の設定例 を載せておきます。 以下のような項目が入っているので 緑文字部分 のみを スタイルシートに追加してください。
/*================================
記事装飾 (削除可,自由に追加してください)
================================*/
.kanrenbox,
blockquote {
margin: 20px 5px 20px 10px;
padding: 10px;
overflow: auto;
background: #f5f5f5;
font-size: 13px;
line-height: 1.3;
border-left: 4px solid #ccc;
}
もしくは ↓ こんな感じの設定でもいいかも。。 私のは大体こんな感じです。 一行分だけ表示して はみ出す部分は ... と省略されます。
実際のページ
.kanrenbox ul {
margin: 0 !important;
}
.kanrenbox 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;
}
3. 関連記事の表示件数設定 は RSS の件数以内で
各カテゴリーのRSSフィード 例えば → ./?xml&category=22 を利用して表示していますので、最大表示件数は 「RSSの設定」 で設定している表示件数以内なら指定可能です。
キーワード検索 : 関連記事リスト FC2ブログ スマートフォン テンプレート javascript
スポンサーリンク
「投稿記事件数」 「総コメント数」 「実質コメント数」 の表示を入れてみました。 前から 総記事件数 は表示させていましたが、もう少し目立つ所に表示させ モチベーションアップ と コメントし易さ みたいなものに繋がればいいかなぁと思っています。
総記事件数 と 総コメント数 はどこでも表示可能 実質コメント数 は 全記事一覧ページ <!--titlelist_area--> でのみ表示可能
実際のページ (全記事一覧ページ)
※総記事件数,総コメント数 はトップページにも表示しています。
「総コメント数」 はスクリプトを使わず、変数 だけでも表示出来ちゃいますよ! とても簡単なので、良かったら使ってみてください。
1. 総コメント数 の表示方法 (どのエリアでも表示可能)
これまでに投稿されたコメント数 (最新のコメントが非公開 や 承認待ちコメントの場合を除く コメント総数) を表示させるものですので、削除したコメントなども 件数 に含まれています。 つまり、削除したコメントなども含めた件数 を表示します。
総コメント数 <!--rcomment--><%rcomment_no> <!--not_edit_area--><!--/rcomment--><!--rcomment--><!--/not_edit_area--> <!--/rcomment--> 件
コメントには番号が付けられていますので、投稿されたコメントを新着順に一覧表示させる変数 <!--rcomment--> を使って、その最新のコメント番号 <%rcomment_no> 1件を表示させます。 ただ、本来の変数の使い方だと設定している件数分 繰り返し表示されてしまうので、変則的方法 にしてあります。 同様に トラックバック総数 も表示可能です。
総トラックバック数 <!--rtrackback--><%rtrackback_no> <!--not_edit_area--><!--/rtrackback--><!--rtrackback--><!--/not_edit_area--> <!--/rtrackback--> 件
2. 実質コメント数 の表示方法
実際に反映されているコメント数 を表示します。 削除したコメント(含む 記事を削除したもの) や コメント受付終了にしたものなどのコメント数 はカウントされません。
追記 (2013/06/02) :
全記事一覧ページに仕様変更(1ページの表示件数が 旧500件毎→ 現100件毎に変更)があり、総記事件数が 100件以下でないと 実質コメント数 は正しくカウントできません。
<!--titlelist_area--> が存在しないテンプレート(全記事一覧ページが FC2共通のページに移動するもの) では使えません。(カスタマイズして作れば使えます)
<!--titlelist_area--> が存在するテンプレートで、且つ 記事件数が 500件以内であれば、全記事一覧ページ でのみ表示可能です。 記事件数が 500件を超えている場合、全記事一覧ページにページ送りが発生するので、これを使っても殆ど意味がないと思います。
<!--titlelist_area-->
<script type="text/javascript">
Tc=<!--titlelist-->+<%titlelist_comment_num> <!--/titlelist--> ;
document.write('実質コメント数 '+Tc +' 件');
</script>
<!--/titlelist_area-->
3. 総記事件数 の表示方法 (どのエリアでも表示可能)
[ 関連記事 : 総記事件数 を表示 (親子カテゴリー対応版) ]
投稿した記事件数 を表示します。 <%archive_count> を利用しています。
<script type="text/javascript">
Ac=<!--archive-->+<%archive_count> <!--/archive--> ;
document.write('投稿記事件数 '+Ac +' 件');
</script>
実際の適応例 (まとめて設定したい場合の方法)
【 プラグイン部分に表示させたい場合の一例 】
<script type="text/javascript">
// <![CDATA[
Ac=<!--archive-->+<%archive_count><!--/archive-->;
document.write('<li>投稿記事件数 '+Ac +' 件</li>');
document.write('<li>総コメント数 <!--rcomment--><%rcomment_no><!--not_edit_area--><!--/rcomment--><!--rcomment--><!--/not_edit_area--><!--/rcomment--> 件</li>');
<!--titlelist_area-->
Tc=<!--titlelist-->+<%titlelist_comment_num><!--/titlelist-->;
document.write('<li>実質コメント数 '+Tc +' 件</li>');
<!--/titlelist_area-->
// ]]>
</script>
【 上図 全記事一覧ページ用 】
ちょっと邪道なソース... あくまでも参考まで。
<!--titlelist_area-->
<!-- ▼全記事一覧▼ -->
<div class="entry_title"><h2>日付順の全記事一覧 <span style="font-weight:normal; font-size:16px"><%template_copyright_date>~2008</span><script type="text/javascript">
// <![CDATA[
Ac=<!--archive-->+<%archive_count><!--/archive-->;
Tc=<!--titlelist-->+<%titlelist_comment_num><!--/titlelist-->;
document.write('<span style="display:block; padding-top:10px; font-weight:normal; font-size:13px">(投稿記事件数 '+Ac +' 件 , 総コメント数 <!--rcomment--><%rcomment_no><!--not_edit_area--><!--/rcomment--><!--rcomment--><!--/not_edit_area--><!--/rcomment--> 件 ,実質コメント数 '+Tc +' 件)</span>');
// ]]>
</script> </h2></div>
(中略)
<!-- ▲全記事一覧▲ -->
<!--/titlelist_area-->
ちなみに... 実質コメント数が 総コメント数より かなり少なくなっているのは、テンプレサポート窓口(1) のコメントが増えてページが重くなり過ぎたため、40件程度 整理させてもらったことと、スパムコメントを削除していること などが関連しています。
私の場合、コメントは「ブログ更新の活力」 にもなっているので、これからもお気軽にコメントいただけると嬉しいです。 (但し、スパムは止めてね!) では。
キーワード検索 : コメント 変数 FC2ブログ
スポンサーリンク