前の関連記事：Blogger：見出し設定(3)テンプレートデザイナーの不具合
見出し設定はテンプレートをいじらないと変更できない
テンプレートのh1からh4タグの設定が気に入らなかったので変更することにしました。
テンプレートのHTMLの編集でも変更できますがより簡単に変更できるテンプレートデザイナーを使うことにします。
管理画面→テンプレート→カスタマイズ
Bloggerテンプレートデザイナーが立ち上がります。
左のメニューから「上級者向け」をクリックしその右側にでてくるメニューをスクロールして一番下にある「CSSを追加」をクリックします。
ここにhタグの設定を入力してテンプレートの設定を上書きします。
CSSを知らないので参考サイトに教えて頂く
コピペで出来るCSS3で見出しスタイリング
ここにいっぱい例があります。
こういうふうに変更してみましょう。
コピペで使えるといっても対象とするタブの部分は自分の環境に変更しないといけません。
.heading05の部分をh1に変更してからテンプレートデザイナーにペーストします。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
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)テンプレートデザイナーの不具合にあるようにちゃんと動かないかもしれません。
今回はキーボードで一部入力しなおすとプレビューに反映されました。
↓
このデザインが気に入れば右上の「ブログに適用」ボタンをクリックします。
この表示は数秒で消えてしまうので「ブログに適用」ボタンをクリックした後はモニターから目を離してはいけません。
テンプレートデザイナーでの変更を取り消す
適用した変更を取り消したい場合は変更したときと同じように「CSSを追加」画面で内容を空欄のまま「ブログに適用」ボタンを押せばできます。
「ブログに適用」ボタンがアクティブになっていないときは左のメニューの「テンプレート」をクリックします。
下に出ている「カスタマイズ内容を削除」をクリックしたらカスタマイズ内容が全て削除されます。
参考にしたサイト
コピペで出来るCSS3で見出しスタイリング
いろいろな例があります。Bloggerで使うためにほんの少し修正が必要です。
0 件のコメント:
コメントを投稿