おきがるみがる

お気軽&身軽にスナップ写真を楽しむ雑記ブログです。はてなブログテーマ Sentenceの配布も行っております。

コピペでH2始まりの見出しデザインをはてなブログ用にH3始まりにする【Sentence】

はてなブログでは記事中の見出しをH3始まりでタグを記述することを推奨しています。

しかし、僕が作ったはてなブログテーマ【Sentence】ではH2始まりでの使用を想定してCSSを記述しています。

やはりH1の次にはH2が来るべきという考えでして、Markdown記法で記事を書く際にも#の数的な意味でH2から始める方が効率的です。

それでもはてなブログで書いている人はH3から始める人が多いです。実際、見たままモードやはてな記法で書くならH3を大見出しにする方が書きやすいですしね。

そこでコピペだけでSentenceのH2始まりのデザインをH3始まりに置き換えるコードを用意しました。

H2始まりの見出しのデザインをH3始まりにするコード

以下のコードをデザインCSSにコピペしてもらえれば反映されるはずです。

.entry-content h3 {
  padding-left: 10px;
  border-left: 2px solid #000;
  border-bottom: 0;
  background-color: #f5f5f5;
  font-size: 120%;
}
.entry-content h4::before {
  margin-right: 0;
  font-size: 0;
  content: "";
}
.entry-content h4 {
  border-bottom: 2px solid #000; 
  font-size: 110%;
}
.entry-content h5::before {
  margin-right: 10px;
  color: #22b24c;
  font-size: 120%;
  font-family: "blogicon";
  text-shadow: 1px 1px 3px #666;
  content: "\f029";
}

@media (min-width: 768px) {
  .entry-content h3 {
    padding: 20px 0 20px 20px;
    font-size: 150%;
  }
  .entry-content h4 {
    font-size: 140%;
  }
  .entry-content h5 {
    font-size: 130%;
  }
}

コードの圧縮もおすすめします

www.okigaru-migaru.net

そのままコピペしてもらってもいいのですが、少しでもページ速度を上げたいのであればCSSのコードを圧縮してからデザインCSSに貼り付けるのをおすすめします。

まぁ、これぐらいで劇的な変化はないと思いますが、やらないよりはマシかなという程度です。

差分も公開しているので、自分好みにカスタマイズして使ってみてください!