wordpress で、記事内に吹き出しを入れる方法

  • このエントリーをはてなブックマークに追加

スポンサーリンク

wordpress で、記事内に吹き出しを入れる方法

 wordpress の文章中にキャラクターを登場させます。そして、会話をしているような吹き出しを入れて臨場感をだします。

 ワードプレスでは、吹き出し専用のプラグインを入れたり、css 専用のプラグインを入れて、css に書き込みをすると、吹き出しが文章中に作れます。

吹き出しを入れる方法です。

 吹き出しを css で入れるには、Simple Custom CSS プラグインを使います。吹き出し専用のプラグインを使って入れるのは、speech bubble プラグインを使います。

 吹き出しを css で入れてしようするためには、css に対応した専用のhtml ソースを登録して使用します。この専用のhtml ソースを登録して使用できる、AddQuicktag プラグインも使います。

 

キャラクターの画像をアップします。

 最初に、吹き出しで使用するキャラクターの画像を、新規投稿の画面の「メディアを追加」から、アップしておきます。

 画像は、JPEG で保存したファイル (拡張子は、jpg です。) を使用します。この形式の画像は、png 形式の画像の容量の半分以下になります。

 画像は、無料のフリー画像を使用します。無料のフリー画像提供サイトで登録をして、使用できるようにします。

 無料の著作権フリーで、利用できるサイトです。pixabay.com

 こちらから、登録できます。google アカウントなどが、利用できます。
 https://pixabay.com/ja/accounts/settings/?welcome

 

キャラクターの画像をダウンロードします。

ダウンロードした画像です。

CAT (640-300×300.png)

cat

DOG (640-300×225.png)

dog

アップした画像です。

CAT (640-300×300.jpg)

cat

DOG (640-300×225.jpg)

dog

 

プラグインを追加します。

 プラグインの新規追加から、Simple Custom CSS プラグインと吹き出し専用のプラグインの speech bubble プラグインをインストールします。

 Simple Custom CSS プラグインを新規追加から、インストールします。そして、有効化します。

 speech bubble プラグインを新規追加から、インストールします。そして、有効化します。

 AddQuicktag プラグインを新規追加から、インストールします。そして、有効化します。

css のソースを準備します。

 css のソースを準備します。今回は、以下のサイトを参考にしました。

 CSSで会話形式のフキダシデザインを作ってみる – AIUEO Lab2
 http://akiueo.hatenablog.com/entry/css-fukidashi-design-conversation-201411

 

css のソースです。

 以下は、css のソースです。Simple Custom CSS プラグインに、登録します。

 ダッシュボードを開きます。左側のメニューから、
 外観 => カスタムcss を開きます。
 /* カスタム CSS をここに入力してください */ へ、css のソースを貼り付けます。
 「カスタム CSS の更新」を、クリックします。

/* カスタム CSS をここに入力してください */

/* add 2017-06-07 09:54JST (追加した日時を記載します。) */
/*============================================================
フキダシデザイン 
============================================================*/
.arrow_answer,
.arrow_question {
    position: relative;
    background: #fff;
    border: 1px solid #c8c8c8;
    padding: 30px 25px;
    border-radius: 10px;
    width: 70%;
    font-size: 13px;
}
.arrow_question {
    float: right;
    margin-right: 20px;
}
.arrow_answer:after,
.arrow_answer:before,
.arrow_question:after,
.arrow_question:before {
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.arrow_question:after,
.arrow_question:before { right: 100%; }
.arrow_answer:after,
.arrow_answer:before { left: 100%; }
.arrow_answer:after,
.arrow_question:after {
    border-color: rgba(255, 255, 255, 0);
    border-width: 15px;
    margin-top: -15px;
}
.arrow_answer:after { border-left-color: #fff ; }
.arrow_question:after { border-right-color: #fff ; }
.arrow_answer:before,
.arrow_question:before {
    border-color: rgba(200, 200, 200, 0);
    border-width: 16px;
    margin-top: -16px;
}
.arrow_answer:before { border-left-color: #c8c8c8; }
.arrow_question:before { border-right-color: #c8c8c8; }
.question_image { float: left; }
.answer_image {
    float: right;
    margin-right: 20px;
}
.answer_image img,
.question_image img { border-radius: 50px; }
.question_Box {
    margin-bottom: 25px;
    overflow: hidden;
}

 

html のソースです。

 以下は、html のソースです。AddQuicktag プラグインに、登録します。

 ダッシュボードを開きます。左側のメニューから、
 設定 => AddQuicktag を開きます。
 「クイックタグの追加と削除」から、登録します。
 「ボタン名」へ、「css 吹き出しの記述」と入れます。(表示名になります。)
 「開始タグ」へ、html のソースを貼り付けます。
 記入するのは、「ボタン名」と「開始タグ」の2ヶ所です。
 記入した右側にある、チェックボックスの「post」と「page」へ、チェックを入れます。
 「変更を保存」を、クリックします。


<!-- add 2017-06-07 09:54JST (追加した日時を記載します。) -->
<div class="question_Box">
<div class="question_image"><img src="画像のURL" alt="質問者の写真" width="90" height="90"/></div>
<div class="arrow_question">
     ここに会話内容
</div><!-- /.arrow_question -->
</div><!-- /.question_Box -->

<div class="question_Box">
<div class="answer_image"><img src="画像のURL" alt="解答者の写真" width="90" height="90" /></div>
<div class="arrow_answer">
     ここに会話内容
</div><!-- /.arrow_answer -->
</div><!-- /.question_Box -->

 css と html の登録は、以上です。これで、テストをして確認をします。

テストをして確認をします。

 css と html の登録が終了したら、テストをして確認をします。

 

png 画像

質問者の写真
ここに会話内容-question

解答者の写真
ここに会話内容-answer

 

JPEG (jpg) 画像

質問者の写真
ここに会話内容-question

解答者の写真
ここに会話内容-answer


スポンサーリンク

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す

*

Translate »