【STORK】見出しタグ(h2,h3)のデザインを変更しました


スポンサーリンク

ちょこちょこブログのデザイン変えてます。


どうも、ちゃぴ(@chapilog)です。

可愛いブログのデザインに憧れて、ブログカラーをピンク重視のものにしてみました。

それに伴って、見出しのデザインも変更したのでコピペ用にCSSを記載しておきます。

私のブログ環境

  • 使用テーマ:STORK
  • WordPress ver.4.6.1-ja

今回STORKのカスタマイズをしたところ

女の子らしいブログにしたかったので、今回は見出しタグを変更してみました。

既に変更が適用されているので、変更後のデザインは見ればわかるかと思いますが、一応ビフォーアフター画像。

evernote-camera-roll-20161116-183738変更前に比べて、大分女の子らしいデザインになりました!

スポンサーリンク

STORKの見出しデザイン変更手順

1.子テーマを適用する

デザインを変更する時は必ず子テーマを使用しましょう!

OPEN CAGEの子テーマダウンロードページからSTORKの子テーマをダウンロードします。

WordPressに管理画面から「外観」→「テーマ」→「新規追加」を選び、ダウンロードしたSTORKの子テーマをアップロードして有効化します。

既に子テーマを適用している場合は、スルーでOK。

2.デフォルト設定にする

STORKはカスタマイズ欄から3種類の見出しを設定することが出来ますが、デフォルトにしていないと自分でデザインを設定することが出来ないから注意が必要です。

管理画面から「外観」→「カスタマイズ」に進み、「投稿・固定ページ設定」内の見出しデザインをシンプル(デフォルト)に設定して保存します。

既にシンプル(デフォルト)設定の場合は、スルーでOK。

3.CSSに追記する

style.cssを書き換えてデザインを変更します。

まずは、H2見出しのデザインを変更するために「外観」→「テーマの編集」→「スタイルシート(style.css)」を開きます。

スタイルシート(style.css)に以下のコードを追記します。

.entry-content h2{<br />
font-size: 1.1em;/* 文字の大きさ */<br />
color: #fff!important;<br />
background: #f9a4c5!important;<br />
padding: 12px;<br />
margin: 2.0em 0 1.5em;<br />
border: 2px dashed rgba(255,255,255,0.5);<br />
border-radius: 6px;<br />
-moz-border-radius: 6px;<br />
-webkit-border-radius: 6px;<br />
box-shadow: 0 0 0 5px #f9a4c5, 0 2px 3px 5px rgba(0,0,0,0.5)!important;<br />
-moz-box-shadow: 0 0 0 5px #f9a4c5, 0 2px 3px 5px rgba(0,0,0,0.5)!important;<br />
-webkit-box-shadow: 0 0 0 5px #f9a4c5, 0 2px 3px 5px rgba(0,0,0,0.5)!important;<br />
}

H3見出しのデザインも、同じくスタイルシート(style.css)に追記して変更します。

.entry-content h3{<br />
font-size: 1.2em;/* 文字の大きさ <em>/<br />
font-weight: bold;/</em> 文字の太さ <em>/<br />
color: #5C4747!important;/</em> 文字の色 <em>/<br />
border-left: 7px solid #f9a4c5!important;/</em> 文字左の点線の太さ・種類・カラー <em>/<br />
border-bottom: 2px dashed #f9a4c5!important;/</em> 文字下の点線の太さ・種類・カラー */<br />
margin: 0 0 1.5em;<br />
padding: 0.2em 0.8em;<br />
}

今回は女の子らしさを表現するためにピンクにしましたが、別の色にすると印象がガラッと変わります。

終わりに

見出しのデザインが変わるだけで、ブログの印象が全く違いますね。

ちょこちょことカスタマイズしていたら、有名テーマ使用でも少しは個性を表現出来るようになってきたかなと思います。

ブログを始めたばかりの時は、STINGER3を使っていましたが、CSSなんて見るのも嫌で全く弄らなかったので、少しは成長しました(笑)

次あたりでそろそろロゴ画像を作ったりしたいです。

最後まで読んで頂きありがとうございました。おしまい。

今回参考にさせて頂いたサイト様はコチラです。
参考:コピペで使えるCSSデザイン枠テンプレート/WPnavi

スポンサーリンク
スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です