FC2ブログのスマホ用テンプレートカスタマイズ 関連記事追加とリンク修正

スマホ用テンプレートを変更したついでに少々カスタマイズしたので今回はその件。

pepetomeの流浪日記 スマホ版
まずはこちらが今回の仕様。個人的に気に入っています。
元になったのは下のテンプレート。

FC2ブログ スマホ用テンプレート sp_ari_custom
sp_ari_customを作成した、paruparuさん運営ブログ ありのごとくあつまりて

カスタマイズもやり易いのでお勧めのスマホ用テンプレート。


ところでFC2ブログでは関連記事を表示できますが、私は表示を"テンプレート変数のみ"にしています。
"テンプレート変数のみ"にすると自分が表示させたい場所に表示させることが出来るのですが、そうするとスマホ用では関連記事が表示されません。(*"個別ページの記事下"などに設定していればスマホも表示される)
そのため、パソコン用に表示させている関連記事のHTMLやCSSのソースコードをスマホ用のテンプレートに貼ればいいんじゃないの?って思っていましたが、実際にそのまま貼ってみると関連記事自体は表示されるものの、関連記事のリンクがスマホ用ではなく、パソコン用なので使い勝手がいまいち。

これまではスマホ用のテンプレートをカスタマイズするのは面倒で放置していたのですが、最近はスマホからのアクセスが増えてきたこともあり、関連記事がないのは(あってもパソコン版へ遷都してしまう)利便性が悪いと思っていたのでテンプレートを変更したついでにいろいろいじってみました。
最初、そういった方法は検索でちょっと調べれば出てくるだろと安易に考えていたものの、"テンプレート変数のみ"とした場合のスマホ用に関連記事を表示させる方法を書いているサイトが見当たらない。
が、なんとか自力で試行錯誤しながら解決できたので、今回はそのやり方と個人的に前から気になっていたスマホ版で一部リンクがパソコン版になっているのを修正したことについて書きたいと思います。


ここで表示しているHTMLタグ(ソースコード)について
・修正する部分が分からない場合はテンプレートの編集画面でキーボードの ctrl + f を押せば検索窓が現れるのでキーワードとなるタグ(例えばblog_nameや赤文字部分すべて)を入力すれば分かると思います。
・テンプレートのHTMLの記述は1行で書かれていたり余白がありますが、ここでは改行及び余白を削除しています。パッと見、分かり難いかもしれませんが、ご了承願います。
*修正したHTMLタグ(ソースコード)は実際に貼り付けて確認しているのでそのままコピペして使って頂いても動作的に問題ないはずですが、コピペする場合は念のためテンプレートをコピー(複製)してから修正してください。


スマホ用テンプレートに関連記事を表示させる


ここでは関連記事を自分の好みの場所に設置する方法については書いていません。そのやり方については私も参考にさせてもらった下のブログが詳しいので参照されたしです。

Paroday 記事下に同じカテゴリの記事を表示する関連記事リスト機能を実装

さて、関連記事を"テンプレート変数のみ"で表示させる場合は下のようなタグを貼り付けていると思います。


<!--relate_list_area-->
<dl class="relate_dl">
<dt class="relate_dt">関連記事</dt>
<dd class="relate_dd">
<ul class="relate_ul">
<!--relate_list-->
<!--relate_entry_other-->
<li class="relate_li"><a href="<%topentry_relate_url>"><%topentry_relate_title></a></li>
<!--/relate_entry_other-->
<!--relate_entry_now_showing-->
<li class="relate_li_nolink"><%topentry_relate_title></li>
<!--/relate_entry_now_showing-->
<!--/relate_list-->
</ul>
</dd>
</dl>
<!--/relate_list_area-->

で、これをそのままスマホ用のテンプレートに貼ると、関連記事のリンク先がパソコン用になってしまいますが、赤字部分を下の青字のように変更するとリンクがスマホ用になります。

<a href="<%topentry_relate_url><%tail_url>&amp;sp">


