注目の記事 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. アイコンフォントWordPressプラグイン

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

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

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

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

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

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

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

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

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

  7. WordPress4.72 脆弱性

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

  8. 1万PV達成

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

コメント

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

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

ピックアップ記事

  1. ブログタイトルジェネレーター これでもう迷わない!ブログ記事タイトルの決め方!タイトルジェネレーターを使ってみ…
  2. ネスカフェ ゴールドブレンド バリスタ i こんなところにもBluetooth機能!「ネスカフェ ゴールドブレンド バリスタ…
  3. twitterアンケートやり方 Twitterの投票機能(Twitter Poll)でアンケートを取る方法
  4. Googleモバイル優先 Google検索結果が近い将来的にモバイルページ優先に!
  5. ワードプレスのパーマリンクおすすめ設定 WordPressのパーマリンクのおすすめ設定は?
  6. YouTube広告禁止 新規ユーチュバーは稼ぎづらくなる?YouTubeが視聴1万回未満のチャンネルは広…
  7. Android用CD録音ドライブ【LDR-PMJ8U2R】 Androidスマホに直接CD音楽を録音できるロジテックのCDドライブ『LDR-…
  8. アマゾン求人 アマゾンジャパンの在宅勤務カスタマーサポート求人ってどんな?アップルは?
  9. XperiaXZハイレゾダウンロードアプリmore NTTドコモ「Xperia XZ SO-01J」ソフトウェアアップデート開始!
  10. Steam 返金 キャンセル Steam (スチーム) で予約したPCゲームをキャンセル・返金してもらう方法【…

人気記事

  1. XperiaXZカバー
  2. Xperia XZ Premium
  3. XperiaXZハイレゾダウンロードアプリmore
  4. USB type-CアダプタとXperiaXZ充電器
  5. ユーチューブ スーパーチャット
  6. Google検索
  7. XperiaXZとXperiaZ2スペック比較
  8. PS4おすすめソフト一覧
  9. ワイドナショー島田秀平運勢占い
  10. Twitter 固定表示やり方解除
  11. YOUTUBE SUPER CHAT
  12. Xperia ZX
  13. amazon go アマゾンゴー
  14. バリスタアイ レビュー
  15. セブンイレブン限定キャンペーン

GadgetJet Twitter

GadgetJet Google+

PAGE TOP