アツログ

つけめんは、ひやもり派のあつもりです。おすすめのガジェットだったり、食だったり、プログラミング、競馬予想などの雑記をあげていきます

アツログ

【はてなブログ】CSSやHTMLをカスタマイズしてスタイリッシュに

あとで読む

ウェブサイトのイラスト

はてなブログでは、様々なデザインテーマが提供されていてます

私は、デザインセンスのかけらもないので、大変助かります。

ですが、CSSなら少しだけわかるので、自分で行ったテーマに対してのカスタマイズ等々備忘録として書いてみます。

ブログのカスタマイズ

デザインテーマ

アツログでは、「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;
}

「この記事は約◯分で読めます。」を表示する

おおよそ何分ほどで読める記事なのか。これを記事上部に表示しています。

説明、会話をする中で、何点のポイントがあるのか、いつおわるのか

を人は気にするものだと思います。長い話は、疲れますしね。

ブログも一緒で、どれくらいのボリュームなのか。

それが明示されていることで、読み手としても、これくらいなら読んでみようかなと思い閲覧数の向上に繋がるかもしれません。

すでに導入済みの方も多いとは思いますが、私もそのカスタマイズを下記を参考に行ってます。

www.thoughts-make-things.com

id:b204638氏ありがとうございます。

今後のカスタマイズ

まだまだカスタマイズの余地はいろいろあると思っています。

一覧をカード型にしたり、コード見直しをして表示速度をあげたり等など

今後は、そのあたりの見直し等をしながら、備忘録を書いていこうかな。

自分でまとめておかないと、なにしたのかわからなくなるマン