FC2ブログでレスポンシブテンプレートを設定したらプラグインにこのCSSを追加しておくと便利

投稿 2018年07月21日
2
カスタマイズ
TipsCSS初心者向け

特定のプラグインをおすすめする記事ではありません (´・ェ・`)

最近リリースされたテンプレートは公式・共有を問わずほぼほぼ レスポンシブwebデザイン 一色という感じですね。
固定幅(ソリッドデザイン)もまだまだ需要はあると思いますが、それは置いといて。

レスポンシブテンプレートを選んだら、プラグインにCSSを一つ追加すると良いですよ、というお話。

プラグインがはみ出す原因はwidthの指定

プラグイン というのはweb一般のそれではなく、FC2ブログ内専用ウィジェットという狭義です。
レスポンシブデザインというのは 画面幅が狭くなったらそれに応じて各コンテンツも小さくなります。
レスポンシブテンプレートはブラウザ横幅を狭めたら横に並んでいたサイドメニューが下へ移動(「落ちる」のではなく「移動」「並び替え」です)します。
それを見て「なにこれ困る!カラム落ちじゃん! 」と思った方は レスポンシブテンプレートを選んじゃダメ ですよ。
タブレットやスマートフォンからの閲覧者さんに快適に見てもらうためにそうなる(縦に並び替わる)のですから、それが気に入らない場合は選ぶべきではありません。
素直に 固定幅PCテンプレート + スマホ専用版 という形で運営されることをおすすめします。

カラムの構成だけではなく、メインコンテンツは間違いなく画面幅によって広がったり狭まったりするわけですが、場合によってはサイドメニューの幅も変化することがあります。そのあたりの仕様は製作者次第(私はサイドメニュー幅は一定にしています)

例えばサイドメニューの横幅が パーセンテージ( % ) で指定されている場合ですよね。
仮に30%指定だとして、画面幅1500pxの時の30%は450pxですが、画面幅が800pxの時の30%は240pxです。
もしあなたのプラグインがサイドメニューからはみ出しているのならば、そのプラグインに max-width: 100%; を追加しましょう。
さすればはみ出さなくなります。

はみ出す原因というのはまずもう決まっているのですが、横幅にpxなどの絶対値で数値を指定している からです。
先程の例で言うと、仮にプラグインに

<div style="width: 300px;">
プラグイン内容
</div>

こんな指定がされているとすると、画面1500pxの時はサイドは450pxありますので収まってますが、画面800pxの時は240pxしか無いのですから60pxはみ出します。
以下のようにすればそれを防げます。

<div style="width: 300px; max-width: 100%;">
プラグイン内容
</div>

まとめ

テンプレートが「レスポンシブである」と理解しており、「レスポンシブとは何か」もわかっているという方は良いんですが、なんとなくデザインだけで選んで「レスポンシブとか意味知らない」という方が陥りやすいんですね。
最初からはみ出していれば気づきますけども、画面を狭めないと気づかないことがレスポンシブでは色々とあります。
レスポンシブが何なのか知っているという方はたぶん最初に動作検証すると思います。
何かしらのコンテンツがはみ出したら せっかくのレスポンシブが台無し なので、プラグインだけではなく記事内容もチェックしてみましょう。
大抵これで直ります。

YOU MAY ALSO LIKE
もっと見る
vanillaice (Akira)
vanillaice (Akira)

2 COMMENTS

There are no comments yet.

べえ  

こんにちは。

記事に関係ないのですが、今日からクロムが6.8に
バージョンアップして、非SSLのページだと
「保護されていない接続です」と表示されるように
なりました。ヤルヤル詐欺かと思っていましたが、
1年ほど掛けてついに実行されましたねw

2018/07/25 (Wed) 21:10
vanillaice (Akira)

Akira  

To べえさん

え。マジですか。
今からアップデートします(笑)
28日だと思ってました ^^;
後ほど追記しますね。

-----
ホントですね。出るようになってます。
そのうち赤字になるんでしょうね (´・ω・`)
FC2独自ドメインのSSLが間に合いませんでしたね。うわー ( ̄∀ ̄;)

2018/07/26 (Thu) 01:28