子テーマ要らずのCSS編集機能の補足と見出しデザインの話

こちらは私の著書「はじめてのブログをワードプレスで作るための本」の読者さま専用ページです。

さて6章のP220で「子テーマ」について触れました。

この子テーマとは何か、見出しのデザインや太字のデザインを変えるためにはどうしたら良いか、という説明をしていきます。この部分はちょっと難しいのでデザイン部分に飛んでもOKですからね!

子テーマのおさらい

本で「子テーマはPHPファイルという、ワードプレスの中身をいじるときに、テーマを更新しても自分のいじった内容が消えないようにするためのもの」と紹介しました。

まずはもう少し詳しく子テーマについて解説します。面倒な方は「初心者は子テーマを使わない」とだけ覚えて次の項目へどうぞ!

さて、話を戻します。ワードプレスのテーマにはそれぞれ製作者が用意した設定項目があります。テーマを更新するときは、その設定は保持しつつテーマ全体を上書きするようなイメージです。

そのため、設定項目以外で自分がオリジナルに手を加えた部分があると、テーマを更新するときに初期の状態に戻ってしまうわけなんですね。「設定以外をいじるとテーマ更新時に消える」という状態です。

さらに2章のセクション4(P137)で解説したとおり、更新はセキュリティ強化や不具合を修正している場合もあるため必要不可欠なものです。

そんな訳でオリジナルな設定内容を消さずになんとかしようという時に子テーマを利用します。

しかしPHPファイルは中の文字を間違えてしまうとサイト自体が動かなくなってしまったり、表示がおかしくなったりすることもあります。だからこそ超初心者さんたちはPHPファイルを触るのは止しましょう。

何かやりたいことがあれば、それを満たしてくれるテーマやプラグインを探す方が安全です。

見た目だけ変えるなら「CSS編集」がオススメ

でも「テーマの機能は気に入ってるけど見た目はもう少し工夫したい」そんな方も多いと思います。

豆知識程度に聞いていただければと思うのですが、ワードプレスの機能部分を変更するにはPHPファイルをいじらないといけませんが、見た目に関してはCSSファイルという別のファイルで変更可能です。

当然このCSSファイルも子テーマがないと更新時に変更内容が消えてしまうのですが、ワードプレスに “消えない設定用の項目”が用意されています!

これを使うことで、見出しのデザインをオリジナルにしたり、トップページの記事の並びのデザインを変更したりできるんですよー!

今回は文字装飾と見出しのデザインの変更方法を数種類紹介しますね。

太字(B)など文字を装飾する方法

(図:6-3-6)文字を装飾する

今回は(図:6-3-6)のような赤字や蛍光ペンみたいなデザインの登録方法を紹介します。

ビジュアルエディタで色などが変更できると書きましたが、いちいち設定して色味を考えたりするのは毎日続くと少し面倒です。

また、学校の勉強ノートでお気に入りの赤・青・緑あたりを用意していたように、あらかじめ色を指定しておくと統一感があり見た目も良いのでオススメですよ!

(図:6-3-8)CSS編集を開く

外観>CSS編集を開くと(図:6-3-8)のような「追加CSS」という画面が開きます。

これはファイルを直接いじっているものではないので、間違えても何かが壊れることもなく修正がカンタンです。

ここの部分にどういう見た目に変更したいか、というのを書きます。

今回使っているプログラムコードは、ちょっと難しいのでコピーして使ってくださいね。

左側の覧に以下の内容を入力します。ラインが引かれている部分をお好みで変更してみてくださいね!入力出来たら「保存」ボタンをクリックしましょう!

赤太字の装飾

緑のマーカー

上記プログラムコードの解説です。

ちなみに意味を理解しなくても大丈夫です!そのまま入力してみてくださいね!

/*  */
これはコメントです。後から見てわかりやすいように追記しておくことが出来ます。コードとは関係ありません。
.クラス名{}
このドットを置いた後に書いた名前がクラス名になります。このデザインを”呼び出す”ときに同じ名前を使います。この{}の中に書いてあることが装飾の内容です。
font-weight: bold;
 太字にするためのものです。強調するところに使うものなので太字も一緒に指定しておくと良いでしょう。
color: #e32744
 これは色の指定です。#の後ろを別の数字に変えると違う色になります。
