注目の記事 PICK UP!

WORDPRESS吹き出し会話プラグイン「Speech Bubble」の吹き出しの色変更

WORDPRESSプラグインSpeech bubbleカスタマイズ

WordPressの吹き出し会話プラグイン「Speech Bubble」を気に入ってます。
今日はその「Speech Bubble」の中でも特に気に入っている「LINE風吹き出し」の吹き出し部分の色を変えてみましたのでシェアしたいと思います。
「Speech Bubble」のインストール方法とアイコン画像の変更方法などは多くのブログで詳しい解説があるので省きます。

サンプル

ジェットン
これってLINEぽいよね?
あの子
こっちは色違いね

元々の「In(LINE風吹き出し)」の吹き出しの色は
「左が白っぽい吹き出し(#F9F9F9)」、「右が薄緑の吹き出し(#BBFF77)」
でした。

それを今回は
「左が薄緑の吹き出し(#BBFF77)」、「右がピンクの吹き出し(#ff88d6)」
に変更しています。

吹き出し部分の色を変更する前に

今回解説する吹き出し部分の色変更は「Speech Bubble」の「In」のCSSファイルである「sb-type-in.css」を直接編集する方法です。
「CSSとか難しいことわからないよ~」という初心者の方でも簡単に変更できるように解かりやすく解説したいと思います。
初期状態の吹き出しの色設定も残しておきたい場合は、新しくCSSファイルを作るなどしてください。
尚、直接編集する場合も、バックアップは必ず取っておくようにしましょう。

用意してほしいもの

解説するにあたり行番号を指定していますので、行番号が表示されるテキストエディターかホームページ制作ソフトがあるとわかりやすいです。

■行番号が表示される無料のテキストエディター「TeraPad
terapad

変更手順

  1. WORDPRESSのメニューの「プラグイン」から「インストール済みプラグイン」をクリックします。
    01
  2. 「インストール済みプラグイン」の中から「Speech bubble (ふきだしプラグイン)」の「編集」をクリックします。
    Speech Bubble
  3. 画面右側に「Speech bubble」のファイル一覧が表示されるので、その中から「speech-bubble/css/sb-type-ln.css」をクリックします。
    Speech Bubble
  4. コードが表示されたらどこでもいいのでクリックし、キーボードの「Ctrl+A」続いて「Ctrl+C」をして、テキストエディターやホームページ制作ソフトに「Ctrl+V」で貼り付けてください。
  5. まず左の吹き出しの吹き出し口の部分の色を薄緑に変更します。
    コードの158行目

    border-color: #F9F9F9 transparent;
    

    border-color: #CCFF88 transparent;
    
  6. 次に右の吹き出しの吹き出し口の部分の色をピンクに変更します。
    ※吹き出し本体の色より少し薄めの色にするといい感じになります。
    コードの204行目

    border-color: #CCFF88 transparent;
    

    border-color: #FDC2E7 transparent;
    
  7. 今度は左の吹き出しの本体部分の色を薄緑に変更します。
    コードの228行目から下記のようなコードになっています。

    .sb-type-ln > .sb-subtype-a > .sb-content > .sb-speech-bubble {
    border-radius: 0 15px 15px 15px;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4), 0 10px 10px rgba(255, 255, 255, 0.5) inset, 0 -10px 10px rgba(0, 0, 0, 0.1) inset;
    }
    

    初期設定では左の本体部分には色の設定がされていないので、本体部分の色設定行を追加します。

    .sb-type-ln > .sb-subtype-a > .sb-content > .sb-speech-bubble {
    background-color: #BBFF77;
    border-radius: 0 15px 15px 15px;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4), 0 10px 10px rgba(255, 255, 255, 0.5) inset, 0 -10px 10px rgba(0, 0, 0, 0.1) inset;
    }
    
  8. 次に右の吹き出しの本体部分の色をピンクに変更します。
    コードの234行目(または235行目)

    background-color: #BBFF77;
    

    background-color: #ff88d6;
    
  9. 「ファイルを更新」をクリックすれば出来上がり。
    Speech Bubble

出来上がり

ジェットン
最初はコード見るのが面倒かもしれないけど、どこを変えればいいか解れば簡単!
SU-METAL
色コード見ながら自分の好きな色にしてみてね♥
色コードがわかるサイト
ジェットン
他の吹き出しも同じようなところを変更すれば大丈夫!バックアップは忘れずに!
SU-METAL
SEE YOU♥

この記事が気に入ったら
いいね!してくださるとうれしいです(^▽^)

Twitter で

関連記事

  1. 1万PV達成

    ブログ開始から2ヶ月目で月間10,000PVをクリアできた!ちょっとだけ分析してみよう!

  2. WordPress4.72 脆弱性

    WordPress(ワードプレス)脆弱性対策のためにWordPress4.72への更新が必須!

  3. ワードプレステーマ削除方法

    WordPress (ワードプレス)テーマ削除方法

  4. ワードプレステーマ調べる

    気になるあのブログのWordPressのテーマやプラグインは何使ってるの?を簡単に教えてくれる『Wo…

  5. WordPressにログインできない「予期しない出力によりCookiesがブロックされました」エラー…

  6. アイコンフォントWordPressプラグイン

    WordPressで簡単にアイコンフォントが使えるようになるプラグイン『WP Visual Icon…

  7. ワードプレスのパーマリンクおすすめ設定

    WordPressのパーマリンクのおすすめ設定は?

  8. WordPressでリンク先のサムネイルも表示できるプラグイン『Pz-LinkCard』初心者向け解…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

GadgetJet Twitter

GadgetJet Google+

PAGE TOP