Blogger：見出し設定(4)テンプレートデザイナーで見出しをカスタマイズ

前の関連記事：Blogger：見出し設定(3)テンプレートデザイナーの不具合

見出し設定はテンプレートをいじらないと変更できない

テンプレートのh1からh4タグの設定が気に入らなかったので変更することにしました。

テンプレートのHTMLの編集でも変更できますがより簡単に変更できるテンプレートデザイナーを使うことにします。

管理画面→テンプレート→カスタマイズ


Bloggerテンプレートデザイナーが立ち上がります。

左のメニューから「上級者向け」をクリックしその右側にでてくるメニューをスクロールして一番下にある「CSSを追加」をクリックします。


ここにhタグの設定を入力してテンプレートの設定を上書きします。

CSSを知らないので参考サイトに教えて頂く

コピペで出来るCSS3で見出しスタイリング

ここにいっぱい例があります。


こういうふうに変更してみましょう。

コピペで使えるといっても対象とするタブの部分は自分の環境に変更しないといけません。

.heading05の部分をh1に変更してからテンプレートデザイナーにペーストします。

h1{
 margin:0 0 30px 0;
 padding:12px 10px;
 background: #1d8ade; /* Old browsers */
 background: -moz-linear-gradient(left, #1d8ade 0%, #53a2e2 50%, #1d8ade 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1d8ade), color-stop(50%,#53a2e2), color-stop(100%,#1d8ade)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(left, #1d8ade 0%,#53a2e2 50%,#1d8ade 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(left, #1d8ade 0%,#53a2e2 50%,#1d8ade 100%); /* Opera11.10+ */
 background: -ms-linear-gradient(left, #1d8ade 0%,#53a2e2 50%,#1d8ade 100%); /* IE10+ */
 background: linear-gradient(left, #1d8ade 0%,#53a2e2 50%,#1d8ade 100%); /* W3C */
 color:#FFF;
 text-shadow:1px 1px 2px #333;
 box-shadow:0 2px 3px rgba(0, 0, 0, 0.4) , inset 0 0 50px rgba(0, 0, 0, 0.1) ;
 position:relative;
 }
h1:before,
h1:after{
 content: ' ';
 position: absolute;
 z-index: -1;
 width: 40%;
 height: 20px;
 left: 4px;
 bottom:7px;
 -webkit-box-shadow: 0 8px 15px rgba(0,0,0, 0.7);
 -moz-box-shadow: 0 8px 15px rgba(0, 0, 0, 0.7);
 box-shadow: 0 8px 15px rgba(0, 0, 0, 0.7);
 background-color: #F00;
 -webkit-transform: rotate(-3deg);
 -moz-transform: rotate(-3deg);
 -o-transform: rotate(-3deg);
 -ms-transform: rotate(-3deg);
 transform: rotate(-3deg);
}
h1:after{
   -webkit-transform: rotate(3deg);
   -moz-transform: rotate(3deg);
   -o-transform: rotate(3deg);
   -ms-transform: rotate(3deg);
   transform: rotate(3deg);
   right: 10px;
   left: auto;
}

コピペするとすぐに下のプレビューに反映されます。

見出し設定(3)テンプレートデザイナーの不具合にあるようにちゃんと動かないかもしれません。

今回はキーボードで一部入力しなおすとプレビューに反映されました。

ブログタイトルの「テスト用2」という部分にページカールエフェクトがかかっています。

このデザインが気に入れば右上の「ブログに適用」ボタンをクリックします。

この表示が真ん中の上にでてくれば適用成功です。

この表示は数秒で消えてしまうので「ブログに適用」ボタンをクリックした後はモニターから目を離してはいけません。

テンプレートデザイナーでの変更を取り消す

参考にしたサイト

コピペで出来るCSS3で見出しスタイリング
いろいろな例があります。Bloggerで使うためにほんの少し修正が必要です。

次の関連記事：Blogger：見出し設定(5)どのHタグの見出しを変更するか？