たねやつの木

写真、HDR画像の編集技法などを書いています。

PC用のブログレイアウトが大体完成!


PR

こんばんわ。たねやつです。

今週の初めからちょくちょくいじっていたこのブログのデザインがやっとほぼ完成しました!(PC用だけだけど...)

もともとがそんなに凝ったデザインでなかったので変更点はパッと見ブログのトップイメージが追加されたぐらいかのように見えますが、ざっくりまとめると

  • トップイメージの追加
  • グローバルナビゲーションバー(HOMEとかのリンク帯)の追加 (レスポンシブ表示非対応なので画面を小さくすると崩れる)
  • 見出しのデザイン
  • サイドバー内のカテゴリのデザイン
  • 広告の位置修正など

です。一応プログラマのはしくれなので「CSSとかHTMLとか余裕やろ!」と思っていましたが結構時間かかってしまいました...orz

見出しは以下のようになっています。

h3

h4

h5

h3 - h5しか使わないのでそこだけ弄りました。ヘッダーイメージとナビゲーションバーからメインの色はかと思わせつつ実はオレンジという若干の罠となっております。

アイコンは基本的にFont Awesomeを使用しています。今回はじめて知ったのですがこれすごいですね! 文字と同じ感じで表示できるので非常にラクでした。

ヘッダーイメージを真っ先に何も考えずに作ってしまって、ナビゲーションバーは近いから色合わせたほうがキレイだなあと、しかし自分の中ではブログをオレンジメインにしたい!というめちゃくちゃな思想の元、見出しはオレンジ系となりました!

ベースとしてお借りしたテーマは以下のid:codomisuさんのものです。

hitsuzi.hatenablog.com

他にも作成者さんのデザイン技法をいろいろと参考にさせていただきました。今後スマートフォンのテーマ作成においても大いに参考にする予定です。

にしても若干18歳にしてすごいですよねえ... その頃は私はドラム馬鹿でしたね...(笑)

このテーマはもともとレスポンシブ表示には対応していないのですが、敢えて非対応のものを選びました。

理由としては①なるべく大きく私の画像を見てほしい!ということと②レスポンシブ表示対応のレイアウトは自作するという目標のためにとっておくといった感じです。(笑)

これからも微調整を行っていくと思いますので、都度どのように修正したのかも報告していきたいです。