記事内にボタンっぽい装飾を簡単に入れる

操作手順や取扱説明書のような文章を書いていると、簡単にボタン状のデザインを差し込めたらいいのにと思う。それをCSSで実現する。

下記のコードを追加CSSにコピペするだけで、こんな感じのボタンが差し込める。

/*グレーのシンプルなボタン*/
.textb-gray {
	background-color: #e6ecf0;
  　　　background-image: linear-gradient(#fff,#e6ecf0);
	border: 1px solid #cccccc;
  　　　border-radius: 4px;
  　　　display: inline-block;
  　　　font-weight: bold;
	padding: 0% 5%;
	margin: 2px;
 }
/*グレーのシンプルなボタンここまで*/

追加CSSのコピペ場所がわからない方は「追加CSSってどこに入力すればいいの？」を参照。

WordPressブロックエディタでは、入力するブロックを「HTMLとして編集」に切り替えて、<span class=”textb-gray”> で呼び出せば簡単に文字をボタン状にデザインできる。

<p>下記のコードを<strong>追加CSS</strong>にコピペするだけで、<span class="textb-gray">こんな感じのボタン</span>が差し込める。</p>

<span class=”textb-gray”> を辞書登録しておけば、更に簡単に素早く使えてよい。

わたしは配色センスがないので、シンプルなグレーのデザインにしたが、色をいじるのが好きな方は、お好みで配色を変えて自分のサイトのイメージにあったボタンを作成してみて欲しい。