ところで関連記事の設定を"個別ページの記事下"等にしているとスマホ版で表示されるリンクは下のようにスマホ用のやつがちゃんと表示されます。
http://pepetme.blog.fc2.com/blog-entry-87.html?sp

しかし、上の青文字に変更した場合に表示されるURLは下のようになります。
http://pepetme.blog.fc2.com/blog-entry-103.html?no=87&sp

上のふたつはURLが異なるものの、同じ記事。
これだと記事が重複するので(パソコン用も合わせると3つも存在することになる)SEO的にどうなのかと思わなくもないですが、私がいろいろ試した範囲ではこうするしか方法がなかったです。
ただ、パソコン用とスマホ用のふたつのURLが存在するFC2ブログの場合、すでに重複しているといえば重複していますし、重複自体は検索順位に関係ないと言っている方もいます。問題ないのかな...


スマートフォン用プラグインのリンク先を変更


FC2ブログではスマートフォン用のプラグインも各種用意されていますが、それぞれリンク先がパソコン用になっています。そのためかは知りませんが、他のFC2のブログを見るとプラグインを使っていない方が多いです。
ここでは利用頻度が高いと思われる「月別アーカイブ」、「最新記事」、「カテゴリ」の修正("コンテンツ用HTMLの編集"を修正)について書きます。


はじめにスマートフォン用プラグイン「月別アーカイブ」のHTMLタグ。


<ul class="plugin_list">
<!--archive-->
<li>
<a href="<%archive_link>" style="color:&plugin_tcolor;">
<%archive_year>年<%archive_month>月 (<%archive_count>)
</a>
</li>
<!--/archive-->
</ul>

この赤文字部分を下の青文字に変更するとリンクがスマホ用になります。

<a href="<%archive_link><%tail_url>?sp" style="color:&plugin_tcolor;">


次にスマートフォン用プラグイン「最新記事」のタグ。


<ul class="plugin_list">
<!--recent-->
<li>
<a href="<%recent_link>" title="<%recent_title>">
<em style="color:&plugin_tcolor;"><%recent_title></em><br />
<span><%recent_year>年<%recent_month>月<%recent_day>日</span>
</a>
</li>
<!--/recent-->
</ul>

やはりこれも修正したいという事で、いろいろ試したところ赤字の部分を下の青字ようにするとスマホ用のリンクになりました。

<a href="<%recent_link><%tail_url>?sp"><%recent_title>


スマートフォン用プラグイン「カテゴリ」のタグ。


<ul class="plugin_list">
<!--category-->
<li>
<a href="<%category_link>" style="color:&plugin_tcolor;">
<%category_name>(<%category_count>)
</a>
</li>
<!--/category-->
</ul>

これも上の赤文字部分を下の青文字に差し替えるとスマホ用になります。

<a href="<%category_link>?sp" style="color:&plugin_tcolor;">


このプラグインのリンク修正はFC2スマホ用テンプレート"sp_ari_custom"で動作確認済みで実際に私も使っていますが、私が以前使っていたFC2の公式テンプレート"new_basic_red"の場合は、この修正だけを行ってもリンク先がスマホ用になりません。(め、面倒くさい...)
が、いろいろいじってみたところ、いくつかの修正で改善されました。"new_basic_red"はそのダウンロード数からもかなりの方が利用していると思われるので参考までにその方法を以下に書きます。
ちなみにそれ以外のテンプレート(共有テンプレートなど)ではこれらの方法で修正できるかを確認していないので何とも言えませんが、だいたいはここに記した方法(または多少いじれば)で出来るのではないかと思います。


new_basic_redのカスタマイズ(リンク先修正)


*FC2公式スマホ用テンプレートのHTML記述はnew_basic_redとほぼ同じだったのでFC2公式スマホ用テンプレートなら"new_basic_red"以外でもこの修正で問題ないはずです。


new_basic_redのスマホ用プラグイン「最新記事」のリンク修正


まず、プラグインをスマホ用リンクにするための下準備。
new_basic_redのテンプレート内のメニュー部分(ブログタイトル左側の▽のところ)のHTMLを修正。

