デザインをカスタマイズするには、「外観」→「カスタマイズ」→「追加css」と移動し、コードを入力することが必要です。
サルワカさんでも、素敵なデザインの見出しのコードを教えてもらえるのですが、「h1」を「h2」などにしてコードをコピペしてもなかなかうまくいかない……ってことがありますよね。
というのも、これってどのテーマにも言えることですが、コンテンツ部分に名前（class名、IDなど）がついているからなんです。
なので、SWELLの場合、「h2,h3,h4」の前に「.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; } |
カスタマイズは時間がかかるけど、オリジナル感も出せて達成感がありますよね！
