IT系アラサーOLの悲喜こもごも日記

2歳のなつお、0歳のちびた、夫のシスくんと暮らすIT系アラサーOLのブログです

HTML・CSS初心者がはてなブログをコピペだけでカスタマイズしました!

スポンサーリンク

こんにちは!IT系アラサーOLのスプラウトです(`・ω・´)

最近ブログを見ていただいている方はなんとなく気づいていらっしゃるかもしれませんが、最近このブログをリニューアルしました!
昔から気になるところは多々あったのですが、なかなか時間を割けずにここまできました。

ということで、今回は備忘録も兼ねて、カスタマイズした点についてまとめておこうと思います。
カスタマイズ方法を提供していただいているみなさま、ありがとうございますmm

目次

ブログのテーマ

ブログのテーマは、レスポンシブデザインのSOHOにしました。

SOHO - テーマ ストア

ヘッダー(タイトル)部分

ヘッダー部分は、以下のカスタマイズをしました。

f:id:sprout_wings:20170721154409p:plain

  1. タイトル部分を画像のみにしました
    →CSSでつまづいたのでまた別記事にします

    sprout-wings.hatenablog.com

  2. カテゴリのグローバルメニューを作りました(前もあったけど刷新)

    www.yukihy.com

  3. スマホでメニューが上部固定になるようにしました

    design.syofuso.com

記事部分

  1. 最終更新日が表示されるようにしました
    f:id:sprout_wings:20170721220540p:plain

    www.tsubasa-note.blog
    SOHOはレスポンシブデザインなので、コード自体はこちらをお借りしました

    更新日自動表示のカスタマイズをアップデートしました、レスポンシブデザインの方はご確認ください - つばさのーと

  2. 記事下(スマホはフッター固定)にシェアボタンをつけました

    f:id:sprout_wings:20170721220624p:plain

    www.notitle-weblog.com

  3. パンくずリストを階層化しました

    blog.wackwack.net

  4. カエレバのカスタマイズをしました

    www.yukihy.com

 

なかなか好みのビジュアルに仕上がったので満足です!

しかし、もうちょっとこうしたいなーっていうのがあるので、細かくカスタマイズしていきたいと思います…!

ほな、まったね〜(`・〜・´)ノシ

良ろしければ購読してください^^
このブログの
follow us in feedly 友だち追加数