H1, H2, H3タグのデザインを変更・見出しCSSスタイルのテンプレート

記事内で題名のついた枠やラインで綺麗に分けられています。「これは読みやすい」と思った人に必見!題名で記事の内容を分別する。見出しH1, H2, H3タグのデザインを変更、記事をもっと読みやすくする方法。見出しのCSSスタイルテンプレートを用意しましたので、お使いください。

H1・H2・H3の見出しタグ

見出しタグは文書構造を分かりやすく伝えるために使われているタグのことです。 ウェブブラウザで表示した際にH1, H2, H3見出しタグはテキストが大きくなり太字で表示されます。閲覧者に見出しであることがわかりやすく表示されます。

CSSスタイルの変更方法

テンプレート設定にて投稿記事内の見出しタグのデザインが変更不可の場合はCSSスタイルに【あるコード】を追加すれば見出しタグのデザインを変更できます。

では、CSSスタイルにコードを追加しましょう

  1. ワードプレスのアドミニストレーターパネルにログイン
  2. メニューの外観>カスタマイズ
  3. テーマの設定画面が出てきます
  4. 左側 テンプレート設定メニューの中に【追加CSS】・【add CSS】又は【カスタムCSS】を探します
  5. 【追加CSS】押します
  6. 出てきた枠に気に入ったHTMLコードを貼り付けてください

テンプレートを用意しましたので、お使いください。

見出しCSSスタイルのテンプレート

表示されない場合 h1/2/3 の前に .entry-content | .article | #main-contents を入れてみてください。

列:

  • .entry-content h2 {
  • .article h2 {
  • #main-contents h2 {

H1や3のデザインを変えたい場合 h2をh1か3に変更してください。

*使っているテーマによって正しく表示されない場合もあります。

テンプレート1

h2 {
color: rgb(0, 0, 0);
font: 700 20px Open Sans;
top: 0px;
margin: 0px;
padding: 5px;
text-transform: uppercase;
border-bottom: 2px solid rgb(136, 136, 136);
}

テンプレート2

h2 {
color: rgb(0, 0, 0);
font: 700 20px Open Sans;
top: 0px;
margin: 0px;
padding: 5px;
text-transform: uppercase;
border-bottom: 2px solid rgb(136, 136, 136);
border-left: 10px solid rgb(136, 136, 136);
}

テンプレート3

h2 {
color: rgb(0, 0, 0);
font: 700 20px Open Sans;
top: 0px;
margin: 0px;
padding: 5px;
text-transform: uppercase;
border-bottom: 2px solid rgb(136, 136, 136);
border-left: 2px solid rgb(136, 136, 136);
border-right: 2px solid rgb(136, 136, 136);
border-top: 2px solid rgb(136, 136, 136);
}

テンプレート4

h2{
font: normal normal normal 20px/1 Helvetica, arial, sans-serif;
border-bottom: 2px solid #000;
}
h2:first-line{
background:#000;
color:#fff;
}

テンプレート5

h2{
font: normal normal normal 20px/1 Helvetica, arial, sans-serif;
border-bottom: 2px solid #000;
background:#000;
color:#fff;

display:inline-block;
padding:3px 15px;
margin-left:10px;
}
h2:after{ /* the line under H2 */
left:0px;
display:block;
position:absolute;
width:100%;
height:3px;
margin-top:2px;
content: ” “;
background:#000;
}

テンプレート6

h2 {
padding: .5em .75em;
background-color: #f6f6f6;
border-left: 6px solid #ccc;}

テンプレート7

h2 {
padding: 1em;
border: 3px solid #000;
border-radius: 2em .9em 2em .5em/.9em 3em .5em 4em;
}

テンプレート8

h2 {
font-size:23px;
padding: .5em .75em;
background-color: #000;
color:#fff;
border-bottom:0px;
}

質問がありましたらコメントで書いてください。

返事を書く

コメントを入力してください
お名前を入力してください