vanillaice (Akira)

vanillaice (Akira)

apple-ipad-551502_1280.jpg
「サイドバーの横幅をもっと大きくしてほしい」
というリクエストがありましたので ちょっと今その要件に見合うようなものを...
と考えながら作業中ですが
レスポンシブデザインでのサイドバー横幅は良いとこ320が限界かな と (´・ω・`)

プラグイン

というのがありますよね
ここでは狭義での
「FC2ブログ内でテンプレートの『プラグイン』と呼ばれているもの」
についてです

なんでサイドバーを広くしたいか という理由は恐らく

・見やすさ重視
プラグインの幅が既存サイドバーよりも大きいから

この二点ではないだろうかと思います
下の太字の方 こちらについての結論から

プラグインの横幅指定はpxではなく%で

理由はやはり「レスポンシブデザインである」ことに尽きます
レスポンシブの基本はまず
・リキッドレイアウト (コンテンツ幅可変)
であることですよね それプラス
パソコン以外のデバイス(スマホ, タブレット等) で問題なく操作・閲覧できること
これが大前提です
パソコン上ではリキッドになっているけれども スマホから見たらコンテンツが画面を超過している
スマホでは利用できない要素(マウスオーバードロップダウン等)などが含まれていて操作ができない
これはもうレスポンシブとは言えないですよね (´・ω・`)

プラグインの種類 色々ありますけれど
特に多いのが「外部環境を取り込む系プラグイン」
例えばTwitterのタイムライン表示なんかがそれに当たります
他には新着サムネイルを表示させたりするもの
代表的なものに「複眼RSS」など
その横幅がスマホで見た時にはみ出していることがあるんです (´・ω・`)

例えば「iPhone5」まだまだシェアが多いですよね
私も5です
iPhone5の横幅って 320px しかないんです
そこへ
横幅350pxのプラグインを放り込んだらその時点で既に30px超過です

それを避けるのが
pxという具体的数値の単位ではなく %指定 です

width: 100%;

こう指定すればオッケーです
この意味は
「自分が置かれる場所の横幅めいっぱいに自身のサイズを設定する」
ですので 例えばプラグインを置く場所がサイドバーであり 横幅が300pxであるならば
プラグインの横幅も自動的に300pxになる という指定です

---------

ところがレスポンシブというのはパソコンでブラウザ幅を縮小していくと
どこかのポイントでサイドバーが下へ繰り越すものが多いです
(ブレイクポイント と言います)
すると横にあったサイドバーは 下へ移動するとともに
横に配置されていた時よりも 大きな横幅に変更されていることも多いんです

例)

sample


sample2



こうなるとプラグインのwidth:100%;も自動的にそれに倣いますので
なんだか横に広がりすぎておかしな見た目になってしまうことも
それを避けるためには

max-width: 数値px;

これを width: 100%; と同時に設定します
意味としては
「場所いっぱいにサイズを調整するけれども最大値は指定pxまで それ以上は大きくならない」
この二段構えでプラグインの画面幅超過を防ぐことができます

-------

ここで一番始めの
「サイドバーのサイズは良いとこ320px」の理由ですが
プラグインの種類によっては どうしてもpxを使いたいものがあるかもしれませんよね
サイト側のコード発行の際にpx指定必須 とか
%に修正できないプラグインがあるかどうかちょっとわかりませんけれども
(よほどのものは大丈夫だと思われる)
その場合に

「サイドバーのサイズはパソコンでは350pxです」

なんて書いてあるとですね その指定でやっぱり作っちゃうんですよ (´・ω・`)
サイドバーの幅自体はブレイクポイントで変更できますので
スマホでは320以内 という切り替えができますが
みなさんが作成されたプラグインのpx数値を変更することはできません
なので初めからもう超過しないサイズに設定をしておいた方が親切なのではないか と思うわけです(笑)

私のテンプレートについては毎回仕様を記していますが
プラグインサイズを検討する際に参照して頂きたい箇所はここです

sample3



この内寸がプラグイン横幅として指定可能なmaxサイズです
これどういうことかと言いますと
padding という指定がありまして
これを設定しておくと 画面の横幅ギリギリに要素が配置されることを防ぐことができます

例)

padding 未指定の場合



padding を設定した場合




周りに空間があって見やすいですよね
この空間の分幅が削られますので
内寸 を基準にしてください


--------- まとめ ---------

★ プラグインの横幅指定は%で
★ 横幅%指定と同時に max-width をpx指定
★ プラグインをサイドバーへ設置する際の基準横幅は サイドバーの「内寸」


以上 レスポンシブデザインのテンプレートで上手にプラグインを設定するtipsでございました
関連記事

Comments 11

There are no comments yet.
tak  

こんにちは。
BeHappyを愛用させていただいております。

2015/10/09 (Fri) 00:46 | EDIT | REPLY |   
tak  
1024px

こんにちは。
御既知とは存じますが、BeHappyを愛用させていただいております。
以前固定幅か可変幅かということで相談させていただきました。
ゆくゆくカメラを買いなおす計画も有り、もう少し大きく画像を表示したいと思います。
現在は個別記事で元画像800pxが0.8掛けで表示されています。
このテンプレートで横幅1024pxの画像を、ブラウザーをフルスクリーンにした際にそのサイズのまま表示できるようにするにはどうすればよろしいですか?
私の今のpcのモニターの解像度の横は1366pxで、このモニターサイズ内でとりあえず収まる感じにしたいのですが。。。
よろしくお願いします。

