ワードプレスサイトの見出しカスタマイズ(h2,h3タグ)はCSSでサクッとやった方が絶対いい!

Pocket

 

今回はワープドプレスサイトのカスタマイズの話で、

見出し(h2,h3タグとか)のカスタマイズについてですw

見出し(h2,h3タグとか)のカスタマイズについては、SEO(検索エンジン最適化)にも影響のあることなので最初から分かってやらないと後で面倒くさいことになる笑

見出しカスタマイズ

〜〜項目〜〜〜〜〜〜〜〜〜〜〜

♥1、見出しには使い方の基本がある

♥2、カスタマイズしたいなら最初にCSSでしておく

*2-1,カスタマイズの必要性

*2-2,ワードプレスでのカスタマイズ注意点

♥3、カスタマイズ例

♥4、できるだけ一括でカスタマイズが基本

〜〜〜〜〜〜〜〜〜〜〜〜〜

スポンサーリンク

 

♥1、見出しには使い方の基本がある

ブログに記事を書く上でその内容のタイトルって当然つけるじゃないですか?

で、さらにその本文中に小見出しを使うかと思うのですが、、、

その大見出し、中見出し、小見出しについてです

タグはh1とかh2とかですね、、、、、

ちゃんとブログ運営を考えながらやってる方はこのあたりのことも既にわかってる方が多いと思うのですが、

タグ使いの順序(見出しタグの順序)ってありますよね

 

h1タグ→h2タグ→h3タグ→h4タグ。。。。。と

順番に使うのが基本で、SEO的(検索エンジン対策、最適化)にもそれはちゃんと使う方が、何を言っているかを明確に評価してもらうためにも良いというのはどのSEOの本にも書いてある。

通常のワードプレスのテーマでは、サイトのタイトルと、記事のタイトルがh1

なので本文の見出しのタイトルはh2から順に使うのが基本のようです。

重要度は、

h1(サイトタイトル・記事タイトルなどの大見出し)>h2(中見出し)>h3(小見出し)となる

見出し順序

さらに、

その装飾や大きさなどのカスタマイズは、記事毎ごとに編集するのではなく、CSS で全体を調整、カスタマイズする方が吉とされています。

テーマ自体でのデフォ指定はあるので、さらに記事毎ごとに編集すると綺麗な羅列ではなくなるので検索エンジン対策的にはあまり好ましくないとSEO関連情報サイトにも、SEOの本にも書いてある笑

それだけで強烈に評価が下がるわけでもないようですができれば汚いより綺麗でスッキリしてる方がいいっってことらしい。。。

その他、視覚的な面では、訪問者、読みに来てくれた人が見やすく、内容を把握しやすくするための見出しになってる必要がある

タイトル、見出しのつけ方なんかは特に重要な要素ですよね

そんなところが基本的なことでしょうそうでしょうう

 

 

♥2、カスタマイズしたいなら最初にCSSでしておく

*2-1,カスタマイズの必要性

上記のことが当たり前になってるワードプレス事情ですが、テーマ(ワードプレスサイトの無料テンプレート)によっては、デフォで、

  • 大見出しだのに目立たない
  • 小見出しが中見出しよりなぜか大きい!???
  • 見出しが淡白すぎてメリハリがつかない

などなど様々にあって、カスタマイズしたくないのにカスタマイズせざるえない場合もありますよね。。。

『なぜ?どうしてこんな設定なの!???ほわぁああああい!!!???』って謎が深まるテーマも結構ある笑

ま、そういうテーマは使わないのが一番ですよね笑

有料のテーマでなくとも素晴らしいテーマはかなり存在するのでそれが合理的と賢く割り切れるのであれば断然その方が良いでしょう。

カスタマイズする必要全くないと感じるテーマもあるし。

それでも面倒くさいテーマを使いたい理由があるのならそれが全てなのでその中でやりくりするしかないですよね、、

それが必要性なんだと思う笑

 

*2-2,ワードプレスでのカスタマイズ注意点

=================

  • カスタマイズはCSSなどで一括管理する
    (記事毎ごとに個別にカスタマイズはNG)
    ※一括で管理できる手段でやらないと無数のページで編集する羽目に遭いかねない
  • 全てのカスタマイズは子テーマでする
    ※子テーマなら親テーマの更新をしつつ、カスタマイズはそのまま生かせる

==================

これがやはり基本であとで困らなくて済む

