スマホ用テンプレートでも関連記事リストが使えるように！【ありのごとくあつまりて】

FC2ブログカスタマイズ，共有テンプレート，素材リンク集，フリーソフトの紹介など。迷子にならないブログ作りを目指し．．．何か1つでもお役に立てる情報を提供できたらいいなぁと思っています。

この記事に含まれるタグ（Keyword） :
関連記事リスト変数 FC2ブログスマートフォンテンプレート

スポンサーサイト

--/--/-- (--) カテゴリー：スポンサー広告

上記の広告は１ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。

URL　http://arinogotokuatumarite.blog19.fc2.com/blog-entry-.html

--/--/-- ～ | Comment (-) tweet? | ↑ ページ先頭へ ↑ |

前回の記事 FC2 スマホ用テンプレートに関連記事リストを追加する方法では、「スマートフォン用テンプレートでは FC2ブログの関連記事リスト がまだ使えないので、Google Feed API を利用して...」と書いていたのですが、その投稿翌日には（2012/07/12～）仕様が変更されたようで、スマートフォン用テンプレートでも FC2ブログの関連記事リストが使えるようになっていました。

(^_^;) という訳で、前回の方法ではなくてもOK になりましたので、FC2の変数を使う方法なども一応紹介しておきます。前回の方法と殆ど違いはないと思いますが、多少軽くはなるかも。。好きな方を選んでご利用ください。

上図は「テンプレート変数のみ」としていますが、それ以外の場合（「個別ページの記事下」などテンプレートに自分で変数を追加しない場合）でも利用できます。

FC2ブログ関連記事リストの設置方法（スマートフォン版）

1.　スマートフォン用テンプレートの表示したい場所にソースを追加

※「テンプレート変数」を使う場合のみ追加。

個別記事ページ表示エリア（）の  ～  の間に入れておけばOKです。

※「テンプレート変数」を使わない場合、関連記事リストの設定｜FC2ブログ公式マニュアルに載っているようなソースが自動で追加されます。表示場所を選べない上に、PCと同じ表示項目（日付の有無など）になるので、自由度は少し低くなると思います。

<div class="relate_dl">
<ul>

<li>
<a href="<%topentry_relate_url>&sp"><%topentry_relate_title></a></li>

</ul>
</div>

リンクは　?no=記事番号　に張られます。 &sp を追加しておくと　?no=記事番号&sp　になりますので、必要に応じて入れてみてください。不要なら削除してOK。（デフォルトでは入っていませんが、私の共有テンプレートであれば入れておいた方が自然かも。。）

入れる位置のイメージ

スマホ用共有テンプレート『sp_custom』『sp_ari_custom』『sp_pattern』
の場合、このようなソースになっていますので、この範囲内に1ヶ所のみ追加すればOKです。

それ以外のテンプレートでも似たような場所があるはずなので探してください。




（中略）

<div id="entry_box">

（中略：記事内容など）

【自動表示での表示場所】

<div class="entry_category">
（カテゴリー名）
【候補地：1 】
（コメント数・トラバ数）
</div>

</div>

【候補地：2 】





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;
}