HOME Twitter PC RSS 

スマートフォン版 ありのごとくあつまりて

スマートフォン用の共有テンプレートを 3作登録 しています。 FC2ブログユーザーさんは、是非使ってみてくださいね。 詳細はこちら

HOME > ブログカスタマイズ中級 > スマホ用テンプレートでも関連記事リストが使えるように!

スマホ用テンプレートでも関連記事リストが使えるように!

http://arinogotokuatumarite.blog19.fc2.com/blog-entry-226.html
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

サンプル

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

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

関連記事リストの設定,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>&amp;sp"><!--/relate_entry_other--><%topentry_relate_title><!--relate_entry_other--></a><!--/relate_entry_other--></li>
<!--/relate_list-->
</ul>
</div>
<!--/relate_list_area-->

リンクは ?no=記事番号 に張られます。 &amp;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;
}


スポンサーリンク

楽天写真館
今すぐ使える特別クーポンプレゼント!!
初回限定プリント1枚4円 50枚200円!送料無料など

記事URL(共通)
http://arinogotokuatumarite.blog19.fc2.com/blog-entry-226.html

Hatena Google Bookmarks Google+ Yahoo! Facebook Twitter FC2ブログランキング
コメントを見る 0件 コメントを書く PC版で読み直す

CATEGORY RSS

カテゴリ : ブログカスタマイズ中級

カテゴリーリスト (記事件数)

ブログカスタマイズ中級 (15) / ブログカスタマイズ上級 (30) / FC2共有テンプレート (16) / FC2マニア・仕様関連 (21) / アクセス解析・SEO対策 (18) / ブログ雑記・その他 (8) / TV・NET・GAME (12) / 子育て・日々の出来事 (10) / 得するお役立ち情報 (15) / 無料素材のリンク集 (11) / 無料ソフト・フォント等 (10) / Twitter・ブラウザ関連 (26) /

PC版へ変更
トップページへ
ページ先頭へ戻る

※2014-04-29まで FC2ブログ有料プラン を適応中です。