SANGOで2列用の吹き出しボックスをカスタマイズで作成

自分で吹き出しを作ってみる

こんな感じで使います

わたしの顔はこんなにも爽やかではありません。
※ 吹き出しの内容に意味はありません。

スマホではこんな感じ

スマホ表示

 

MENくん

がっつりサルワカさんのマネですね

SANGOで使える吹き出しを自作する準備

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

Let’s self made!

SANGOにもともとあるボックスを使います

ショートコードBOX2
ちょうどいいショートコードのボックスがあるので、ぼくはこちらを使って吹き出しを作成しました。

ショートコードのbox2の設定を変更して、吹き出しを作りました。

MENくん

おぉ!ちょうどいいボックスがショートコードに!

コードを追記するための方法は3つ

カスタマイズ方法

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

追加CSSの使い方はこちら

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

SANGOで使える自作の吹き出しボックスのカスタマイズコード

カスタマイズコード

カスタマイズがうまくいったか確認

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

ふ、ふきだしができた!!

プラグインでササッと使えるようにする

アドクイックタグ
ビジュアルエディタにAddQuicktagを使って追加します。
MENくん

プラグインのAddQuicktagはビジュアル・テキストエディタに簡単にタグを追加できる素晴らしいプラグインです。


おもな入力部分はこちら

記入する部分

名前は自分がわかりやすいもので大丈夫です。(ぼくの場合 2列ふきだしverとしています)

開始タグに入力するコードはこちら

あとはチェックを入れて、変更を保存したらエディタに表示されます。

ビジュアルエディタに追加されています
こちらをクリックすれば記事の中にササッと挿入することができます。
MENくん

これで簡単に自作吹き出しを使えるようになりましたね!

SANGOで使える2列用の吹き出しボックス作成:まとめ

SANGOで吹き出しボックスを作るまとめ

SANGOで使える2列用の吹き出しボックスを作成してみました。

SANGOにもともとあるBOX2を使用することで、比較的簡単に作成することができました。

AddQuicktagに登録しておくことで、効率的に吹き出しボックスを使えるようになりますね。