【SANGOを自分でカスタマイズ】ボックスと組み合わせるふきだしを作ってみた

ボックス用のふきだし

カスタマイズは自己責任で!
ワードプレステーマ
SANGO
子テーマ
PORIPU

この記事では
ボックスにちょうどいいふきだしの作成方法を説明。
CUSTOM POINT
箇条書きボックスに組み合わせやすいように、ふきだしの位置を調整しました。

こんな感じで変更

Before

カスタマイズ前

After

カスタマイズ後

こだわりポイント

こだわりポイント
箇条書きボックスのアイコンの位置にあわせてふきだしを調整。
箇条書きボックスのカスタマイズはこちら
ボックスのデザインを変えてみる【SANGOを自分でカスタマイズ】箇条書きボックスのデザインを変更してみる

このサイトの環境

テーマ
子テーマ
プラグイン

使うソフトなどはこちら

必須

WordPressWordPress

グーグルクロームGoogle Chrome

推奨

ファイルジッラFile zilla

サブクライムテキストsublime text

カスタマイズの準備

カスタマイズ方法

追加CSSの手順
外観
カスタマイズ
追加CSS
子テーマの手順
外観
テーマの編集
FTPソフトの手順
FTPソフト起動
自サイトに接続
style.cssを開く

追加CSSの使い方はこちら

カスタマイズを加速させる追加CSSブログのカスタマイズを加速させる「追加CSS」の使い方

カスタマイズコードの追加

 

確認の手順
保存ボタンを押す
ブラウザでキャッシュを削除して更新

プラグインで簡単に使えるようにする

作成したふきだしをワンクリックで適用できるように、プラグインを使用します。

プラグイン Visual Editor Custom Buttons

visual-editor-custom-buttons
こちらのプラグインは登録したコードをボタンにすることができます。
手順 WordPressプラグイン新規追加「Visual Editor Custom Buttons」で検索インストール有効化

MENくん

カスタマイズコードを登録して、ワンタッチで追加できるようにします

登録するコード

1列目をBeforeに、2列目をAfterにコピーします。


アイコンは適当に選んでもいいですし、←こちらの画像を保存して、アップロードすればボタンアイコンがわかりやすいと思います。


ボタン追加画面

ボタン追加画面


ビジュアルエディタでの表示

ビジュアルエディタ部分


ふきだしにしたい文字を選択

ふきだしにしたい文字を選択

後は登録したボタンをクリックすれば適用されます。

 

 

まとめ

追加CSSのまとめ

手順をザクッと説明
変更手順
  • FTPソフトとテキストエディタを開いて準備OK。
  • 追加のコードを書き込んで、保存。アップロード。
  • 更新して確認。
  • プラグインを使ってワンクリック挿入。
MENくん

ふきだしが使い放題だ☆