今回は、プラグインを使用せずにテキストリンクをボタン化する方法を紹介したいと思います。「こういったテキストリンクって分かりにくいよ」と友人から指摘を受けたことです。よし記事を書いている本人にとっては当たり前だろって思っていることが、読者からすると分かりにくいことって結構あるんだよねえ。Jinというテンプレートを使用している場合、ボタンリンクは標準装備されています。この記事はボタンリンクが標準装備されていない方向けです。今回作成するボタンはこんな風になります!WordPressの運用に特化したレンタルサーバー『wpXレンタルサーバー』はこちら*フォント色や枠線などは自由にカスタマイズすることができます。下の画像の通り進めていけば大丈夫です!僕のボタンの場合、CSSに記載しているコードはこんな感じです。これを「追加CSS」に貼り付ければ、全く同じボタンが完成します。下記のように進めてください。ここまで進めると、こんな感じのHTMLコードができると思います。あとは下図のように、「class=”button”」を記述すればボタンが記事上に現れるようになります。ここまで進めてしまえば、後は「class=”button”」を追加記載するだけです!ボタンカスタマイズ追加CSSに記載したコードを変更することで、ボタンデザインを変更することができます。#ffffff;}上記のCSSコードを解説していきます。#ffffff!important;」の「#ffffff」部分を変更することで、フォントの色を変更することができます。*ちなみに#ffffffは白色です。#1DBBDA;」を変更することで、ボタンの枠線デザインを変更することができます。#1DBBDA;」でボタンの背景色を変更することができます。10px;」で枠の四隅を丸くすることができます。長方形がいいという方は削除してもらって構いません。a.button:hover(マウスオーバー時)colorマウスオーバー時のフォント色を変更することができます。backgroundマウスオーバー時の背景色を変更することができます。今回はテキストリンクをボタン化する方法を紹介しました。確かにテキストリンクって分かりづらいですが、今回の作業を1回やってしまえば後は「class=”button”」を記述するだけなので、みなさんもぜひやってみてください。【AWS環境構築】2行で解決!本番環境でbundlerを導入する方法を紹...Railsエンジニアちばよしはる銀座にあるヘルステック企業のRailsエンジニア。初心者から中級者向けに記事を更新しています。お酒とカレーと競馬が好き。TechTechMedia。