TOP > つぶやき > ブログのテンプレートをレスポンシブのものに変更しました。

ブログのテンプレートをレスポンシブのものに変更しました。

Posted by cometiki on  

寺脇康文さん イラスト 妄想 『ゴゴスマ』出演 2014年1月24日

ブログテンプレートをレスポンシブにしよう!


私はHTMLなどの知識が、ほとんどないので0からテンプレートを作るのは、苦手です。
その上、FC2ブログには独自の変数(?)というものまであって、頭は混乱するばかり。
もっぱら共有テンプレートから、ダウンロードして使わせていただいています。

今回テンプレートを変更した理由は、レスポンシブデザインにするためです。

Sponsored Links


詳しくないのでザックリした説明になりますが、パソコンからでも、スマートフォンからでも、タブレット端末からでも、いい塩梅で表示されるデザインを「レスポンシブ」と言うのだとか。

これからは「レスポンシブだー!」という記事を読んだので、「そうなのか!」と思いテンプレートを変更しました。


その中で見つけたのが、作者:MD[mysticdiary]さんの『DIVISION』。
ダウンロードページの詳細には、レスポンシブ…といった記載はないのですが、mysticdiaryさんのサイトを読んでみると、レスポンシブデザインっぽい!
(DIVISION以外にも、レスポンシブデザインのものがいろいろあります!)

 >参照:SELECT A TEMPLATE - MysticDiary

「こうしたいときは、ここを変更してください」と、細かいアドバイスも書かれているので、とても参考になりました!


あとは自分の好みで、文字サイズや、見出しタグの装飾部分を整えて完成。
メニューバーが欲しかったのですが、作り方がわからず挫折してSNSボタンの一部を「目次」に変えて、別ページにメニュー一覧をまとめてみました。

しかし「やっぱり、タイトル下にメニュー欲しい!」と思って、試行錯誤の末それっぽいものを取り付けたのですが…これが上手く動作しているか、自分のパソコンとスマホからしか確認できないので、不安です。


スマホ用のテンプレートを削除して、レスポンシブで統一!


PC用のテンプレートを、レスポンシブのものにしたものの、FC2ブログにはスマホ用のテンプレートの設定もあります。

PC用とスマホ用で、それぞれテンプレートが異なるので、PC用のテンプレートだけ変更しても、同じテンプレートで表示されません。
mysticdiaryさんのサイトに、解決策が書かれていました。

スマホでPCサイトを表示させるには、
フォーラムの方で回答がありましたので参考にしてみてください。
http://blog.fc2.com/forum_community/topic/12605/88964/

ちなみに、上部に出る青いバーを消すには、cssに
#change_mobile {
display:none;
}
と加えると消えます。

 >引用元:共有申請しました〜 - MysticDiary



フォーラムの方の回答どうりに設定してみると、TOPページからはPC用のテンプレートで、スマホ用に調整されたものが表示されました。
しかし、各ページのURLから開くと、スマホ用のテンプレートが表示されるのです。

そこで参考にさせていただいたのが、liztrashさんのサイト。

 >参照:PCとスマートフォンのテンプレートを共有する方法 - Photoblog By Liztrash


書いてある通りにしたら、各ページのURLからでもPC用のテンプレートで、スマホ用に調整されたものが表示されました!!

ただしこれも、自分のスマホでしか動作確認ができていません。
もしもブログを開いてみて、「ちゃんと表示されてないよ?」と思われましたら、下記にある「拍手ボタン」やcometiki(こめちき)のTwitterで、状況を教えていただければ幸いです。
どうぞよろしくお願いします。
関連記事
該当の記事は見つかりませんでした。