カレンダー
07 | 2017/08 | 09
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

2カラム→3カラム

このテンプレート「business-u1」も右側のサイドメニューが手狭になってきたので、思い切って3カラムにして余裕を持たせようと思い試行錯誤。
ただHTML、CSSの知識が無いため、いざカラムを変更しようにも、一体どこをどう弄ればいいのかすら分からず、結局途中で飽きて放置プレイ。

ネットで検索してみてもそういった知識がない人にはオススメ出来ません、なんて検索結果ばかりで、いよいよ以て諦めたその時、何故かダメもとでやってみたら3カラム化に成功(笑)

同じように困っている人がいるかどうか分かりませんが、一応、参考までにということで手順を書いておきます。


①テンプレートを複製する
基本的に書き足すだけですが、間違ったまま保存してしまうと後々面倒なので、保険のために複製。複製の仕方はテンプレートの横にある「複製」ボタンを押せばOK.

カラム1



②スタイルシートへの記入
スタイルシート内中段より上の部分に

#sidemenu {
float: right;
width: 220px;
overflow: hidden;
margin: -10px 10px 0 0;
background-color: #f0f2f6;
padding: 0 10px;
}

とあるので、それをコピーし同じものをそのまま下に張り付けます。
そしてコピーした方の#sidemenuの直後に任意の文字(私は数字の1)を入力します。
更に「float: right;」の部分を「float: left;」に書き換えます。

カラム2



③HTMLへの記入
ページ真ん中より上の部分に



とあるので、そこの下に



と入力。ここで同じ文字を入力しておかないと、正しく表示されないので注意。

カラム3



④メニュー欄の作成
以下は基本的にフリーエリアの作成と同じ。
③で入力したの間に、



と入力すると欄が表示されるようになります。
メニューのタイトル、その項目の中身については各自でお好きなように書き換えてください。
ちなみにこのblogではタイトル:メニュー1、中身:調整中と記入しており、現在、左上のような感じで表示されています。

あとは必要な個数分だけ上のHTMLを書き加えていくだけでOK.

カラム4



⑤blogの幅の調整
ここまでの段階だと左側のメニューが増えた分だけ、ズレが生じてしまっているので、その分を調整。
書き換える部分はスタイルシートのLayout部分。

初期の段階では


となっていますが、ここでwidth: 850px;をwidth: 1100px;に、#ffffff repeat-y 670px top;を#ffffff repeat-y 970px top;に設定。
これぐらいの数値にしておけば背景のズレやカラムが下に落ちてしまうことも無くなるかと。この辺りの調整はかなり大雑把にやってしまったので、より見映えを良くしたい人は色々な数値で試してみてください(無責任)

カラム5
      
カラム6


途中でコードタグが使えなくなり、テキストエリアタグを使用して、ますます見づらい&分かりにくくなってしまいましたが(^^;)、要はスタイルシートに書き込んで、HTMLにそれに対応するタグを設置すればOKということ。
基本的にコピー+反転だけなので、こういった知識がなくとも割合簡単に3カラムにすることが出来ました。

ちなみに今あるプラグインを今回新たに作ったサイドメニューに移したいときは、fc2管理画面の「プラグインの設定」から移したいプラグインを選択し詳細ボタンをクリック。
そこから「プラグインの改造」欄の【HTMLの編集】を選び、以下に表示されたタグを選択。それを④で書き加えた「その項目の中身」部分に貼りつければOK.

とりあえずサイド部分には右側のいくつかのプラグインを、それから直近の配信情報やレビュー、新譜情報を載せようかなぁーなんて考えてます。
どうしてもブログだと記事が流れてしまうのでその防止に。


<クレジット答え合わせ>
AVCD-10208_1.jpg

先日の記事でJAPANESE GIRL/ MEGA NRG MANのクレジットが間違っているかも?なんて書きましたが、正しくは、

JAPANESE GIRL/ MEGA NRG MAN
(S.OLIVA-D.DI MARCANTONIO-T.MARIN)

とのこと。どっちにしろレーヴェルの垣根を越えた合作、以前の1WEEKや、また以前のDIMA+MARIN作品のLOVED IN TOKYO/ MAX ZEROを凌ぐほどの作品になるのか、その辺りにも注目。

こんな個人の勝手な疑問に快く答えてくださったVermaak君、そしてDIMA、DOMINOにはホント感謝感謝です(笑)


<勝っちまったよおっかさん>
キャプチャ

巨人、Gキラー能見を攻略しファイナルへ王手!(サンケイスポーツ)

正直勝つとは思っていませんでした明日も勝って一気にファイナルステージ進出決めちゃって!

コメントの投稿



スパム対策のため「http」が使えません。お手数ですがhを抜くなどでご対応下さい。
非公開コメント
プロフィール

玉鬼feat.管理人

Author:玉鬼feat.管理人

天気予報

-天気予報コム- -FC2-
FC2カウンター
リンク
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。