WP【Twenty Seventeen】初心者でも簡単にできる!タイトル見出しサンプル集22選

WordPress【Twenty Seventeen】初心者の方向けに通常の見出し&テキストの長さに合わせて自動で可変するサンプルを作ってみました。

HTML,CSS初心者の方は🔰マークのところを読んでくださいね。
 

その他の方はスルーしたください。
 

🔰 ビジュアルモードの場合

見出しにしたいテキスト内にカーソルを合わせて以下のように投稿画面の段落から見出しを選択するだけ!!
 

🔰 テキストモードの場合

以下のようにタイトルにしたいテキストを<h2>~</h2>などで囲みます。

<h2>タイトル</h2>
<h3>タイトル</h3>
<h4>タイトル</h4>
<h5>タイトル</h5>
<h6>タイトル</h6>

 

🔰 CSSをコピペする時の注意事項

以下に記載のCSSは全て見出しの部分はh2で記述しています。
1 .entry content {h2  から始まるcssは、h2 を ご自身が使用したい h1~h6 に置き換えて使用してください。
2 .midashi で始まるcssにはhtmlも記述していますので参考にしてください。
3 fontサイズは、現在18px~20pxで指定していますのでご自分のサイトのレイアウトに応じて指定し直してください。

 

↓CSSにLet’s go!↓

シンプルなボーダーライン

 

ごくごくシンプルなラインですが、どんなサイトでも合いそうですね

見出し1のSampleです


↓h2タグを使用しない場合↓

見出し2のSampleです


↓h2タグを使用しない場合↓

見出し3のSampleです


↓h2タグを使用しない場合↓

立体感のあるシンプルでカラフルなライン

 

縦ラインにはgoogleで使われている色も入れて下には影を入れて立体感を出してみました。

見出し4のSampleです


↓h2タグを使用しない場合↓

見出し5のSampleです


↓h2タグを使用しない場合↓

見出し6のSampleです


↓h2タグを使用しない場合↓

見出し7のSampleです


↓h2タグを使用しない場合↓

パステルカラーの可愛らしいライン

 

パステルカラーで上下にラインを入れて少し可愛らしく仕上げてみました。

見出し8のSampleです


↓h2タグを使用しない場合↓

見出し9のSampleです


↓h2タグを使用しない場合↓

見出し10のSampleです


↓h2タグを使用しない場合↓

テキストの長さに合ってラインが可変するサンプルあり

◯でアクセントを付けてみました

パステル系の◯に濃いアンダーラインを引いてみまた。これは、中見出しくらいがいいでしょう!

見出し11と見出し12はテキストの長さに合わせてラインが可変します。

見出し11のSampleです


↓h2タグを使用しない場合↓

見出し12のSampleです


↓h2タグを使用しない場合↓

見出し13のSampleです


↓h2タグを使用しない場合↓

可愛らしいパステルカラーと濃いアンダーラインでシンプルに

見出し14と見出し15はテキストの長さに合わせてラインが可変します。

見出し14のSampleです


↓h2タグを使用しない場合↓

見出し15のSampleです


↓h2タグを使用しない場合↓

見出し16のSampleです


↓h2タグを使用しない場合↓

左右に縦ライン&unicodeの絵文字を使ってみました

見出し17と見出し18はテキストの長さに合わせてラインが可変します。

✔見出し17のSampleです


↓h2タグを使用しない場合↓

🗂見出し18のSampleです


↓h2タグを使用しない場合↓

🍎見出し19のSampleです


↓h2タグを使用しない場合↓

アクセントの◯やラインが薄く消えていくグラデーション

 

見出し20のSampleです


↓h2タグを使用しない場合↓

見出し21のSampleです


↓h2タグを使用しない場合↓

 

見出し22のSampleです


↓h2タグを使用しない場合↓

にほんブログ村 IT技術ブログ WordPressへにほんブログ村 IT技術ブログへ

🍹役にたったら共有してね🍹

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)