はじめに
ワードプレスでブログの原稿を書いていると、文字の大きさや色を指定するのが面倒くさいと感じる時はありませんか？
特に、長文を書くことが多い人や、デザインにこだわりがある人は、ブログの初期設定を行う段階で、プラグインやCSSの設定を済ませておくと、後が楽です。
テーマによっては設定画面が用意されている物も数多くありますが、デザインを決めかねている人は、いくつかのテーマを切り替えたことがあると思います。
あるいは、現在使っているテーマが多機能すぎて、もう少しシンプルなテーマに切り替えたいと思ったことはありませんか？
記事数が10記事未満の時は試行錯誤して自分の好みの設定を探すのが楽しいのですが、慣れてきたら、ブログ原稿を書く作業を効率化することが重要になります。ワードプレスに限らず、大量に記事を書くと、後から直す時が大変です。
10記事程度なら手作業で直せますが、100記事を手作業で直すのは多大な時間がかかります。例えば私のブログは200記事以上ありますが、これを手作業で直すのは非現実的でしょう。
この記事を書く前に、CSSのテストを兼ねて昔の記事を直してみましたが、かなり面倒でした。1記事を手作業で直すのに2時間もかかりました。
そんな面倒なことをしたいと思いますか？
こんな人におすすめ
- ワードプレス初心者
- 勉強熱心な人
事前準備
まずは、プラグインを入れます。ワードプレスのプラグインを活用することで、あなたのサイトに拡張機能を追加できます。
これから先、プラグインを活用しないと作業効率は大幅に低下します。まず、自分のやりたいことを調べなくてはいけませんし、調べることも多々あります。
一番便利なプラグイン
私が愛用しているプラグインは『 Simple Custom CSS and JS 』です。
紹介ページはこちらです。これはHTML,CSS,JavaScriptの3種類を扱うためのテキストエディターです。
画面が見やすい、TABキーによるインデントに対応している、各コードの有効化と無効化の切り替えが容易なので、とても便利です。
他にも、目次を自動的に作ってくれるプラグインや、バックアップを行うためのプラグイン、SEO対策のためのプラグインなど、様々なプラグインがあります。表作成のためのプラグインは、なかなか便利ですよ。
ところでHTMLって何？
HTML（エイチティーエムエル）は、多くのホームページを表示するために使われている『マークアップ言語』です。
もちろん、このページもHTMLで書かれています。（※厳密に言うと、Wordpressが動的にHTMLを出力しています）
アフィリエイトの広告リンクなどもHTMLで記載されています。ワードプレスの場合は『カスタムHTMLブロック』の中に広告リンクが書かれたHTMLのコードを貼り付けることが多いですね。
Jetpackの場合は、HTMLモードで編集して貼り付けています。（※2023/10/26時点では、JetpackアプリがカスタムHTMLブロックに対応していないため、やむなく、この方法を用いています）
じゃあCSSは？
CSS（シーエスエス）は、前述のHTMLと組み合わせて、文字の装飾や画像の表示位置の指定などを行います。主に文章や画像を扱うのがHTMLで、その配置を調整するためにCSSを使用します。
例えば、このページは行頭の字下げ（文字が1文字分下げられている）を行っていますが、これもCSSで指定しています。（text-indentを使用）
CSSの実例（字下げ）
使用しているブログテーマによっては、このCSSが正しく動作しない場合があります。ご注意ください
body p{
font-size:1.5rem;
text-indent:1.5rem;
}
HTMLのbodyタグの子要素（こようそ）であるpタグに対して、フォントサイズ1.5rem（レム）、文字の字下げ（インデント）幅1.5remを指定しています。フォントサイズと字下げ幅を同じサイズにすることで、行頭の1文字分を下げて表示できるわけです。
さて、ここで問題があります。原稿用紙に書く時のルールとして、カギカッコは字下げしません。小説の場合は、セリフが書かれている行が該当します。
こだわりたい人へ
ブログに小説を載せたい人は、行頭は字下げ、セリフのあるカギカッコは字下げしない。と言うルールを徹底したいと思います。その場合は別途『字下げをしない設定のCSS』を書き足します。
body p{
font-size:1.5rem;
text-indent:1.5rem;
}
// セリフを書くときは、このクラス名（ serifu ）を指定する
.serifu{
font-size:1.5rem;
text-indent:0px;
}
単純な方法ですが、text-indent（テキスト インデント）の幅を0px（ゼロピクセル）にして、段落ブロック（これがpタグ）の『高度な設定』→『追加CSS』の欄にクラス名の『serifu』を入力します。ただし、この方法は効率的とは言い難いので、なにか工夫が必要ですね。
JavaScriptとは？
JavaScript（ジャバスクリプト）は、インタプリタ型のプログラミング言語です。プログラミングに興味がある人は挑戦してみてください。
ブラウザ上で動くミニゲームを作ったり、凝ったアニメーションを表示させたりと、色々なことができます。
説明はこれだけ？
これらについては、数多くの専門書が出版されています。
より詳しく知りたい人は、書店に向かい、パソコンやインターネットに関する専門書を扱っている棚から、HTML5やCSS3について書かれた本を探してみてください。ここで詳しく書くと、豆知識の範囲を大きく越えてしまいます。
カラーコードについて
ワードプレスに限らず、パソコンやスマホはカラーコードと呼ばれる数値を使って色を表現しています。16進数（じゅうろくしんすう）を使うことが多く、#FF0000と指定されたら赤、#00FF00で緑、#0000FFで青になります。
Red,Green,Blueの頭文字を取ってRGB（アールジービー）と呼びます。他にはCMYK（シーエムワイケー）と言ってシアン、マゼンタ、イエロー、キープレート（またはキートーン）の4種類の色を使う方法もあります。プリンターをはじめとした印刷関係の仕事ではCMYKをよく目にします。
【提携】
詳しく知りたい人は、検索してみてください。
そして、RGBの3つを合わせて#FFFFFFにすると白になります。そう、光の三原色です。逆に#000000で黒になります。
配色見本やカラーコードなどの単語で検索すると、数多くのサイトが見つかります。好きな色や使いたい色がある人は、カラーコードをメモに書いておくと便利です。スマホの場合は、スクリーンショットを撮影しておくのもいいですね。
グラデーションに便利
先程、カラーコードの話をしましたが、グラデーションを作る時や、文字に陰影を付けたい時、ネオン風に光る文字を作る時に重宝します。派手なホームページを作りたい人におすすめします。
数値なのにアルファベットのFが使われていることに違和感を感じる人は、下記の説明を読んでみてください。
16進数と2進数について
我々が普段使っている10進数（じゅっしんすう）は、9の次が10になるので、9を越える時に桁上がりをしています。
つまり、0から9までの10種類の数字を使って数値を表現しています。これに対して、9の次にA(10),B(11),C(12),D(13),E(14),F(15)と、アルファベットが続いていき、F(15)を越える時に桁上がりをするのが16進数です。
なぜ16進数を使うのかと言うと、コンピュータと密接な関わりがあります。コンピュータは0と1しか扱えないので、0,1,10,11,100となるパターンで桁上がりをしていきます。これが2進数です。
コンピュータは、2進数の1桁を『ビット』(bit)と呼びます。0と1は1桁なので1ビットになり、10や11は2桁なので2ビット、同じく100は3桁なので3ビットになります。
そして8桁に達した2進数は8ビットになります。これを1バイト(byte)と呼んでいます。そう、ディスクやファイル容量の最小単位が1バイトですね。
12個入りを1ダースと呼ぶように、8ビットを1バイトと呼んでいます。ダースと違い、8ビット、16ビット、32ビット、64ビットと言う呼び方も使われていますね。
そして、8桁の2進数が桁上がりをするのは11111111を越えた時です。9桁目に到達し、100000000となります。
この8桁の2進数(11111111)を10進数に置き換えると15になりますが、15を越えたら桁上がりするのは違和感がありませんか？それに、1桁分の枠の中に2桁の数字を当てはめるわけにもいきません。計算間違いの原因になります。（これは簡略化した説明です。違和感を感じた人がいたらすいません……。と、言い訳しときます）
そのため、10進数の9の次に、AからFまでの数値を付け足した16進数を用いて考えると、Fの次は桁上がりして10(16進数表記)になります。
これ、『エフの次は桁上がりしてイチゼロ』と読んでください。じゅう(10)と読むと混乱しますよ。
つまり、8桁の2進数（1バイト分）で扱える範囲の最大値(11111111)を16進数で表すとFの一文字になるわけです。8桁ならまだ間違えずに書けますが、これが16桁や32桁になったら、間違えずに暗記できます？まず無理ですよね。
さて、ずいぶん長くなってしまいました。次の話題に移りましょう。
座標の始点について
数学のグラフでは、横方向をX軸、縦方向をY軸で表しますね。ホームページ作りの時も基本は同じです。ただし、画面左上が始点(0,0)となります。ちなみに奥行きを示すZ軸は、CSSのz-index（ゼット インデックス）となります。細かいことを言うと、Z軸と言うよりレイヤーに近いですね。
フローティングバナーのように、文字の上に重なって表示されるバナーを作りたい人は、知っておいて損はないと思います。
幅と高さの順で指定
基本的に、画像などのサイズを指定する時は幅（X軸方向）と高さ（Y軸方向）の順に指定します。意図的に逆に書いても表示されると思いますが、何のメリットも無いのでやめましょう。混乱するだけです。
