「ご予約はこちら」のリンクボタン | パソコンが好きになるブログ〜表技・裏技・便利技伝授!

パソコンが好きになるブログ〜表技・裏技・便利技伝授!

北海道札幌市中央区 大通駅徒歩7分のパソコンスクール「リズ札幌・ライフデザインスクール」パソコンインストラクター川上雄大によるパソコン・IT・ワンポイントレッスン。
スクールでのいろんな方のパソコンレッスンだったり、パソコンとは関係ない話だったり…


テーマ:

こんにちは、パソコンインストラクターの川上雄大です。

 

 

 

このようなご質問がありましたので↓

 

「ご予約はこちら」というリンクボタンをアメブロの記事内に作りたくて、色々とネットで検索しているのですが、こういったWebサイトで書かれているコードをそのままコピペしてもうまくいかないのですが・・・

 

 

といったご質問でした。

 

 

はい、確かに、

 

 

<a href="#" class="●●●">ご予約はこちら</a>

 

.●●●{

 display: inline-block;

 padding: 0.5em 1em;

 text-decoration: none;

 background: #ff00ff;

 color: #ffffff;

 border-bottom: solid 4px #ff0000; border-radius: 3px; 

.●●●:active {

 -ms-transform: translateY(3px);

 -webkit-transform: translateY(3px);

 transform: translateY(3px);

 box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5);

 border-bottom: none; 

}

 

 

のコードをそのままコピペしてもダメです。

 

 

class="●●●"

 

の部分を

 

style="CSSのコード"

 

にするといいですね。

(ただし、クリックした時の動きである「:active」の箇所は割愛します。)

 

 

たとえば、

このような感じに↓

 

<a href="#" の#に、リンク先のURLを貼り付けてください。

 

 

ステッチ

 

 

ご予約はこちら

 

 

<p style="text-align: center;"><a href="#" style="display:inline-block;padding: 0.5em 1em;text-decoration: none;background: #668ad8;color: #ffffff;border-radius: 4px;box-shadow: 0px 0px 0px 5px #668ad8;border: dashed 1px #ffffff;" target="_blank">ご予約はこちら</a></p>

 

===============

 

少し浮き上がったふせん風

 

ご予約はこちら

 

 

<p style="text-align: center;"><a href="#" style="display: inline-block;padding: 0.5em 1em;text-decoration: none;background: #f7f7f7;border-left: solid 6px #ff7c5c;color: #ff7c5c;font-weight: bold;box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);" target="_blank">ご予約はこちら</a></p>

 

===============

 

上だけ角丸

 

ご予約はこちら

 

 

<p style="text-align: center;"><a href="#" style="position: relative;display: inline-block;font-weight:bold;padding: 8px 10px 5px 10px;text-decoration: none;color: #FFA000;background: #fff1da;border-bottom: solid 4px #FFA000;border-radius: 15px 15px 0 0;transition: .4s;" target="_blank">ご予約はこちら</a></p>

 

===============

 

 

どうぞお試しくださいませ^^!

 


以上、リンクボタンでした。

 

Instagram

 


LIDS札幌・ライフデザインスクール
川上 雄大

 

 

 

 

川上雄大

 

■川上雄大の音楽活動情報はこちら■

川上 雄大☆パソコンインストラクターさんをフォロー

ブログの更新情報が受け取れて、アクセスが簡単になります

SNSアカウント