ぱぱらいく~ディズニー大好きパパの育児記録~

ディズニーが大好きな年子・双子のパパがディズニーと子育ての情報を発信するブログ

スマホの見出しを変更しました

f:id:itoht12:20170303080455j:plain

本日はブログのカスタマイズの話

いつも閲覧ありがとうございます

ブログ管理人のあっくんです

徐々に進めているブログのカスタマイズ

前回はブログのイメージカラーを決めました

ブログのイメージカラーを考える - ぱぱらいく~ディズニー大好きパパの育児記録~

今回は、前回考えたイメージカラーをもとにスマホ版の見出しの修正を実施しました

イメージカラーをカラーコードに落とす

前回の記事で当ブログのイメージカラーを橙と決めましたが、橙といってもいろんな色味があります

橙をイメージカラーとしている企業さんを考えてみても

  • au
  • 吉野家
  • mixi
  • オートバックス
  • クックパッド

などなど……

それぞれが微妙に違う色味の橙を採用しています

では当ブログはどうするか?

  • 親しみやすく
  • ただ、見出しに使っても強調しすぎない色味

ということで採用したのが#ff9900というカラーコード

Amazonさんの丸パクリです(笑)

SNSやWebサービスなどのロゴの色(ブランドカラー)を調べてみた|Webpark

大見出しのデザイン

大見出し(H3)のデザインはゆきひーさんの記事を拝借しました

コピペ一発ではてなブログ見出しをカスタマイズ!ちょっとの工夫で印象が格段に変わる! - Yukihy Life

こちらの記事にある「よくあるや~つ」を拝借

横の太線の色味を変更したかったので

border-left: 10px solid #e07000;

border-left: 10px solid #99000;

に変更

さらに下線部分が不要だったので

border-bottom: 1px solid #e07000;

を削除させていただきました

あとは上下幅を多少修正して完了です

中見出し

 

中見出しはWeb'sNotesさんの記事を拝借

CSSで作る見出しデザイン | Web’Notes

「当ブログの見出し」を拝借させていただきました

こちらのサイトははてなブログ用のカスタマイズサイトではないため、記述の

.heading1{
.heading1:after{
.heading1:before{

 を

.entry-content h3{
.entry-content h3:after{
.entry-content h3:before{

に変更しないといけない部分がすこし厄介でしたがなんとか修正できました

あとは

background:#00A8FF;

background:#ff9900;

に変更

こちらも下線部が不要だったので

border-bottom:2px solid #ccc;

を削除

フォントサイズが大きかったので

font-size: 22px;

font-size: 16px;

 

に修正しました

小見出し

 

小見出しも同じくWebNote'sさんから

CSSで作る見出しデザイン | Web’Notes

「円マークの見出し」を拝借させていただきました

修正箇所は中見出しとほぼ同じです

まとめ

ブログがおしゃれになった!……のか?

なんか思ったよりもおしゃれにならなかった?

ここら辺が管理人のセンスの限界(;^_^A

「もっとこうしたほうがおしゃれ!」というアイディアがあればどしどしお待ちしてます!(笑)