<ul id="blog_menu">
<!--プラグインメニュー--><!--spplugin_first-->
<li>
<a href="<%url>?mp=<%spplugin_first_no><%tail_url>"><%spplugin_first_title></a></li>
<!--/spplugin_first-->
</ul>

赤字の部分を下のように修正。

<a href="<%url>?sp&mp=<%spplugin_first_no><%tail_url>">

new_basic_redはテンプレートのここを修正しないと、プラグインのHTMLをいくら修正してもダメでした。

次にプラグインを修正。
「月別アーカイブ」と「カテゴリ」は上で書いたものと同じ修正になるので省きますが、「最新記事」がちょっと違います。上にも掲載しましたが「最新記事」のHTMLは以下の通り。

<ul class="plugin_list">
<!--recent-->
<li>
<a href="<%recent_link>" title="<%recent_title>">
<em style="color:&plugin_tcolor;"><%recent_title></em><br />
<span><%recent_year>年<%recent_month>月<%recent_day>日</span>
</a>
</li>
<!--/recent-->
</ul>

上の赤文字部分を下の青文字に修正。

<a href=<%recent_link><%tail_url>?sp>

これで「最新記事」のリンクもスマホ用になります。
ちなみに上の項では同じ「最新記事」の修正でも "<%recent_title>"を付け加えたままにしていますが、new_basic_redでそうするとエラー(404 Not Found)となってしまいます。よく分かりませんが、こうすると改善しました。う~む、難しい...


これで完了。
ついでなので"new_basic_red"のリンク先の修正を他にもいくつか。


ホーム(ヘッダーのブログタイトル、ヘッダーメニュー内のホーム、個別記事のホーム)のリンク部分


ブログタイトル メニュー内ホーム 個別記事ホーム
それぞれ、黄色い線で囲った部分。

それぞれのHTMLタグは以下の通り。

(ブログタイトル) <h1><a href="<%url>"><%blog_name><a><h1>
(メニュー内) <li id="home"><a href="<%url>"><span>ホーム</span></a></li>
(個別記事) <li class="goto_home"><a href="<%url>">ホーム</a></li>

それぞれの赤文字部分を下の青文字に修正するとスマホ用へのリンクになります。

<a href="<%url>?sp">


個別記事タイトル下側のカテゴリー


個別記事カテゴリ


<li class="posted">カテゴリー:
<a href="<%topentry_category_link>">
<%topentry_category><a><li>

赤字部分を下の青文字に変更でスマホ用へのリンクになります。

<a href="<%topentry_category_link><%tail_url>?sp">



2014年4月19日
この記事を公開した当初、トップページのページナビゲーション(ページ送り)のリンクがパソコン版になっているのを修正するソースコードを掲載しましたが、再度確認したところ不具合が出ているのに気が付いたため削除しました。


最後に


ここに出てくる <%tail_url> はFC2のテンプレート用 変数一覧に「携帯・スマートフォンのプライベートモードの際に必要なURL」と書かれていますが、これを付けただけで大丈夫な箇所もあれば、関連記事や最新記事といったプラグインのように <%tail_url>&amp;sp ( <%tail_url>&sp ) や <%tail_url>?sp としないとダメな場所もあって結構面倒。
FC2ブログに限りますが、もしもスマホ版でブログ内リンクがパソコン用に遷都してしまうのを改善したいと思っている方は手を加えてみてはいかが。


最終更新日 2014年5月2日


関連記事
この記事へのコメント

もっち : 2014/09/11 (木)

検索してこちらに辿りつきました。
『プラグインをスマホ用リンクにするための下準備』
をしただけで直りました。
ありがとうございました!
覚書として自分のブログ記事にリンクさせていただきます。

pepetome : 2014/09/11 (木)

お役に立てたようでなによりです。
こちらこそありがとうございました!

管理人のみ通知 :


*「投稿する」ボタンを押した先にメールアドレスを入れる項目がありますが、メールでの返答はしていません。