サイトマップ
トップは1カラム、以外は2カラム仕様変更のご案内
よく見られるサイト構成の一つ、トップは1カラム、以外は2カラムとする変更手順を
解説します。
今回は、フォトギャラリーサイトを運営されている方から...
1カラム仕様でトップにフォトを横並びで掲載しているが、トップは横に複数画像配列をしている
のでレイアウト上...これでよい...と理解している...
しかし、カテゴリーページで画像の説明やブログ的コンテンツの記事を書くとなると、記事幅が
広すぎてうまく構成できない...
2カラムページも必要...とのお便りがありましての記事追加
単なるフォトサイトなら、1カラムにこだわる必要もない...
でも、ギャラリーにすると以下スタイルを願うは、私も同じ....あたしの例
1カラムでも、特定ページにＣＳＳ追加でサイドバーを表示させることは可能なんですが、
シリウスデフォルトと比較すれば精度不足...できるなら純正使用が良い,,,
で、以下へ....
今回の解説は、私の勝手になりますが、質問者様の1カラム内に2カラムを表示できないか？を
理解違いする訳ではありませんが、解説手順は2カラムＴＰのトップのみ1カラム仕様として
進めます...でも結果は同じ事...（こちらの方が末々効率が良い...理由で...）
逆理解で進めても当てはまります...
記事、一部訂正追加
ですが、ここで大変申し訳ございません．．．2017 0823
私理解で2カラム仕様ＴＰのトップを一カラムにする仕様変更解説としておりましたが、
とある事情で、一カラムＴＰ仕様の下層（カテゴリーエントリー）を2カラムへ変更する
カスタマイズであれば、面倒を極力回避してすぐの可変が確認できました。
今までの説明に手違いは無いのですが、偶発的に見つけた簡単切り替え...なので、
最初に解説しますね...
記事、再度訂正追加
ここでさらに申し訳ございません...
2018 0221更新 今日気が付いたこと？
カラムの切り替えなどと講釈語ってましたけど、私の知恵不足..
トップ、カテゴリー、エントリーのカラムを個別変更は簡単にできるんですね
HTMｌの項目に2カラムでしたら、column2とございましてcolumn1と書き換えれば
1カラムになります。
トップは1カラム、カテゴリーは2カラム、エントリーはイチカラム...
ま、エントリーはスタイルシートの割り込みで可変可能なので....
こんな項目...ご確認ください...
<div id="column2">
理解不足の記事で、恥ずかしくページごと削除したいは山々なんですが、
後々なんかいいこと気が付いたら書き替えたいので保存しときます。
失礼しました。
以下は、訂正、訂正前記事ですが、とりあえずは知識不足である私のうんちく...
過去記事...少しはネタございます...
基本一カラムTPで、下層を2カラムとする手順から....
解説 １とします
手順
一カラムＴＰのカテゴリーとエントリーＨＴＭＬソースを2カラムからコピーして張り替え..
それだけ...（上から下までですよ）
スタイルシートは全然いじりません..
class指定などしなくとも、2カラムのカテゴリーとエントリーＨＴＭＬソースを入れ替えれば
トップは一カラム、下層は2カラムが簡単に実行できるのですね
これが逆に2カラムＴＰでトップＨＴＭＬに一カラムソースを入れ込んでは、反応しません..
.....あくまで一カラムからが理屈...
2カラムTPのトップだけ一カラムにするとなればclass指定しなければできない..
という訳なんです。
なんか今日、一カラムをワイドヘッダ-に改造していておちゃめないたずらをしていたら
気が付いたこと...
お役立てください
参考
トップ ワイドヘッダー一カラム 下層は通常2カラムレイアウト
ワイドヘッダーDEMO３
おまけ オール2カラム トップのみワイドヘッダー
ワイドヘッダーDEMO
解説2
ここからは過去記事となりますが、面倒なだけで結果に変わりはございません
2カラムＴＰ基本でトップページのみ一カラム仕様変更手順
トップは1カラム、以外は2カラム仕様に変更する手順へ進みますが、再度、サイト内で1カラムを
使用するとした際は、エントリーページの1カラム仕様に設定してにください..
難しさはございません
まず、テンプレートを2カラムで設定しといてください
次に新規サイト名で1カラムを選択して操作画面を呼び出します
ＨＴＭＬｌソース、ＣＳＳを取り出すため...
一つ目の作業
ＨＴＭＬを開いて、トップのソースをコピーして、2カラムのトップのソースと張り替えてください
二つ目の作業
次は、1カラムのスタイルシートを開いて、以下から下まですべてコピーします
==================================================
全体
==================================================
*/
/* レイアウト
==================================================
*/
下まで全部...ですよ
次に....
2カラムのスタイルシート開いて、以下の上、張り替えではありません...もう一つスタイルシート
にＣＳＳを追加するのです...
==================================================
全体
==================================================
*/
/* レイアウト
==================================================
*/
ここ大事
張り付けましたら後に区別できるよう、1カラムと書き足しておきます
==================================================
全体 1カラム
==================================================
*/
/* レイアウト
==================================================
*/
これで終わり....完了です...簡単すぎるに不安ありですか？
でしたら、以下をお読みください...多少？不安は消し去られます...
その他、
簡単にできますけど、後々のために追記
まず、当サイトはトップを3カラムしており、以下は2カラムとしていますが、ｃｌａｓｓ指定で
切り替えを設定しています
また、デフォルトＴＰでも同じようなことしてますが、それらもｃｌａｓｓ指定です
しかし、今回はｃｌａｓｓ指定せずとも変更ができました
理由は知りません..？...そこまで立ちいっていない...そこまでいじらずでも反応してしまった..
...が、私は以前より今回の仕様サイトは運営しており別段エラーは経験なしで...
多分..それはそれでいいんじゃないのと理解しています
でも、注意事はございます
スタイルシートに、1カラム、2カラムのＣＳＳが二つ存在することになるわけですね
実際、すべての1カラムＣＳＳを入れ込む必要もない
ある程度の箇所だけ入れ替えればよいとも理解しますが、面倒ありで簡素に施工...
で、今後レイアウトなどのカスタマイズを行う際は、class指定も必要となることもございます
1カラム、2カラムとも同じ記述指定がある場合で、色替えとか別指定する際はサーバー
読み込みの区別をつける必要がある...ということ..
ｃｌａｓｓ指定しない場合...
1カラム、2カラムとも同じ記述指定がある場合、読み込まれるのは上からですので
下側（今回は2カラム）...となります
ですので、1カラムで何かしらの記述変更を上で行っても反応しない
あくまで最後に読まれるは下ＣＳＳ優先となるのです
ｃｌａｓｓ指定を簡単に...
hTMLでのbody範囲は
<body>で示されています
しかし、今回のようなカスタマイズを行うならもう一つ
<body2>と指定を追加しなければならないのです
更に、これで終わりではなく...別表示とするならそれらを全て認識できるように
しなければならないのです
そして、スタイルシートの記載も...bodyとbody2に書き換えなければならない
また、ｃｌａｓｓ指定コード以外 例<div id="column2">...divコードも書き換えが必要となる
スタイルシートでいえば＃の箇所...
すみません...なんか面倒みたいな意味合いになってしまいましたが、さほど頭を悩まずとは
理解しなくてもよいと思います
何かしらＣＳＳを書き換えても反応しない...もしくはトップだけ変えたのにカテゴリーま
で変わってしまった...
そんなときだけ対処すればよいこと...
以降、私も1カラム、2カラム併用は現在も使用してますので気が付いたことありましたら追記いたします
最後になりましたが、今回の説明の逆、1カラムテンプレートで、カテゴリー、エントリーに
2カラムのＨＴＭｌソース張り替えとＣＳＳを追加すれば....試してはいませんが？理屈上同じ仕様に
できると思います....です？