ブログのカスタマイズ

デザインテーマ

アツログでは、「Brooklyn」を使用させて頂いております。

www.notitle-weblog.com

シロマティ（id:shiromatakumi）氏ありがとうございます！！

リンク先にも記載されているのですが、レスポンシブデザイン（スマホとPCでも外観や操作方法が同じ）対応であり

グローバルナビ（タイトル下のメニュー）とシェアボタン、読者登録ボタン表示のCSSが既に入っていることがすごい

デザインなにそれ、おいしいの？(^p^)

という私からしたら神テーマです。ありがたく使用させて頂いております。

カテゴリのカスタマイズ

こちらはパンくずリストで紹介させて頂いた、カスタマイズもしておりますが

その他のカスタマイズもしています。

カテゴリの階層表示

記事を書いていくと必然的に増えるものだと思っています。

対策もかねて、カテゴリの階層化はパンくずでやっておりましたが、カテゴリ欄の階層表示はしていませんでした。

以前は、そのままでも、カテゴリから飛べるからいいかなと思い、親カテゴリのみ表示していましたが

何回か見返しているうちに、やはり子カテゴリへのアクセスが少々面倒で、ユーザビリティがあまりよろしくないのではないかと自問自答

そこで、カテゴリ自体も階層表示できないかと、調べてみたところ、素敵な記事がありました。

blog.wackwack.net

下部にある"設定手順"を参考に、そのままコピペさせていただきました(★ゝω・)b⌒☆

コード

コードを単に書くだけではなく、ほか設定があるため、id:WorldWorldWorld氏の記事をご確認ください。

カテゴリの縦表示

デフォルトですと、カテゴリは、横にならんでいます。

カテゴリの横表示

これはこれで、縦に長くならずスッキリしていていいんですが、上記の通り、階層表示にしています。

そのため、横並びだと展開したときに、なんだかすっきりしません。

そこで、以下のデザインCSSをちょちょいと書き加え（期待値が得られるまで30分）、縦並びにしました。

カテゴリの縦表示

うん、それっぽい（自画自賛

コード

div.hatena-module-category div.hatena-module-body ul li {
    display: block;
    float: none;
}

画像表示のカスタマイズ

画像を使用することは、SEO対策にもなるとその2で書きましたが

ただ画像を貼り付けるだけなのも、なんだか味気ないのと、境目がよくわからない感じでした。

いろいろと調べていくとシロマティ（id:shiromatakumi）氏の記事に、これまた素敵なカスタマイズが。

www.notitle-weblog.com

こちらも、下部にある"画像を浮かせるテクニック"を参考に、そのままコピペさせていただきました(ゝω・´☆)

一気にスタイリッシュっぽさが増してご満悦の僕（ニッコリ

コード

コピペしたコードを、記載させて頂きます。

.entry-content img {
  max-width: 100%;
  box-shadow: 0 0;
  -webkit-transition: all 0.3s;
          transition: all 0.3s;
}

.entry-content img:hover {
  box-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.2);
  -webkit-transform: scale(1.01);
          transform: scale(1.01);
  -webkit-transition: all 0.3s;
          transition: all 0.3s;
}