attention admin about comments trackbacks you may also like

いまやレスポンシブな時代

2015年12月16日
レスポンシブ
13
レスポンシブ ブログテンプレート FC2ブログ
■ この記事は 2016/11/22 に再編集致しました。


いまやWebデザインは レスポンシブデザイン な時代になりつつあります。 
そう、ブログでもホームページでも。

弊ブログをいまパソコンから覗いて戴くと





サイドバーメニュー部分はブログフッターに





こんな感じで表示されております。
これを画面の狭いスマホで見ますと、、、



[ 画像クリックで GO & STOP ]


[ 画像クリックで GO & STOP ]


こんな具合に表示動作します。

弊ブログで言いますと、パソコンでは記事欄が4つ横に並んでいたものが、小さい画面のスマホやタブレットからですと、自動的にスルスルっと画面サイズに合わせて記事欄が可変して表示されるんです。
ブログのサイドバーメニューは記事欄下に連なって表示されているのがお分かりでしょう。
そうそう、このスマホ画面内には上下や左右のスクロールバーが表示されますが、実際にはスマホやタブレット画面にはそれは表示されません、画像サンプルを作成上の都合で表示されているだけですので気にしないで下さい。
もっとスッキリと表示されます、細かい部分に目が向く人も居るでしょうから一言添えておきます(笑)

これをたった1つの「PC用テンプレート」だけで実現するんです。
したがってスマホ用テンプレートは必要なくなります。
それが レスポンシブデザイン でして、もう既にFC2ブログでも利用出来るんです。


レスポンシブデザインなテンプレートを利用するメリット


① PC用テンプレートでスマホ用の表示も含んでる為、スマホ用テンプレートは不要になる。

② PC用テンプレートにはアクセスカウンターやアクセス解析を設置してあるが、スマホ用にはそれらの設置を忘れていて、カウンター数やアクセス解析が正しく行われなかったことを解消出来る( こういうミスをしているブロガーさんがとっても多いんです )

いまやWebアクセスはパソコンからよりもスマホアクセスの方が多いんですから、それらのカウントをしてなかったらブログ運営実績として大きな損失です。

③ PC用・スマホ用とまったく別々なテンプレートである為、デザインの統一性がなかったことが解消出来る。

④ Googleが今年4月よりレスポンシブデザイン推奨とし、評価もそれを重視する動きになった。


等のメリットがありますが他にもあることでしょう。


レスポンシブデザインなテンプレートを利用するデメリット


デメリットと書きましたが、それは感性的なことですからデメリットとは言えないかもしれませんが、、、

① スマホやタブレット画面上で、ブログの全体構造がパソコンで見えてるように一目で把握できない為に違和感を感じる人も居る。


まあ、慣れってことですよね~(笑)
デメリットって言えばこんなことくらいでしょう。

