CSSで枠(ボックス)をデザイン|WordPressプラグインで一発呼び出し!

今回はWordpressでブログを書いている方向けにCSSを使って「文章を囲み枠(ボックス)」をデザインする方法をお伝えします。プラグインを使えばボタン一発で呼び出し適用できるのでとっても楽です!

「囲み枠」とは以下のようなものです。よく見かけると思います。

黄色い囲み枠
赤い点線枠の囲み枠
「注意!」という文字を表示した囲み枠

引用した文章の囲み枠

以上のデザインは、CSSという文書の書式を上手く使って文章の装飾をしたものです。CSSを勉強すれば誰でも利用可能です。ただ最初から自分でデザインするのは大変です。ネット上には無料で提供されているCSSがたくさんありますのでそうしたものを使うのが手っ取り早いし楽です。

また有料のワードプレス・テーマを買うと最初からきれいな囲み枠のCSSが付いてくるので、こうした作業を面倒に思う場合は有料テーマを購入しましょう。私もそうしてました。

今回は、ネットで自分の好きなデザインを探し、気に入ったものがあれば、自分ですぐ使えるよう設定するというやり方を説明していきます。一度設定してしまえばボタンのクリック一発でデザインが適用できるんです。Wordpressでは「 AddQuicktag 」と「 Simple Custom CSS 」という二つのプラグインを使うとこれが簡単に実現できてしまいます。 今回は、この方法について解説します。では、早速始めましょう!

プラグイン のインストール

簡単に作業を行うには”AddQuicktag” と “Simple Custom CSS”のインストールが必要です。

幸い、この二つのプラグインはインストールするだけで済み、細かい設定は不要です。慣れた人は簡単にできるでしょう。一応やり方を書いておきます。

  1. まずWordPressの管理画面のサイドバーにある「プラグイン」から「新規追加」をクリックします。
  2. 次に右上の検索画面にブラグインの名称を入力します。そうすると検索結果が並びます。
  3. その中から該当するプラグインを選び、「今すぐインストール」をクリックしてください。
  4. その後、画面が切り替わって「プラグインを有効化」というボタンが現れます。
  5. そうしたら、「プラグインを有効化」というボタンをクリックしてください。
  6. 以上です。ここまでのことを二つのプラグインそれぞれでやればOKです。

なお以下に画像を使った中江翔吾さんによるわかりやすい解説が載っています。こちらも参考にしてみてください。

WordPress の見出しデザインを自由にカスタマイズする方法

囲み枠のデザインを選ぶ

初から自分でデザインを考える必要はありません。「囲み枠 ボックス CSS」などで検索すれば、たくさんの参考サイトが出てきます。そのなかから、あなたの好きなデザインを選べばいいのです。

オススメのサイトを紹介します。いろいろ見てみて、気に入ったデザインをどれか選んでみましょう。

  1. コピペで使える!シンプルなボックスデザインCSS
  2. コピペで使えるシンプルでおしゃれな囲み枠CSSサンプル
  3. CSSで作るおしゃれなボックス(囲み枠)のデザインサンプル13パターン
  4. シンプルだけどおしゃれで目立つ!ブログ記事で使えるボックスCSSカスタマイズ

では、あなたが良いと思うデザインを選んたら、次のステップです。

囲み枠デザインの CSS をコピーする

最初は、 Simple Custom CSSというプラグインを設定します。なおこのプラグインはWordpressのダッシュボード(操作パネル)ではカスタムCSSという名称で表されてます。「Simple Custom CSS」のことなのでお間違いなく。

ここではいっしょにシンプルなCSSでやってみましょう。文章を濃い緑色の枠で囲み、囲みの中を薄めの緑で塗ったデザインです。

これが見本の囲み枠です。名称はグリーンボックス。ボタン一発でこの囲み枠が使えるようになります。まずは管理画面の左のサイドバーから「外観」 → 「カスタム CSS 」へと進んでください。

そして、「カスタム CSS 」の入力欄に以下のCSS(「.(ピリオド)から最後の「}」まで)をコピーして貼り付けます。

