接客業♂のドタバタ育児ブログ

イクメンと言うほどの事はしませんが、嫁にあまり怒られない程度は頑張っています。4歳の男の子と1歳の男の子がいます。

接客業♂のドタバタ育児ブログ

はてなブログのデザインテーマ「Brooklyn」導入とhtml/CSSカスタマイズ

やろうやろうと思っていた当ブログのカスタマイズに着手し、取りあえず形になりましたので、八百屋が行ったカスタマイズの備忘録も兼ねて紹介していきたいと思います。

デザインテーマ

shiromatakumi.hatenablog.com

テーマは「Brooklyn」を選びました。
登場してから1年が過ぎていますが、非常に人気のデザインテーマです。
カスタムしなくても黒ベースのスタイリッシュかっこいい感じですし、使用者が多いので検索すればカスタマイズに困らないかなと思い決めました。

実際はてなブログの超便利なデザインテーマ「Brooklyn」を作りました - NO TITLEのコメント欄には、カスタマイズに困った人達が質問していて、ここである程度の問題は解決してしまいます。


html/cssカスタマイズ


shiromatakumi.hatenablog.com
www.style-yry.com




では、カスタマイズした所を簡単に説明してきます。

ブログトップに記事一覧を表示させる

www.ito-tomohide.com

こちらを参考にして、見にくいトップページをすっきりさせました。
パソコンでは50記事まで一気に表示しますが、スマホでは10記事ごと表示に変更しました。

【追記】
staff.hatenablog.com

※公式で対応してくれました。



ヘッダー画像作成

www.tukinasikotonoha.com
blog.z0i.net

1000×200ピクセルでヘッダー画像を作成し、掲載しました。
余白の白い所を除去してスマホでもヘッダー全体が見えるように修正しました。

目次

角を丸くしたり色を変えたりしました。
ちょっと前にしてたので、参考URLがわからないのでコード貼っときます。

/* ===============目次カスタマイズ============== */
.table-of-contents {
border: 1.5px solid #191970;
padding: 20px 10px 20px 40px;
list-style-type: decimal;
border-radius: 5px;
font-size: 17px;
}
.table-of-contents:before{
    content: "目次";
    font-size: 20px;
}
.table-of-contents{
    background: #efefef;/*背景色はここから変更*/
}

原型を覚えてないので、使用される際はバックアップ&自己責任でお願いします。

見出しh3

「Brooklyn」には初期状態から見出しの装飾がされてあります。
そのため、カスタマイズする場合は見出しの装飾をリセットしてから新たに装飾する必要があります。

/* 見出しのリセット */
.entry-content h2,
.entry-content h2::before,
.entry-content h2::after {
  background: none;
  border: none;
  border-radius: 0;
}

.entry-content h2 {
background: #1e90ff; /*背景色*/
padding: 0.5em;/*文字周りの余白*/
color: white;/*文字を白に*/
border-radius: 0.5em;/*角の丸み*/
}

見出しは青をベースにだんだん色が薄くなり、ラインも少なくなるように設定しました。

見出しh4

ちなみに八百屋は見出しボタンは使わずに(h2が無いから)手打ちしています。

本文

記事タイトルは25px
本文の文字は16px
本文の文字色:#333333
など軽く変更し、少しでも読みやすくなるようにしました。

上に戻る

www.travelbanana.net

確かにあると便利な上へ戻るボタン。

Feedlyボタンの追加

marke-life.hatenablog.com
使っている人向けです。
私は使っていません。

カエレバ

商品紹介ブログパーツ カエレバ

mbdb.jp

一括でAmazon・楽天・Yahoo!ショッピングを表示できるツール。
導入している方も多いですのでこちらもカスタマイズ記事が多いです。
商品紹介が多い人は使ってみては?

吹き出しで会話

shiromatakumi.hatenablog.com

使うと意外と楽しいです。
一度設定してしまえば、使用も楽ちんです。

サイドバー

サイドバーは色を少し変えた程度です。
ちょっとカスタマイズ使用かなと思っていますが・・・。

カスタマイズまとめ

カスタマイズって楽しいから時間の過ぎるのが早いんですよね・・。
八百屋としては、ちょこちょこ変えるのではなく、変えたい所を決めて「こうしたい!」という意識をもってカスタマイズするのがおすすめです。
カスタマイズしながらレイアウトを決めていると、ああでもない、こうでもないと時間がもったいないです。
また飽きてそのうち変えたくなることもありますので、のめりこみすぎずほどほどにカスタマイズしましょう!



※カスタマイズしたら追記するかもです。

八百屋でした。