Article page

by
  • Comment:0
  • Trackback:0

sampleえと 基本的に私の方でカラム位置変更のカスタマイズのお手伝いというのはお断りしております
すみませんですー (´・ω・`)

自力でやってくださいね という意味で
ざっと私のテンプレートの構造と変更の仕方を記しておきます

注意点
① 私が制作した全てのテンプレートに該当するわけではありません
② 他制作者様のテンプレート内容に流用できるわけではありません
③ カラムの「位置」についてであって カラムの「数」の増減ではありません
④ シングルカラム・3カラムは今回は割愛します
⑤ レスポンシブデザインテンプレートのみの内容です

つまり2カラムの「サイドバー左右位置変更」についてです


私のテンプレートは「右」にサイドバー表示するタイプのものがほとんどです
サイドバーは固定幅(ソリッド) メインカラムは流動幅(リキッド)です

んで 私は毎回テンプレ作成時にブロック(枠で囲われたグループのようなもの)に付ける名前を好き勝手にやってます(笑)
統一性があんまり無いんです
気まぐれにやっちゃってる感がある(笑)
あるいは意図的に変えてるものもあります
「名前」というのは
id名
class名
のことで これがスタイル(装飾)を決める大きな役割になってます


準備するもの


htmlエディターがあればそれが一番良いですね
Windowsのおすすめエディターは Crescent Eve
Macのおすすめは Sublime text3 ですが こちらは上級者向けです
(デフォルトではUTF-8の文字コードしか使えません カスタマイズでSift-JISを使えるようにする必要あり)
エディター?なにそれemoji な方は
Windowsであれば メモ帳 を
Macであれば テキストエディット を


基本構造



headerとfooterはここでは重要ではありませんので置いておきます
基本説明

id名のCSS表記 #名称
class名のCSS表記 .名称

● wrapper = 全体像を包括する役割のボックス --- 大抵いつもhtmlの<div>タグに#wrapperのidを指定しています
● container = floatする要素を包括するボックス --- <div>に #container あるいは #float-container
● primary = メインカラムを入れるためのボックス --- <div>に #primary あるいは #primary-column
● main = メインカラムそのもの --- <div>に #main あるいは htmlの<main>タグにid及びclassなし
● secondary = サイドバーを入れるためのボックス --- <div>に #secondary あるいは #secondary-column
● aside = サイドバーそのもの --- htmlの<aside>タグに #sidebar

「サイド」「アサイド」というのはあれですね
日本人は「サイド」と聞くと「左右」「横」と思いがちですが
本来は「脇」のことです
本旨ではないけれども 関連する事項のことを side, aside と言います
He put aside my book.
彼は私の本を片付けた あるいは 脇へどけた
Just put it aside.
それはちょっと置いといて(話題の変換)
ですから「サイドメニュー」というと必ずしも「左右」にあるわけでなく 場合によっては「下」にくることもあります
ここでは aside という表現をとっています
フッターというのは著作権表示などページの補足情報を入れるボックスがそれにあたります
余談でした ←

上記6ボックス これ全て必須です ひとつ欠ければ全て狂います
固定幅レイアウトの場合にはこの入れ子が一つ減ります
この構造はレスポンシブを作成するコーダー全てがこの方法をとっているわけではありませんので
あくまでも「私のテンプレートの場合は」という説明です

図解1(見た目)

sample



図解2(構造)

sample



レスポンシブの場合には 親のprimary-columnと子のmainが鍵になっています


編集対象の見つけ方


まずCSSソース内で

#wrapper


を探してもらうと上の方にあります
いくつか出てくることがありますが 一番最初に出てくるものを見て頂くと
直近に上記に記した各ボックスの名前も見つけられると思います
#sidebar だけは下の方にあるかもしれない(笑)
ただここを触ることはあまり無いと思います

サイドバーの位置を変更するだけで 幅等の変更をしないのであれば
#wrapper の内容は触らないでください

Jingleテンプレート(最新版)を例にとりますと 以下のような内容です

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

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


#primary {
float : left;
width: 100%;
margin-right : -300px;
}

#main {
margin-right: 360px;
}

#secondary {
float: left;
width: 300px;
}



右サイドバーSample



図解3

sample



サイドバーとメインコンテンツの左右位置を入れ替えるには以下の通り
図解4

sample


左サイドバーSample



単純に左右(left or right)を入れ替えたり プラスとマイナス(ポジティブ+ or ネガティブ-)を入れ替えたりするとレイアウトは崩れます
サイドバーの位置を右から左に入れ替えましたが
左から右へ変更する場合には作業が逆になるだけです
floatの方向も「右にあるからright!左だからleft!」と単純に指定して良いわけではありません

とりあえず私のテンプレートの場合にはこの処理で入れ替えできます
雛形として参考にして頂けると良いかな と
くれぐれも 他制作者様作品の場合に通用するかどうかはわかりません
毎度のことですが(笑)

注意
これは極々単純な構造のテンプレートの場合に限ります
ちょっとトリッキーなソース内容のものもありますので
対象テンプレの内容と雛形とを照らしあわせて行ってくださいませ
定番シリーズ(四季シリーズ)は全部これでOKですemoji


-------------

この作業で変更できるテンプレ一覧 (対象: 2016.1.16時点リリース済み)

AnotherDay(azure/ mauve)

BeHappy

Bliss

Capricious/ Ranchu

DaisyGreen

GirlOnWire

Glass_shore

Jingle

MaBelle

Old_Days

OnTheGround

Palette

Sakura(3パターン)

Valparaiso


以降のテンプレについてリストの更新はありません
各記事にてお知らせ致します
関連記事
vanillaice (Akira)
Posted byvanillaice (Akira)

Comments 0

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い