注目の記事 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のテーマやプラグインは何使ってるの?を簡単に教えてくれる『Wo…

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

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

  4. 1万PV達成

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

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

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

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

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

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

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

  8. WordPress4.72 脆弱性

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

コメント

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

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

ピックアップ記事

  1. どんなものでも楽器になるガジェット「MOGEES」
  2. 完全無料写真素材サイト 全部無料の高画質写真素材サイト
  3. 大谷翔平の目標設定シート 大谷翔平の目標設定に学ぶ「マンダラート」を使って目標を立てよう!Excelサンプ…
  4. Piqapoo 犬の散歩のしつけ ウンチ回収が楽になるポータブルトイレ「Piqapoo(ピークア…
  5. Googleモバイル優先 Google検索結果が近い将来的にモバイルページ優先に!
  6. ベビーメタル画像ランキング BABYMETALの動画を一番再生している国ランキング – 2016…
  7. 昭和元禄落語心中シーズン2 助六再び編 Amazonビデオに『昭和元禄落語心中 シーズン2 – 助六再び編…
  8. Razer Project Valerie ゲーミングノートPCだが、むしろ株やFXのトレード用としても良さそうな3画面4K…
  9. ワンオクとアヴィリル ONE OK ROCKのアルバム『Ambitions』海外盤にある「Americ…
  10. 著作権フリー完全無料のBGM 著作権フリー完全無料のBGM&効果音配布サイト厳選ピックアップ

人気記事

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

GadgetJet Twitter

GadgetJet Google+

PAGE TOP