何故かと言えば、

まず、記事毎ごとににカスタマイズしてしまうと、基本的には、あとで変更したい時も記事毎ごとにやるしかないってことに陥る笑

これはつまり、記事数が増えれば増えるほど(後になればなるほど)修正の手間が膨大になってしまうってことです。恐ろしいですねぃ笑

つまり、今回のことだけに関わらず、記事毎ごと個別に何かしている場合は同じくひどいことになったりする可能性を秘めています 笑

例えば  “記事毎ごとに違う広告コードを地下貼りしてる” なんかも同じで、その広告を停止しなければならないや、編集しなければならないなどの場合は、それを貼った全ページ修正しなければならなくなったりする笑

プラグインなどで何かほどこしようがある場合もあるけれど、これ一歩間違えるととんでもないことになってしまう、、、あぁおそろし

なので、何か変更を加える、オリジナルな処理をする場合は、

※一括で管理できる手段でやらないと無数のページで編集する羽目に遭いかねないってことは意識しておきたい

 

そして、テーマのカスタマイズは、そのテーマで直接編集してもいいのですが、その場合、テーマの更新をすると編集し直さなければならない笑(テーマの更新はセキュリティ上無視はできない)

一回一回編集し直してなんてしていられないですよね笑

だから子テーマでする必要がある

※子テーマなら親テーマの更新をしつつ、カスタマイズはそのまま生かせる

 

などなどが注意点です。

私は結構注意してはいたのですが、痛い目も見ています笑

スポンサーリンク

 

♥3、カスタマイズ例

ということで早速子テーマCSSでのカスタマイズ方法です

まずは子テーマ作りましょううw

子テーマ作ってない方は下記の内容を参照くださひw↓

推奨とされる子テーマ作成方法(functions.phpを使う)でやってみた

▶︎WordPress子テーマの作成とアップロード(誰にでもできる超簡単な方法)

▶︎子テーマをサーバーのファイルマネージャーから直接アップロードする方法

 

さて、子テーマOK、バックアップOKとしまして。。。。

まずは 親テーマの css.style のファイルを見てみてさらりチェック

事前にバックアップやDLしておいた親テーマのcss.style ファイルでもいいし、一時的に親テーマを有効化して、ワープレダッシュボード>外観>テーマ編集>css.styleファイルでも見えます。

ただしいじって壊してしまわないようにさらにそれをテキストエディターにコピペして見るのが良いかと….

 

その中で、command+F (WindowsならCtrl+F)のページ内検索で、

entry-content h2 で検索するとその辺りの指定内容、編集すべき箇所をチェックできる↓

entry-content h2

 

子テーマのstyle.css に追記すればOK↓

子テーマstylecssに追記

 

編集ではフォントサイズや色、余白、ラインなどなど色々できる

基本的なことは、下図のことかと思う

要素プロパティ

 

例えば下図のような指定だと

.entry-content h1,
.entry-content h2,
.comment-content h1,
.comment-content h2 {
        color: #000;
        font-weight: bold;
        margin: 0 0 .8125em;
        font-size: 2.0em;
        border-left: 7px #808080;
        padding-left: 5px;
}
.entry-content h3,
.comment-content h3 {
        font-size: 1.5em;
        text-transform: none;
        border-left: 7px solid #d3d3d3;
        padding-left: 5px;       
}

001_見出し例

となり、

 

.entry-content h1,
.entry-content h2,
.comment-content h1,
.comment-content h2 {
        color: #000;
        font-weight: bold;
        margin: 0 0 .8125em;
        font-size: 2.0em;        
}
.entry-content h3,
.comment-content h3 {
        color: #fff;
        font-weight: bold;
        font-size: 1.2em;
        line-height: 1.2;
        text-transform: none;
        margin: 0 0 .8125em;
}

だと、

002_見出し例

