Simplicityの見出し1~子テーマを作る

見出しの重要性

つい最近まで見出しには無頓着でした。

最近までは、文字の大きさと太字でてきとーに見出しを書いていました。

ただ、検索で1ページ目に来るブログをみると、見出しがすごく整然としています。だから、人が文章だけを見てもぱっと見で理解がしやすい構成になっています。

さらに、クロウラーたちは、h1~h6で定義された「見 出 し」であることで「ミ ダ シ」と認識して「ワカリヤスイ」と高評価するようなんです。

そうだとしたら、二重の意味で大事なことです。

見出し機能を使ってみた

「見出し」にすること自体は簡単です。

WordPressでは見出しが簡単に作れます。

「段落」を押せばプルダウンメニューで見出し1~見出し6が出ますので、書いた文字に適用すればh1~h6の見出しになります。

Simplicityではh1は記事のタイトルなので、h2~h6の範囲で「見出し」を作って記事を分かりやすくすることになります。

わたしの場合は、複雑なことは書かないので、h2~h3あたりで「見出し」を作ることになります。

とりあえずこれで、クロウラーくんたちは「ワカリヤスイ」と思ってくれるでしょう。

見出しの装飾

ただ、人に見てもらうときには、まだ問題があります。

「見出し」は文字の大きさがまず第一ですが、その他、左線、下線、線の太さ、色、四角の塗り、付せん風・吹き出し風などいろいろな装飾があります。

人が見るときには、こういった装飾がないと見出しとは分かりづらいです。

なぜなら、文章中でも文字は大きくしたり色を使ったり変化を付けるからです。
それらとあまり変わりがないと、見出しと文中の装飾と区別がつきません。

見出しの装飾はCSSで定義することで決まるようです。

Simplicityの場合は、初期設定でh2が左線(細い線)、h3が下線実線、h4が下線破線となっています。

h2とh3だけ考えてとりあえず気がつくのは、h2がほとんどなんの装飾にもなっていないことです。
左線ですが線が黒くて1Pと細すぎます。なにかのバグのようにしか見えません。

ですから、これをなんとかカラフルで太い実線左線か実線下線、または見出し全体の四角い塗りにしたいところです。

わいひらさんがh2初期をあえてこのようにしておられるのはちょっと不思議です。
気づきを契機に見出しから勉強するように、っていうわいひらさんの親心なのかもしれません。

子テーマの必要性

見出しのためにCSSを本格的にいじるにあたって避けて通れない問題がありました。

子テーマです。

子テーマはWordPressに関係して何回も出てくる言葉です。

単純大好きのわたしはなんのためにそんなものがあるのか意味がわからなくて、避けて通ってきました。

できれば親テーマをいじって済ませたいと思っていました。
でも全部が壊れて修復不能になるのが怖くて、それもできませんでした。

あらためて真剣に調べてみると、Simplicityの親テーマを直接いじることには2つの問題があるようです。

①直接いじったら、CSSが壊れてしまって元に戻せないリスクがある。(これは前から分かっていました。)

②せっかく正しくいじってもWordPressのバージョンアップによってすべての加工が元に戻ってしまう。(これは気づきませんでしたが、そもそもこういうことがあるなら、親テーマをいじることは意味のないことです。)

推奨されているように子テーマをいじるとどうなるのでしょう。

「子テーマに書いたことは、親テーマのバージョンアップに影響されず、反映される。」

「子テーマに書いたことが失敗なら、子テーマを直せばよい。最悪全削除すればよい。

こういうことのようです。なるほど納得。万全です。
だったら、子テーマを作ることは必須事項になります。
そういう風に初めから理解できるように、誰か2番目の点をよくよく説明してくれてたらよかったのにw

子テーマの作り方(一般的)

さて、子テーマを作ることは、Simplicityという親テーマに関連したテーマを作ることになります。

このためには一般的に、サーバにあるテーマのフォルダ=Simplicityフォルダと並列でSimplicity-Childなどというフォルダを作ればいいようです。

フォルダを構成をいじる。…以前に使ったFilezillaの出番です。

