ブログデザインを2カラム化しました | Photograph days  

ブログデザインを2カラム化しました

/Posted:2017.04.29

ようやくデザイン変更に着手できました。ずーっと変更したいと思いつつ、記事を書くことや写真関連の活動を優先していたので、デザインは後回しにしていました。ずっともやもやしてましたが、えいや!っとなんとか片付けました。

やったことは1カラムから2カラムへの変更くらいです。また、追加したカラムにはカテゴリと最新のエントリを表示するようにしました。もともとこのブログのデザインはjugemブログの「シンプル」というテンプレートを使っていますが、 シンプルというテンプレート名なだけにもともとは本当にシンプル。特に残念なのがカテゴリ表示などがスクロールした最下部にあり、「誰もそんなとこ見ねーだろ!」的な配置だったんです。余計なものは非表示にしたり、HEADタグ内への埋め込み、各エントリの要素の表示を消したり追加したりという細かい変更をして使ってきてました。しかし、この下部にあるものをサイドバーに表示するという目論みは持っていたものの、全体に影響するので後回しになっていたという訳です。

実装自体はぶっちゃけたいしたことはなく、HTMLでDIVのブロック要素をひとつ追加、スタイルシートでfloatを使ってブロックを横に並べることで2カラムを実現しています。ただ、僕としてははじめての実装だったので多少苦戦しました。しかも、まだ狙い通りにはいっていなくて工事中です。リキッドにしようと思っていたのですが、幅の変更が思ったようにいかなかったり、サイドバーに表示するコンテンツがまだ仕込みきれていません。徐々に修正をかけていこうかと思います。

このブログをはじめてから結構CSSを駆使するようになって、ようやくhtmlタグでデザインするところから離れられるようになりました。スタイルシートを理解すると、コンテンツとデザインが分離できて非常に分かりやすくなります。このブログではPC用デザインとモバイルデバイス用デザインがわかれているので、それぞれにCSSを別に用意することでいろいろと対応することができるので、CSS、特に外部ファイル化することのメリットが非常に感じられ増す(以前はスタイルシートを活用したとしても、タグ内にベタ書きばかりしていました)。

ウェブデザイナーを目指す訳ではないですが、自分でちょこちょこ勉強して見やすいサイト、動きのあるサイトを作っていければと思います。写真だけでなく、こっちもしっかり頑張ります。

関連コンテンツ

このエントリーをはてなブックマークに追加 feed-icon 読者になる(RSSに登録)