*Essence

HP用フリー素材とFC2共有テンプレートを作成・配布しています。

 >  Template >  テンプレート >  ct_responsive テンプレート共有化しました。

ct_responsive テンプレート共有化しました。

2018-10-25 (Thu)
本日、申請していたテンプレート [ct_responsive3c] [ct_responsive2c-r（右メニュー）] [ct_responsive2c-l（左メニュー）] の3点が共有化致しました。

ct_res3c.jpg← [ct_responsive3c（3カラム）］
ディスプレイサイズによって、カラム数が 3 → 2 → 1 と変化します。

ct_res2cr.jpg← [ct_responsive2c-r（2カラム・右メニュー）］
ディスプレイサイズによって、カラム数が 2 → 1 と変化します。

ct_res2cl.jpg← [ct_responsive2c-l（2カラム・左メニュー）］
ディスプレイサイズによって、カラム数が 2 → 1 と変化します。

1カラムになるとメニューがドロワー表示になり、ドロワー内のメニューは、他を開くと閉じる仕様。
また2・3カラムとも、記事上に表示されていたプラグイン3は、個別記事画面を表示すると記事下に表示され読み易くなります。
トップページのエントリー内 Comment-open でコメントを10件まで表示、個別記事ページの追記記述部分も展開式になっております。
（HTMLソースの削除で非開閉にする事も可）

以下が追記部分です。
Read More

レスポンシブテンプレートは表示サイズ可変対応になっておりますので、パソコン・タブレット・スマートフォン等での表示のために、以下の設定をして下さい。

１）　レスポンシブテンプレートはパソコン・スマホ共通なので設定を変更する。
PCやモバイル端末等の閲覧で、画面サイズが変化するレスポンシブデザインテンプレートを使う場合、初めに「スマートフォン版の表示設定」を変更して下さい。
管理画面左の『環境設定』 → 『ブログの設定』 →『スマートフォン版の表示設定』を無効にして更新。

２）　検索バーはレスポンシブ未対応なので非表示にする。
FC2ブログ上部に有る検索バーはレスポンシブ未対応なので、画面の表示サイズによっては途切れて表示されてしまうため表示を無効にします。
管理画面左の『環境設定』 → 『ブログの設定』 →『検索バーの設定』で[利用しない]を選択して『更新』。

先ず、上記2点の設定をお願い致します。m(__)m

スポンサーサイト

Return

Theme : 共有テンプレート * Genre : ブログ * Category : テンプレート

* Comment : (4) * Trackback : (0)
<<ct_responsive のカスタマイズ（エントリー全文表示） | Home | 古い共有テンプレート、整理します。>>

コメント






管理者にだけ表示を許可する

ヒロ 様へ

無事に改変出来て良かったです♪
またご不明な点などがございましたら、当方の分かる範囲でお答え致しますので、どうぞ気兼ね無くお声掛け下さいませ。
（その際、カラム数によって改変が異なる箇所もございますので、ご利用になっているテンプレート名の明記もお願い致します。）

今後とも末永くお付き合い下さいます様、宜しくお願い致します。m(__)m
2019-01-05 * aki [ 編集 ]

ありがとうございます

aki様、こんばんは。

丁寧な説明ありがとうございました。
ほぼ知識がない自分でも簡単に出来ました！
これからも大切に利用させていただきます。

まだまだ寒い日が続きますのでご自愛ください。
2019-01-05 * ヒロ [ 編集 ]

ヒロ 様へ

初めまして♪そして、明けましておめでとうございます。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
2019-01-05 * aki [ 編集 ]

カスタマイズについて

はじめまして。あけましておめでとうございます。
理想のレイアウトだったのでお借りして使わせてもらっています。
色々試したのですがどうしてもわからなかったので質問させてください。

記事内の余白を小さくして、本文の左側をもうちょっと枠に寄せたい（記事タイトルくらいの位置）のですがうまくいきません。
急ぎではないのでお時間あるときアドバイスいただけないでしょうか？
2019-01-04 * ヒロ [ 編集 ]

FC2ブログ共有テンプレート配布中

FC2ブログで共有テンプレートを配布しています。ご利用はFC2会員になってブログを作成して下さい。

＊ レスポンシブテンプレートの設定
＊ テンプレートのご利用について
＊ カスタマイズについて
＊ 著作権と免責事項

不明な点はMail、ブログのコメント等でお問い合わせ下さい。
ご質問は、テンプレート名・閲覧ブラウザとバージョン・変更箇所・状況等、出来るだけ詳細が分かるようにお願い致します。m(_ _)m

当方確認ブラウザ：（OSは全てWin10です）
IE9, IE10, IE11, Opera12, Firefox35, Safari5, MSEdge42, GoogleChrome67
Mobile確認：iPhoneSE iOS11 , SO-01J Android6
※利用規約は予告なく変更される場合があります。ご了承下さい。

▲ ▼