テキストリンクをオシャレに装飾（ボタン風＆矢印スタイル）CSSコピペOK

今回はテキストリンクをボタン風に装飾する方法をご紹介します。

ワードプレスの有料テーマや無料テーマの「Cocoon」には標準でボタンを作れる機能がありますが、このカスタマイズはテキストリンクをCSSで装飾し、ボタン風に見せる方法。

あくまで普通のテキストリンクの装飾です。

この２スタイル

この記事を書いた人

• ブログ好きな40代主婦
• CocoonサイトをCSSでカスタマイズ
• JavaScriptを勉強中
• ドメインパワー35
• ワードプレスで複数サイトを運営しています

はっちゃん
です

テキストリンクでボタンを設置する手順

CSSをコピペする／テキストリンク装飾用

装飾スタイルを記述。子テーマのスタイルシートにCSSをコピーしておきます。

Cocoonカスタマイズ／HTML・CSSの編集とワードプレスをバックアップする方法

HTML？CSS？どこに書いたらいいの？ 戸惑う方も多いかと思いますので、このページではHTMLやCSSの編集方法とバックアップのとり方をまとめました。 特にCocoonでのカスタマイズが初めての方、慣れていない方はご一読ください。 見たい...

turicco.com

テキストリンクのCSS は最後に掲載します。

HTMLでテキストリンクを作成 + クラスを追加する

次に、STEP2 HTMLでテキストリンクを作成する、STEP3クラスを追加する工程です。

HTMLでリンクを作る方法は２通りあります。

①ブロックエディタでテキストリンクを作成

ブロックエディタではテキストリンク作成からクラス追加までとても簡単にできます。

1. リンクするテキストを選択
2. リンクアイコンをクリックしてリンク先URLを入力
3. 矢印をクリックして確定

「追加CSSクラス」を使ってクラスを追加

ブロックエディタでクラスを追加するには、高度な設定→「追加CSSクラス」が便利です。

＼「追加CSSクラス」の簡単使い方／

ワードプレスのブロック（HTML）に簡単にクラスをつける「追加CSSクラス」の使い方

こんな方におすすめの記事です カスタマイズ初心者 ワードプレスのブロックエディタを使っている ブロックに簡単にクラス名をつける方法を知りたい ブロックエディタユーザーでカスタマイズをされる方、どのようにブロック（HTML）にクラスを追加して...

turicco.com

1. ブロックをクリックして選択した状態にする
2. 画面右側サイドバー（ブロックメニュー）の高度な設定→「追加CSSクラス」にクラス名を入力

<p class="link-btn"><a href="リンク先URL">ＢＵＴＴＯＮ</a></p>

<a>タグの中に直接クラスを追加する方法もありますが、

<a class="link-btn" href="リンク先URL">ＢＵＴＴＯＮ</a>

当記事では「追加CSSクラス」を使えるようにあえて段落<p></p>を使っています。

②「カスタムHTML」にHTMLコードを直接入力

もちろんHTMLコードを直接入力してもOK。

ブロックメニューから「カスタムHTML」を選択し、①で生成された同じコードを記述します。

<p class="link-btn"><a href="リンク先URL">ＢＵＴＴＯＮ</a></p>

それでは以下に２つのスタイル（ボタン風、矢印風）のHTMLとCSSを掲載しますのでご利用ください。

CSSの分かる方は色や形を変えたりデザインの変更は自由におこなってくださいね。

テキストリンクで作るボタンCSS①／ボタン風

See the Pen link-btn by はっちゃん (@hacchan) on CodePen.

ふつーのボタンは汎用性バツグン。

ブロックエディタが使えないウィジェット等でも活躍します。

マウスオーバー時にカラー反転するようにしています。

<p class="link-btn"><a href="リンク先URL">ＢＵＴＴＯＮ</a></p>

/*ボタン風*/
.link-btn a{
	--link-btn-color:#333; /*ボタンの色はここで設定*/
	display:block; /*ブロック要素にする*/
	margin:auto; /*ボタン中央寄せ*/
	width: 200px; /*ボタンの幅*/
	border:1px solid var(--link-btn-color); /*枠線の太さ・種類・色*/
	background:var(--link-btn-color); /*ボタンの色*/
	padding: 0.5em 2em; /*ボタンの高さ*/
	color:#fff; /*文字の色*/
	border-radius:1px; /*角の丸み*/
	text-decoration: none; /*リンクの下線を消す*/
	text-align: center; /*文字中央寄せ*/
	transition: all .3s; /*なめらかな動きに*/
}

/*マウスオーバー時に反転させる*/
.link-btn a:hover{
	background:initial;
	color:var(--link-btn-color);
}

テキストリンクで作るボタンCSS②／矢印風

See the Pen more-btn by はっちゃん (@hacchan) on CodePen.

この矢印、シンプルで可愛くありませんか？？

オシャレなサイトでよく使われているイメージがあり個人的にお気に入りです。

マウスオーバー時に矢印が少し右に動くようにしています。

<p class="more-btn"><a href="リンク先URL">ＭＯＲＥ</a></p>

/* 矢印風----------------------------------------------*/
.more-btn {
	--more-btn-color:#333;/*矢印と文字の色はここで設定*/
	text-align: center;/*ボタン中央寄せ（右寄せにしたいときはrightに変更）*/
}

.more-btn a {
	position: relative; /*位置（ここを基準に）*/
	padding: 0 3em 0 .5em; /*内側余白調整（上右下左）*/
	color: var(--more-btn-color);  /*リンク文字色*/
	text-decoration: none; /*リンク下線を消す*/
	outline: none; /*枠線を消す*/
}

.more-btn a::before,
.more-btn a::after{
	content: ''; /*矢印部分作成*/
	position: absolute; /*位置（下線と矢印を配置する）*/
	background: var(--more-btn-color); /*矢印の色*/
	height: 1px; /*線の太さ*/
	transition: all .3s; /*なめらかな動き*/
}

.more-btn a::before {
	bottom: -10px; /*下線の下からの距離*/
	left: 0%; /*左からの距離*/
	width: 90%; /*ボタンの幅*/
}

.more-btn a::after {
	bottom: -5px; /*矢印の下からの距離*/
	right: 10%; /*右からの距離*/
	width: 15px; /*矢印部分の幅*/
	transform: rotate(35deg); /*角度調整*/
}

/*マウスオーバー時の動き*/
.more-btn a:hover::before{
	left: 10%;
}

.more-btn a:hover::after {
	right:0%;
}

ひとこと

テキストリンクのボタンはサイト型トップページ作成の記事で使用。

矢印のMOREボタンは下記にページで使用しています。

サイドバーにも追加したり、テキストリンクにクラス名を追加するだけなのでとにかく簡単。

読者さん

矢印どうやって作るんですか？

問い合わせをいただくことが多いので公開しておきます。

今回は以上です。他の記事も見て行ってくださいね。