ブラウザーフルスクリーン時に1024pxがダメなら1000px、または800pxでもいいのですが。。。

(先ほど間違えてコメント送信してしまいました。すいません。)

2015/10/09 (Fri) 00:57 | EDIT | REPLY |   
Akira  
To takさん

お返事お待たせしました (*_ _)

> 固定幅か可変幅か

これは結局どのような結論を出されたんでしょうか
可変のままですかね (´・ω・`)

> 800pxが0.8掛けで〜

ちょっとこの意味がよくわからないのです ( ̄∀ ̄;)
先回のお話の流れだと90%にして、さらにmax-widthの数値を操作することで800px表示できるようにしたと思うのですけれども (´・ω・`)
(スクショも貼ったと思います)

----------

1366でメインコンテンツを1024ということは単純に計算して
1366-1024=342
サイドコンテンツ(サイドバー)に許される横幅が342しかありませんので、これもうギリギリのラインですよね。
で、今のままの構成だとメインコンテンツの横に360px必要なんです。
全体コンテンツ周りの余白・メインコンテンツとサイドコンテンツの間の余白を含みます。
方法としては

・コンテンツ周りの余白を減らす
・メインとサイドの間の余白を減らす

最低でもこの2つ両方やらないといかんですね (´・ω・`)
ちょっとお待ちくださいね。

2015/10/09 (Fri) 13:56 | EDIT | REPLY |   
Akira  
To takさん

①Ctrl+Fキー検索

#wrapper {
width: 100%;
min-width: 80%;
margin: 0 auto -73px;
}

赤字修正及び追加で以下の通り

#wrapper {
width: 100%;
min-width: 90%;
margin: 0 auto -73px;
padding: 0 15px;
}


②検索

#container {
width: 80%;
margin: 0 auto;
padding-bottom: 80px;
max-width: 1100px;
}

修正

#container {
width: 100%;
margin: 0 auto;
padding-bottom: 80px;
max-width: 1400px;
}


③検索

main {
margin-right: 360px;
}

修正

main {
margin-right: 310px;
}


④検索

/***----- media less than 1100
------------------------------------------***/

@media screen and (max-width: 1100px) {

#container {
width: 90%;
margin: 0 auto;
}

}

上記を削除

⑤検索

/***----- media less than 1024
------------------------------------------***/

@media screen and (max-width: 1024px) {

#container {
width: 90%;
margin: 0 auto;
}

}


/***----- media less than 970 include iPad mini
--------------------------------------------------***/

@media screen and (max-width: 970px) {

#wrapper {
width: 100%;
}

#container {
width: 98%;
}

}


/***----- media less than 854 include Xperia
--------------------------------------------------***/

@media screen and (max-width: 854px) {
main {
margin-right: 330px;
}

}

上記を削除

⑥検索

/***----- media less than 768
--------------------------------------------------***/

@media screen and (max-width: 768px) {

このすぐ下に追加で以下の通り

/***----- media less than 768
--------------------------------------------------***/

@media screen and (max-width: 768px) {

#wrapper {
padding: 0;
}

2015/10/09 (Fri) 14:13 | EDIT | REPLY |   
Akira  
To takさん

上記の修正でこんな感じです ↓

個別記事
http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/2015-10-09%2013.53.56_zps34knbf0a.jpg~original

トップページ
http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/2015-10-09%2013.54.44_zps5yxrbuiy.jpg~original

トップページの方の画像は1024px取れません。
paddingの関係上そうなります。
個別記事の方も左右paddingを設けないと記事がブラウザの左右いっぱいにくっついてしまいます。
そしてこれでもう限界値だと思ってください。
トップページの方も1024に〜 ということですと、テンプレート全体の計算を全てやり直す必要が生じます。
ですのでこれで最終ということでお願いします (´・ω・`)

2015/10/09 (Fri) 14:26 | EDIT | REPLY |   
tak  

Akiraさま
ありがとうございます。
改変させて頂きました。
いつも大変お手数をおかけして申し訳ございません。
大変感謝しておりますm(_ _)m

2015/10/09 (Fri) 16:24 | EDIT | REPLY |   
Akira  
To takさん

いえいえ。どうぞお気遣いなくe-454
急ぎ足でやりましたので、何か不都合が生じましたらお申し付けくださいね。
お疲れ様でしたe-257

2015/10/09 (Fri) 17:21 | EDIT | REPLY |   
ひろ  
このテンプレート

チョーかっこいいっすW(`0`)W

2015/10/09 (Fri) 18:12 | EDIT | REPLY |   
Akira  
To ひろさん

ぴろりん、おはおー ( ゚Д゚)ノ
ちょっと出かけます(笑)

2015/10/10 (Sat) 09:34 | EDIT | REPLY |   
ひろ  

ぴろりん∑(゚Д゚)
誰かと間違えられてるような?笑
このテンプレートが公開されたらダウンロードさせてもらいます
今はnostalgia設定中です!

2015/10/10 (Sat) 10:17 | EDIT | REPLY |   
Akira  
To ひろさん

ぎゃっ!ごめんなさい!e-452
知人と勘違いしました ( ̄∀ ̄;)
大変失礼を致しました (*_ _)

はい。ちょっと先になりますが、よろしくお願いします。

2015/10/10 (Sat) 11:23 | EDIT | REPLY |   

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い
該当テンプレートの専用記事にお願いします。無関係な記事でのコメントはお控えください。
テンプレートカテゴリ