自分でできる簡単更新!オリジナルのホームページ制作ならkayokiseki-design

  

FC2のレスポンシブテンプレートカスタマイズ

Web制作していて分からないことがあると、ネットで検索すればどなたかがブログに書いてくれています。Web関係のブログは「備忘録」とは言いながらも、誰かが同じ目にあって時間を無駄にしないように…というささやかな親切で成り立っています。わたしも、困った方がいらっしゃった時にそのご恩返し…と思いこのブログを書いています。もしあなたがブログを持っていないなら、ぜひ今年は始めて見ませんか?


無料で開設できるフリーブログ、わたしは色々な所で建ててみましたが、カスタマイズのしやすさ・管理画面の使い勝手・過密時間のサーバー負荷など総合的に見ると、FC2ブログが好きです。そこで今回は、今必須のスマホ対応・レスポンシブのテンプレートが2015年8-9月にFC2公式から公開になっているので、その簡単なカスタマイズのご紹介です。ぜひブログが古いテンプレートのままの方や、まだ持ったことのない方は始めてみましょう!

[広告]


今回ご紹介するFC2ブログ公式のレスポンシブテンプレートは、「Diary_1column」と「Diary_2column」というものです。「Diary_2column」はこんな感じ。「Diary_1column」はこの右カラムがないデザイン。使いやすいのはサイドカラムのある「Diary_2column」のほうでしょうか。


黒いアイキャッチ部分を黒のまま使おうという方はおそらくいないでしょう。ここに画像を入れたいですよね?ここは見るデバイスによって段階的にサイズが変わっていく部分ですのでサイズが変わった時も画像がちゃんと表示できるようにします。

ほかにも所々色を変えるだけでオリジナリティは醸し出せるので、今回は以下の4点のカスタマイズを行います。


「もっと自分はこうしたい!」という方もいらっしゃると思いますが、レスポンシブデザインの怖いところは、今現在はちゃんと表示できているからと言って、この先新しい規格のデバイスが出たり、ブラウザがバージョンアップした時にちゃんと表示できるかは、正直その時になってみないと分からないのです。今回わたしはFC2公式から出ているテンプレートを使用するのは、公式だけあってそのリスクを極力避けているデザインになっているし、今回ちょっとだけいじる部分もそういったリスクのない部分です。


ということで、ほんの少しのカスタマイズですが、外側をリスクをおかしてまでオリジナルにしなくてもいいとわたしは思います。だってブログですから、内容勝負です!


まず、新規にブログを作る方も、テンプレートを変更する方も、スマホ対策の環境設定をちゃんとしましょう!

公式のPC版テンプレートから「Diary_1column」か「Diary_2column」を選択したら、「環境設定」より「ブログの設定」を行います。

■記事の設定

表示記事数の設定は、PC版と月別検索ページ、カテゴリー検索ページでしておきましょう。この時に考えて欲しいのは、「スマホで見る時にストレスない記事数」です。デフォルトだと5記事。わたしならスマホで見ていて5記事ごとしか表示されないならイライラしちゃいますね!

何記事がいいのかはブログによって異なると思います。とにかくタイトルにひっかっかる記事を読んでくれればいいと質より量のブログなら20記事くらい出てもいいですし、たまにしか書かないけれど固定ファンがいて全部読んで欲しい!というブログなら10記事くらいかな?スマホでページャーやページネーションで移動するのって面倒くさいので、多めにしておきましょう!


■SNSボタンの設定

スマホならSNSを使っていない方はまずいないでしょう。いいなと思ったブログをSNSで紹介するというのは、わたしもよくやります。SNSボタンは大事!これはあなたが好きなSNSのボタンを置けばいいでしょう。


■メタタグの設定

「メタタグ」???内容からすると「OGP設定」のことですね。「SoyCMSでOGPを設定する」で説明していますので、気になったらご覧ください。「有効にする」を選んでおいて吉!


■スマホ表示設定

このエントリーでもっとも大事なのがこれ(笑)レスポンシブはPC版デザインをスマホでレイアウトを組み替えて表示させるわけですから、スマートフォン版テンプレートの表示は「無効にする」を選びます!


さて、設定が無事終了したので、さっそくデザインをオリジナルにいじってみます。[スタイルシート編集]内のCSSを修正、もしくは加筆していきます。


①投稿日の装飾

決めているのは次のCSSです。

#section(Diary_2columnはこのあとに#mainがつきます) .inner #entry .entry_date,
#section(Diary_2columnはこのあとに#mainがつきます)  .inner .entry_more .entry_date {
・・・
color: #FFFFFF;/*文字色は白*/
・・・
background: #222222;/*背景色は#222*/
・・・}

投稿日の文字色や背景色をお好きなカラーコードに書き換えるだけでOK。簡単ですね!


