まえがき
ブログを始めた当初から使用しているこちらのテーマ。
アドセンスも通った事ですし、ここらでブログデザインを変更します。
CSSを詳しく知れる良い機会なので、挑戦して行きます。
CSS
デザインを弄る＝CSSを弄ることです。
CSSを触った事がなく、ゼロから記述するのが難しい方や面倒な方は、はてなブログ側で用意してくれているサンプルコードがあるのでぜひ使ってみて下さい。
僕も、分からない記述（各種ブラウザに対応させる系）はコピーさせて頂きました。
このコードをデザインCSSに貼り付けることで、デザインが適用されます。
テーマストアへの投稿
デザインCSSでコードを編集するのも良いのですが。
ウィンドウのサイズ感が小さく、扱い辛いので、テーマストアに非公開で自分のテーマを投稿することにしました。
そのテーマをブログのデザインCSSで適用することにしました。*1
どちらにしてもコードが非常に確認し辛いので。
僕はテキストエディタで行数の確認、検索機能を使って記述漏れを防止などテキストエディタ中心で作業しながら変更して行きました。
テーマストアへの投稿について、詳しく知りたい方はリンクから詳細を確認してみてください。
追加要素
メニューバー
ヘッダーに<ul>要素を配置して、CSSで位置を調整しました。
現状かなり乱雑に位置決めしているので、今後の課題です。
コピーライト
フッターに<div>要素を配置しました。
こちらも特にアイデアがなく、ただ配置しただけなので、今後のデザイン変更でオリジナル性を持たせたいと思います。
変更箇所
タイトル
コンテナのレイアウト
案外シンプルに記述が出来るんだなぁと思いました。
paddingとmarginだけでも少し理解できて、今回の挑戦は無駄ではなかったと思っています。
コードレイアウト
記述の順番や場所が統一されておらず、非常に見辛い状態なので、更なる変更に向けて修正して行こうと思います。
今は面倒くさくて出来ません！！（許して！！）
Before After
Before
何をBeforeとするのか迷ったので、サンプルコードを適用したブログをBeforeとしました。
全体的にシンプルを通り越して質素な印象ですね。
After
要素ごとに、まとまった印象のデザインになったと個人的には思います。
まだまだ質素で寂しい印象なので、SVGデータなどを追加して、今後も少しずつサイトデザインを変更して行こうと思います。
参考ページ
*1:自分だけが使う目的で、テーマストアに非公開で投稿することは問題ありませんが、他にも注意事項があるので各自で確認してください。
