WordPress には「追加CSS」というWEBページのデザインをカスタマイズできる機能があります。
専用コードを書き加えることで、誰でも手軽にサイトデザインを自分らしく変えることができる機能です。
例えばアフィリエイトリンクのボタンなど、収益に直結する部分までも細かくカスタマイズできます。
もちろん、サイトの顔となるトップページのカスタマイズも可能。
タイトルの大きさや線の色、太さなどの装飾を変えたい時にはとても便利な機能です。
また追加CSSと似たもので「スタイルシート(style.css)」というものがあります。
この2つの機能はほぼ同じですが、当マニュアルでは追加CSSを使ってデザインの装飾をしていきます。
理由は追加CSSの方がより初心者向きだからです。
追加CSSの保存先は WordPress のデータベースです。
そのためテーマを直接書き換える必要がありません。
デザインの変更をリアルタイムで確認できるというメリットもあるため、ちょっとした装飾をしたい初心者には追加CSSが便利です。
逆にスタイルシートの場合、テーマのファイルを直接書き換えるため、初心者向きではありません。
変更の反映を確認するには、必要なページを行ったり来たりしなければならず、操作に慣れないうちは大変です。
テーマを大きく変更したい時や WordPress に慣れた方はスタイルシートがよいでしょう。
このような理由から、当マニュアルでは初心者に優しい追加CSSを使うことをおすすめしています。
ではそもそも追加CSSとは具体的にどういうものなのか、次の章でご説明していきます。
追加CSSって何？
そもそも「追加CSS」とは何か？
- 「追加CSS」とは …WordPress の機能で、CSSコードを追加できるメニューの一つです。
- 追加CSSの「CSS」とは…Cascading Style Sheets(カスケーディングスタイルシート)の略で、WEBページを装飾するための言語の一つです。
WEBページはHTMLという言語で構成されています。
そのHTMLの内容を更に装飾することができるのが、このCSSです。
CSSはHTMLとセットで使うものなので、CSSだけでは機能しません。
しかし実際に私たちがサイトをカスタマイズする際には、CSSのみ必要な時もあります。
以下は「CSSとHTMLの両方が必要な場合」と「CSSのみ必要な場合」の例です。
1．CSSとHTMLの両方が必要な場合＝主に新規デザインの作成(例：ボタンの作成)
一からデザインを作ります。そのためデザインの構造を作るHTMLと、それを装飾するCSSの両方が必要になります。
2．CSSのみ必要な場合＝主に既存デザインの変更(例：線の太さや色の変更)
デザインを構成するHTMLが既に存在しています。そのため装飾の役割を果たすCSSのみが必要となります。
１と２の違いは「WEBページにHTMLが既に存在しているか」という点です。
必ずしもそうとは限りませんが、始めのうちは「新規デザイン＝CSS＋HTML」、「デザイン変更＝CSS」と覚えてもいいかもしれません。
実際のCSSやHTMLとは、以下のような”コード”と呼ばれるものです。
（例）CSSコード
.list-box-1{
background: #fef9ed; /* 背景色 */
border-radius: 4px;
max-width: 600px; /* 横幅 */
padding: 2em;
margin:0 auto;
}
@media screen and (max-width: 768px){
.article ul, .article ol {
padding-left: 0px; /* スマホ閲覧時の余白リセット(cocoon) */
}
}
（例）HTMLコード
<div class=”list-box-1″>
<!– ここから下にリストを貼り付ける –>
<ol class=”list-6″>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ol>
<!– ここから上にリストを貼り付ける –>
</div>
難しそうな英単語や記号が並んでいますね。
それぞれの単語には意味があり、それが集まる事によって機能しています。
「こんなコード難しくて作れない！」と思うかもしれませんが、安心してください！
このようなコードをあなたが一から作り出す必要は全くありません！
インターネット上では既にたくさんのコードが紹介されています。
それをコピーして使えばOK！
これなら誰にでも簡単にできますよね！
では次に、追加CSSにCSSコードを追加する手順をご説明します。
追加CSSに追加する手順
ここでは追加CSSにコードを追加する手順について解説します。
先ほどご説明した「1．CSSとHTMLの両方が必要な場合」と「2．CSSのみ必要な場合」のそれぞれの手順を解説します。
まずは「1．CSSとHTMLの両方が必要な場合」の手順からみていきましょう。
1．CSSとHTMLの両方が必要な場合
手順は以下の3つです。
- プラグイン「Add Quicktag」をインストールし有効化する。
- コピーしたHTMLコードを Add Quicktag に貼り付けし登録。
- コピーしたCSSコードを追加CSSへ貼り付けし登録。
プラグイン「Add Quicktag」のインストールは、直接CSSの追加に影響があるわけではありません。
しかし登録したHTMLコードを素早く呼び出せ、とても便利です。
一度インストールするとずっと使えるプラグインのなので、今設定してしまいましょう。
まずは Add Quicktag のインストールの方法からご説明します。
▲注意▲
プラグインをインストールする場合は、事前にデータのバックアップをとりましょう！
万が一エラーが起きた場合は、バックアップデータを使ってサイトを復元させることもあります。
忘れずにバックアップをとりましょう！
① プラグイン「Add Quicktag」のインストールと有効化
プラグインの Add Quicktag をインストールし、有効化します。
①ダッシュボード画面左の一覧に「プラグイン」があります。
ポインターを合わせるとメニューが表示されるので、その中の「新規追加」をクリックします。
②新規追加をクリックすると「プラグインを追加」の画面が表示されます。
画面右側の「プラグインの検索」に「Add Quicktag」と入力しましょう。
③すると画面が変わり、検索結果の中に「Add Quicktag」が出てきます。
Add Quicktag の右上にある「今すぐインストール」をクリックしてインストールしましょう。
④「今すぐインストール」をクリックしインストールが完了すると、同じ場所に「有効化」というボタンが表示されます。
それもクリックしましょう。
※プラグインはインストールしただけでは使えません。
⑤すると「プラグイン」の画面へと切り替わります。
このページにあるプラグイン一覧で、先ほどの Add Quicktag がインストールされているか確認してください。
これで Add Quicktag のインストールと有効化は完了です。
次はコピーしたHTMLコードを Add Quicktag に貼り付けし登録します。
② コピーしたHTMLを Add Quicktag に貼り付けし登録
ここからは Add Quicktag にHTMLコードを登録する手順を解説します。
今回は例として、以下の赤いボタンを表示させるためのHTMLコードを入力していきます。
ではダッシュボードの画面から始めます。
①ダッシュボード左側の一覧に「設定」があります。
ポインターを合わせるとメニューが表示されるので、その中の「Add Quicktag」をクリックしましょう。
②すると「Add Quicktag クイックタグの追加と削除」の画面に切り替わります。
赤丸で囲まれた部分を、以下の通り入力していきましょう。
HTMLコードはそのままコピーして貼り付けてください。
◆ボタン名⇒ボタン赤
※自分がわかりやすい名前でOK。
◆開始タグ⇒
<div class=”mybtn mybtn-1 mybtn-red”>
<a href=””>サンプルボタン</a>
</div>
◆ビジュアルエディター⇒一番右をチェック
※一番右にチェックを入れると自動的に全てにチェックが入ります。
③3つの項目を全て入力したら「変更を保存」をクリックします。
④すると左上に「設定を保存しました」というメッセージが表示されます。
これでコピーしたHTMLコードを Add Quicktag に貼り付けし、登録する作業は完了です。
次はいよいよCSSコードを追加CSSに追加していきます。
③ コピーしたCSSコードを追加CSSへ貼り付け登録
ここではCSSコードを追加CSSに追加していきます。
①ダッシュボード画面左側の一覧にある「外観」にポインターを合わせます。
メニューが表示されるので、その中の「カスタマイズ」をクリックしましょう。
②するとカスタマイズ画面が開きます。
左側一覧にある「追加CSS」をクリックしましょう。
③「追加CSS」をクリックすると、CSSコードを入力するスペース（下の画像の赤丸で囲んだ部分）が表示されます。
ここに以下のCSSコードをコピーして貼り付けます。
◆追加CSSコード⇒
.mybtn {
text-align: center;
}
.mybtn-1 a {
display: inline-block;
margin: 1em 0;
padding: 18px 40px 18px 30px;
color: #fff;
font-size: 16px;
font-weight: bold;
line-height: 1.3em;
text-decoration: none;
border-radius: 4px;
box-shadow: 0px 4px 12px -2px #666;
position: relative;
transition: .4s
}
.mybtn-1 a:hover {
color: #fff;
transform: translateY(-4px);
box-shadow: 0 10px 15px -5px #777;
opacity: 1;
}
.mybtn-1 a::after {
font-family: FontAwesome;
content: ‘\f138’;
color: #fff;
position: absolute;
right: 10px;
top: 50%;
margin: auto;
margin-top: -10px;
}
.mybtn-red a {
background: #d43d39;
}
④追加CSSコードを貼り付けたら、「公開」をクリックします。
⑤「公開」が「公開済み」に変わると追加が完了したことになります。
左上の☓をクリックし、ダッシュボード画面へ戻ります。
これでCSSコードの追加の作業は完了です。
2．CSSのみ必要な場合
次に解説するのは「CSSのみ」追加する場合です。
これは先ほどご説明した「③ コピーしたCSSコードを追加CSSへ貼り付け登録」を行うだけです。
▲注意▲
既にCSSコードがある場合、そのCSSコードの一番下に移動し、1行改行してから新しいCSSコードを入力します。
以上で追加CSSに追加する手順の解説は全て終了です。
次は実際に追加CSSを記事中で使用してみましょう！
実際に記事作成する手順
ここでは追加CSSでデザインや装飾したもを、実際に投稿に表示させる手順を解説します。
以下の3つのパターンをそれぞれ詳しくご説明します。
- 新しいボタンを作成する
- h2見出しの背景色を変更する
- h2見出しの背景色をリアルタイムで変更する
最初は「新しいボタンの作成」から見ていきましょう。
先ほど追加CSSに追加したボタン赤を、実際に投稿に表示させます。
1．新しいボタンの作成
まずは記事の新規投稿からスタートです。
①ダッシュボード画面左側の一覧の「投稿」にポインターを合わせます。
出てきたメニューの「新規追加」をクリックしてください。
②すると「投稿の編集」画面が表示されます。
ここで「ビジュアルタブ」になっていることを確認します。
本文を入力する部分で一度クリックして、カーソルを表示させましょう。
③次にツールバーにある「Quicktags」をクリックします。
先ほど登録したHTML「ボタン赤」が表示されるのでクリックします。
④すると「サンプルボタン」というテキストが表示されます。
この状態で右上にある「プレビュー」をクリックしましょう。
⑤別ウィンドウが開き、記事のプレビュー画面が表示されます。
投稿記事中に先ほどの「ボタン赤」のデザインが表示されていればOKです。
続いて、ボタンの中のテキスト部分を編集するため「投稿の編集」ウィンドウに戻ります。
⑥投稿の編集画面へ戻ったら、「テキストタブ」をクリックしましょう。
こちらの画面にはHTMLコードが表示されています。
現在「サンプルボタン」と入力されている部分を削除して、以下のように入力してみましょう。
◆サンプルボタン⇒追加CSSボタン赤
※文章を入力する際には、HTMLコードを削除しないように気を付けましょう。
誤って削除した場合デザインが表示されません。
※誤ってコードの一部を削除してしまった場合は、一旦コードを全て消し Quicktags で「ボタン赤」を選択するところからやり直すことをおすすめします。
⑦テキストを書き変えたら再度「プレビュー」をクリックし、変更が反映されているか記事を確認します。
⑧変更が反映されていれば、下の画像のように変更後のテキストが表示されます。
変更が確認できたら「投稿の編集」ウィンドウに戻りましょう。
⑨右上のにある「下書き保存」をクリックして投稿を保存しましょう。
⑩画面左上に「投稿の下書きを更新しました」と表示されれば、投稿は保存されています。
以上で「新しいボタンの作成」の説明は終了です。
続いては「h2見出しの背景色を変更」を解説していきます。
2．h2見出しの背景色の変更
ここではh2見出しの背景色を変更してみます。
今回はh2見出しの背景色「グレー」を「紫」に変更します。
投稿の編集を開始する前に、背景色を変更させるのに必要なCSSコードを追加しましょう。
ダッシュボード画面から始めます。
①ダッシュボード画面左側一覧の「外観」にポインターを合わせます。
出てきたメニューの「カスタマイズ」をクリックします。
②するとカスタマイズ画面が表示されます。
次に左側にある「追加CSS」をクリックしましょう。
③CSSコードを追加する部分が表示されます。
下までスクロールして、先ほど追加した「ボタン赤のCSSコード」の最後を確認します。
最後の行でエンターキーを押して1行改行してください。
その場所に以下の「h2見出しの背景色を変更するCSSコード」をコピーして貼り付けましょう。
◆CSSコード⇒
.article h2{
border: none;
padding: 0.6em;
opacity: 0.7;
color: white;
background: #4a148c /*purple 900*/
}
④CSSコードを貼り付けたら「公開」をクリックします。
⑤「公開」が「公開済み」になったら追加が完了したことになります。
左上の☓をクリックしてダッシュボード画面に戻りましょう。
次は投稿に見出しを入力していきます。
⑥画面左側一覧にある「投稿」のメニューの「投稿追加」をクリックします。
⑦「新規投稿を追加」画面が表示されます。
「ビジュアルタブ」であることを確認し、タイトルと本文にそれぞれ以下のことを入力しましょう。
◆タイトル⇒h2見出しの背景色の変更手順
◆本文⇒h2見出しの背景色の変更
⑧次にカーソルを今入力した本文の文頭に移動させます。
⑨ツールバーにある「段落」をクリックし、メニューを表示させます。
その中の「見出し2」をクリックしましょう。
⑩すると「見出し2」のデザインが文章に反映されます。
では、右上のプレビューをクリックして実際のデザインを確認しましょう。
⑪背景色が紫のh2見出しが表示されれば、追加したCSSでの変更が反映されています。
「投稿の編集」ウィンドウをクリックし編集画面に戻りましょう。
⑫画面右側にある「下書き保存」をクリックし投稿を保存します。
⑬「投稿の下書きを更新しました」が表示されれば、投稿は保存されています。
これで「h2見出しの背景色の変更」の解説は終了です。
3．h2見出しの背景色をリアルタイムで変更する
ここではカスタマイズ画面を使った、リアルタイムでのh2見出しの背景色の変更を解説します。
まずは先ほど保存した投稿「h2見出しの背景色の変更手順」を表示させます。
①画面左側一覧の「投稿」メニュー中にある「投稿一覧」をクリックします。
②投稿一覧画面が表示されるので、タイトル「h2見出しの背景色の変更手順」をクリックして投稿を表示させます。
③「投稿の編集」画面で、先ほど保存した内容が表示されます。
画面右側にある「公開状態」の「編集」をクリックします。
④すると公開状態を変更できるので「非公開」を選び「OK」をクリックしてください。
※下書き保存の状態では、投稿がカスタマイズ画面に表示されずリアルタイムでの色変更が確認できません。
リアルタイムでCSSの反映を確認したい場合は「公開」または「非公開」に設定しましょう。
⑤「OK」をクリックしたら「更新」をクリックしましょう。
⑥「更新」をクリックするとメッセージが表示されます。
ここは「OK」をクリックしてください。
⑦画面左上に「投稿を公開しました」のメッセージが表示されますが、実際には「非公開」設定になっていることが、画面右側の公開状態で確認できます。
⑧では追加CSSの変更を行います。
画面左側一覧の「外観」にポインターを合わせメニューを表示させます。
その中の「カスタマイズ」をクリックしましょう。
⑨するとカスタマイズ画面が表示されます。
画面中央にはサイト全体のプレビューが表示されています。
先ほど保存した非公開投稿のタイトル「h2見出しの背景色の変更手順」をクリックしましょう。
⑩実際の投稿内容が表示されます。
今回は先ほど入力した、背景色が紫のh2見出しのみ表示されています。
次に左側にある「追加CSS」をクリックしましょう。
⑪先ほど追加したCSSコードが表示されます。
下までスクロールし表示させると、h2見出しの背景色を変更するためのCSSコードがあります（赤丸で囲んだ部分）。
※コードを編集する前に、この部分のCSSコードをコピーしてメモパッドなどに保存しておきましょう。
誤って必要な部分を削除してしまっても、すぐに復元できるので安心です。
ではこれから、下線が引かれている背景色のコード部分を編集していきます。
まずは背景色を「赤」に変えてみましょう。
以下のコードをそのままコピーし、現在あるコードと同じ場所に貼り付けてください。
◆赤⇒#b71c1c /*red 900*/
⑫問題なくコードが変更されていれば、すぐに右側の投稿内にある見出しの背景色が「赤」に変わります。
今度は同じ手順で「緑」に変えてみましょう。
以下のコードをそのままコピーし貼り付けてください。
◆緑⇒#1b5e20 /*green 900*/
⑬こちらも問題なくコードが変更されていれば、右側の見出しの背景色は「緑」に変わります。
ではこのままコードの追加を保存します。
「公開」をクリックしてください。
⑭「公開」が「公開済み」に変わったら追加の完了です。
左上の☓をクリックしてダッシュボード画面に戻りましょう。
以上で「実際に記事作成する手順」の全ての解説は終了です。
装飾やボタンなどの追加CSSの参考サイト
一見大変そうに思える追加CSSですが、実はコピーと貼り付けの作業がメインでしたね。
ボタン作成や装飾に関するCSSコードは、ネットで検索するとたくさんのサイトで紹介されています。
ここにいくつかのサイトをご紹介します。
今後のサイト作りにお役立てください！
【参考】①【ワードプレス】追加CSSを使ってカスタマイズしてみよう！／あかえほ
【参考】②【Cocoon】コピペで簡単！タイトル入力可のおしゃれなボックスを作る！／ぽんひろ.com
【参考】③アフィリエイトリンクをボタン化する時に注意すべき３つのこと／Fukuro Press
【参考】④無料テーマCocoonでできるコピペCSSカスタマイズ15選。SANGOもJINも不要に！／Brasil Tips
【参考】⑤WordPressのcocoonテーマの見出しを自分だけのオリジナル見出しにカスタマイズできるCSSテンプレートをコピペしよう／ジェイスブログ
