ブログ

初心者向け・CSSでブログのカスタマイズ入門

このブログは無料テーマの「Cocoon」を使わせていただいています。このテーマは、デフォルトではとてもシンプルなデザインをしています。

このテーマではスキンという機能を使うことで手軽にデザインを変えることもできますが、せっかくなので自分で好きなようにいろいろ変えられるようになりたいですよね。

そこで、ブログのデザインについていろいろと勉強したところ、そのあたりを自由にいじるには「CSS」というものを理解する必要があるということが分かりました。

ということで、今回はブログやウェブ関連は全くの初心者な私がCSSカスタマイズについて勉強したことをまとめていきます。

スポンサーリンク

CSSとは

Cocoonに限らず、ブログなどのウェブページのデザインを組み替えるには「CSS」というものを使用する必要があります。

まずはCSSとは何か?についてです。

CSSとは「Cascading Style Sheets」の略で、ウェブサイト上にある要素のデザインを指定する言語のことです。

と言われても初心者はさっぱりですよね、ざっくりと説明します。

HTMLとCSSについて

ウェブページは、「HTML」と「CSS」というもので構成されています。どちらもウェブサイトを作るための言語ですが、それぞれ違う役割を持っています。

どういう役割かというと、HTMLはまっさらなページに文書の構造を作り、CSSはそのHTMLで書かれた要素がどう表示されるかを変えることができます。

この二つの言語による指示を組みあわせることで、ウェブページ上の文章が綺麗に見られるようになっているんですね。

簡単に言うと、

「HTML」を書くことでページ上に文章を並べてもらい

「CSS」を書くことでその文章を装飾してもらう

というイメージでよいかと思います。

WordPressのテーマをCSSでカスタマイズする、とは?

CSSとはHTMLで書かれた要素を装飾する言語である、という話をしました。

しかし、私はHTMLなんて打ち込んでいません、CSSを書くということはまずHTMLを書かないといけないのでしょうか?

そもそも、インストールしたテーマをCSSでカスタマイズする、とはどういうことなのでしょうか??

まず最初に、このWordPressというものが「HTMLなどの専門のコードを自分で打ち込まなくても簡単にウェブページを作ってくれるソフト」みたいなものです。HTMLやCSSなどの専門知識がなくても、WordPressの管理画面から記事を投稿するだけでウェブサイトが運営できるように作られています。

つまり、WordPressを導入してテーマをインストールしているのであれば、その時点で自分でコードを打ち込まなくてもそのサイトは既にHTMLやCSSなどが組み立てられている状態になっているということになります。
(といっても、単純にHTMLなどが書いてあるだけではなくて、もっと複雑なプログラムが組まれているようです。難しい話になるので私の理解はまだここまで。)

なので、テーマをCSSでカスタマイズをするというのは、その既に書いてあるものに対してCSSの追記や編集をするという作業になります。

元のテーマのCSSで「ここはこう表示するよ!」と指定されているのを「いやここはこう表示して!」と指示し直すようなイメージでしょうか。

CSSを追記すると何ができる?

CSSを追記することで、テーマで組み立てられている要素のデザインを更に好きに組み替えることができます。

つまり、ブログの見た目をより好きなデザインに自分で変えられるということです。

例えば、記事の見出しや目次などのデザインを変えたり、アイコンを変えたり、日付など任意の要素を表示させないようにするなど、WordPressの管理画面で変えられる要素以外の部分まで好きにカスタマイズできるようになります。

CSSを書き込む場所

テーマのカスタマイズをするためにCSSのコードを書き込める場所はいくつかありますが、今回はその中でWordPressの管理画面から編集できる場所について記載します。

管理画面内で使用できる主な場所は、テーマエディター内のスタイルシートとカスタマイズ画面の追加CSS欄です。

このふたつの場所は以下の通りです。

テーマエディター内のスタイルシート

管理画面にある「外観」から「テーマエディター」を選択します。

すると次のような画面になります。

Cocoonをインストールしている場合は、必ず「Cocoon Child(子テーマのことです)」のスタイルシートになっていることを確認してください。親テーマのスタイルシートを編集していると、テーマのアップデートが入った際に編集した部分が消えてしまうようです。

Cocoonをインストールしている場合は、このように「必要ならばここにコードを書く」と書いてある部分があるので、その下に書き加えていけば大丈夫です。

カスタマイズ画面の追加CSS欄

管理画面の「外観」から「カスタマイズ」を選択します。

次のようなメニュー画面が出てくるので、そこから「追加CSS」を選択します。

すると、このような追加CSSを記入する欄が出てくるので、ここにコードを入力することでテーマに反映させることができます。

 

 

ちなみに私は前者の「テーマエディター」の方に書き込んでいます。

CSSの書き方

まず先に、CSSのコードの例を紹介します。

例えば、以下ような文字列がCSSコードです。

.article h2{ background: #8e7dbe; }

このコードを書きこむと、見出し2の背景色が以下のように変化します。

Before
デフォルトの見出し(Cocoon設定で設定したサイトキーカラーで表示されます)
After
CSS入力後の見出し(CSSで設定した#8e7dbeの色です)
CSSコードの解説

次に、先ほどの例を使ってCSSコードの文法を説明します。

CSSコードは、「どこの」「何を」「どうする」の3つの要素を並べて文章を作ります。

先ほどの例だと、「.article h2」の部分が見出し2を、「background」の部分が背景色を、「#8e7dbe」の部分が色名を意味しています。

なので、先ほどの例の全体を和訳すると、「見出し2の背景色を#8e7dbeに変えてくれ」という文になります。

という訳で、CSSコードの基本構造は以下のようになります。

(どこの){(何を):(どうする); }

どこの~の部分を「セレクタ」、何を~の部分を「プロパティ」、どうするの部分を「値」といいます。

この要領で、変更したい部分の要素を指定していくことでページのデザインを変えていくことができます。

初めてCSSの編集をする場合

本当に初めてのうちは何を書けばいいのか分からないというのが普通だと思います。

その場合は、まず「WordPress CSS カスタマイズ」などのキーワードで検索してみましょう。

するとCSSの見本やコードを載せているサイトがたくさんあるので、コピペOKと書いてあるサイトからコードをお借りして自分のサイトに反映させてみましょう。

何度か繰り返すうちに勝手がわかってくるはずです。

私は最初はこちらのページを参考に勉強させていただきました。

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選
h1〜h6タグの美しくおしゃれなデザインサンプルをたくさん紹介します。どれもコピペで使うことができます。

 

最初は難しく感じますが、少しずつ使っていけば徐々に理解できるようになるはずです。

無理せずに簡単なことからチャレンジしていきましょう。

タイトルとURLをコピーしました