[blogger]見出しにスタイルを付けたい！付箋風スタイルとクレヨンっぽいのを設定してみた。

参考サイト

デザインに役立つCSSで作成する見出しタグのサンプル集 | KOBO TAKE
ホームページやブログでHタグは必ず使用しますが、文章を読みやすくするためにもデザインに合わせた見出しが必要になってくると思います。 ...

Webサイトの基本要素 見出し・リスト・引用文のスタイルを整える | Webクリエイターボックス
Webサイトを装飾していく時に無視できない要素、見出し・リスト・引用文。特にWordPressでオリジナルのテーマを作る時は、ブログ用にこれら基本の要素すべての装飾もすると思います。 ...

見出し用画像 | WEBデザイナーが作った超シンプル素材集

好きな色でCSS見出しが作れます | スタイルシート見出しメーカー
スタイルシート見出しメーカーは、好きな色でシンプルなスタイルシートの見出しを作成するだけのシンプルなツールです。 サンプルカラーから調整してもよし、自分で好きに着色してもよし、使い方は出来上がったソー ...

見出しにスタイルを付ける

ブログを書く時に、見出しを使うのが下手で、横線<hr>引っ張って文章を分けたりしていたんですが、見出しとして分けるのと、閑話休題的に文章を分けるとで使い分けていきたいと思って、ちょっと設定してみることにしました。

参考にさせて頂いたサイトだと、例にあがってるのは大体<h2>あたりなんですが、私の使っている、bloggerのテンプレートだと・・・

• <h1>・・・ブログタイトル
• <h2>・・・ウィジェットタイトル部分と投稿日時
• <h3>・・・投稿タイトル
• <h4>・・・コメント？

というようになっていたので、投稿タイトルは別として、記事内の見出しに<h5>を使って設定してみることにしました。

カスタムCSS画面に追加

と・・・画像の場所の「HTMLの編集」を使って直接書こうかとも思ったんですが、一応その横のカスタマイズから、テンプレートデザイナーに入って、カスタムCSSの追加を使うことにします。

h5 {
font-size:110%;
height:auto;
margin:0px 0px 5px 0px;
padding:0px 0px 5px 0px;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKJwT42QFm-ae69JcskdqCRUhIfDkD7JbE9BYabuu8HdR9a3osVHspGdNf1PUwYffTGkByCYlJFpT-sIFW307qaUUSxkCR5bckJscrm5HvaGCk-rZJ4HeJjDr6upPYmFRDm19oDQlMCnY/s320/head011_02.png);
background-position:bottom;background-repeat:repeat-x;
}

初めに参考サイトとしてあげた【デザインに役立つCSSで作成する見出しタグのサンプル集 | KOBO TAKE】(Click New Tab)を見ながら、自分の好みのスタイルになるように書き換えました。

■【見出し用画像 | WEBデザイナーが作った超シンプル素材集】(Click New Tab)

画像はこちらから頂いた【クレヨン風ライン画像 （640ｘ9px）】

このようになりました・ｗ・
『margin』と『paddhing』で、下に少し余白がでるように調整しています。と思ったけど、さほど余白はとれていませんねｗ まぁ、見ながら調整したしこれで・・・。

画像はいつものように、他に作っている日記用ブログに貼り付けて、そこからURLをコピーしてきて使っています。
画像をあげて下さっているサイトの使い方、ほぼそのままです。

投稿タイトルのスタイルを調整する

次に、折角なので投稿タイトルと、サイドバーウィジェットのタイトルも、ちょっと変更してみます。

まずは、投稿タイトルから・・・

これは、画像の通りHTMLの編集から、このテンプレートでは投稿タイトルには『h3』が使われているので、『h3』をページ内検索で探して、

/* Posts
----------------------------------------------- */
h3.post-title {

で始まる場所を探して下さい。テンプレートによっては書き方が違うかもしれませんが。

この場所に、色々とCSS的なものを書き足していくことによって、色々とスタイルを変更することができます。ちょっと付箋風にしたいなと思ったので・・・

h3.post-title {
  background: #ffffff;
  border-left: 30px solid #852e19;
  padding: 10px 15px 10px 15px;
  margin: 0px -20px 0px -50px;
  box-shadow:2px 3px 3px rgba(0, 0, 0, 0.4) , inset 0 0 5px rgba(0, 0, 0, 0.1) ;
  font: $(post.title.font);
}

このようにしました。

• このブログ、投稿記事の背景は『#fffffc』という指定にしているので、ちょっとだけ差が出るように真っ白に。
• 『border-left』だけ付けて、それを太くしてタブっぽく。
• 『padding』は、上、右、下、左、という順で、少し余白を多めに。
• 『margin』も同様の順番ですが、右を投稿の枠と重なるように、左は枠から飛び出させて貼り付けたっぽく見えるように・・・なってるといいな。
• 『box-shadow』は、IEではうまく動作しませんが、基本Chromeで過ごしてるので設定。
• 『font』はテンプレートそのままです。

結果、こんな感じに。最初、text-shadowも付けてみましたが、滲む感じが出てしまったので、なくしています。

ウィジェットタイトルのスタイルを変更

お次は、サイドバーなどにあるウィジェットのタイトル表示にスタイルをつけます。
こっちは、HTML内から『h2』を探して、

/* Headings
----------------------------------------------- */
h2 {

場所を確認。

h2 {padding:3px;
  border-left:10px solid #852e19;
  width:auto;
  height:auto;
  background: #ffffff;
  padding-left: 5px;
  margin: 0px 0px 10px -10px;
  box-shadow:1px 2px 3px rgba(0, 0, 0, 0.4) , inset 0 0 10px rgba(0, 0, 0, 0.1) ;
  font: $(widget.title.font);
  text-transform: $(widget.title.text.transform);
  color: $(widget.title.text.color);
}

このように書き込みました。

投稿タイトルの設定とほぼ同じですが、『margin』『padding』などに違いがあります。
また、『width』の「auto」を加えないと、思いっきり横にはみ出したりしましたｗ

注意点

これで、今回の設定は以上にしたんですが、初心者から経験した注意点として、テンプレートデザイナーでカスタムのCSSの追加を色々していて。そのあとに「HTMLの編集」からスタイル部分を編集した場合、どうやらカスタムCSSに出ていた内容は消えてしまうようです。
効果が消えるわけではなく、HTMLには書き込まれているので、そちらから編集したり、HTMLの方の書き込みを消して、カスタムCSSに再びペーストしても大丈夫なのですが・・・。

あとで、カスタムCSSから手直ししようと思った時に、表記が消えていて、ちょっと焦りました。そこで、HTMLの方を消さずに、カスタムCSSにまた書くと2重記載の完成になります（・・

グラデーションなどは使わない、簡単な方法でした。