blogのこと

2009年12月21日

昨日、このblogのデザインを、2カラム構造から3カラム構造へと変更しました。

これにより、右側にお勧めの動画などを載せたり出来るようになりました。
これで、表現の幅も増えることと思います。

それで、デザインを変更する前に「livedoor ナレッジ」で情報を収集しようとしたのですが、
ホントにサクっとしか探していませんが、どうにも自分が求めている情報が無かったので、
この際、折角なので自分のやった方法を紹介したいと思います。


ただし、これから記載するのは、あくまでイメージです。
『2カラムから3カラムに変更するにはこんな感じだよ〜』みたいな。
なので、具体的なHTMLやCSSの記述方法については触れませんし、解説もしません。

実際に自分で変更する場合、最低限必要な知識を集めてから行ってください。
この点については、ご承知置きいただきたいと思います。

とは言え、このイメージがあると無いとでは、全然効率が変わってくると思いますので・・・。



先ず、2カラムのイメージからですが、
(便宜上、タイトルをT、主文部分をM、左サイドバーをL、右サイドバーをRと表記します。)

一般的な2カラム

と、こうなります。
右と左の違いはあれど、これが一般的な2カラム構造になります。

そして、比較的一般的な3カラム構造は、

従来の3カラム

となり、先ずLとMRで枠を作り、さらにMR内にMとRの枠を作る事になります。
この場合も、LとRの順番はどちらでもいいのですが、
これだと箱の中にさらに箱を作る形となり、ソースが判りにくくなりがちなんですね。


そこで、自分もこの形で3カラムに変更させようと、
livedoor Blogの比較的新しい3カラムデザインのテンプレートを参考にするべく調べた所、
上記とは違う方法で3カラム構造にしてることに気が付きました。


その違う方法というのは、
先ず、Mの左右にLとRで欲しい分だけmarginで余白を取り、
その後CSSでそれぞれその余白の上にLとRを乗せるという方法です。


図で表すと、こんな感じ。

はじめに枠を決めてから…

としたあと、CSSで位置を直すと、

CSSで整形するとこうなる


このような3カラム構造のBlogが出来上がるという訳です。


これらの工程で書き換える部分は、
HTML周りでは、<$PluginList_A$>と<$PluginList_B$>を構成する部分だけと、
CSS周りでは、M部分とL部分とR部分を構成するfloat周りの変更だけです。

勿論、それぞれのブログの構成や、
好みによって書き加えたりしなければならない部分が出てくるとは思いますが、
基本的にはこれで大抵の2カラムブログを3カラムに変更出来ると思います。


(15:50)
Comments(0) | TrackBack(0) | |

2007年11月17日

ぼちぼちと、四苦八苦しながら進めていた、blogの記事形態の改善工事が、やっとこさ終わりました。

どこがどう変わったかと言うと、これまでは、

同じ日に投稿された別々の記事は、

         ■■日
 ┌――――――――――┐
 │ 二回目の投稿   │
 │--------------------│
 │ 一回目の投稿   │
 └――――――――――┘
         ▲▲日
 ┌――――――――――┐
 │ 二回目の投稿   │
 │--------------------│
 │ 一回目の投稿   │
 └――――――――――┘

てな感じで、点線背景で区切られていた同一日一纏め型だったのですが、今回の改装で、

         □□日
 ┌――――――――――┐
 │ 二回目の投稿   │
 └――――――――――┘
 ┌――――――――――┐
 │ 一回目の投稿   │
 └――――――――――┘
         △△日
 ┌――――――――――┐
 │ 二回目の投稿   │
 └――――――――――┘
 ┌――――――――――┐
 │ 一回目の投稿   │
 └――――――――――┘

と、こんな風な、所謂、各個別記事独立型へと替えました。


これを完了させるのに、ものすんごく苦労しました。
全然思った通りに行かず、本気でキレかけました。
寧ろ、半分キレてました。
下手したら、発狂してたかも知れません。

それ位、手こずりました。
(まぁ、半人前の素人がやったのですから、当たり前っちゃぁ当たり前なのですが・・・w)


ただの独立型にするだけなら、こんな苦労は必要無かったのですが、
その場合、各個別記事それぞれに、毎回その日の日付が付いちゃうんですよね。
こんな感じに。

         ○○日
 ┌――――――――――┐
 │ 二回目の投稿   │
 └――――――――――┘
         ○○日
 ┌――――――――――┐
 │ 一回目の投稿   │
 └――――――――――┘
         ●●日
 ┌――――――――――┐
 │ 二回目の投稿   │
 └――――――――――┘
         ●●日
 ┌――――――――――┐
 │ 一回目の投稿   │
 └――――――――――┘

