2012/05/13

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

follow us in feedly
follow us in RSS

参考サイト

デザインに役立つ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(http://3.bp.blogspot.com/-p3beijhE_h0/T68iu6te_rI/AAAAAAAABRk/JYVV7hwPbxg/s320/head011_02.png);
background-position:bottom;background-repeat:repeat-x;
}
初めに参考サイトとしてあげた【デザインに役立つCSSで作成する見出しタグのサンプル集 | KOBO TAKE】(Click New Tab)を見ながら、自分の好みのスタイルになるように書き換えました。

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

画像はこちらから頂いた【クレヨン風ライン画像 (640x9px)】

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

画像はいつものように、他に作っている日記用ブログに貼り付けて、そこから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」を加えないと、思いっきり横にはみ出したりしましたw


注意点

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

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

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

4 件のコメント:

  1. はじめまして。e_sukeと申します。いつもブログを拝見させていただいています。Bloggerのカスタマイズについて書かれているサイトは少ないのでとても参考になります。今回の記事も参考にさせて頂きました!ありがとうございます。
    そこで質問なのですが、忍者おまとめボタンを記事の下に表示させているのですがホームの続きを読むの下にも表示されてしまいます。zenbackの記事を読んで試したのですが「HTMLの編集」のところでエラーが表示されます。何かいい方法はないでしょうか… ご教授よろしくお願いします。

    返信削除
  2. コメントありがとうございます、あとツイッターもw
    確認してみました。

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <忍者おまとめボタンコード>
    </b:if>

    というようにタグで挟んでみてください。
    【<】と【>】、【&】は半角に修正して下さい、コメント欄でコードがうまく表示出来なかったもので・・・。

    自分を記事を見直したところ【&quot;】としないとbloggerでは通らないところを【"】のままで記載してしまってました。すみませんでした(・・;

    返信削除
  3. こんにちは。

    いつも参考にさせていただいております

    早速質問なのですが

    サイドーバーのタイトルのスタイルを変更したいのですが

    エラーが出ました。

    ページ スキンで無効な変数が宣言されています

    widget.title.text.transform
     
    の部分がエラーみたいです。

    対処法などありましたら、教えていただけると嬉しいです!

    返信削除
  4. コメントありがとうございます。

    エラーの件ですが、もしかしたら選択しているテンプレートによっては、変数の設定がないものがあるのかもしれません。例えばシンプルテンプレートでは、widget.title.text.transformは、デフォルトではありませんでした。

    該当部分を、
    【 text-transform: uppercase; 】
    というように、変数を使わずに設定するといいと思います。

    が、よくよく考えていくと、HTMLの編集から変更すると、カスタムCSSに書き込んでいた内容が見えなくなったりと、少し厄介な事もありますので・・・

    HTMLの編集は触らず。カスタムCSSの追加に、
    h2 {padding:3px;  border-left:10px solid #852e19;  width:auto;  height:auto;  background: #ffffff;  padding-left: 5px;  margin: 0px 0px 10px -10px!important;  box-shadow:1px 2px 3px rgba(0, 0, 0, 0.4) , inset 0 0 10px rgba(0, 0, 0, 0.1);}

    と追加するほうが、後々の調整がしやすいかもしれません。

    この場合、h3の投稿タイトルの設定も同様に、カスタムCSSに、

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

    としてあげて下さい。
    こうすれば、HTMLの編集をいじらずに、カスタムCSS側だけでスタイルの変更が出来る事に気付きました(・・

    marginに設定している【!important】の部分は、設定値を強制するための追加です。

    どうぞよろしくお願い致します。

    返信削除

Related Posts Plugin for WordPress, Blogger...