②メインの背景色

メイン部分は記事の長さに面積が比例するので、サイトの色彩イメージに大きく影響を与えます。デフォルトは白ですが、ほんのちょっと色をプラスするだけでも面積が大きいのでがらっと雰囲気が変わります。色が濃すぎると視力の悪い方には読みにくくなりますのでお気を付けください。

html, body {
width: 100%;
・・・
}

この中に、

background-color:#変えたいカラーコード;

を加筆します。


③フッターの背景画像

上記の例では、グリーンの地に白の網かけをした200px四方の画像を作成して敷き詰めています。もちろんカラーコードでもよいのですが、footerは面積も少ないので画像で遊んでもさほど重くならず遊べる部分です。決めているのは次の部分です。

#footer {
width: 100%;
background: #F6F6F6;
・・・
}


■色を変える

backgroundをお好きなカラーコードに書き換えるだけでOK。


■画像に変える

背景に敷き詰める画像を作成し、画像アップローダーでアップしてそのフルパスをコピーします。

background-image:url('画像のフルパス');

を加筆します。


④アイキャッチ画像

黒いアイキャッチ部分、FC2さんもなんとかするようにデザインしてくれているところです!これを最後に持ってきたのは、上の3点よりちょっとだけ難しいのですが、ここまでやって来たら少しは理解してもらえると思うからです。CSSって本当に面白いんです!だから「書かれた通りやってできた」というより、「なるほどそういう意味なのか!」と少しでも理解をしてカスタマイズして欲しいと思います。CSSを見ると次のようになっています。

#header {
width: 100%;/*幅はブラウザ幅100%*/
height: 220px;/*高さは220px*/
padding: 160px 0 0 0;/*余白は上に160px設ける*/
background: #333333;/*背景は#333の色*/
background-size: cover; /*背景画像の大きさはcover(→HTMLクイックリファレンスさんを参照)*/}


■色を変える

もうあなたはできるはずです!backgroundをお好きなカラーコードに修正します。


■画像を使う

アイキャッチ部分は写真や自分で描いたイラストを使いたいというケースがほとんどだと思います。

制作する画像サイズですが、一般的に普及しているPCディスプレイ幅のうち大きい方で1680pxくらいとして、大きなPCで見たときにも画像が粗く見えないように幅は1680pxで作ります。高さは、heightの220px+paddingの上160px=380pxとなります。

では早速1680*380の画像を作って、FC2の画像アップローダーでアップし、そのフルパスをコピーして、CSSに次の2行を書き足しましょう。

background-image: url('画像のフルパス');
background-repeat:no-repeat;


いざブログを見てみます。あれれ?幅を狭くしていくと、うまく画像の出て欲しいところがでません…。


これはbackground-imageのデフォルトの基点がleft top(左上基点)だからです。このデフォルトのまま絶対に見せたい部分を隠れないように画像を制作するのは、中央に表示されるブログ名とのバランスも考えるととても難しいです。ということでスマホで見える画像部分を逆算して、絶対に見せたい部分をそこに集めるような画像を用意します!!面倒くさい!そうです、既存のテンプレートを使ってリスク最小でカスタマイズするのは面倒くさいのですwww


さて、ではその画像の規格はいかに?iphone6Plusを縦にして見たときのディスプレイ幅は414pxです。ならば絶対見せたい画像幅は414pxと考えるのかといえばそうではありません。スマホサイズ用に指定されたCSSを見ていくと、

/* 567px以下用 */
#header {
height: 160px;/*高さは160px*/
padding: 60px 0 20px 0; /*余白は上に60px下に20px設ける*/}

とあるので、スマホでは高さ160+余白上60+余白下20=240pxの高さまでアイキャッチ部分は縮みますが、縮み方はbackground-size: coverなので縦横比を保ったまま最大表示可能エリアまでです。ということは、380px:240px=絶対見せられる幅:414pxで約654pxというところ。

ということで、次のような画像を準備しましょう!真ん中の青い部分654pxがスマホサイズになっても絶対に見せられる画像部分です。画像アップローダーでアップし、フルパスをコピーし、先ほど書いたCSSのフルパスを修正します。


最初の#headerのCSSに次のように書き加えます。

background-position: center top;/*中央上基点*/

いかがですか?ちゃんとスマホでも隠れずに表示されていることと思います。


このように既にあるCSSに加筆修正する形ならば、新しいデバイスが出てもブラウザがバージョンアップしても、レイアウト崩れの心配が概ねありません。ぜひ挑戦してみてください!

[広告]

2015スマホにおけるファビコン・ウェブクリップアイコン ブログTOP 2016年のWebデザインは?
Hotentry
Blog Post
Archives
クリックして上に戻る