webコンテンツを徹底強化!WordPressサイト制作とプラグイン&テーマ情報・メンテ/エラー対応から、PHP/CSS/javascript、動画・音・イラスト等制作まで扱うコラム
マルチメディアコンテンツ制作読んどけ☆コラム

【サイトスマホ対応】fc2ぶろぐで、スマホ表示時の検索タグって使えないの?回答→レスポンシブを使えばokです。

      2021/02/25

【サイトスマホ対応】fc2ぶろぐで、スマホ表示時の検索タグって使えないの?回答→レスポンシブを使えばokです。

今回は、fc2ぶろぐの検索タグを、スマホ向けで使える簡単な方法を行ってみます。 特定のブログサービス向けですが、fc2ぶろぐは『GitHubで、サーバーインストール型のオープンソース版』もあるので、普及する可能性はちょっとあります。そのブログシステムで、スマホからアクセスしたときにでも検索タグを使えるようにしてみます(しかも簡単に)。さっそくやってみましょう。

fc2ぶろぐで、スマホ表示時の検索タグって使えないの?

fc2ぶろぐでは、スマホからアクセスしたときには、『スマートフォン版テンプレート』が適応されるようになっています。 例えばスマホテンプレート『new_basic_red』の場合は、この表示になります。公式テンプレートには色違いで『basic_black_st』などがありました。メニューなどは慣れれば使いやすいかもしれません。CSSなどのコードが長いわりには、ヘッダー内に展開などで、表示速度SP:100点近くでます(実証済み)。

しかし、fc2ぶろぐスマートフォン版テンプレートでは、弱点もあります。 アドレス形式がスマートフォン版テンプレートとPC版テンプレートで異なるため(?spがついたり、個別記事url形式が違う)、リンク情報をうまく取得できず、トップページなどに飛ばされてしまうという点です。現在はジャンルによってはスマホユーザーの方がアクセスが増えるので、タグをスマホで使えないのは困るかもしれません(読者も、管理者も)。

この件に関しては、検索していたら見つけたブログ『Web Memo. SE』で、詳しく述べられています。

スマホテンプレートでは動作しないFC2ブログの「ユーザータグ検索」を可能にするカスタマイズ http://128bit.blog41.fc2.com/blog-entry-415.html
『ちょっと特殊なリンク設定が必要』『同じサイト内のGoogle検索を間に挟む』みたいな難点があるようです。

『url形式が違う』や『タグが、スマホテンプレートでは使えない』などは、解析やユーザーのページ移動、検索インデックスなどでデメリットが出てきます。これらの課題を、レスポンシブで対応してみます。

fc2レスポンシブ対応テンプレート&タグ表示変数で、スマホでもタグ検索ができるようにしてみる

まずは、『テンプレートの設定→公式テンプレート追加』と進んで、レスポンシブ対応のPCテンプレートを選択します。タグが使えて、スマホ版とurlが一緒にできるというメリットがあります。 管理人は『Diary_2column』という、レスポンシブ対応公式テンプレートを選びました。シンプルで、オリジナルデザインにカスタマイズするのも行いやすいからです。

そのほか、管理画面の設定画面で『スマートフォン版表示設定を無効』という設定を行います。 これをやっておかないと、スマホアクセス時に、タグ非対応のスマートフォン版テンプレートが表示されてしまうので、エディットの意味がなくなってしまいます。

あとは、タグ表示用の変数を記載します。 <a href="/?tag=<%topentry_tag_list_parsename>"><%topentry_tag_list_name></a>だけだと、表示しないので『!--topentry_tag--』みたいな表記もつける必要があるようです (!--topentry_tag--みたいなところをカットしても、タグが出ない仕様)。右寄せにしたかったから、コードはtext-align:right;という表記があります。これはテンプレートや好みに応じて変更してください。githubにあげたコードを貼ってみます。

あとは『--PCエントリーフッター-- div class="entry_footer cf"』部分の、カテゴリなどが表示されているボックスの下にタグ表示のコードを貼りました(ここはお好み位置に表示してください。または、タグクラウドプラグインなどもご検討ください。)。 ユーザーエージェントをiosにしたり、スマホでアクセスしてみたりしても、タグが出て、タグがついた記事一覧ページも使えるようになりました。デザインは、好みに応じてエディットしてください。

あとがき・まとめ・課題

メリット的には『url形式が1つなので、解析などで管理しやすい』『スマホユーザーもタグをたどって記事を見つけられる』などがあげられ、いいこと尽くしのように見えます。しかし、軽量化やキャッシュを使わなければ、表示速度の面で、スマホテンプレに劣るという形になります

テンプレートを軽量に作ること・CSSを圧縮すること・非同期読み込み・不要な機能はカットなどのテクニックを使って、表示速度面でも改善できると、デメリットをカバーできると思います。

なお、オープンソース版fc2blogは、githubにあります。興味がある方は、こちらもご覧ください(自分で契約している有料サーバーなら、広告もでません。)。 https://github.com/fc2blog/blog


【カテゴリ】 - お役立ちツール・SNS etc
【タグ】 -

  関連記事

【METAタグで新サイトに転送】meta http-equiv="refresh"で転送・WPサイトでの活用・301リダイレクトとの使い分けとは?

今回は、管理人がネットサーフィンしていて見つけた、サイトの転送& ...

広告なしYouTube Premium(月額1,180円・将来音楽配信と統合)は高い?他動画・音楽サイト比較と、無料版のうざい広告への対処

今回は、動画のyoutubeが、広告なし有料動画プランと、音楽配 ...

インスタグラム乗っ取りが発生したときは、通知メールからパス変更・メルアドを戻す・二段認証する

今回は、管理人の運用しているインスタグラムアカウントで、内容を書 ...

soundcloudのいいね機能を使って、自分のお好みの作業用BGMプレイリストを作る

今回は、管理人がプログラムとかCSSコード書いてるときに、作業用 ...

【無料プラン有】カンタン予約フォームが作れる『RESERVA』を使ってみる

今回は、導入しようとすると結構大変な『予約フォーム』を、サクっと ...

無料でもこんなに使える!オンラインストレージ(ネットにファイル保存)いろいろ

今回は、覚えておくとファイル保存時に便利な『無料でも結構使えるオ ...

pinterest(ピンタレスト)をwebサイトに埋め込んで、インスタ画像ウィジェットみたいに使う方法

今回は、管理人も利用している画像共有ツールpinterest(ピ ...