How To

WordPressで使えるQ&Aデザイン【専用プラグイン不要】

Q&A

検索ユーザーが抱えている疑問や悩みをサクッと解決するのに役立つ「Q&A」。

ここでは、専用のプラグインやCSSの追加等一切なしで使える「Q&A」の作り方を紹介しています。

 

こんな人のお役に立てる記事です。

小豆
自分のブログにQ&Aみたいなものを載せたい。
ただし、そのためにわざわざ有料のWordPressテーマを買うのも嫌だし、できれば専用プラグインも使いたくない。
簡単に「Q&A」って作ることできないのかな?

WordPressブログで使えるQ&Aデザイン

ここで紹介するQ&Aデザインは、専用プラグイン等を一切使わずに作りました。

WordPress標準機能で作れるので、ぜひ自分のブログでも利用してみて下さい。

 

シンプルデザインのQ&A

  • 超シンプル

Q サンプルテキスト?

A サンプルテキスト サンプルテキスト サンプルテキスト

 

  • シンプル モノクロ
Q サンプルテキスト?
A サンプルテキスト サンプルテキスト サンプルテキスト

 

カラフルデザインのQ&A

  • カラフル 枠なし
Q サンプルテキスト?
A サンプルテキスト サンプルテキスト サンプルテキスト

 

  • カラフル 文字色カラー
Q サンプルテキスト?
A サンプルテキスト サンプルテキスト サンプルテキスト

 

アイコン入りのQ&A

女性アイコン    サンプルテキスト?

アイコン男性 サンプルテキスト サンプルテキスト サンプルテキスト

それぞれのデザインの作り方

上で紹介した【Q&A】デザインの作り方を紹介していきます。

ここでは、表作成にプラグイン【TinyMCE Advanced】を使用しています。

プラグイン

Q&Aデザイン

  1. 超シンプル
  2. シンプル モノクロ
  3. カラフル 枠無し
  4. カラフル 文字色カラー
  5. アイコン入りQ&A

 

超シンプル

Q サンプルテキスト?

A サンプルテキスト サンプルテキスト サンプルテキスト

 

こちらは、「Q」と「A」のテキスト部分を拡大 太文字 カラー変更しています。

たったこれだけでも、立派なQ&Aに見えますね。

余計な装飾で記事をごちゃごちゃさせたくない人におすすめです。

 

シンプル モノクロ

Q サンプルテキスト?
A サンプルテキスト サンプルテキスト サンプルテキスト

 


  • 1×2(横1列×縦2行)の表を作成

    テーブル作成


  • 1行目の背景色を黒に設定

    セルの背景色を変更

    背景色を変更したいセル内にカーソル→テーブルアイコンセルセルのプロパティ高度な設定

    背景色に、黒を表示する【#424242】を入力


  • 1行目の文字色を白に設定

    文字色を変更

    文字色を変更したいテキストを選択→テキスト色→白を選択


  • 「A」の文字色を赤に設定

    上の手順同様、「A」の文字色を赤に変更します。

 

カラフル 枠無し

Q サンプルテキスト?
A サンプルテキスト サンプルテキスト サンプルテキスト

 


  • 1×2(横1列×縦2行)の表を作成


  • 「Q」と「A」を拡大、文字色を【濃いピンク】【薄い青】に設定

    文字の拡大と色の変更


  • 1行目、2行目の背景色をそれぞれ設定

    セルの背景色

    背景色を変更したいセル内にカーソル→テーブルアイコンセルセルのプロパティ高度な設定

    メモ

    1行目:#ffebee(薄い赤)

    2行目:#FAFAFA(薄い黒)


  • 枠を削除

    枠の削除

    表全体を選択した状態で→テーブルアイコンセルセルのプロパティ高度な設定枠線の色

    枠線の色に、記事の背景色と同じカラーコードを入力します。

    ※背景色が白の場合は、【#ffffff】と入力

 

小豆
あれ?枠線が上手く削除できない・・。

こんな場合は、記事後半を参考にしてください。

 

カラフル 文字色カラー

