画像に吹き出しを追加するカスタマイズ!レスポンシブ対応

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

PC表示

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

MOBILE表示

スマホ表示

 

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

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

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

吹き出しを自作する準備

BOXのショートコードを追加

こちらのバビさんの追加方法を参考に吹き出し用のボックスを作成します。

参考 【SANGO】ボックスのショートコードを増やす方法!CSSサンプルも紹介バビ論

今回使う、吹き出し用(オリジナル)のショートコードはこちらです。

上のショートコードを更に2列用のショートコードと合体させます。

MENくん
このコードをAddQuicktag(プラグイン)に登録しておけば、いつでも簡単に使えるようになります
くま3号
あとはCSSの方でデザインを整えてあげるだけやね

3つのコード追加方法

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

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

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

カスタマイズのコード

コメントあり

コメントなし

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

確認の手順

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

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

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

まとめ・雑談

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

MENくん
このカスタマイズはサルワカさんのをパク…参考にしたんだよ
くま3号
パク…参考にしたんだねww
MENくん
やっぱり画像に吹き出しをつけるといい感じになるからさ
くま3号
わかりやすいし、見やすいよね

コメントを残す

メールアドレスが公開されることはありません。