704. FC2ブログ「スマートフォン用の幅が狭い問題」が解決しました!

FC2ブログ「スマートフォン用テンプレート」の大多数は、小さめのスマートフォンを縦向きにして

閲覧する幅に固定されているため、スマートフォンを横向きにしたときやタブレットで閲覧すると

以下のように左端に偏って狭い幅のまま表示され、拡大(ピンチアウト)することもできません。


basic_blue.png
スマートフォンを横向きにしたときのイメージ(FC2公式テンプレート basic_blue)


そこで、どのようなサイズのスマートフォン・タブレットでも画面いっぱいに表示されるタイプを

「公式テンプレート」「共有テンプレート」の中から探してみましたが…

「公式テンプレート」には該当無し、「共有テンプレート」の中で以下の4点だけが該当しました!


「共有テンプレート」 作者 arinogotokuatumarite 様
テンプレート名 sp_pattern  
テンプレート名 sp_custom  
テンプレート名 sp_ari_custom
カスタマイズ○,画像差し替え○,再配布×

「共有テンプレート」 作者 anthy000 様
テンプレート名 jQuerySky



そして、4点の中から画像差替えがOKでデザインも気に入った sp_ari_custom をお借りし

header画像 のみを差し替えて以下のように設定してみました。

2本の指を広げるように動かせば拡大(ピンチアウト)も可能です。


無題
スマートフォンを縦向きにしたときのイメージ(FC2共有テンプレート sp_ari_custom)


2_2016030809473248e.png
タブレットのイメージ (FC2共有テンプレート sp_ari_custom)


t_sp_header.png
sp_ari_custom 元の header画像(360×66ピクセル)


896_2016022620263848b.jpg
差し替えた header画像(360×66ピクセル)


画像を差し替えるときは、上記のように元の画像と同じサイズの画像を用意し、

ファイルをアップロードして URL を記録しておきます。

http://blog-imgs-88.fc2.com/e/t/e/eternalhighroad/896_2016022620263848b.jpg

そして以下の「HTML編集」の青い部分を削除して記録した URL を貼り付け「更新」すると完成です。


HTML編集
[ sp_ari_custom ] のHTML編集


最近はPCの利用が減り、スマートフォン・タブレットが主流になりつつありますが

機種を問わず閲覧しやすいテンプレートを制作するのは難しいことだと思います。

優れたテンプレートを提供してくださった arinogotokuatumarite 様に感謝申し上げます。

関連記事
プロフィール
カテゴリ
管理人へのメールはこちら

初めての方は、送信される前に
カテゴリ「メールの返信について」を
ご一読くださいますようお願いします。


e-mail


メールは公開されません。

CalendArchive
CASIO-Calendar
QRコード
QR
template
・template サブカルシート HiRo
・background-image kaze-sora.com
・header-image JJGallery
リンク