見出しデザインフリー素材集(サンプル)CSS・HTMLタグも!

※動画はパスワードで保護されています。



今回は
見出しデザインの素材・サンプル集
を紹介します。

画像とCSS・HTMLタグを
合わせて紹介していますので、
参考にして使用してください。

また、WordPressテーマ賢威の
見出しのカスタマイズ方法も紹介します。
 

今回紹介する見出しデザインは
以下の画像にある9種類です。

見出しのコードを確認したい時は
下にある目次をクリックすると
すぐにコードを確認できます。
見出し デザイン フリー素材 サンプル CSS HTML タグ

 

見出しデザインフリー素材集(サンプル)CSS・HTMLタグも!

上で紹介した見出しデザインの
画像とコードを順番に紹介します。

ここではすべてh3タグを例にしていますが、
あなたが使用している見出しに合わせて
h2、h4など数字を変えて使用してください。

見出しデザインフリー素材①

見出し デザイン フリー素材 サンプル CSS HTML タグ 1

↓見出しコード

 

見出しデザインフリー素材②

見出し デザイン フリー素材 サンプル CSS HTML タグ 2

↓見出しコード

 

見出しデザインフリー素材③

見出し デザイン フリー素材 サンプル CSS HTML タグ 3

↓見出しコード

 

見出しデザインフリー素材④

見出し デザイン フリー素材 サンプル CSS HTML タグ 4

↓見出しコード

 

見出しデザインフリー素材⑤

見出し デザイン フリー素材 サンプル CSS HTML タグ 5

↓見出しコード

 

見出しデザインフリー素材⑥

見出し デザイン フリー素材 サンプル CSS HTML タグ 6

↓見出しコード

 

見出しデザインフリー素材⑦

見出し デザイン フリー素材 サンプル CSS HTML タグ 7

↓見出しコード

 

見出しデザインフリー素材⑧

見出し デザイン フリー素材 サンプル CSS HTML タグ 8

↓見出しコード

 

見出しデザインフリー素材⑨

見出し デザイン フリー素材 サンプル CSS HTML タグ 9

↓見出しコード

WordPressテーマ賢威の見出しカスタマイズ方法

ダッシュボードの「外観」
→「テーマの編集」
→「design.css」をクリック。
賢威 見出し カスタマイズ デザイン 編集 変更 外観 テーマの編集 賢威 見出し カスタマイズ デザイン 編集 変更 外観 テーマの編集 design.css
 

「design.css」内の以下の部分で
見出しデザインの指定をしています。

/*——————————————————–
メインコンテンツ(本文)
——————————————————–*/
・・・
/*●H2タグ*/
・・・
/*●H3タグ*/
・・・
/*●H4タグ*/
・・・
/*●H5タグ*/
・・・

 
変更したいタグ内に
上で紹介したコードを入力すると
見出しを変更することができます。

今回紹介したコードを参考に、
オリジナルの見出しを作ってみてください。
 

デザインと関係のない話ですが、
できるだけ見出しタグの順番は
小さい数値から順番に使うように
してください。

h1 → h2 → h3 → …というように。

特にSEO上の効果はありませんが、
(Googleマット・カッツさんが言及)
順番に使用した方が管理しやすいです。

特に意図がない時は順番に使いましょう。

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

記事が価値あるものだと思われたら、
下のボタンからシェアをして頂けると嬉しいです。

ブログの始め方・稼ぎ方をまとめたガイドブックをプレゼント中!
(PDFとサイト版の両方をプレゼント)
AFFIKATSUGuideBook

>> メルマガ登録はこちら <<

無料メールマガジン登録フォーム

メルマガ登録フォーム

苗字 (漢字で)
メールアドレス

※私からお送りする全てのメールに解除リンクを付けていますので、いつでもメルマガ解除をすることが可能です。




コメントを残す



コメントはサイト管理者が確認するまで表示されません。
他の読者さんにも有益だと判断した場合のみコメント対応を致します。

個別の問い合わせは【こちら】からお願いします。

CAPTCHA