こんにちは、パソコンインストラクターの川上雄大です。
※この記事は過去2017年07月10日(月) 12時23分29秒に投稿した記事ですが、「ブログを書く」が「ブログを開く」としていたので、訂正して再アップさせていただきます。
文字のリンクボタンについてですが・・・
以前にも記事にしております↓
で、今回はもうちょっとシンプルなリンクボタンをお伝えしますね。
パソコンでマイページを見ると、
左側に馴染みの「ブログを書く」
というボタンがあると思います。
そう、これ↓
このボタンをそのまま、自分のアメブロの記事内やサイドバーで使うには、次のコードをコピペするとできちゃいます。
（あ、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札幌・ライフデザインスクール
川上 雄大
