このページは、以下のようなお悩みをお持ちのかたに役立つ内容となります。
『悩んでいないが、内容に興味がある』というかたのためにも少し詳しい解説を付けています。
では順番に見ていきましょう。
MCボタン(説明付き)とは
WordPressテーマに「Affinger6」を使っている場合、「Affinger library」というサイトを訪問した経験のあるかたも多いと思います。
このライブラリ内にはたくさんのデザインサンプルが掲載されていて、必要なコードをコピペするだけで自分のサイトに搭載できるようになっているのです。
そのサンプル集の中に、「MCボタン（マイクロコピー）説明付き」があります。
「コードをコピーする」をクリックすると、デザインに必要な「コード」がコピーされて、自サイトの投稿記事内やウィジェットなどに貼り付けられます。
お手軽簡単なのですが、ここでコピーされたコードはHTMLやCSSなので、ユーザーが属性に設定値を設定するだけの「ショートコード」とは少し勝手が違い、カスタマイズが難しくなります。
一方、普段は記事内などでボタンをデザインして使うために、「ショートコード」を利用する場面の方が多いかもしれません。
記事一覧を表示するショートコードの例
上の例は「任意の記事一覧を表示するためのショートコード」になります。
「ショートコード」であれば、各属性に自分で値を設定するだけで、デザインなどを変更できるので簡単です。
その代わり、用意された属性以外の設定は変更できないので、柔軟性には欠けるわけですね。
今回の「ボタンを光らせる・光らせない」の処理も、「ショートコード」であればある属性の設定値を変更するだけなのですが・・。
「Affinger Library」で公開されている「CSSコード」ではそのやり方は通用しないのです。
さて、これらを踏まえた上で、ショートコードによるボタンを光らせる・光らせない処理について焦点を移します。
MCボタンを光らせたくない
WordPressテーマに「Affinger6」を使っているサイトだと、よく以下のようなボタンを見かけますよね。
このようなボタンは、WordPressの投稿画面でビジュアルエディタ―、テキストエディタ―のどちらで入力していても「ショートコード」を使うと思います。
Gutenbergブロックの場合は
Gutenbergブロックを使っている場合は、クラシックブロックで「クイックタグ」が使えます。
ちなみに、上の光るボタンは以下のようなショートコードを投稿記事内に書いて表示させています。
このように「ショートコード」であれば、「属性="値"」という形で色や文字列などを簡単に指定できます。
さて、その属性の中に「ref="on"」という部分がありますが、これがボタンに光を走らせる属性値となります。
もし、光を走らせたくなければ「ref=""」と空文字の指定に変更するだけです。
簡単ですよね。
光るボタンを見ると、『このサイトはテーマにAffingerを使っているんだろうなぁ』と分かったりするので、光らせる設定を敬遠するかたも多いと思います。
そのため、「Affinger Library」からダウンロードした「MCボタン(説明付き)」のサンプルも同じように、ボタンを光らせないように設定しようとすると・・・。
コピペで貼り付けられたのが「ショートコード」ではなく「CSSコード」だったため、どこでその設定をしていいかが分からないとなるわけですね。
困った・・ショートコード「ref=""」が使えない
さて、「Affinger Library」のサンプルを使うためには「ショートコード」は一旦忘れて、「CSS」で設定変更する場所を確認しなくてはなりません。
実は、「CSS」での設定変更はCSSコードをいじる必要はなく、指定する「CSS名」を1つ変更するだけとなりますので手順としては「ショートコード」と同様にとても簡単です。
では、実際に操作をしてみましょう。
まずは、先ほど見た「Affinger Library」の「MCボタン(説明付き)」を開いて「コードをコピーする」をクリックし、コードをコピーします。
確認するだけなので、WordPressの投稿記事内に貼り付けてもいいですし、メモ帳などに貼り付けても構いません。
以下は、貼り付けた後にコメント部分をすべて削除した状態となります。
コメントはどうする？
基本的にコメントは削除しなくても結構です。
ただし、投稿記事内にコメントもすべて貼り付けると、デザインが崩れる場合がありますので、その際はコメントをすべて削除した方がいいでしょう。
上の画像では水色の文字で書いた「ボタン」を記述している部分に注目してください。
「pタグ」のCSSで「st-reflection」としている箇所があります。
この「st-reflection」を次のように書き換えてください。
no-reflection
すべてを書き換えなくても、「st」の部分を「no」に書き換えるだけでも大丈夫です。
CSSの「st-reflection」で光らせているので、これを光らせない設定の「no-reflection」にするだけです。
意味がよく分からないかたは、記述する文字と位置をこのまま覚えてしまっても構いません。
書き換えたら、動作を確認してみましょう。
まとめ－情報はあまり多くないかも
今回は、「Affinger Library」からコピーしたコードを貼り付けた後に、ボタンの仕様をCSSで変更する方法について書いてみました。
ショートコードでボタンを光らせない方法は色々なサイトで紹介されていますが、CSSコード(実際はCSS名)を変更する方法はあまり出ていないかもしれませんね。
今回のサンプル「MCボタン(説明付き)」での「no-reflection設定」がうまくできれば、以下のようなデザインで表示されると思います。
WordPressテーマの「Affinger6」は以下から購入できます。個人ブランドもコーポレートサイトも多彩なデザインで作成できます。
作るぜい!(^^)!
機能豊富が嬉しいけど難しい