そうそう、書き添えておきますが、レスポンシブなブログテンプレートって、今まで利用してたテンプレートの何処かをチョコチョコっと弄くったらレスポンシブになるってことではありません (;^_^A アセ

FC2ブロガーさんでしたら、各人のブログ管理ページにログインして左メニューの

「テンプレートの設定」→「共有テンプレート追加」

の中から、ご自身で膨大な数あるテンプレート群の中より「レスポンシブ」に作成されているテンプレートを選択して設定します。
ところが、今はまだそのテンプレート検索の機能に「レスポンシブ」を検索する項目がありません(爆)

もう既にFC2の「公式テンプレート追加」の中のテンプレートにもレスポンシブテンプレートが今日現在3つほど公開されるようになったんですから「レスポンシブ」って言う検索項目を増やしてしかるべき!って思うんですけどね。


FC2「共有テンプレート追加」 にあるお勧めレスポンシブテンプレート


テンプレート検索の「作者」の欄に

『vanillaice000』

と入れて検索してみて下さい。
『vanillaice000』さんのものは殆どがレスポンシブで、デザイン的にも優秀で女性向きデザインのテンプレートもふんだんにあります。

サポートブログは
The other way round 様( 管理者 Akira様 ) 


ついでに(笑) FC2の「公式テンプレート追加」にあります

Diary_2column
Diary_1column
simple_white_resp

の3点もレスポンシブテンプレートになっております、デザインはいまいちですが。

もうこれからはブログもレスポンシブな時代なんですよ~。

これからレスポンシブテンプレートの導入を考える皆さんに、大事なポイントを明記しておきます


選ぶレスポンシブテンプレートには「スクロールボタン(最低でも、トップ・フッターへの2つのスクロールボタン)」を備えているテンプレートを選択することをお勧めします。
レスポンシブテンプレートのブログをスマホで閲覧した場合は縦長のブログ構造になりますから、ブログ画面を指で上下にスクロールさせる作業はとても大変で疲れます(笑)
ですから、スクロールボタンをタップすることで、スルスル~っと、一気にページトップに飛んだりフッターへ飛んだり出来ることは、ブログ閲覧して下さる読者さんの手助けになります(笑)

スクロールボタンの配置がないレスポンシブテンプレートを選択してしまうと、閲覧者さんは何度も何度も指でスクロールさせてトップに戻ったりしなければなりませんから、面倒であなたのブログ閲覧数が下がってしまうかもですって言うのは極端かもですが(爆)

そして、もう1つオマケ的なことを言いますと、ブログのサイドバーをワンタップでスッと呼び出せる第三のスクロールボタン(middleボタンとでも申しておきましょう)が備わってると、それはそれはブログ閲覧が更に楽に楽しくなりますよ。





こんな感じで、サイドバーが横からスルスルっと出てくるタイプのレスポンシブテンプレートもあります。




[ サイドバー(ブログのメニュー欄)の呼び出しボタン形状はデフォルトテンプレートよりカスタマイズしてあります ]

関連する記事
ぼっちん
Author: ぼっちん
記事に関わらないコメントでもOKですからね~ ^^

コメント(13)

There are no comments yet.

メグ  

2015/12/17 (Thu) 01:11

はいはい~!

なかなか快適ですよ~。

メリットの②ほんとびっくりですわ。
記事を更新した日のカウント数が3倍くらいに跳ね上がりましたよ!!
今までだいぶ損してたかも~~。
今やPCよりスマホから読まれてるのが多いってこと実感しました!

デメリットはやはりサイドスペースが下に行ってしまうことかな…
アダルトブログなので『18禁ですよ~。』てのを最初に持って来たかったのだけどね。

縦向きは読み易いけれど、スマホを横向きにしたらPC版の表示になるってのは出来ないかしら~~。

あーー。
あと、やっぱ広告がうっとうしいわぁぁぁぁぁ。ヾ(*`ェ´*)ノ

ぼっちん  

2015/12/17 (Thu) 08:29

メグたんへ

コメントありがとです~♪

メリットの②ほんとびっくりですわ。
記事を更新した日のカウント数が3倍くらいに跳ね上がりましたよ!!
今までだいぶ損してたかも~~。
今やPCよりスマホから読まれてるのが多いってこと実感しました!

ねっねっ! すんごい効果でしょ(笑)
でも、言い換えれば、今までメグたんが旧のスマホテンプレにカウンターを付け忘れてたってことが如実に露呈しちゃったって意味だからねぇ (^_^; アハハ…
まあ、実はそれはメグたんだけのことじゃなくて、FC2ブロガーさんの大半がそのミスをやっちゃってるのよ (;^_^A アセアセ
PCテンプレにカウンターやアクセス解析を仕込んだら、自動的にスマホテンプレにも適用されるって勘違いしちゃってるの。
だって、それぞれが別々のテンプレなんだからそうなりようがないことに気がつかないままにブログ運営しちゃってる(笑)

デメリットはやはりサイドスペースが下に行ってしまうことかな…
アダルトブログなので『18禁ですよ~。』てのを最初に持って来たかったのだけどね。

ああ、なるほどなるほど、それはあるよねぇ。
あのね『vanillaice000』さんのレスポンシブテンプレートに、サイドバーがスマホ画面の左横からニュルン♪って出てくるタイプがあるのよ。
画面左上の「ハンバーガーボタン(三本の横線のボタン)」をクリックするとサイドバーが現れるのよ(笑)
こういう動作のテンプレが他のデザインのにもあるからスマホでプレビューしてごらん。

縦向きは読み易いけれど、スマホを横向きにしたらPC版の表示になるってのは出来ないかしら~~。
(〃^▽^〃)oあはははっ♪ うんうん(^-^) それは私も思ったことがある うんうん(^-^)
まあ、テンプレをそう作ることも可能だと思うけど、テンプレ作者さんにとっては面倒くさいよぉ(笑)
それでなくてもレスポンシブなテンプレって複雑構造な設計なんだから (^_^; アハハ…

あーー。
あと、やっぱ広告がうっとうしいわぁぁぁぁぁ。ヾ(*`ェ´*)ノ

(笑) 私のこのブログって広告は表示されてないでしょ~(笑)
有料にしなさいってば、メグたんお金持ちなんだからさぁ (〃^▽^〃)oあはははっ♪

ぼっちん  

2015/12/17 (Thu) 11:21

メグたんへ その2

あのね
『vanillaice000』さんの「BeHappy」ってテンプレートだと

http://blog-imgs-86.fc2.com/o/o/p/oops0011/2015-12-17-BeHappy.gif

このGIFアニメのように、サイドバーがスマホ画面の左からニュルン♪って登場するよぉ(笑)

あと「GirlOnWire」もそういうタイプです。

http://blog-imgs-86.fc2.com/o/o/p/oops0011/2015-12-17-GirlOnWire.gif

メグたんのブログなら、むしろこっちの方が雰囲気的に似合いそうだね ヽ(^^ ) ヨシヨシ

参考まで。

メグ  

2015/12/18 (Fri) 03:19

うんうん。(。'-')(。,_,)

ニュルン♪て出るタイプ(なんかやらしい表現ですにゃ)のにしようかだいぶ迷いました~。
海のやつね!ネットの海って感じで…

けどニュルン♪のタイプはボタンに気付いてくれないと見れないなーとか思いました。

今の雪の結晶のは綺麗でかなり気に入りました~。
春は桜のとか、季節ごとに変えようかなーって思ってます。

>有料にしなさいってば、メグたんお金持ちなんだからさぁ (〃^▽^〃)oあはははっ♪

あひゃひゃひゃひゃ(≧∀≦*)言われちゃったな~~。
入金の時に本名とか必要なければ検討してみます~。

ぼっちん  

2015/12/18 (Fri) 08:57

メグたんへ

おはよ~です ^^

けどニュルン♪のタイプはボタンに気付いてくれないと見れないなーとか思いました。
ああ、なるほどね、サイドバーをニュルン(笑)って開く「ハンバーガーボタン」が閲覧者さんに認識されにくいかもって心配だね。
確かにまだ認知度低い(笑)かもしれないけど、レスポンシブデザインの世界じゃ一般的なのよ(笑)
そのボタンデザインをちょっと弄くって「サイドバー」なんて表示にしたら分かってもらえるでしょうけど(笑)

それと「アダルト」のマークをブログタイトルの下辺りに配置するカスタマイズもしたら良いんだし(笑)
いまの冬バージョンテンプレに似合うマークをね うんうん(^-^)

今の雪の結晶のは綺麗でかなり気に入りました~。
春は桜のとか、季節ごとに変えようかなーって思ってます。

w(゜o゜)w オオー! さすがメグたん v-218

入金の時に本名とか必要なければ検討してみます~。
うんうん(^-^) それはメグたんの希望通りになりますよ。
有料料金を支払う為に申し込みでカード決済じゃなくて「銀行振り込み」を選択すると、振り込み人名を「英数記号」で処理されるから、本名は使いません(笑)

FC2IDログイン
http://fc2.com/login.php

にログインして「決済/FC2ポイント」欄を開いて情報読んでみてね~ ^^
有料にすると、うざい広告全部その日のうちに消えるからね~(爆)

ロックママ  

2016/08/18 (Thu) 21:07

No title

ぼっちんさん、こんばんは。
メニューボタンの開閉の不具合を教えていただいたロックママです。
ありがとうございました♪♪

どこにお礼コメントしようかと思いましたが、
インパクトのある「いまやレスポンシブな時代」記事に~
(私はだいぶ出遅れてますが・・・(笑))
2015年の記事でも今見てもおお!となったので。

おすすめテンプレート情報もありがとうございます!
素敵な共有テンプレート達は
プレビューで自分のブログにあてはめてみるだけでも
おお!こんな機能が!!と楽しいですね♪

お役立ちな記事がたくさんのぼっちんさんのブログを
読ませてもらって色々勉強したいと思います(#^_^#)感謝!




ぼっちん  

2016/08/18 (Thu) 21:41

ロックママさんへ

(^o^)/ハーイ 早速のコメントをありがとうございます ^^

先ほどiPhoneSE+iOS9.3.4からブログ拝見しましたら、ちゃんとメニューの「開・閉」の両方の動作が正常に直ってました。
さすがですね~ (^_-)-☆パチッ

公式テンプレにこのような洒落たグローバルメニューのレスポンシブテンプレがあったっけ? なんて不思議に思ってた(笑)んですけど、ロックママさんが機能追加なさってたんですねぇ、素晴らしいです。
私も共有テンプレを「弄くり倒す」(笑)ことが大好きでして、デフォルトのままでは使ったことがないんです (^_^; アハハ…

私はもっぱらレスポンシブテンプレに凝ってまして、もうレスポンシブから抜けられなくなっちゃってます(爆)

これからも、ちょくちょくブログ覗かせて戴きますね~♪

hina  

2016/11/09 (Wed) 14:04

初めまして

ぼっちんさん、初めまして。
拍手コメントをありがとうございました。

ブログのテンプレートで分からないことがあり、いろいろと検索しているうちにこちらのサイトに辿り着きました。

レスポンシブ対応テンプレートというものがあるというのを知ったのもこちらです。ブログのスマホビューでの改行で困っていたのでとても助かりました。オススメのテンプレート作者をありがとうございます。おかげでブログでのストレスが解消されました(^∀^)

分からないながらも設置していたグーグルアドセンスの新しい広告も、そういうことだったのね!と理解できました。というか、やっと機能が発揮できるようになりました。

これからも、度々お邪魔させていただきますね♪

ぼっちん  

2016/11/09 (Wed) 14:53

hinaさんへ

hinaさん、コメントをありがとうございます ^^
hinaさんブログにコメント欄がなかったものですから、拍手コメントで長々と失礼致しました (^^ゞポリポリ

私はAkiraさんのレスポンシブテンプレートと出会ってしまって(笑)からは、そのWebデザインと高度な構造的機能性の魅力から抜けられなくなってしまってます。
そして、それらをいろいろにカスタマイズして勝手に楽しませて戴いてます(笑)

これからも、度々お邪魔させていただきますね♪

ハーイ(^O^")/ ありがとうございます。
もし記事にご質問等ありましたら、遠慮無くコメント下さい ^^

hina  

2016/11/27 (Sun) 19:05

先日はありがとうございました

ぼっちんさん、こんばんは
先日はブログにコメントを下さってありがとうございました。

ぼっちんさんが教えて下さって、分からないことがクリアになりました(^∀^)

今のテンプレはとても気に行っているのですが、コメントとトラックバックの2つともの表示があるといいなと思います

Akiraさんのテンプレをいろいろと見て思案中です
自分でもカスタマイズ出来るといいのですが、なかなか笑

お礼が遅くなってしまい、すみませんでした

ぼっちん  

2016/11/27 (Sun) 19:24

hinaさんへ

hinaさん、こんばんは~
またまたコメントをありがとうございます ^^

今のテンプレはとても気に行っているのですが、コメントとトラックバックの2つともの表示があるといいなと思います

でしょ~(笑)
テンプレート「Belong」はシンプルで軽快に動いてとても良いんですけど、hinaさんと同じで私もちょっと物足りなさを感じちゃう部分があって、ダウンロードしてカスタマイズもしてあるんですけど、あまり利用してないんですよね (^^ゞポリポリ

Akiraさんのテンプレをいろいろと見て思案中です

あのですね、FC2ブログの管理ページにログインしている状態でしたら
http://admin.blog.fc2.com/control.php?mode=design&process=user&author=vanillaice000
このURLにアクセスすると、Akiraさんだけのテンプレート群が表示されますからいろいろとプレビューして選ぶと楽しいですよ。
素晴らしいデザインのレスポンシブテンプレートばかりですから、きっと目移りしちゃって選ぶのも大変でしょうけど(笑)

自分でもカスタマイズ出来るといいのですが、なかなか笑

HTMLは、頭で論理的に覚えるよりも、弄くり回して感覚的に「ああ、こういうことなんだぁ」ってやってると楽しく覚えられるんですけどね(笑)
でも、テンプレートのHTMLを弄る時には、必ず「複製」を取って、そちらを弄るようにしないと取り返しの付かないことになっちゃうから気をつけて下さいね (^_^; アハハ…

そうそう、いま弊ブログのトップページをパソコンから覗いて戴くと、Akiraさんのテンプレートの「Decoy」をカスタマイズして動画を埋め込んでありまして、けっこう迫力あるから一度パソコンからトップページも覗いてみて下さいね~ v-392
iPhoneからでも動画は見えるようにしてありますけど、小さくて迫力不足ですから(笑)

お礼が遅くなってしまい、すみませんでした

いえいえ、そんなの気にしなくていいんですって (^^ゞポリポリ
ご丁寧にありがとうございます ^^

一ノ瀬まい  

2017/09/17 (Sun) 15:09

使わせていただきましたっ

レスポンシブテンプレート使わせていただきました!ありがとうございます!!
ところでお尋ねしたいのですが、スマホでもパソコンテンプレートで表示させる為に、テンプレート(スマホ)の設定はどうするのが良いのでしょうか?
また、プラグインもパソコン向け設定をそのまま利用するにはどうしたら良いでしょうか?
お忙しい中大変申し訳ありませんが、何卒ご返信の程よろしくお願い申し上げます。

ぼっちん  

2017/09/17 (Sun) 15:57

一ノ瀬まいさんへ

まいさん、いらっしゃい ^^

ところでお尋ねしたいのですが、スマホでもパソコンテンプレートで表示させる為に、テンプレート(スマホ)の設定はどうするのが良いのでしょうか?

もう既にまいさんのブログは、スマホから閲覧してもキチンとレスポンシブテンプレートで問題なく表示されておりますよ~(笑)
私のiPhoneSEから確認してみましたが、しっかりレスポンシブテンプレート(まいさんが仰ってるパソコンテンプレート)で表示されております ^^

また、プラグインもパソコン向け設定をそのまま利用するにはどうしたら良いでしょうか?

はい、レスポンシブテンプレートはPCテンプレート1つでスマホでも同じテンプレートで表示されるものですから、プラグインもそのまま使えてるんです。
もう「スマホ用テンプレート」のことは何も意識しなくて良いんです(笑)
実際、もう既にスマホ用テンプレートは使ってないのですから d(-_^)good!!

ただ1つ気になることがあります。
まいさんのブログの一番上にFC2の「ブログ内検索」という横型のバーが表示されておりますよね。
この検索バーはレスポンシブ未対応だから「非表示設定」にすることをお勧めしますよ。
方法は
------------------
『 FC2ブログのレスポンシブテンプレートで誤った設定をしておりませんか? 』
http://oops0011.blog.fc2.com/blog-entry-167.html
------------------
の記事の後半に書いてありますから、その操作をしてみて下さいね~♪