この「#e32744」で検索してみると色の見本が見れるサイトも出てきますしChromeブラウザの場合はブラウザの機能で変更した色味のコードも調べられます。RGBカラーコードといいます。
background: linear-gradient ( transparent 60%,  #a6f3e7 60%);
 これは背景の色を指定してさらに透過しているグラデーションの状態です。
前半が透明、後半が色の名前です。%を少なくすることで太く、大きくすることで細くなります。透明の%と色の%をずらすことでかすれたようなマーカーみたいにも出来ます。

※色について補足※
青は基本的にリンクの色に使われている傾向がありますので、青いマーカーはOKですが青字はオススメしていません。

しかしながら、わたしのメインブログ「まにぴん」のリンク色はピンクです。かわいさ重視です。

一時期青のリンクも使ってみましたが、特にクリック率が変わらなかったため、ピンクに戻しています。まにぴんの読者は、リンク色は関係なく下線が付いていればリンクと認識してくれるようです。

こういった紛らわしいデザインにするのだけはやめておきましょうね。

今回紹介した方法なら「CSS編集」で色を変更するだけで、ブログ中のマーカーや赤い太字の色をまとめて変更することが可能です。好きな色を使ってみてくださいね!

装飾された文字を使う方法

クラス名を使って呼び出すのですが、そのまま使う場合はテキストエディタでタグを挿入します。

タグの例
<span class=”m-green“>囲まれた部分を装飾できます。</span>

このクラス名をm-greenから b-redに変えると赤い太字になります。

毎回入力するのは大変なので辞書登録するかオススメプラグインのAddQuicktagでボタンを作っておくと便利です。

見出しのデザインを変更して視認性アップ!

続いて見出しのデザインを変更する方法を紹介します。

ちなみに見出しのアイコン画像はサンプル画像セット内にあるので、試してみたい方はご利用くださいね!

見出しのデザインを変更の前にクラス名を追記しましょう

まずは、すでに公開してある記事にクラス名を追記していきます。なぜ文字の装飾と違い先にやるかというと、こちらはプレビュー表示を見ながら微調整が必要になるためです。

クラス名は、デザインを呼び出すときに使う、と説明しました。名前がかぶっていなければ良いので、自分の好きな名前に変更してもOKです。

察しの良い方だとお気づきの方もいるかも知れませんが、クラス名を付けずともh2などの見出しタグに直接装飾を施すことも可能です。

ただクラス名を使って呼び出す形にすると、その名前を付けた部分だけにデザインを適用できるのが便利なんです!

たとえば、普段はピンクの見出しを使って、まとめだけブルーの見出しを使うといったことも可能ですよ。

また、テーマによっては見出しのデザイン自体を変えてしまうと、意図しない部分まで変更されてしまうことがあります。だからクラス名をつけておくのがオススメです!

記事の編集画面を開き、テキストエディタを表示します。

(図:7-5-1)テキストエディタでクラス名を追記

文字装飾でも出てきましたがクラス名は見た目のデザインを呼び出すのに使うので好きに名付けます。今回は「 class=”midashiTora”」追加します。

ひとまずh2見出しとh3見出しでデザインを変えるので、記事の編集画面を開いて、<h2>◯◯</h2>、<h3>△△</h3>の箇所を(図:7-5-1)を参考に

<h2 class=”midashiTora”>~~</h2>

<h3 class=”midashiSmall”>~~</h3>

と、プログラムコードを追加して記事の内容を更新しましょう。

クラスが存在しない状態でも今まで通り表示されますので公開中の記事に修正して問題ありません。

※””の中身はクラス名なので本文で使うものと、次に使うものをそろえればわかりやすいものに変更してOKです。

見出しに使いたいアイコンをアップロードする

今回わたしは70×70のサイズを用意してメディアにアップロードしました。

大きくても100×100くらいで十分です。なお、大きめに画像を作って小さくリサイズすると、解像度の高いディスプレイで見てもキレイに表示されます。

普段通り、メディアギャラリーのアップして、画像のURLをコピーしてきます。

画像のURLの確認方法が不明な場合は本のP182を参照するか特典のウィジェット解説のところをご確認ください。

◆CSS編集に追記する

(図:7-5-2)外観のCSS編集それでは「外観」の「CSS編集」をクリックし(図:7-5-2)の「追加CSS」に次ページの内容を追記しましょう。

画像ありの見出しデザイン


※コピペしてください。手入力は大変だと思います><

 

画像ナシの見出しデザイン

◆よく使う線の種類と色の変更方法について
border-bottom-width: 1px; (線の幅)
border-bottom-style: dotted; (線の種類)
border-bottom-color: #FECC09; (線の色)

この中央のbottomというのは場所の指定です。上:top、右:right、左:leftと変更すると線の場所が変わります。

右側の部分の意味ですが、width:線の幅、style:線の種類、color:色とそれぞれ表しています。

色の変更や線の幅は数値を変えるだけですが、線の種類は名前が変わるため代表的なものを紹介するので入力してみてくださいね。

色や線の幅・種類を変えるだけでも雰囲気はかなり変わります。

◆線の種類(border-style:の指定)
solid→1本線
double→2本線
dashed→破線
dotted→点線

AddQuickTagのボタンを編集する場合

お好みの見出しが出来たら見出しボタンを作っておくと便利です。プラグインの紹介はオススメプラグインからどうぞ。

(図:7-5-3)AddQuickTagの編集画面設定から「AddQuickTag」を開き、<h2>となっていたところを(図:7-5-3)を参考に<h2 class=”midashiBig”>のようにクラス名を追記します。h2・h3(もちろんh4やh5もOKです)の変更が完了したら変更を保存します。

すると次に記事を書いたり編集したりするときはテキストエディタで「h2」ボタンを押すと<h2 class=”midashiTora”>と表示されるようになります。

クラスはあくまでデザインに対しての名前なので見出し2にmidashiSmallを設定してももちろんOKです。

ビジュアルエディタの場合は(図:7-5-4)のプルダウンを使うようにしてくださいね!

(図:7-5-4)ビジュアルエディタの画面

ちなみにわたしは@2と入力すると<h2 class=”midashiTora”></h2>と出るようにパソコンの辞書登録も併用しています。

その他のよくある見出しデザイン

見出しの名前を「midashiStar」や「midashi-bg」と別の見出し名に変更した場合、AddQuickTagボタンの中身のクラス名なども変更する必要があります。

見出し名は変えずにデザインの中身だけ変更した場合はボタンの中身は変更不要です。

記号を付ける

アイコン画像を用意しなくても下記のように記号を使うだけでも華やかですよね。

背景に色を付ける

background-colorというのが背景色です。このデザインだけ文字の色が白くなっていますよね。背景色が濃い場合は白の方が見やすくなります。その場合はcolor:で文字色を指定します。

これくらいまで設定するとかなりオリジナリティが出てよりいっそう愛着も沸いてきますね!