Warning: Undefined array key 2 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 15
Warning: Undefined array key 3 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 18
Warning: Undefined array key 4 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 21
Warning: Undefined array key 2 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 27
Warning: Undefined array key 3 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 30
Warning: Undefined array key 4 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 33
[kjk_temp id=”2523″]
この記事では
ボタンの上にワンクリックで文字を追加するカスタマイズを説明。
ボタンの上にワンクリックで文字を追加するカスタマイズを説明。
[kjk_temp id=”3320″]
[kjk_balloon id=”1″]このカスタマイズはSANGO以外でも使えます[/kjk_balloon]
追記
このカスタマイズができるよーとお知らせを頂いたテーマ（テーマ）AFFINGER5・JIN
こんな感じ
Before
After
こんな感じでも使えます
[kjk_temp id=”3368″] [kjk_balloon id=”1″]プラグインを使うとワンクリックでグレーの吹き出しを追加できるのでオススメです[/kjk_balloon]
グレーの吹き出し追加する
テキストエディタで追加
WordPress＞テキストエディタ画面で下記のコードを記入するとグレーの吹き出しを追加することができます。
テキストエディタ（追加するコード）
/*-------------------------------------- テキストエディタにこちらを貼り付けてください --------------------------------------*/ <p style="text-align: center; margin-bottom: 0;"><span class="sns-btn__title dfont">★文字★</span></p>
SANGOを使用している方はたったこれだけです！margin-bottom: 0;の部分は必要なければ削除してください。
テキストエディタに記入するコード
テキストエディタ（追加するコード）
/*-------------------------------------- テキストエディタにこちらを貼り付けてください --------------------------------------*/ <p style="text-align: center; margin-bottom: 0;"><span class="gray-huki">★文字★</span></p>
クラス名をつけて、文字を装飾します。適当にgray-hukiとしましたが、お好みで変更してください。
style.cssに記入するコード
style.css（追加コード：グレーの吹き出し）
/*--------------------------------------
グレーの吹き出し
--------------------------------------*/
.gray-huki{
display: inline-block;
position: relative;
padding: 0 25px;
color: #cccfd7;
font-size: 22px;
font-weight: bold;
line-height: 1;
letter-spacing: 1px;
}
.gray-huki:before {
left: 0;
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
display: inline-block;
position: absolute;
top: 50%;
width: 20px;
height: 3px;
border-radius: 3px;
background-color: #d8dae1;
content: "";
}
.gray-huki:after {
right: 0;
-webkit-transform: rotate(-50deg);
transform: rotate(-50deg);
display: inline-block;
position: absolute;
top: 50%;
width: 20px;
height: 3px;
border-radius: 3px;
background-color: #d8dae1;
content: "";
}
こちらをstyle.cssに貼り付けて、保存＞FTPソフトでアップロード＞ブラウザでキャッシュの削除・更新を押して確認してください。
ただ毎回記入するのはめんどくさいなぁ
プラグインでやんなさいよ
わかった！やってやんよ！
プラグインを使ってワンクリックで挿入する
まずは今回使用するプラグインをインストールして有効化します。
プラグイン＞新規追加＞「Visual Editor Custom Buttons」で検索＞見つかったらインストールして有効化させておきます。
WordPress＞Visual Editor Custom Buttons（左下にあります）＞add newをクリックしてビジュアルエディタとテキストエディタにボタンを追加していきます。
①にボタンの名前をつけます。ぼくはgray-hukiとしました。次にWrap Selectionにチャックを入れます。②と③には下記のコードを入れてください。
追加するコード
- gray-huki（ボタンの名前）
- <p style=”text-align: center; margin-bottom: 0;”><span class=”sns-btn__title dfont”>
- </span></p>
注意 クラス指定
SANGO以外のテーマを使用している方はsns-btn＿title dfontの部分を先程style.cssに指定したクラス名に変更してください。（先程はgray-hukiとした部分です） 注意 貼り付け時
すみません。こちらのコード②をコピーして貼り付ける際は、ダブルクォーテーションマークを直してあげてください。
両方にチェックを入れて、ボタンのアイコンを選択します。
ボタンのアイコンは自分で作成したものを追加できます！ぼくも自分で作成した
を使いました。もしよければ使ってやってください。
を使いました。もしよければ使ってやってください。FTPソフトのリモートサイト側で
位置：（…wp-content/uploads/vecb） 赤文字のフォルダを作成します
自作したアイコンをこのフォルダへアップロードしてください。すると④のドロップダウンリストの一番上に表示されます。（画像サイズ40×40px）
すべて設定が終わったら、右上の公開ボタンを押します。
ビジュアルエディタ（テキストエディタ）画面でこのようにボタンが追加されます。
あとはこんな感じで使用するだけです。
好きな文字をワンクリックでグレーの吹き出しにできました！
プラグインのAdd Quicktagでも同じ様にできると思います。
[kjk_temp id=”3422″]
まとめ
手順をザクッと説明
変更手順
- WordPressのテキストエディタにコードを記入（これで終了）
- ワンクリックでしたい場合は、プラグインでボタンを追加。
ボタンから声が出ているみたいになりました！
[kjk_temp id=”3171″]
