当ブログをレスポンシブ対応にしました

responsive_1.png私の使っているFC2ブログはPC版・スマホ版・携帯版で別々のテンプレートを設定するスタイルなのだが、2ヶ月位前にレスポンシブデザインに対応している事を知った。これは早々に移行しなければ、と行動を起こし始め今日に至る。
  ※レスポンシブデザイン~PC・タブレット・スマートフォンなど、複数の異なる画面サイズを表示の判断基準にし、ページのレイアウトやデザインを変化させるデザイン。

移行の一番の理由はスマホ版の広告である。PC版はサイトの一番下にテキストの広告が入るだけという非常に慎ましいものなんだが(一ヶ月以上更新してないとでっかい広告が入ってしまうが)スマホ版は左の写真の通り。真ん中当たりの赤い矢印から下が広告。広告あり過ぎっしょ。(これでも外していい広告は取り除いたり、デフォルトで上の方にあるのを下に移したりしている)昔から気にはなってはいたんである。
二番目にスマホのテンプレートはサムネイルとタイトル等しか表示されていないので、記事を読むには一回クリックしなければならないというのも不親切なインターフェイスだなぁというのがある。(スマホのテンプレートって大抵こうだけど。)

※スマホ版のスクリーンショットが異様に長いもんで、本文ここでうーんと空白があきます・・・m(_ _)m



















あと半分(苦笑)
















さてテンプレートを検索して吟味して「black-navbar 作者:tmin [mypace75]さん 」というのを追加してみる。今のサイトデザインが気に入ってるので出来る限りそれに近づける作業をする。
responsive_2.pngresponsive_3.png左がオリジナル、右が修正後。内部のコードを利用させて貰ってるだけで見ての通り全然別物。こうやってテンプレートをかなり自由に作り込めるのがFC2ブログ最大の魅力である♪ ここまでは大して時間はかかってないのだが、ナビゲーション・バーの表示がなかなか上手くいかずこの後ネット検索とトライ&エラーを繰り返す事となる・・・。

尚このテンプレートはBootStrapを使用している。随分色々な機能があるのだが自分が主に使ったのは以下の通り。
  ※BootStrap~CSSフレームワークと呼ばれるもので、一般的によく使われるナビゲーションバー・ボタン・フォームなどが既に用意されている。cssやjsなどのファイルがセットになっている。
①レスポンシブデザイン
PC表示だとメニュー(カテゴリ・月別アーカイブ等)と本文の2カラム・レイアウトだが、スマホ表示だと1カラムに変わり、本文の下にメニューが配置される。
②ナビゲーション・バー
PC表示だと画面上にカテゴリ・月別アーカイブといったバーが入る。左サイドバーに表示しているメニューと一緒なのでいらないと言えばいらないんだが。(プロフィールだけは設置出来ずにいる)そしてスマホ表示だとナビの形が変わり右のボタンを押すとするするっと下にメニューが伸びるようになる。今までのスマホのテンプレートで配置されていたのとほぼ一緒。
③画像や表のレンポンシブ対応。取り敢えず直近5件の記事だけ直しておいた。スマホで表示した時に画像が縮小されてPC表示と同様のレイアウトになる。
④ポップアップ・スライダー。今は画像をクリックすると別のタブが開いて大きい画像を表示するという方式なんだが、本文の画像クリックで別ウィンドウ(モーダル・ウィンドウ)が現れて且つ矢印ボタンで次の画像を見れる。(スライダー)こちらはBootStrapだけでは表現出来ず別途「Bootstrap Lightbox」というプラグインを追加している。←まだ思うように動きません・・・(.泣)

随分こねくり回していた割に80%の完成度ってところだが、もう飽きてきたので(笑)取り敢えず変更に踏み切った。しばらく経てばまたやる気になると思うのでこれからも地道に作業していきます・・・。

※7/19 追記
「Bootstrap Lightbox」は結局動かず、次いで本家「Lightbox2」を入れてみるがこれも動かず、「ColorBox」を入れてようやくポップアップ・スライダー実装出来ました!!! 
月別アーカイブ

プロフィール

ヘローン

管理人:ヘローン
・性別:男性
・血液型:A型
・生年月日:1964年
・自己紹介:マッサージ屋の店長してます。50代独身。仕事に追われるばかりで、今はアパートに帰ってビールをしこたま飲むのが唯一の楽しみ。

趣味:映画鑑賞、アニメ鑑賞、プロレス鑑賞、洋楽カラオケとエアギター、ガンプラと鉄道模型、PCとスマートフォンいぢり

好きな作家:松本零士、平井和正、押井守

好きな音楽:産業ロック、プログレ、70'80'ポップス全般

聖地:新横浜ラーメン博物館

好きな服装:古き良きアメリカン・カジュアル

好きな言葉:男には酒こそ最高のなぐさめ

○ニックネーム「ヘローン」は
松本零士大先生「銀河鉄道999」の「夜のない街」より拝借
heroon.blog57.fc2.com/blog-entry-131.html

○写真は押井守大先生の「うる星やつら」の「メガネ」
の画像を勝手に拝借。
あの無意味に大仰なセリフ回しをこよなく愛しています・・・。

twitter.png