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

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


テーマ:

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

 

 

文字のリンクボタンについてですが・・・

 

以前にも記事にしております↓

 

アメブロ リンクボタンのタグ例

 

 

で、今回はもうちょっとシンプルなリンクボタンをお伝えしますね。

 

 

 

パソコンでマイページを見ると、

 

左側に馴染みの「ブログを開く」

 

というボタンがあると思います。

 

 

 

そう、これ↓

 

 

 

このボタンをそのまま、自分のアメブロの記事内やサイドバーで使うには、次のコードをコピペするとできちゃいます。

(あ、HTMLに詳しい方は、classを使われた方がいいですね)

 

 

 

まずは、枠の幅いっぱいいっぱいにする場合↓

 

 

 

<a href="#" style="background: #2d8c3c;color: #fff;width: 100%;line-height: 40px;height: 40px;font-size: 12px;font-weight: 700;border-radius: 4px;margin-bottom: 10px;display: inline-block;text-align: center;text-decoration: none;outline: none;border: none;cursor: pointer;padding: 0;">お問い合わせはこちら</a>

 

 

お問い合わせはこちら

 

 

枠の幅の半分の大きさにする場合↓

 

 

<a href="#" style="background: #2d8c3c;color: #fff;width: 50%;line-height: 40px;height: 40px;font-size: 12px;font-weight: 700;border-radius: 4px;margin-bottom: 10px;display: inline-block;text-align: center;text-decoration: none;outline: none;border: none;cursor: pointer;padding: 0;">お問い合わせはこちら</a>

 

 

お問い合わせはこちら

 

 

枠の幅に関係なく、この幅(200px)にする場合↓

 

 

<a href="#" style="background: #2d8c3c;color: #fff;width: 200px;line-height: 40px;height: 40px;font-size: 12px;font-weight: 700;border-radius: 4px;margin-bottom: 10px;display: inline-block;text-align: center;text-decoration: none;outline: none;border: none;cursor: pointer;padding: 0;">お問い合わせはこちら</a>

 

 

お問い合わせはこちら

 

 

さらに、中央に配置したい場合↓

 

<p style="text-align: center;"><a href="#" style="background: #2d8c3c;color: #fff;width: 200px;line-height: 40px;height: 40px;font-size: 12px;font-weight: 700;border-radius: 4px;margin-bottom: 10px;display: inline-block;text-align: center;text-decoration: none;outline: none;border: none;cursor: pointer;padding: 0;">お問い合わせはこちら</a></p>

 

 

お問い合わせはこちら

 

 

といった感じで、文字だけでリンクボタンを作成できますので。

 

ちなみに、

 

 

の場所に、リンク先のURLをコピペしてくださいませ。

 

 

 


以上、アメブロ便利ワザでした。


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

 

 

 

 

川上雄大

 

いいね!した人  |  コメント(4)  |  リブログ(0)

川上雄大・パソコンインストラクターさんの読者になろう

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

SNSアカウント