2018-10-25 (Thu) 23:05 ✎
本日、申請していたテンプレート [ct_responsive3c] [ct_responsive2c-r（右メニュー）] [ct_responsive2c-l（左メニュー）] の3点が共有化致しました。
1カラムになるとメニューがドロワー表示になり、ドロワー内のメニューは、他を開くと閉じる仕様。
また2・3カラムとも、記事上に表示されていたプラグイン3は、個別記事画面を表示すると記事下に表示され読み易くなります。
トップページのエントリー内 Comment-open でコメントを10件まで表示、個別記事ページの追記記述部分も展開式になっております。
（HTMLソースの削除で非開閉にする事も可）
以下が追記部分です。
← [ct_responsive3c（3カラム）］
← [ct_responsive2c-r（2カラム・右メニュー）］
← [ct_responsive2c-l（2カラム・左メニュー）］1カラムになるとメニューがドロワー表示になり、ドロワー内のメニューは、他を開くと閉じる仕様。
また2・3カラムとも、記事上に表示されていたプラグイン3は、個別記事画面を表示すると記事下に表示され読み易くなります。
トップページのエントリー内 Comment-open でコメントを10件まで表示、個別記事ページの追記記述部分も展開式になっております。
（HTMLソースの削除で非開閉にする事も可）
以下が追記部分です。
レスポンシブテンプレートは表示サイズ可変対応になっておりますので、パソコン・タブレット・スマートフォン等での表示のために、以下の設定をして下さい。
１） レスポンシブテンプレートはパソコン・スマホ共通なので設定を変更する。
PCやモバイル端末等の閲覧で、画面サイズが変化するレスポンシブデザインテンプレートを使う場合、初めに「スマートフォン版の表示設定」を変更して下さい。
管理画面左の『環境設定』 → 『ブログの設定』 →『スマートフォン版の表示設定』を無効にして更新。
２） 検索バーはレスポンシブ未対応なので非表示にする。
FC2ブログ上部に有る検索バーはレスポンシブ未対応なので、画面の表示サイズによっては途切れて表示されてしまうため表示を無効にします。
管理画面左の『環境設定』 → 『ブログの設定』 →『検索バーの設定』で[利用しない]を選択して『更新』。
先ず、上記2点の設定をお願い致します。m(__)m
１） レスポンシブテンプレートはパソコン・スマホ共通なので設定を変更する。
PCやモバイル端末等の閲覧で、画面サイズが変化するレスポンシブデザインテンプレートを使う場合、初めに「スマートフォン版の表示設定」を変更して下さい。
管理画面左の『環境設定』 → 『ブログの設定』 →『スマートフォン版の表示設定』を無効にして更新。
２） 検索バーはレスポンシブ未対応なので非表示にする。
FC2ブログ上部に有る検索バーはレスポンシブ未対応なので、画面の表示サイズによっては途切れて表示されてしまうため表示を無効にします。
管理画面左の『環境設定』 → 『ブログの設定』 →『検索バーの設定』で[利用しない]を選択して『更新』。
先ず、上記2点の設定をお願い致します。m(__)m
色々調べたのですが解決せず現在便利ナビで代用しています。
ヒロ 様へ
初めまして♪そして、明けましておめでとうございます。m(__)m拙いテンプレートのご利用、誠に有難うございます。
早速ご質問の件です。
記事内の余白は2カラムも3カラムも同じ寸法になっておりますので、改変個所も全て同じです。（スマホやタブレット、PCでの閲覧用に全部で4か所あります。）
スタイルシート編集枠を1/4程スクロールした所にある
.con_body {
margin: 20px 20px 10px;
}
3/4ちょい上までスクロールしたところに有る
@media only screen and (max-width:749px)
.con_body {
margin: 15px;
}
5/6程までスクロールしたところに有る
@media only screen and (min-width:1000px)
.con_body {
margin: 20px 30px 10px;
}
7/8程までスクロールしたところに有る
@media only screen and (max-width:400px)
.con_body {
margin: 10px;
}
の4か所です。
数値が3つになっているものは、左から 上 左右 下 になっていて、
margin: 上px 左右px 下px;
というように指定しています。なので、margin: 20px 20px 10px;と書かれていたら、上に20px,左に20px,右に20px,下に10px; という余白になります。
marginの数値が1つの場合は、上下左右が同じ数値の余白になります。
（…因みに数値2つの場合は 上下px 左右px になります。）
この数値を左のみ変えたい場合は、4つに分けて記述します。
margin:上px 右px 下px 左px;
というように、上から時計回りに指定します。（上→右→下→左）
左側を狭めたい場合は一番最後の数値を小さくしてあげれば良いので、前出の数値であれば
margin: 20px 20px 10px 0px;
という数値になります。
それを、上記のスタイルシート箇所に当てはめ（0pxで記事タイトル枠と一緒位になりますが、5～10px位は有った方が読み易いと思います…）ご自身でブラウザの幅を狭めて確認しながら、丁度良い余白を決めて下さい。
上記の説明でご不明な点が有りましたら、再度コメント下さいませ。m(__)m
[ 返信 * 編集 ]▼ ▲