今回は、WordPressで見出しタグを編集する方法を書いていきたいと思います。
あちこち記事を見ているとセンスのいい見出しをつけている方が多いと思います。
見出しを編集すると、カッコいい、見やすいといったように、同じような構造が多いために似たような見た目になりがちなページに個性を出せる一番のところではないかなと思います。
逆に変に編集している人！使っていない人は記事内容がダラダラになって見にくい！ということもあると思います。
SEO以前にユーザビリティを考慮した時にも重要なのが見出しタグではないでしょうか
実はこの見出しタグ、HTMLの知識が少しあれば簡単にカスタマイズできちゃうんです。
Hタグとはどんなもんよ
編集方法
まずWordPressにログインします。
外観にマウスを合わせるといくつかのメニューが現れますので、テーマの編集を選択します。
この中でHタグの記述がある場所を探して編集するだけです。
この際に、CSSの編集部分だけか、心配なら全部メモ帳に保存しておきましょう。
テンプレートによって変わっているようですが、僕の場合このような記述があってわかりやすかったです。
/************************************
** 見出し（H1-6）
************************************/
プラグインを使う
ここまでで、わかんない！という人に朗報です。
見出しタグ用のプラグインありました。
下手に手動で弄るよりプラグインを使ったほうがむしろいいのかもしれません
AddQuicktag
AddQuicktag は HTML エディター・ビジュアルエディターへのクイックタグの追加を容易にします。クイックタグの設定を JSON ファイルとしてエクスポートすることが可能です。エクスポートしたファイルは他の WordPress にインポートすることができます。 WP-AddQuicktag for WordPress is originally created by Roel Meurders. The versions in the Repo of AddQuicktag are newer versions, this is a complete rewrite of version 2.0.0 with more functionality. The plugin can add configurable custom quicktags to the editor of every post type, including custom post types from other sources.
見出しを使って自動で目次を作ってくれるWordPressプラグイン「Table of Contents Plus」が便利！ | Handy Web Design
このブログは不定期ながらも更新しているので、少しでも見やすくしていきたいなーと思っていたところ、他のブログで時々見かける目次って自動で挿入とかできるのかな？と思って調べてみると便利なプラグインがあったのでご紹介します。 ブログは各記事に見出しをつけている人もたくさんいると思いますが（h2とかh3とか）、その設定を利用して自動で目次を作ってくれるプラグインがこの「Table of …
コピペして自分流にアレンジ
これからオシャレなテンプレートを公開しているサイトを公開しますが、その前に一つ、各テンプレートは公開している時の色があります。
この色を編集することでサイトの配色に合わせたりできます。
シャープマーク→ #
こんなのの後に各カラーコードがどのテンプレートにも設定されていますので、以下の記事を見ながら編集してみるといいと思います。
WEB色見本 原色大辞典 – HTMLカラーコード
色の名前とカラーコードが一目でわかるWEB色見本
テスト用のツールもありましたので公開しておきます。
Online HTML, CSS and JS Code Editor (Sandbox) | CSSDeck
No Description
Template / XPath 3.0 / XQuery 3.0 / CSS 3 Selector / JSONiq Online Tester
No Description
便利な見出しサイト
次に便利な見出しサイトがたくさんあります、自分ではこういう発想はなかったと思えるような見出しタグがたくさん公開されています。
ブロガーさんにこんな知識はイラネーョという方、センスのいいデザイナー様方に任せましょうｗ
CSS見出し-ジェネレーター | WEB道
画像を使用せずCSSのみで見出しを作成するCSSジェネレーター。吹き出し型、リボン型なども生成可能。
WEB道のCSS見出しジェネレーターは直観的に見出しタグを作成してくれるサービスです。
好きな色でCSS見出しが作れます | スタイルシート見出しメーカー
スタイルシート見出しメーカーは好きな色で簡単にさまざまなCSS見出しが作成できるツールです。好きな色を選んで作成ボタンを押せばシンプルなスタイルシート見出しのHTMLとCSSを自動生成します。使い方もコピーアンドペーストでOKだから簡単です！
以下の記事はシンプルかつ実用的な見出しタグがおおくけいさいされていました。
この記事だけで十分だと僕は思います。
シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル 50 | NxWorld
以下で紹介している内容は一部異なるものもありますが、基本的に下記のようなシンプルなHTMLを使用しています。ただ、一部異なるものといってもいずれも span 要素を1つ追記する程度のものです。 HTML あのイーハトーヴォのすきとおった風 また、ここでは見栄えの紹介は全て画像を使用していますが実際の表示は以下デモページで確認でき、デモでは複数行の時の見栄えも併せて確認することができます。 下ボーダー 下ボーダー × 先頭の文字大きく 下ボーダー（2本線） 上下にボーダー #1 上下にボーダー #2 左ボーダー 左ボーダー × 下ボーダー 左ボーダー × 下ボーダー（擬似要素使用） ボーダーで囲む ボーダーで囲む × 角丸 ボーダーで囲む × 手書き風 ボーダーで囲む × アクセント 背景色 背景色 × 角丸 背景色 × 下ボーダー 背景色 × 上下にボーダー 背景色 × 左ボーダー 背景色 × 2本線で囲む 補足やサブタイトル的なものを表示 テキストとボーダーを重ねる
【コピペで簡単】タイトル（見出し）CSSテンプレート 15選
今回は、僕も普段からよく使う「見出し(hタグ)」のテンプレート、15選をご紹介します。 コピペするだけ、簡単です。 利用されているテーマのCSS（スタイルシート）に、設定を追加することで、利用できます。「外観」→「テーマの編集」から、テーマの「style.css」に、以下をコピーして、追加してください。（「 h1 」箇所は、使用する見出しの番号に、適宜変えてくださいね） ※該当の見出し箇所に、タグを挿入するものもあります。（後ほどご案内します） 1．下線 /* 見出し装飾 */ .article h1 { border-bottom: 3px solid #f3f3f3; padding: 12px 0px 12px 5px ; margin: 30px 0px 20px; } 線の太さ・カラーは、お好みで変えてくださいね。 2．点線 /* 見出し装飾 */ .article h1 { border-bottom: 3px dashed #000; padding: 12px 0px 12px 5px ; margin: 30px 0px 20px;
見出しデザインの参考にしたい CSSで作るhタグのサンプル集 | 日刊ウェブログ式
管理人が気になったことをまとめたブログ
[CSSデザインの基本] H(見出し)の作り方 | 田中勇輔のブログ
TY（てぃーわい）です。2005年にECサイトを立ち上げ、制作から運営システムまで全てを自分で作ってきた経験を元に、2012年からはサイト制作、ECコンサルティング、書籍執筆、テキスト制作などをしています。
Webサイトの基本要素 見出し・リスト・引用文のスタイルを整える
Webサイトを装飾していく時に無視できない要素、見出し・リスト・引用文。特にWordPressでオリジナルのテーマを作る時は、ブログ用にこれら基本の要素すべての装飾もすると思います。そんな時に使うコードのバリエーションをメモしていたので記事にしました。少し変えるだけで応用できると思うので、ぜひ使ってみてください！ …
CSSの擬似要素を使った見出しデザイン
このブログの見出しはシンプルなんですが、CSSの「:before」や「:after」など擬似要素を使えば色々と装飾ができますので今回は8つのサンプルを紹介します。 HTMLはすべてHタグだけです。特に意味はありませんが今回のサンプルはh4タグを使っています。 「:before」「:after」やボーダーで表現する三角形の使い方など慣れない方もいるかもれませんので、その都度簡単に解説していきます。「:before」「:after」疑似要素はIE7以下は非対応ですのでご注意ください。 今回のサンプルは別サーバにアップしていますのでご覧ください。 それでは今回8つのサンプルを紹介していきます。 1. 吹き出しのような見出し1 吹き出しの下の部分を:after擬似要素で作っています。三角形はボーダーで作っています。下の画像を見ると何となくイメージできるでしょうか。今回の場合は上の赤い部分のみ色を付けて、他のボーダーは「transparent（透明）」にしています。 あと、この正方形の一辺が100pxになることに注意してください。 で、元になるh4に「position: relative;」を指定して、矢印の場所はh4を基準とした絶対値で指定します。「top: 100%;」にすることで、h4の真下に矢印を付けることができます。 h4 { position: relative; color: #fff; background: #777; font-size: 20px; line-height: 1; text-shadow: 1px 1px 1px #000; border :1px solid #777; margin: 30px -10px 10px -10px; padding: 15px 5px 12px 10px; border-radius: 3px; } h4:after { content: “”; position: absolute; top: 100%; left: 30px; height: 0; width: 0; border: 10px solid transparent; border-top: 10px solid #777; } 2.