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

ボックス用のふきだし

カスタマイズは自己責任でやろう!

「自己責任」の意味がわからない方、初めてカスタマイズする方はこちら

カスタマイズは自己責任。ぼくはこんな風に思っています。


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

こんな感じで変更

Before

カスタマイズ前

After

カスタマイズ後

こだわりポイント

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

このサイトの環境

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

使うソフトなどはこちら

必須

WordPressWordPress

グーグルクロームGoogle Chrome

推奨

ファイルジッラFile zilla

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

カスタマイズの準備

追加方法難しさ
追加CSS
テーマエディター
FTPソフト

はじめてカスタマイズをする方におすすめなのは追加CSSです。

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

夏だし髪を斬りに行こう!

夏だしどっか行こう!

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

 

確認の手順

  1. カスタマイズコードを保存
  2. カスタマイズしたページを開く
  3. cntrl+F5を押す

いわゆるキャッシュ削除ですね。詳しい手順はこちらの記事で書いています。

カスタマイズはキャッシュ削除をマスターしてからです

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

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

プラグイン Visual Editor Custom Buttons

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

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

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


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


ボタン追加画面

ボタン追加画面


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

ビジュアルエディタ部分


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

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

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

 

 

まとめ

追加CSSのまとめ

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