【ワードプレス！テーマエディター内「CSS」を編集！】

12分9秒

大石美光

ワードプレス！テーマエディター内「CSS」を編集！。「CSS」とは、スタイルシート言語を意味します。今回は、ワードプレス！テーマエディター内「CSS」を編集！について書いていきます。一緒に勉強していきましょう。

ワードプレスは、一流のデザイナーがデザインしたテーマを、誰でも簡単に利用できるところに人気があります。また「HTML」や「CSS」を勉強すれば、微妙な調整をすることも難しいことではありません。

結論を先に話ししておきます

一応、話しをしておくと、私自身「CSS」であるスタイルシート言語を取得しております。今回に限っては、少しばかり内容が難しいかも知れません。初心者の方であれば、読み飛ばして頂いても構いません。

「CSS」は(Cascading Style Sheets)と記載します。「CSS」は、ブログのレイアウトを指定する規格です。ブログをWebブラウザーに表示させる為に、従来からある「HTML」だけでは、情報部分が欠けてしまいます。

そこで「CSS」の出番と言うことです。どう言うことかと言うと、デザインの部分だけを取り出したのが「CSS」と言う訳です。変な話し「HTML」と「CSS」は、一心同体と言っても可笑しくないでしょう。

以前、似たような内容の投稿もしておりますので、良ければ覗いて見て下さい。

「ワードプレスのプラグインでPHPを編集！」。
「ワードプレスならHTMLやCSSは不要！」。

目次はコチラ

1 【CSSの基本】
- 1.1 カスケードとは？
2 【CSSを記述する場所】
3 【CSSにおけるサイズ単位】
- 3.1 共有:
- 3.2 いいね:

【CSSの基本】

冒頭でも説明してますが「CSS」とは、Cascading Style Sheets(カスケーディング・スタイル・シート)と言います。スタイルシートは「階段状の滝」を意味する「cascade(カスケード)」になぞられて「CSS」と名づけられました。

「HTMLは、Webサイトの基本的なテキストを形作るもの」に対し「CSSは、見た目を作る言語であり、ブログのスタイルを指定する為の言語」です。「CSS」を用いれば「HTML」で記述した文字の色を変更したりすることができます。

またレイアウトを整理したりするだけではなく、コンテンツ内にある背景色の変更などをおこなうことも可能です。更に言えば、音声デバイスや点字デバイスにも対応しており「HTML」で不可能だったことができるようになります。

カスケードとは？

「CSS」は、Cascading Style Sheets(カスケーディング・スタイル・シート)と冒頭で説明させて頂きました。「カスケード」とは、どのような意味をなすのでしょうか？ここで確認しておきましょう。

「カスケード」とは、広範囲で定義されたスタイルを順番に引き継ぎながら、局地に定義されたスタイルを段階的に適応していく作業のことを言います。

広範囲に定義されたスタイルから、優先順位が決定されます。その為「CSS」は、複数の定義方法がある訳ですが、異なったスタイル定義がおこなわれる場合、定義した場所によって、優先順位が決まっていきます。

ではここで「CSS」に関する基本の動画を視聴してみて下さい。題して「1-1 CSSとは何か？(はじめてのCSS)」です。

【CSSを記述する場所】

デザインが書かれている「CSS」を、コンテンツが書かれた「HTML」と統合するのは、メインとなる「HTML」の役目です。つまり何が言いたいのかと言うと「HTML」内の<head>タグに「CSS」の指定を記述します。

記述する方法には、2通りありますので覚えておきましょう。一つ目の方法は「HTMLファイルの中にある<head>タグ内に(CSS)も一緒に記述」してしまうものです。分かりやすいように図解を見てみましょう。

<!--

