【SANGOを自分でカスタマイズ】ワンクリック!ボタンの上に文字をつけよう

ボタンの上に文字をプラスする

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

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

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


この記事では
ボタンの上にワンクリックで文字を追加するカスタマイズを説明。
MENくん
なんだかボタンが元気ないな、、
くま3号
言ってる意味がわからん
MENくん
ボタンは「いくらこのボタン押してくれ!」って思っても、声はだせないもんね
くま3号
吹き出しみたいなのつければいいんじゃね?
MENくん
そうだ!SNSの \ SHARE / みたいなのつけよう!

このサイトの環境

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

 

MENくん
このカスタマイズはSANGO以外でも使えます
追記
このカスタマイズができるよーとお知らせを頂いたテーマ
(テーマ)AFFINGER5・JIN

こんな感じ

Before

After

 


こんな感じでも使えます

使用例

MENくん
写真を使用する際は非常に効果的ですね。

使うソフトなどはこちら

必須

WordPressWordPress

グーグルクロームGoogle Chrome

推奨

ファイルジッラFile zilla

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

MENくん
プラグインを使うとワンクリックでグレーの吹き出しを追加できるのでオススメです

グレーの吹き出し追加する

テキストエディタで追加

WordPressテキストエディタ画面で下記のコードを記入するとグレーの吹き出しを追加することができます。

テキストエディタ(追加するコード)

SANGOを使用している方はたったこれだけです!margin-bottom: 0;の部分は必要なければ削除してください。

テキストエディタに記入するコード

テキストエディタ(追加するコード)

クラス名をつけて、文字を装飾します。適当にgray-hukiとしましたが、お好みで変更してください。

style.cssに記入するコード

style.css(追加コード:グレーの吹き出し)

こちらをstyle.cssに貼り付けて、保存FTPソフトでアップロードブラウザでキャッシュの削除・更新を押して確認してください。

ただ毎回記入するのはめんどくさいなぁ
プラグインでやんなさいよ

わかった!やってやんよ!

プラグインを使ってワンクリックで挿入する

まずは今回使用するプラグインをインストールして有効化します。

使うプラグイン
プラグイン新規追加「Visual Editor Custom Buttons」で検索見つかったらインストールして有効化させておきます。

WordPressVisual Editor Custom Buttons(左下にあります)add newをクリックしてビジュアルエディタとテキストエディタにボタンを追加していきます。

使い方-1
①にボタンの名前をつけます。ぼくはgray-hukiとしました。次にWrap Selectionにチャックを入れます。②と③には下記のコードを入れてください。
追加するコード
  1. gray-huki(ボタンの名前)
  2. <p style=”text-align: center; margin-bottom: 0;”><span class=”sns-btn__title dfont”>
  3. </span></p>
注意 クラス指定
SANGO以外のテーマを使用している方はsns-btn_title dfontの部分を先程style.cssに指定したクラス名に変更してください。(先程はgray-hukiとした部分です)
注意 貼り付け時
すみません。こちらのコード②をコピーして貼り付ける際は、ダブルクォーテーションマークを直してあげてください。

 

使い方-2
両方にチェックを入れて、ボタンのアイコンを選択します。

ボタンのアイコンは自分で作成したものを追加できます!ぼくも自分で作成したを使いました。もしよければ使ってやってください。

FTPソフトのリモートサイト側で

位置:(…wp-content/uploads/vecb) 赤文字のフォルダを作成します


自作したアイコンをこのフォルダへアップロードしてください。すると④のドロップダウンリストの一番上に表示されます。(画像サイズ40×40px)

使い方-3
すべて設定が終わったら、右上の公開ボタンを押します
使い方-4
ビジュアルエディタ(テキストエディタ)画面でこのようにボタンが追加されます。

あとはこんな感じで使用するだけです。

好きな文字をワンクリックでグレーの吹き出しにできました!

プラグインのAdd Quicktagでも同じ様にできると思います。

 

 

まとめ

追加CSSのまとめ

手順をザクッと説明
変更手順
  • WordPressのテキストエディタにコードを記入(これで終了)
  • ワンクリックでしたい場合は、プラグインでボタンを追加。

ボタンから声が出ているみたいになりました!

 

コメント( ˶ˆ꒳ˆ˵ )

avatar