MAGAZINEWordPressの見出しデザインをカスタマイズする方法!便利なプラグインもご紹介WordPressのテーマのほとんどは、すでに綺麗にデザインされており、とても簡単に本格的なWEBサイトを構築することができます。プラグインやCSSを編集することで、テーマを自由にカスタマイズすることができるのもWordPressの強みです。今回はそのテーマの見出しデザインをプラグインやCSS編集を用いてカスタマイズする方法をご紹介します。しデザインのCSSをコピペするWordPressでオリジナルの見出しボタンを使ってみる見出しのデザインが反映されない場合コードにスペルミスがないか確認するclass/idが一致しているか確認するブラウザのキャッシュが残っている可能性まとめSEOに効果的な見出しデザイン見出しはSEOの観点からもとても重要なポイントです。SEOの本質はユーザビリティーにあると言っても過言ではありません。何の装飾もない冗長な文章では、読者は読みにくく離脱してしまいます。下記ではユーザビリティーを意識したデザインで、見出しを使いこなすために意識するべき点を解説します。効果的に見出しをデザインする際に、下記の3点を意識しましょう。要点をつかみやすくする情報を整理する文章のテンポをよくする見出しの背景色を装飾したり、ボーダーカラーを使用することで、読者はすぐに見出しを見つけ要点を理解することができます。フォントサイズを見出しの階層(h1,h2,h3....etc)毎に調整することで、情報に重み付けができるため、より読者が記事内容を整理しやすくなります。記事内容を整理しながらテンポよく読み進めることができるため、読了率も上がり(離脱率の低下)SEOにもポジティブな影響をもたらしてくれます。検索エンジンにとっても見出しは重要な要素です。情報の重み付けについて先述しましたが、検索エンジンは見出しを理解することで、記事の内容を把握します。執筆前に記事の構成を整理し、適切に見出しタグを活用しましょう。見出しデザインのSEO効果を解説しました。プラグインを活用して、自分なりの見出しデザインを装飾していきましょう。CSS」の2つのプラグインを使用していきます。見出しデザインをカスタマイズするプラグインをインストール見出しのデザインはWordPressファイルを直接編集することで、カスタマイズすることも可能です。ファイルを直接編集することは意図しないバグの元になりますし、バックアップを取る必要があったりと、面倒なこともあります。WordPressのプラグインには、見出しデザインを簡単にカスタマイズすることができるプラグインが用意されているので、それらを使用していきましょう。AddQuicktagのインストールAddQuicktagは自分でHTML、CSSで作成したタグを、WordPressエディターに登録しておける便利なプラグインです。管理画面「プラグイン」→「新規追加」をクリックし、右上の検索窓に「AddQuicktag」と入力してください。検索結果が表示されたら、そのまま「今すぐインストール」をくクリックし、「有効化」してください。これでAddQuicktagのインストールは完了です。CSSをインストールしていきます。CSS」と入力してください。「今すぐインストール」→「有効化」をクリックしてください。CSSのインストールは完了です。CSSコピペで実装できる見出しデザイン例ここまでで見出しデザインをカスタマイズする準備が整いました。ここから、実際にHTML、CSSを使ってデザインを決めていきます。デザイン」等で検索すると、コピペで実装できるサンプルコードを紹介してくれている記事がたくさんヒットします。それらを参考にしながら実装していきましょう。saruwakakun.comCSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選h1〜h6タグの美しくおしゃれなデザインサンプルをたくさん紹介します。どれもコピペで使うことができます。...画像は使用せずにCSSだけでスタイリングしたタイトル(見出し)のデザインサンプルで、似たようなものやちょっとCSS追記した程度のものも多いですが全50種類です。[...ホームページの重要な要素の1つである見出しですが、毎回似たり寄ったりのデザインになったり、作るのに時間がかかりすぎていませんか。今回は見出しデザインで悩む方に向けて、オシャレな装飾ができるCSSの見出しを紹介した記事をまとめてご紹介します。実際にWordPressの見出しデザインをカスタマイズする見出しデザインを選ぶ先ほど紹介した記事などから気に入った見出しのデザインを選びます。シンプルなものから少しリッチなデザインにしたおしゃれなものまで豊富に紹介されているので、自分のWEBサイトに合わせた見出しデザインを選びましょう。オリジナルの見出しボタンを作成する管理画面の「設定」→「AddQuicktag」を開きます。今回は見出しh2とh3を編集していきます。h4、h5...も同様の作業ですので、自由に追加してください。設定画面を確認しましょう。「クイックタグの追加と削除」のセクションに以下の項目を入力していきます。・開始タグ*と終了タグ・実装箇所ボタンのラベル、ダッシュアイコンラベルボタンのラベルは、その見出しに与える名前、ラベル名はマウスオーバーした際に表示される説明文です。idのようなイメージですが、あまり深く考えずボタンのラベルとラベル名に「h2」(今回は見出しh2をデザインするため)と入力しましょう。開始タグ*と終了タグ開始タグと終了タグの項目には、HTMLのタグと属性、値を入力します。今回は見出しh2をデザインしていくので、HTMLタグは”h2”、属性はid、その値は覚えやすい値をつけてください。アクセスキーと順番この項目は必須項目ではありません。空欄でも特に問題ありませんので、未入力のままにしましょう。右のチェックボックスはデザインしたタグを使用する箇所です。理由がなければ全てにチェックを入れておきましょう。右のボックスにチェックを入れると全てにチェックを入れることができます。これでAddQuicktagの設定は完了です。見出しデザインのCSSをコピペするタグの設定が完了したので、CSSでデザインをしていきます。CSSを「外観」→「カスタムCSS」をクリックしてください。「/*カスタムCSSをここに入力してください*/」とコメントしてある部分に、先ほど選んだ見出しデザインをコピペしていきます。このとき、セレクタをAddQuicktagで設定したタグにしてください。今回は”h2#original_heading_01′′です。そのままコピペした状態なので、背景色やフォントカラー、フォントサイズなどを少し修正する必要がある場合もあります。値を修正して自分の好みにカスタマイズしましょう。記入が終わったら、「カスタムCSSの更新」をクリックします。WordPressでオリジナルの見出しボタンを使ってみる設定したオリジナルのタグを実際に使ってみましょう。クリックしてください。デザインしたオリジナルの見出しにしたい部分を選択状態にします。その状態のまま、編集画面右上にある「Quicktags」をクリックし、任意の見出しを選択してください。CSSに入力したCSSコードにスペルミスがないか確認してみてください。プロパティや値が間違っている場合はもちろん、「;」が抜けていたり、「}」が閉じられていない場合うまく表示されていません。CSSで記述したclass、idが一致しているか確認しましょう。意外と間違えがちなのが、CSSセレクタです。classに対するセレクタは「.」idに対するセレクタは「#」を使用するのがCSSのルールです。こちらも確認しましょう。ブラウザのキャッシュが残っている可能性ブラウザのキャッシュが残っている場合もよくあります。シークレットブラウザで再度該当のページを開いて確認してみてください。まとめ見出しのデザインはCSSを少し理解するだけで、色々なカスタマイズが可能になります。サイトの世界観にマッチした見出しデザインにすることで、ユーザーの離脱率を下げることにもつながります。SEOの観点でも重要なことなので、色々と学んでみるのもいいかもしれません。MAGAZINEの運営者TOMATOではWeb制作をはじめ、ランディングページの制作やSEO対策などWebに関する事業を包括的に展開しております。ご意見・ご相談、料金のお見積もりなど、お気軽にお問合わせください。お問合せ内容の確認後、こちらからご連絡させていただきます。Webのことなら何でもご相談下さいホームページ制作はもちろんLP制作、SEO対策に関するご相談も承ります。お気軽にご相談ください。最低契約期間3ヶ月その他サイト不具合等のご。