.greenbox{background:#cfedb7; border: 2px solid #5ab80e;}

貼り付け先は、管理画面の左のサイドバーから「外観」 → 「カスタム CSS 」へと進んだ先にあります。

そこで開いた画面に、コピーしたものを貼り付けます。以下のようになります。

「Simple Custom CSS」への貼付け説明

そして保存すれば終了です。作業は簡単ですよね? 冒頭のピリオド「.」は忘れないように注意してください。

ちなみに「.」の次から「{」の直前までの文字列「greenbox」を専門用語で「クラス名」といいます。覚えておくと便利です。

無事に貼り付けられたら「カスタム CSS の更新」というボタンが下か左にありますから、それをクリックします。これで設定が保存されます。

以上でプラグインの一つ目「カスタム CSS 」の設定が終了です。

AddQuicktagへの登録でオリジナルボタンを設定

次はAddQuicktagの設定です。あなたが選んだ囲み枠を今後簡単にボタン一発で作成できるようにします。

管理画面の左のサイドバーから「設定」 → 「 AddQuicktag 」をクリックして画面を開いてください。

AddQuicktagへの登録

ボタンの名前ですが、あなたがわかればどんな名称でもOKです。ここでは「グリーンボックス」としておきましょう。

では、次の5つの作業を順に行ってください。とても簡単です。

  1. 左から1番めの上のボックスに「 グリーンボックス」と入力
  2. その下のボックスに同じく「 グリーンボックス 」と入力
  3. 左から2番めの上のボックスに「 <div class=”greenbox”>」と入力(全て半角
  4. その下のボックスに「 </div>」と入力(全て半角
  5. 一番右のチェックボックスにチェックを入れる

字の部分は絶対変更してはいけません。

以上の5つが終わったら「変更を保存」ボタンをクリックします。これでAddQuicktagの設定は終了です。

以上で全ての設定は終わりです。

WordPress で登録した囲み枠を使ってみよう

実際に用意したオリジナルの囲み枠ボタンを使う方法を説明します。

まずは、記事の投稿画面を表示してください。
次に、囲み枠デザインを使いたい文章を入力し、囲みたい部分を選択状態にしてください。
その後「 Quicktags 」をクリックします。
該当する項目(ここではグリーンボックス)を選べばOKです。

AddQuicktagを実際に使ってみる

この画面では完成形は見られません。投稿を「表示」して初めてブログに反映されます。ご注意ください。

はい、作業は以上です。お疲れ様でした。

なお、色や形状を変更したい場合はCSSについて勉強してみてください。自分の好きなように改造していくとおもしろいですよ。紹介した4つのサイトにもわかりやすい解説は検索すれば見つかります。

上級編 ちょっと凝ったCSSに挑戦

では少し難易度の高いCSSです。見本はこちらです。上記の見本が問題なくできたら挑戦してみてください。

上級編の完成見本はこちらです。

こちらのサイトを参考にさせていただきました)

このCSSは、「.(ピリオド)」から最後の「}」までのパートが二つあるタイプです。指定が複雑ですが、その分、凝ったデザインの表現が可能になります。

といっても、設定方法の手間は全く変わりません。見本のCSSをコピーペーストすれば大丈夫です。「Simple Custom CSS」そして「AddQuicktag」と設定していけばOKです。

「Simple Custom CSS」の設定

やり方は変わりません。以下が上級編のCSSです。全ての行をコピーしてくださいね。「.(ピリオド)」から最後の「}」までの全てです。こちらは、後で解説できるよう、改行しながら書いています。(CSSを書く場合、改行の有無は動作と関係ありません)

.repletion
{
position: relative;
background:#cfedb7;
border: 2px solid #5ab80e;
border-radius: 10px;
margin: 5px;
padding: 1.3em;
}
.repletion:before
{
content:"POINT";
position:absolute;
border-radius: 4px;
color: #fff;
left:35px;
top:-14px;
background:#5ab80e;
padding:1px 10px 0px 10px;
font-size:90%;
font-weight:bold;
z-index:1;
}

「AddQuicktag」の設定

あなたの好きなボタン表示名称を入力し、<div class=”◯◯◯”>の◯◯◯を「repletion」にするだけです。

  1. 左から1番めの上のボックスに「 ポイント 」と入力(任意の文字に変えてOK)
  2. その下のボックスに同じく「 ポイント 」と入力(任意の文字に変えてOK)
  3. 左から2番めの上のボックスに「 <div class=”repletion”>」と入力(全て半角
  4. その下のボックスに「 </div>」と入力(全て半角
  5. 一番右のチェックボックスにチェックを入れる

以上が終わったら「変更を保存」ボタンをクリックします。これでAddQuicktagの設定は終了です。

それから、こちらのCSSのカスタマイズのヒントを書いておきます。参考にしてください。

見本
  1. 「POINT」という文字を変えたい場合は、12行目の「POINT」を好きな文字列に変えてください。
  2. 「POINT」の文字色を変えたい場合は15行目の「#ffffff」を好きな色に変えてください。
  3. 「ボディの色」を変えたい場合は4行目の「#cfedb7」を好きな色に変えてください。
  4. 「枠線の色」を変えたい場合は5行目と18行目の「#5ab80e」を好きな色に変えてください。

色は下記を参考にしてください。

カラーチャート(RBG値) – 超初心者のためのホームページ作成講座

なお、うまく改造できない場合は、以下のサイトで、ご自分の作ったCSSを検証してみてください。間違いを見つけてくれます。このサイトのテキストボックスにCSSをコピーして貼り付ければ解答が出ます。私も利用してます。

W3C CSS 検証サービス

以上です。お疲れ様でした!

おすすめ書籍

たった2日で楽しく身につく HTML/CSS入門教室 (Design&IDEA)

『たった2日で楽しく身につく HTML/CSS入門教室 (Design&IDEA)』

著者: 高橋 朋代
出版社: SBクリエイティブ
出版日: 2016-03-16
ASIN: 4797383038
ISBN-10: 4797383038
ISBN-13:



スラスラわかるCSSデザインのきほん

『スラスラわかるCSSデザインのきほん』

著者: 狩野 祐東
出版社: SBクリエイティブ
出版日: 2014-09-26
ASIN: 4797380071
ISBN-10: 4797380071
ISBN-13: 9784797380071