Q サンプルテキスト?
A サンプルテキスト サンプルテキスト サンプルテキスト

 


  • 2×2(横2列×縦2行)の表を作成

    横2列の表


  • 「Q」「A」を拡大、文字色を白に設定


  • 1行目の1列目、2行目の1列目の背景色をそれぞれ設定

    背景色を変更したいセル内にカーソル→テーブルアイコンセルセルのプロパティ高度な設定

    メモ

    1行目の1列目:#ff00ff(濃いピンク)

    2行目の1列目:#99ccff(水色)


  • 2列目の1行目、2列目の2行目の背景色を設定

    背景色:#FAFAFA(薄い黒)


  • 列の幅を指定

    列幅を指定

    幅を変更したい列を選択→テーブルアイコンセルセルのプロパティ一般

    メモ

    1列目:5%に設定

    2列目:95%に設定


  • 枠を削除

 

アイコン入りQ&A

女性アイコン    サンプルテキスト?

アイコン男性 サンプルテキスト サンプルテキスト サンプルテキスト

 

アイコン画像を挿入し、その横にテキストを入力するだけです。

※表は使用していません。

ここでは、以下のサイズでアイコン画像を挿入しています。

メモ

アイコンのサイズ 横幅 25px × 縦 27px

 

アイコン画像は、無料の画像ダウンロードサイト【イラストAC】のものを利用しています。

アイコン画像

 

番外編:AFFINGER5利用者におすすめのQ&Aデザイン

人気のWordPress有料テーマAFFINGER5の記事装飾機能を利用してQ&Aデザインを作ってみました。

AFFNGER5利用中の人は是非参考にしてください。

 

AFFINGER5ってどうなの? ▼

AFFINGER5はブロガーやアフィリエイターに人気のWordPress有料テーマ。

ボタン一つで呼び出せる記事装飾が豊富で、思い通りのデザインのブログが簡単に作れます。

以下の記事で、AFFINGER5の評判と使用1年のレビューをしています。

👆クリックでボックスが開きます

 

AFFINGER5デフォルトの「スライドボックス」は、Q&Aにはピッタリのデザインですね。

Q&Aの項目がたくさん並ぶときにも、ごちゃごちゃせず記事をスッキリと見せることができます。

 

記事内のスライドボックスの設定

fontawesome fa fa-quora
text AFFINGER5ってどうなの? ▼
bgcolor #D2B48C
color #1a1a1a
margin_bottom 20

 

表の枠線が消えない時の対処法

記事内で紹介した「表の枠線を削除する方法」は、使用しているWordPressテーマによってはうまく反映しない場合があります。

たとえば、このブログ「大福日記」で使用しているAFFINGER5の場合もそう。

 

枠の削除

テーブルアイコン → セル → セルのプロパティ → 枠線の色

ここで、ブログの背景色と同じ白【#ffffff】を選択した場合がこちら。

Q サンプルテキスト?
A サンプルテキスト サンプルテキスト サンプルテキスト

枠線が中途半端に残ってしまいます。

 

こんな場合は、テーブルタグを<div class="notab">~</div>で囲みます。

<div class="notab">
<table style="border-collapse: collapse; width: 100%;">
<tbody>
<tr>
<td style="width: 100%;"> </td>
</tr>
<tr>
<td style="width: 100%;"> </td>
</tr>
</tbody>
</table>
</div>

Q サンプルテキスト?
A サンプルテキスト サンプルテキスト サンプルテキスト

枠線がすべて削除されました。

 

まとめ:ブログにQ&Aを上手に取り入れよう

以下の記事を書くときは、記事内でQ&Aを使うと効果的です。

  • 商品レビュー記事
  • サービス紹介記事

Q&Aの最大のメリットは、ブログを訪れたユーザーが疑問に思っていることをサクッと解決できる点ですね。

ダラダラと長い文章はユーザーに嫌われますが、シンプルなQ&Aであれば飛ばされずにしっかりと読んでもらえる可能性が上がります。

ブログ内で商品やサービスの紹介をするときには、ぜひ活用してみて下さい。

 

記事内で使用した素材やサービスへのリンクをまとめておきました。

  • TinyMCE Advanced:表作成や文字装飾などを簡単に行えるプラグイン
  • イラストAC:アイコン画像などのブログで使えるイラストの無料ダウンロードサイト
  • AFFINGER5:ブログの収益化に特化した人気のWordPress有料テーマ

こちらの記事もよく読まれています

  • この記事を書いた人
大福

大福

人間関係に嫌気がさして10年間務めた会社を退職。その後3年間のニート生活を送る。自宅にいながらパソコン1台で稼げることを知り、現在はストレスフリーな毎日を送っています。このサイトではブログやアフィリエイトで稼ぐ方法を発信しています。自宅にいながら稼げるって素晴らしい♪

-How To

© 2020 大福日記