な感じになる
(※上記のカラーはテーマ自体でダークカラー設定にしてるので色が反転しているものもあります)

  • pxは画面の1ピクセルを1とする単位
  • em(エム)は、その要素に指定されてる値(指定されてなければ初期値のmedium)を1とする値。font-size プロパティに使う場合、親要素のfont-size プロパティ値を1とする単位。(※mediumとはブラウザで設定されてる標準サイズ)
  • font-size:文字のサイズ
  • line-height(ラインハイト):行間・行の高さ
    ▷初期値はnormal(ブラウザによって変わる、ブラウザ側で妥当と判断する値)
    ※line-height(ラインハイト)は、内部の要素にも適応されるらしく、位をつけない実数で指定する方が無難みたい。
  • font-weight:文字の太さ
    ▷初期値はnormal
    ※100が最も細く、400が標準、900が最も太くなる。
    または、
    bold:そのフォントの太字の太さ(700)
    normal:そのフォントの標準の太さ(400)
    bolder:一段太く
    lighter:系団細く
  • margin:要素と要素の間隔
    margin(上下左右のマージン)
    margin-top(上のマージン)
    margin-bottom(下のマージン)
    margin-left(左のマージン)
    margin-right(右のマージン)
    また、半角で区切って一括でも指定できる
    例)
    margin: 10px;(上下左右10px)
    margin: 10px 20px;(上下10px 左右20px)
    margin: 10px 20px 30px;(上10px 左右20px 下30px)
    margin: 10px 20px 30px 40px;(上10px 右20px 下30px 左40px→上から時計回り)
  • padding:要素内の余白
    指定の仕方はmarginと同じく半角で一気に指定できる
  • text-transform:アルファベットを全部大文字で表示させたり、小文字で表示させたりできる。
    uppercase(半角アルファベット全て大文字)
    lowercase(半角アルファベット全て小文字)
    capitalize(半角アルファベットの各単語頭文字のみ大文字)
    none(元の状態のままにする)
  • border:ボーダー(線)
    ボーダーの位置(上下左右)、種類(実践や点線、二重線など)、太さ、色、などを指定できる
    (かなり色々なパタンがあるので省略w)
    hidden(ボーダー非表示)
    solid(実践)
    double(二重線)
    dotted(点線)
    dashed(破線)
    groove(溝)
    などなど。。。
  • color:色
    白は#ffffff、#fffとか。。。
    ※カラーコードは、Web上にも無数に上がっているのですぐ調べられるし、
    また、ワードプレスサイトをやってる人は “TinyMCE Advanced” というプラグインを入れてると思うので、そのツールのカラーピッカーで好きな色のコードをすぐに調べられると思う。↓

    TinyMCE Advancedのカラーピッカー_カラー選択_

カスタマイズが反映されない!?ってなったらことらをまずはチェック!

▶︎ブログ・サイトカスタマイズが反映されないときはまずアレをチェック!

 

♥4、できるだけ一括でカスタマイズが基本

上記にも書きました通り、とにかくカスタマイズは各ページごと個別にやるのではなく、一括でなんとかなるように工夫することが絶対必要

後で修正や編集が必要になった時に一括管理できるようにしておかないと面倒なことになります。

私はそれをわかりつつもとりあえずでやっていたことがあるので修正が面倒になってることも結構あります笑

なので、これからの方は、

とにかく一括管理できるよう工夫しておきましょうw

  • カスタマイズは子テーマでやる
  • 個別記事内で個別カスタマイズしない
    (記事内のテキストで見出しフォントサイズを変えたり、色をつけたり、広告コードを地下貼りしないなどなど)

最初にそういうことを少しでも知っておくと結構違うと思う

SEOの事やカスタマイズのことなどは少しでも知っているのと全く知らないのとでは自分の作業量がかなり変わってくる

それでも後で困る事や手間になることは当然発生するでしょうけれど、私は最初に本などで少しチェックしていたのでまだマシな感じです。

これで本で読んだりして知ったことがなかったとしたらば恐ろしい笑

SEOの本やワードプレスの本、HTML/CSSの本などは、日々進化してるので、新しいもので吸収するのが良いかもですが

私は今でも当時買ったやつで気づくことが沢山あります

 

 

ってことで楽しいクリエイトをば!

しゃらんるあぁああああ♥

 

\(`^`)b

スポンサーリンク

 

REACH_rh.jam project / Creative Support
REACH_rhがあなたのクリエイトをサポートします
サポート内容をチェックしてみる ↓

rhjampj_v-min

 

❤色々やり散らかしております、宜しくどうぞ御贔屓に<(_ _)><(_ _)><(_ _)>

Twitter-REACH_rh Facebook-REACH_rh G+ -REACH_rh Insta-REACH_rh note-REACH_rh

YouTube-REACH_rh SoundCloud-REACH_rh PIXIV-REACH_rh CREATORS BANK_REACH_rh

 

関連コンテンツ

Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

four × 1 =