これが、どうにも我慢ならなかったのが、今回の地獄の始まりでした。


ですが、何とか達成する事が出来ました。
気が狂いそうな程にイライラしながらの作業でしたが、
いざ完了してみると、それなりに遣り遂げた感があって、まぁ、悪くは無いですね。


これで、このblogを見たときからやりたかった改装工事も一通り終わり、一段落着いたって感じです。



この作業内容ですが、若しなんらかの間違いで需要なんかが有れば、気が向いたら、
作業工程と内容をある程度凡庸化した上で、記事を書こうと思います。




追伸:
ついでに、これがSEO対策なのかな??と思う様な、細工もしてみました。
果たして、どれ程の効果が有るのか?そもそも意味は有るのか?
ドキがムネムネで一杯ですが、経過を静観したいと思います。

(05:03)
|

2007年10月31日

現在、このblogを、微改装に向けて(可能かどうかも含めて)、
色々と実験している最中で御座います。

非常にお見苦しい所をお見せして、大変申し訳ありませんが、
ご容赦して頂けます様、宜しくお願い申し上げます。

(23:43)
|

2007年09月10日

このblogなのですが、その目的・性質上、過去の記事が更新されることが度々起こります。
ですが、当然の事ながら、それらの更新が目に見える形で示される事はありません。

そこで必要だと思ったのが、『更新情報』です。
場所は、左側にあるサイドバーの、『管理室』の所に設置しました。

これに依り、過去のどの記事が更新されたか一目で分るようになって、
それで、このblogがより便利に、見易くなって頂ければ幸いです。
自分に対して、更新を促す様、ハッパを掛ける目的も兼ねて設置しましたw

尚、そこに記載されるのは、

●記事への新たなリンクの追加
●記事の大幅な改訂
●blog全体を通しての、仕様の変更等がある時

等が該当し、

○誤字脱字の修正
○最新記事(投稿当日)の修正・改訂

は、除外と致します。


それでは、行く末が益々の混迷を深める当blogですが、今後とも宜しくお願い致します。

(18:02)
|

2007年06月16日

旧題『緊急報告〜このBlogをご覧の皆様へ〜』

---------------------------------------------------------------
現在このBlogは、一昨日(14日)深夜に記事を更新して以降、
CSS内の、『body』部分のみが反映されない状態となって・・・、、、
---------------------------------------------------------------
おりましたが、

この度、晴れて復旧しましたので、報告致します。

ただ、復旧させるのに、大本の保存しておいたCSSを使って一から組み直したので、
めちゃくちゃ時間と労力が掛かりましたw

正直、こんな面倒は二度と御免です。。。_| ̄|○


で、それと、そのCSSの確認作業中に、間違って削ってしまっていた部分を見つけたので、
それも合わせて組み直しました。

おかげで、前より見易くなったのではないでしょうか?つか、そうであって欲しいwww

取り敢えず、こんなとこです。
これからは、再び、いつも通りに更新をして参りますので、今後とも、宜しくお願い致しますm(_ _)m

(02:34)
|

2007年05月03日

ここは、当Blogをご利用して頂く際に、管理人からのお願いや、気に留めて置いて頂きたい事が書いてあるページです。

※1:
 このBlogは、横解像度1080以上推奨、IE7環境で構成されています。
 その他の環境は未確認ですので、ご注意下さい。
 と言いますか、IE以外での閲覧は正直オススメできません。

※2:
 このBlogは全てのページに於いて、
 リンクフリー&アンリンクフリーとなっております。お気軽にどうぞ。

※3:
 トラックバックにつきましては、今現在特に投稿制限や拒否は行っておりません。(旧ページを除く)
 とは言いましても、どんな内容のblog・記事からのものでも許可するものでは無い事をご承知置き下さい。
 尚、コメント欄にTBする旨が書いていないもので、且つ、当blog記事と何ら関係なさそうな所からのは、
 問答無用で削除いたします。
 なので、真っ当にTBをして頂ける場合、お手数ですが、コメントに一言残して頂ければ幸いです。




(12:00)
|
TVアニメ「ゆるゆり」応援中
ドリクラPV
亜麻音 「sweet×2☆summer」PV


みお 「StayWithMe!」PV


雪 「Hi!-Kin-goo」PV


玲香 「ステキなmagician」PV


魅杏 「Real」PV


るい 「イケないLipStick」PV


理保 「カンパイ☆LOVE」PV


ナオ 「愛しきHero!」PV
llowFullScreen="true" allowScriptAccess="always" />

魔璃 「月の露珠」PV


アイリ 「TimeTraveler」PV