ヨミコのデザイン工房

デザイナー&ブロガーのヨミコが、 WEB制作の事を書いたり書かなかったり。

はてなブログのテーマInnocentカスタマイズ~ボーダーを消す、サイドバーの調整~

こんばんは。Web&グラフィックデザイナーのヨミコです。

先日、はてなのテーマをInnocentにしました。

moonnote.hateblo.jp

関連記事

yomikodesign.hateblo.jp

という訳で、徐々にこのInnocentを私色に染めて行きたいと思います。

Lost Innocent計画。

(大好きだったFANATIC◇CRISISのCD)

既にシンプルで素敵なんですが、更に簡素にします。

という訳で私と同じデザインにしたいという奇特な方はご参考までにどうぞ。

諸注意

  • テーマのカスタマイズはあくまで自己責任でお願いします。
  • 摂ブログは思うところあり、レスポンシブ対応にはしていません。PC版向けカスタマイズとなります。
  • 作者様にこの記事のことでのお問い合わせはお辞め下さい。
  • 素敵なテーマを提供して下さる、作者様への感謝を忘れずに。
  • class名が同じならInnocent以外のテーマでも使えるかも。(未検証)

今回のカスタマイズ

  • ヘッダとサイドのボーダーを消す
  • サイドバーのリンクの色を分かり易くして践み易くする
  • 本文とサイドバーのリンクの色を調整

画像で言うと、下記のピンク部分になります。(縦長注意)

f:id:yomikodesign:20160601142117p:plain

カスタマイズの目的

(という程でもないけど)
とにかく見た目を簡素にしたい。
リンクはリンクと分かる様にして、ユーザビリティを向上させる。

という訳でcssはこんなかんじ。

BEFORE

f:id:yomikodesign:20160616173417j:plain

AFTER

f:id:yomikodesign:20160813155339p:plain

余計なものは入れない。

[asin:B00CE4THP4:image:large]

今後の予定:

  • ヘッダ画像を変える
  • ぱんくずリストを設置
  • 記事下の名前と投稿時間を消す
  • スマフォ版の見出し等を調整
  • 下の広告をなんとかする

もうちょっとです。

良い子のみんな!!
はてなブログのテーマを変えたり、カスタマイズをする前に、cssはバックアップを取っておいた方がいいぞ!

(テーマ変えたらぱんくずリストが消えましたorz)

バックアップの良い方法はまた別記事にて。

ではまた。


お仕事etcお問い合わせ先(制作実績お送りします)お返事は3日以内に、を心がけております:yomikodesign@gmail.com

Facebook友人申請お気軽にどうぞ。スパムでなければ基本承認します。

Twitterお気軽にフォローどうぞ!基本リフォローします。