…Filezillaを使ったら、Simplicityフォルダ のあるフォルダにSimplicity-Childフォルダを作ることはかんたんにできました。

でもここからがわからない。

Simplicity-Childに「style.css」というcssフォルダを作り、そこで親テーマと関連ありの記述をして関連づける必要があるようですが、その方法が分からない。

「子テーマの作り方」という項目でいろんな人が記事を書いていて、「style.css」に記述する内容は分かります。

でもcssフォルダに「記述する方法」がわからない。
プロが記事を書いているから、プロが自明だと思っている部分の記載が記事にないのです。

新しいCSSフォルダはサイト中で見るSimplicityフォルダのように数千行で構成されるCSSフォルダの体裁になっていないので、どうしていいかわからないのです。
我流でそれなりに直してみても、ブログサイト内で子テーマと認識されません。
「失敗しました。何かが不足しています。」となって、認識されません。
基礎をやっていない素人の悲しさです。

Simplicityには子テーマが用意されていた。

でもよく探したら、Simplicityには初めから子テーマが用意されていました。

https://wp-simplicity.com/downloads/child-theme2/

だったら、CSSの記述の仕方はわからないまま、それを使ってみます。

子テーマをダウンロードして、インストールする必要があります。

ダウンロードとアップロード、インストール

ちょっと寄り道して、ダウンロードとアップロードの違いについて考えてみましょう。

ダウンロードとアップロード

↑このように ダウンロードとは、インターネットを利用してサイトなどから動画、画像、ソフト、ファイルなどのデータを自分のパソコンに取り込み保存することです。

今回だったら、わいひらさんのサイトに子テーマのzipがあるのでそれをダウンロードしていったんわたしのパソコンのダウンロードフォルダに保存することです。

これに対して、アップロードとはダウンロードと逆で、自分のパソコンからサイトやサーバなどにデータを送ることです。たとえば、パソコンに保存してある画像をサーバにアップロードして、既存の記事に挿入することです。

もう一つ寄り道して、ダウンロードとインストールの違いについて考えてみましょう。

ダウンロードとインストール

ダウンロードが上記のとおりインターネットを利用してサイトなどから動画、画像、ソフト、ファイルなどのデータを自分のパソコンに取り込み保存することなのに対して、インストールは、パソコン上でアプリやソフトを使える状態に整えることです。
調理で言えば、ダウンロードとは生の食材があること、インストールとは調理して美味しく食べられる「料理」に仕上がっていることです。

Simplicity子テーマのダウンロード・インストール

さて、さきほどのサイトにアクセスします。

https://wp-simplicity.com/downloads/child-theme2/

右の「Simplicity2 子テーマ」をクリック  →  パソコンの「ダウンロード」フォルダにダウンロードされます。

あとはブログの投稿編集画面から、

外観→テーマ→新規追加→テーマのアップロード→ファイルの選択→「ダウンロード」フォルダの「Simplicity-child2 0150920b」をダブルクリック→今すぐインストール
でサーバにインストールされます。

ブログの編集画面で、外観→テーマの編集 とすると、すでに子テーマであるSimplicity child: スタイルシート (style.css)が表示されています。

ちなみに右上の「編集するテーマを選択」で、親テーマであるSimplicity2を選んで編集することも可能です。(ふつうは必要ありませんが)

子テーマでの見出しの設定

さて、これでとりあえずSimplicityの子テーマの設置は完了しました。

テーマの編集では、下行に書いたことは上行の記載に優先して反映するルールになっています。

同様に、下位である子テーマの設定は親テーマの設定に優先して反映することになります。

そうした環境を整えた上で、いよいよ子テーマで見出しの設定をしていきます。

…ここからが佳境の 本当にいいところですが、なんとなんと!

いろいろ考えて夜も更けて、頭も疲れましたので今日はここまでとします。(;´д`)

次回はSimplicity子テーマがすでにあることを前提に、子テーマでの「見出しの設定」の実践編を書きたいと思います。(続く)

  • このエントリーをはてなブックマークに追加

コメントをどうぞ

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