イケてるガジェットをアイキャッチ!注目の記事 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. WordPress4.72 脆弱性

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

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

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

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

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

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

  5. 1万PV達成

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

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

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

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

コメント

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

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

ピックアップ記事

  1. 東洋水産ドコモヒカリーうどん ドコモヒカリーうどん実食
  2. SQUARE ENIX MARKET(スクエア・エニックスマーケット)5周年記念…
  3. ホンダNSX対決動画 新型NSXの速さは本物か?速さ対決動画が話題に!
  4. タブレットやスマホのキーボードにおすすめ!Logicool(ロジクール) Blu…
  5. SO01J XperiaXZ フォレストブルー Xperia XZがドコモから2016年11月上旬発売!勢い余って予約した!
  6. ナイト・マネージャー Amazon独占配信ドラマ 『ナイト・マネージャー(THE NIGHT MANAGER)』Amazon独占配…
  7. ローグ・ワン:スター・ウォーズ・リミテッド・エディション 日産ローグとローグワン / スターウォーズ・ストーリーのコラボ車を初公開へ!
  8. スマホ紛失盗難 【Xperia XZ】スマホ紛失時に役立つロック画面メッセージ【置き忘れ】
  9. スマホゲームしながらダイエット&体幹トレーニング ステルス スマホゲームしながら簡単ダイエット&体幹トレーニング!「Stealth(ステルス…
  10. esavox ランボルギーニの排気管を使用したスピーカー「ESAVOX」がカッコよすぎる!値段…

人気記事

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

GadgetJet Twitter

GadgetJet Google+

PAGE TOP