.style1 {color: #FF00FF}

-->

</style>

では次に、二つ目も見ていきましょう。二つ目の方法は「ワードプレスで採用されているもので(CSS)ファイルを別に用意し<head>タグ内には、その場所だけを記述」するものです。では見てみましょう。

管理画面から言えば、ファイルとして「HTML」または「HTMLを生成するPHP」と「CSS」を分けておいた方が便利だと思います。ワードプレスでは、各テーマのディレクトリツリー内に拡張子が「.css」となっています。

なっていると言うより、ファイルがいつくかあると言った方が良いかも知れません。通常であれば、全ページに適用するデザインを記述したスタイルシートは「style.css」と言うファイル名となっているのです。

ではテーマエディター内の「CSS」はどのようになっているのか図解を用いて見てみましょう。念の為、私の方では、ワードプレステーマの「DIVER」を入れているので、それを参考にして見てみましょう。

下記の図解は、ワードプレスのダッシュボード内で、サイドメニューにある「外観」～「テーマエディター」を選択して、表示させている「DIVER」の親テーマ「style.css」です。通常であれば、親テーマ内は触りません。

下記の図解は、同じ「外観」～「テーマエディター」を選択して、表示させている「DIVER」の子テーマ「style.css」です。先程は親テーマでしたが、こちらは子テーマです。「CSS」を編集する際、この中を編集します。

下記の図解は「外観」～「カスタマイズ」～「追加CSS」を選択した画面です。上記の画面では、子テーマの「style.css」で編集しても良いのですが、私の場合は敢えて、こちらの方に記述して「CSS」を追加しています。

3つほど、図解をお見せしましたが、いずれも「CSS」に関するものです。「一番上にある親テーマ内では、編集や追加などはおこないません」。通常は「真ん中の図解で子テーマ内もしくは一番下の図解内にある追加CSSからおこないます」。

【CSSにおけるサイズ単位】

「CSS」を何となく使っていませんか？「CSS」では、いろいろな「単位」を用いて、サイズや余白を指定することができます。それぞれの単位の違いを理解して使えば「ずれる」と言ったようなトラブルを防げます。

「CSS」には「margin」「padding」「line-height」「font-size」と言ったような様々なプロパティがある訳です。プロパティでは、異なる用途に対応する為、長さを指定する単位が沢山あります。

問題なのは「CSS」プロパティに、別の単位で同じ値を設定したとしても、実際に表示される大きさが異なっていて、上手くいかないことがあります。例えばですが、要素の「widthプロパティ」や「heightプロパティ」などです。

ピクセル単位(px)。	ピクセルは、サイズを固定する単位です。例えばですが、1ピクセルは、ユーザーの画面では、ドット1個として表示します。とは言え、デバイスのピクセル密度は様々なので、標準的なデバイスで4倍のピクセル密度のデバイスでは、ドットのサイズは約4分の1になります。
Em単位(em)。	フォントサイズの設定に「em」単位を使った場合、ユーザー設定のオーバーライドに関する問題を回避しやすくなります。例えばですが、1emの大きさは、ブラウザーの「font-size」によるデフォルト値で決まります。但し、開発者やユーザーが変更しなければ、1emは16pxです。
Rem単位(rem)。	「em単位」の問題は、親要素の「font-size」に従って、子要素の「font-size」が、拡大縮小するのが望ましいとは限りません。「font-size」の継承が「em単位」の値を計算するプロセスを複雑にする場合があります。ですがこの問題は「rem単位」で解決します。
パーセント(%)。	パーセントは「em単位」と同じです。ルート要素におけるブレークポイントに於いて「font-size」を設定し、レスポンシブWebデザインでの計算が容易になります。デフォルトの「font-size」は16pxなので、html要素の「font-size」を62.5%にすると、10pxになります。
Viewport単位(vw、vh、vmin、vmax)。	「viewport単位」は、興味深い単位です。様々な要素の「font-size」をビューポートのサイズを基準にして設定できます。ビューポートの幅と高さに従って変化する為「viewport単位」を使えば、複数のブレークポイントにて、別個の「font-size」を設定する必要がなくなります。