今回は、AFFINGER6初心者におすすめのカッコいい装飾ボタンであるＭＣボタンの作り方について解説します。
MCボタンとは
MCボタンとはボタンの周りに協調分などを追加して目立った装飾の付いたボタンです。
光らせたり様々な仕掛けを付けることが出来るスグレモノです。
これがそうです。
企業の公式サイトなどでよく見ますよね。
Cocoonなどのブロックエディタでは作ることが出来ません。
クラッシックエディタという、旧エディタを使うことでこのような細かな装飾を付けることが出来るんです。
ちょっと敷居が高いと思いますよね。
でも、1度覚えてしまえば簡単に作れるんです。
MCボタンの作り方
AFFINGER6で、このMCボタンを使う場合はClassic Editorをプラグインで導入する必要があります。
インストールして有効化するだけなので簡単に導入することが可能です。
そして、記事の新規追加を開き、右上の「・・・」のオプションボタンを押します。
次に、旧エディタに切り替えをクリックして旧エディタを開きます。
ちなみに今回は、初心者でも簡単に使えるように基本ブロックエディタで編集する方法をご案内します。
旧エディタを開いたら、ビジュアルエディタのタブからMCボタンを選び色を選択してクリックします。
そうすると、MCボタンのコードが貼り付けられるので、それをコピーします。
そして、コードを削除してブロックエディタに再び切り替えます。
その後、＋マークからカスタムHTMLを選択。
その枠に先ほどコピーしたものを張り付けるだけでMCボタンの設定完了です。
けっこう簡単なんです。
MCボタンの文字の設定方法
[st-mcbutton url="#" title="今すぐ申し込む" rel="" webicon="" target="" color="#fff" bgcolor="#FFD54F" bgcolor_top="#ffdb69" bordercolor="#FFEB3B" borderwidth="1" borderradius="5" fontweight="bold" fontsize="120" width="90" webicon_after="st-svg-chevron-right" shadow="#FFB300" ref="on" mcbox_bg="#fafafa" mcbox_color="" mcbox_title="太字のテキスト" beacon=""]※マイクロコピーを書いてみよう[/st-mcbutton]
このようなコードが出てくるのでそれぞれの効果について説明します。
ポイント
- 「今すぐ申し込む」のところに入力したい文言を入れるとボタンそのものに表示されます
- 「太字のテキスト」のところに入力するとボタンの上の文字が表示されます
- 「※マイクロコピーを書いてみよう」のところに入力すればボタンの上に文字が表示されます
これで、カッコいいボタンがすぐ作れるんです。
他のサイトとの区別化にもなりますよね。
マイブロックに登録すればいつでも簡単に使える！
MCボタンってカッコいいから毎回使いたくなりますよね。
でも、いちいちクラッシックエディタ出すのめんどくさいと思いませんか？
そんな、あなたに朗報です。
AFFINGER6にはショートコードとして、すぐ使えるように出来るんです。
方法も簡単です。
AFFINGER6のダッシュボードから、マイブロックの新規追加を開き、そこに先ほどのクラッシックエディタのコードを貼って、公開をクリックします。
その後、マイブロック一覧を見ると登録したもののところに、ショートコードというのがあるので、それをコピーして記事作成画面で＋ボタンからショートコードをクリックして、記事に貼り付けてそこにショートコードを貼るだけで使えるようになります。
便利なのでマイブロックに登録することをおすすめします。
まとめ
ここまでいかがでしたでしょうか。
AFFINGER6は初心者に正直敷居が高いです。
しかし、いろいろなテクニックを覚えてしまえば非常に便利で、多分最強のテーマです。
ここまでお読みいただきましてありがとうございました。