2023年4月28日テキストリンクの前に置くボタンのようなバッジを作るカスタマイズをご紹介します。シンプルですが目を引く色付きのボタンバッジです。アイコン付き、行頭揃えなど、いくつかのパターンをご紹介します。以下のようなボタンバッジをコピペで作ることができます。★無料体験後は月額1500円。2種類のボタンバッジこのページでは、テキストが長くなった時のテキストの配置が以下のように異なる2種類のタイプをご紹介します。flexboxを使い、ボタンが1行目、テキストがボタンの下になる。行頭揃えで、テキストがボタンの下に回り込まない。以下のようにアイコンの下にテキストが配置されます。スマホの場合は、このように表示されます。2行頭揃えテキストがバッジの下に回り込まず、行頭揃えとなっています。スマホの場合は、このように表示されます。ボタンバッジの作成方法では、アイコンバッジを表示するためのHTMLとCSSコードをご紹介します。コピペで作成できます。テーマの追加CSSに貼ります。HTMLコードはAddQuicktag(プラグイン)に保存しておくと便利です。visual-editor.シンプルなボタンバッジ(flexbox使用)の作成方法まず、以下のようなシンプルな3色のボタンバッジの場合です。flexボックスを使用したタイプです。HTMLコード3種類(3色)のHTMLコードです。「ここにURL」と「リンク先記事タイトル」の部分は書き換えてください。rel="noopener">リンク先記事タイトル</a></div></div>CSSコード色はお好み合わせて変えてください。以下のようなアイコン付き(3色)のボタンバッジです。flexボックスを使用したタイプです。Awesome5のWEBアイコンを使います。Awesome5の利用方法は以下の記事をご覧ください。Awesome」の使い方をご紹介します。Awesomeの様々な使い方をはじめ、...HTMLコードアイコン付きボタンバッジ3種類(3色)のHTMLコードです。シンプルなボタンバッジをベースにアイコン用のクラスを追加しています。「ここにURL」と「リンク先記事タイトル」の部分は書き換えてください。rel="noopener">リンク先記事タイトル</a></div></div>CSSコード色はお好み合わせて変えてください。以下のような、行揃えのアイコン付き(3色)ボタンバッジを作成します。HTMLコード「行揃え」のボタンバッジは、アイコン付きのみのコードを紹介します。リンク」、「ここにURL」「リンク先記事タイトル」の部分は書き換えてください。href="ここにURL">リンク先記事タイトル</a></div>CSSコード色はお好み合わせて変えてください。Cocoonでボタンリンクを作成する方法Cocoonでは、ボタンバッジを作成する機能がついています。ブロックエディターの「クラシックブロック」、クラシックエディターのビジュアルエディターでできます。色(9色)を選択できます。実際に以下のように表示されます。バッジの後ろにテキストリンクを配置すれば、バッジ付リンクができます。ボタンバッジの紹介は以上です。当サイトもSWELLを使っています。詳細記事公式サイトWordPress全般よかったらシェアしてね!URLをコピーしました!URLをコピーしました!tsutchii(ツッチー)WordPressやブログに関する情報、中高年の学びや副業などについて書いています。管理人は、子供の英語教育のため、7年前、家族でフィリピンのセブに移住した引きこもり系おじさんです。これまで、ローカル紙記者、住宅会社や病院の広報、WEB担当、介護助手といった仕事をしてきました。今はNPO法人のサイト運営などネットで仕事をしながら、場所にとらわれずに生活していける働き方を模索しています。