Webデザイン アメブロ

【アメブロ記事用】文字のボタンの作り方

パソコンが苦手な女性フリーランスの方に寄り添いたいWebデザイナー絢です。
アメブロのカスタマイズやホームページを制作しています。

アメブロで記事を書かれている方は、ご自身のメニューやお申込みへのリンクに画像のボタンを使用されている方も多いと思います。
しかしボタンは、画像を使わなくても文字だけでも作ることができます。

記事中に画像多く、どの画像がクリックできるボタンなのかわかりづらくなってしまう場合には、かわいい色の文字のボタンをご使用になってみてはいかがでしょうか。

お申込みはこちら

 

アメブロの記事に使える文字ボタンの作り方

ボタンを表す文字列をコピーする

ボタンを表す以下の文字列をあらかじめコピーしておく。

<p><a style="text-decoration: none;" href="#" target="_blank" rel="noopener noreferrer"><span style="display: inline-block; color: #ffffff; padding: 10px 30px; text-decoration: none; border-radius: 24px; background: linear-gradient(to bottom, #ffd2e7 0%, #ffbfde 65%);">お申込みはこちら</span></a></p>



アメブロのブログ記事を書く画面を表示する

アメブロ編集画面

 

アメブロにログインし、「ブログを書く」画面を表示します。
下にある「HTML表示」をクリックします。

 

ボタン文字列を貼り付ける

ブログ編集画面


あらがじめコピーしておいた文字列をここに貼り付けます。


リンク先URLを設定

ブログ編集画面

赤枠内の〇〇〇〇〇をhttps://で始まるURLに書き換えます。
〇〇〇〇〇の前後の "(ダブルクォーテーションマーク)を消さないようにご注意ください。


ブログ編集画面


ボタン名を変更する

ブログ編集画面


ボタン表示名を変更する場合は「お申込みはこちら」を書き換えてください。

ボタン完成

ブログ編集画面


ブログ編集画面を通常表示に戻します。ボタンが完成しました。
記事を公開したあと、正しくリンクするか確認します。

(参考)他の色のボタン

お申込みはこちら

<p style="text-align: center;"><a href="〇〇〇〇〇" style="text-decoration:none;" target="_blank"><span style="display: inline-block;color: #ffffff;padding: 10px 30px;text-decoration: none;border-radius: 24px;background:linear-gradient(to bottom, #c6e7f5 0%, #a0d8ef 65%);">お申込みはこちら</span></a></p>

 

お申込みはこちら

<p style="text-align: center;"><a href="〇〇〇〇〇" style="text-decoration:none;" target="_blank"><span style="display: inline-block;color: #ffffff;padding: 10px 30px;text-decoration: none;border-radius: 24px;background:linear-gradient(to bottom, #d1e9d4 0%, #bee0c2 65%);">お申込みはこちら</span></a></p>

 

お申込みはこちら

<p style="text-align: center;"><a href="〇〇〇〇〇" style="text-decoration:none;" target="_blank"><span style="display: inline-block;color: #ffffff;padding: 10px 30px;text-decoration: none;border-radius: 24px;background:linear-gradient(to bottom, #fad4cd 0%, #f9c2b8 65%);">お申込みはこちら</span></a></p>

 

お申込みはこちら

<p style="text-align: center;"><a href="〇〇〇〇〇" style="text-decoration:none;" target="_blank"><span style="display: inline-block;color: #ffffff;padding: 10px 30px;text-decoration: none;border-radius: 24px;background:linear-gradient(to bottom, #b6b0af 0%, #928887 65%);">お申込みはこちら</span></a></p>

女性フリーランスの方向けのアメブロカスタマイズをしています

WEB DESIGN La pureté (ラ・ピュルテ)では女性フリーランスの方向けにアメブロカスタマイズをしています。
ヘッダー画像で世界観をターゲットにアピールし、ナビゲーションメニューを設置してお申込み導線を整えます。
詳しくは一度お問い合わせください。


 

お問い合わせ


WEB DESIGN La pureté ​へのお問い合わせはこちらからどうぞ。

お問い合わせ

LINE公式アカウントからもお気軽にご質問くださいませ♡

友だち追加
  • この記事を書いた人
WEB DESIGN La pureté 絢

WEB DESIGN La pureté 絢

藤本絢子 / Junko Fujimoto
Webデザイナー 東京都在住。
会社員時代はシステムエンジニアとしてソフトウエア開発に携わっていました。
女性や主婦の方が個人事業主として働く中で、本業に集中できるようパソコン関係のサポートを行っています。

-Webデザイン, アメブロ
-

© 2020 WEB DESIGN La pureté