【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くん
ふきだしが使い放題だ☆

 

コメント( ˶ˆ꒳ˆ˵ )

avatar