【コピペOK!】CSSで万能のボタンを作るカスタマイズ【AddQuicktag使用】

機能

あるとブログ記事を書く時にあると便利なシリーズ第一弾
今回は「万能ボタン」を作ってみたいと思います。

用途的には「詳細はこちら」みたい時に使いやすい物を今回はカスタマイズします。

コピペで出来ますので、お気軽にお試しください。

また、クイックタグとして設定しておくと便利なので、「AddQuicktag」のプラグインを使うことをおすすめします。
AddQuicktagの詳細はこちら

【簡単クイックタグ作成】AddQuicktagが便利なので使い方をご紹介!
ブログを書く上で非常に便利なプラグインがあります。 それは「AddQuicktag」です! 名称のとおり、クイックタグを追加するというもので、毎回入力するようなコードをワンクリックで済ませることができるプラグインです。 そんな...

今回の記事のカスタマイズの完成形はこんな感じです。

スポンサーリンク

子テーマを使用しましょう

少なからずカスタマイズをするので、子テーマを使いましょう。子テーマがよくわからない場合はこちらの記事をご参考ください。

【WordPress】テーマをカスタマイズをするときは、子テーマを使うべし!
WordPressの機能の一つとして、 「子テーマ」というものがあります。 ブログを書き始めた方の場合や、 WordPressを使い始めた方の場合は、 「子テーマ?なんだそれ」とか 「親テーマにそのままコードを書けばいいじゃん...
【WordPress】子テーマの導入方法と使い方を覚えてガンガンカスタマイズする!
前回こちらの記事で、 子テーマの重要性について説明しました。 今回はその子テーマの導入方法と、 使い方についてご説明します。 子テーマを導入する! 子テーマを導入する方法は2通りあります。 1つは親テーマと一緒にダウ...

コピペするコード

まずは準備をするために、以下のコードをstyle.cssに追記します。

コピペでOKです!

.kochira-waku{
	width:90%;
	margin:20px auto 60px;
	padding:20px 0;
	border:4px double #FFAA19;
	text-align:center;
}
.kochira-waku p{
	margin-bottom:20px;
	font-weight:bold;
}
.reco-bt{
	display:block;
	background-color:#FFAA19;
	color:#fff;
	font-size:20px;
	width:70%;
	margin:0 auto;
	padding:15px 0;
	border-radius:40px;
	transition:0.5s
}
.reco-bt a{
	display:block;
	color:#fff;
	text-decoration:none;
	text-align:center;
	font-weight:bold;
}
.reco-bt:hover{
	opacity:0.8;
}

これで準備完了です。

使いたいところにコードをコピペする

cssコードをコピペしたら、もういつでも使えます。

記事を書くテキストエディタで、使用したい箇所に以下のコードをコピペしてください。

<div class="kochira-waku">
<p>▼メッセージを入力▼</p>
<span class="reco-bt">リンクコードを入力</span>
</div>

上記のコードを入力すると、最初に示した完成形が表示されます。
【メッセージを入力】には文字を、【リンクコードを入力】には、移動させたいリンクのコードを<a>で囲みボタンを作りましょう。

使用例

簡単な使用例をつくりました。

以下のボタンの下に、実際のコードを記載します。

▼PlusPlusのサイトはこちら▼

PlusPlus

<div class="kochira-waku">
<p>▼PlusPlusのサイトはこちら▼</p>
<span class="reco-bt">
<a href="https://plu-plu.net/" rel="noopener" target="_blank">PlusPlus</a>
</span>
</div>

注意点

コードを入力する際には、必ずテキストエディタになっている事を確認してください。

「テキスト」になっていない場合は、ちゃんと表示されませんのでご注意ください。

便利な使い方

いちいち使うたびコードを探してコピペしてというのは非常に面倒くさいですよね?

そんな面倒な手間をなくすため、【AddQuicktag】というプラグインを使用しましょう。
AddQuicktagの使い方はこちらの記事でご紹介しています。

【簡単クイックタグ作成】AddQuicktagが便利なので使い方をご紹介!
ブログを書く上で非常に便利なプラグインがあります。 それは「AddQuicktag」です! 名称のとおり、クイックタグを追加するというもので、毎回入力するようなコードをワンクリックで済ませることができるプラグインです。 そんな...

AddQuicktagを設定する

今回のカスタマイズをクイックタグにします。

AddQuicktagの設定画面で、【ボタン名】等を入力し、開始タグに以下のコードを入力します。
(先程のコードと同じものです。)

<div class="kochira-waku">
<p>▼メッセージを入力▼</p>
<span class="reco-bt">リンクコードを入力</span>
</div>

終了タグは入力する必要はありません。
これで変更を保存すると、ワンタッチでボタンが表示されるようになります。

テキストエディタで、先程設定したクイックタグが新たに表示されます。
こちらをクリックするとコードが出てきます。

ワンタッチで出てきました。
使用するたびにコピペするよりも、この方がはるかに効率的です。

ぜひとも皆様おためしください~

コピペも良いですが・・・

コピペでも問題なくカスタマイズはできますが、自分が思った通りにカスタマイズするにはやはり一定の知識が必要です。
コピペも便利ですが、専門の本などを併せて使用すると、理解度がぐっと深まりますよ!

私が使用したおすすめの本はこちらです。

コメント