デザインをカスタマイズするには、「外観」→「カスタマイズ」→「追加css」と移動し、コードを入力することが必要です。
サルワカさんでも、素敵なデザインの見出しのコードを教えてもらえるのですが、「h1」を「h2」などにしてコードをコピペしてもなかなかうまくいかない……ってことがありますよね。
というのも、これってどのテーマにも言えることですが、コンテンツ部分に名前（class名、IDなど）がついているからなんです。
だからその「class名」を「h2,h3,h4」の前にクラス名を入力しなければいけません。
- 旧STORK、SWALLOWなら「.entry-content」（.contentだけでもいいかもしれません）
- SWELLなら「.post_content」
と入力する必要があります。
実際には
<div class=”クラス名”>h2タグとか、ここに本文を書いていく</div>
こういう感じで「div」というタグでくくります。
そのdivのclass名を先程お伝えしたものにすると、メイン記事（コンテンツ）全体のh2,h3,h4が変更されます。
一部分の見出しだけ変更したければ、divのclass名を指定すればOKです。
当サイトの見出し（h2,h3,h4）のスタイルシート
h3のスタイルはこんな感じです
h4はこんな感じ
小説関係の記事、雑記などメインの記事はこのスタイルにしています。
|
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 |
/* h2,h3,h4 */ .post_content h2{ margin: 3em -16px 1em; padding: 0.8em;/*文字周りの余白*/ color: #454545;/*文字色*/ background: #faf6f0;/*背景色*/ border-left: solid 8px #d8f5ed;/*左線（実線 太さ 色）*/ } .post_content h3{ border-left: solid 6px #f8f3e9; position: relative; padding: 8px 18px; height: 2.0em; margin: 2em -8px 0.6em; } .post_content h3:after{ position: absolute; content: " "; border-left: solid 6px #d8f5ed; left: -6px; top: -2px; height: 70%; } .post_content h4{ border-left: solid 4px #f8f3e9; position: relative; padding-left: 14px; height: 1.6em; margin: 1.4em 0 ; } .post_content h4:after{ position: absolute; content: " "; border-left: solid 4px #d8f5ed; left: -4px; height: 50%; } |
デザインカテゴリー
h3はこんな感じです
h4はこんな感じ
全体的に丸っこいです。webデザイン関係の記事でこちらの見出しにしています。
|
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 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
/* デザインh2 h3 h4 */ .wd h2 { background: transparent; border-left: transparent; position: relative; margin: 3em 0 1em; color: #454545; font-size: 140%; text-shadow: 0 0 2px white; box-shadow: 0 0 0 rgba(0, 0, 0, .03); padding: 3em 0 0; } .wd h2:before { content: ""; position: absolute; background: #d8f5ed; margin-top: 1.5em; width: 56px; height: 56px; border-radius: 50%; top: 50%; /* border: dashed 1px white; */ left: -32px; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: -1; } .wd h3 { border: transparent; background: transparent; position: relative; color: #454545; margin: 2em 0 0.6em; padding: 8px 6px; } .wd h3:before { content: ""; position: absolute; background: #fff1bf; margin-top: 2px; width: 40px; height: 40px; border-radius: 50%; top: 50%; /* border: dashed 1px white; */ left: -16px; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: -1; } .wd h3:after{ border-left: transparent; } .wd h4 { position: relative; color: #454545; text-shadow: 0 0 2px white; margin: 1.2em 0 1.0em; padding: 12px 10px 0; border-left: transparent; } .wd h4:before { content: ""; position: absolute; margin-top: 10px; background: #fde2e5; width: 32px; height: 32px; border-radius: 50%; top: 50%; /* border: dashed 1px white; */ left: -8px; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: -1; } .wd h4:after{ border-left: transparent; } |
カスタマイズは時間がかかるけど、オリジナル感も出せて達成感がありますよね！
ストークやスワローのカスタマイズの記事はこちら↓↓
あわせて読みたい
ストーク・スワローの見出し（h2,h3,h4）をカスタマイズストークやスワローって、初心者でもすぐに始められるくらいデザイン性にも優れていて便利（スマホ対応）なのですが、皆使っている・・・・・・というのが、ちょっと引...
ブログランキングに参加してます！
次のリンクをクリックして応援してもらえると嬉しいです。
よろしくお願いします(＠ﾟ∀`＠)ﾉ