パソコンが苦手な女性フリーランスの方に寄り添いたい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é （ラ・ピュルテ）では女性フリーランスの方向けにアメブロカスタマイズをしています。
ヘッダー画像で世界観をターゲットにアピールし、ナビゲーションメニューを設置してお申込み導線を整えます。
詳しくは一度お問い合わせください。
