WordPressで見出しh1タグを編集する方法

今回は、WordPressで見出しタグを編集する方法を書いていきたいと思います。

あちこち記事を見ているとセンスのいい見出しをつけている方が多いと思います。

見出しを編集すると、カッコいい、見やすいといったように、同じような構造が多いために似たような見た目になりがちなページに個性を出せる一番のところではないかなと思います。

 

逆に変に編集している人!使っていない人は記事内容がダラダラになって見にくい!ということもあると思います。

SEO以前にユーザビリティを考慮した時にも重要なのが見出しタグではないでしょうか

 

実はこの見出しタグ、HTMLの知識が少しあれば簡単にカスタマイズできちゃうんです。

Hタグとはどんなもんよ

WordPress上では
段落、見出し、見出し1、見出し2…というように表示されていますが、実際はこんな風になっています。
<h1>テキスト</h1>
<h2>テキスト</h2>
<h3>テキスト</h3>
<h4>テキスト</h4>
<h5>テキスト</h5>
<h6>テキスト</h6>
1から6まで数字が少ないほうが、重要とされ、順番に使っていくことが望ましいとされ、H1は一回しか使えないといわれています。

編集方法

まずWordPressにログインします。

外観にマウスを合わせるといくつかのメニューが現れますので、テーマの編集を選択します。

 

 

この中でHタグの記述がある場所を探して編集するだけです。

この際に、CSSの編集部分だけか、心配なら全部メモ帳に保存しておきましょう。

 

テンプレートによって変わっているようですが、僕の場合このような記述があってわかりやすかったです。

 

/************************************
** 見出し(H1-6)
************************************/

 

 

プラグインを使う

ここまでで、わかんない!という人に朗報です。

見出しタグ用のプラグインありました。

下手に手動で弄るよりプラグインを使ったほうがむしろいいのかもしれません

 

AddQuicktag
AddQuicktag は HTML エディター・ビジュアルエディターへのクイックタグの追加を容易にします。

 

http://handywebdesign.net/2016/09/table-of-contents-plus

 

コピペして自分流にアレンジ

これからオシャレなテンプレートを公開しているサイトを公開しますが、その前に一つ、各テンプレートは公開している時の色があります。

この色を編集することでサイトの配色に合わせたりできます。

シャープマーク→ #

こんなのの後に各カラーコードがどのテンプレートにも設定されていますので、以下の記事を見ながら編集してみるといいと思います。

 

WEB色見本 原色大辞典 - HTMLカラーコード
色の名前とカラーコードが一目でわかるWEB色見本

 

テスト用のツールもありましたので公開しておきます。

 

Online HTML, CSS and JS Code Editor (Sandbox) | CSSDeck
XPath 3.1 / XQuery 3.1 / CSS 3 Selector / JSONiq Online Tester
Here you can run an XPath/XQuery 3.1 query against some HTML/XML/JSON data. It supports standard queries and extensions like JSONiq or pattern matching.

便利な見出しサイト

次に便利な見出しサイトがたくさんあります、自分ではこういう発想はなかったと思えるような見出しタグがたくさん公開されています。

ブロガーさんにこんな知識はイラネーョという方、センスのいいデザイナー様方に任せましょうw

 

CSS見出し-ジェネレーター | WEB道
画像を使用せずCSSのみで見出しを作成するCSSジェネレーター。吹き出し型、リボン型なども生成可能。

WEB道のCSS見出しジェネレーターは直観的に見出しタグを作成してくれるサービスです。

 

http://midashi-maker.v-colors.com

 

以下の記事はシンプルかつ実用的な見出しタグがおおくけいさいされていました。

この記事だけで十分だと僕は思います。

シンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル 50 - NxWorld
画像は使用せずにCSSだけでスタイリングしたタイトル(見出し)のデザインサンプルで、似たようなものやちょっとCSS追記した程度のものも多いですが全50種類です。

 

【コピペで簡単】タイトル(見出し)CSSテンプレート 15選
今回は、僕も普段からよく使う「見出し(hタグ)」のテンプレート、15選をご紹介します。 コピペするだけ、簡単で…

 

日刊ウェブログ式
管理人が気になったことをまとめたブログ

 

データベースエラー

 

Webサイトの基本要素 見出し・リスト・引用文のスタイルを整える
Webサイトを装飾していく時に無視できない要素、見出し・リスト・引用文。特にWordPressでオリジナルのテーマを作る時は、ブログ用にこれら基本の要素すべての装飾もすると思います。そんな時に使うコードのバリエーションを

 

CSSの擬似要素を使った見出しデザイン
このブログの見出しはシンプルなんですが、CSSの「:before」や「:after」など擬似要素を使えば色々と装飾ができますので今回は8つのサンプルを紹介します。...

 

 

 

 

コメント

タイトルとURLをコピーしました