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

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

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

  4. WordPress4.72 脆弱性

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

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

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

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

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

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

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

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

コメント

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

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

ピックアップ記事

  1. XperiaXZ SO-01J Xperia XZ(SO-01J)を入手!おまけでdtab Compact d0…
  2. Piqapoo 犬の散歩のしつけ ウンチ回収が楽になるポータブルトイレ「Piqapoo(ピークア…
  3. Xperiaソーラー充電 Xperia XZ(SO-01J)用に購入したソーラー充電器がコスパ最強!【ソー…
  4. へんしんバイク 3歳5ヶ月でへんしんバイクの楽しさを理解した姪っ子
  5. FES Watch U あなたが出資するかどうかで作るか作らないかが決まる時計
  6. スター・ウォーズ ダース・ベイダーTシャツ ソフトバンクSTAR WARS mobileキャンペーンで当選した『スター・ウォ…
  7. Razer Project Valerie ゲーミングノートPCだが、むしろ株やFXのトレード用としても良さそうな3画面4K…
  8. スイトル ペットの粗相に大活躍!掃除機用水洗いクリーナーヘッド「スイトル(switle)」…
  9. HONDA NSX ホンダの新型NSXの走りを見てみたい!
  10. Xperiaカバーストア Xperiaユーザーにおすすめ!Xperiaカバー・ケース専門ウェブストア『Xp…

人気記事

  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