やさしいブログの作り方

「見やすい」「読みやすい」「わかりやすい」「親しみやすい」「伝わりやすい」5つの要素を含んだ『やさしいブログ』を作るためにフリースペースやフリープラグイン、CSSを利用したアメブロカスタマイズや画像の加工方法等をご紹介しています。


テーマ:
こんにちは。
『やさしいブログの作り方』の松田です。

ブログからお申し込みやご予約を頂く際、テキストリンクよりもボタン画像があるとわかりやすい場合があります。

画像を作るのは面倒、わからないという方のために、HTMLタグだけでボタン画像(風)のものを作ることができます。

お申込はこちらをクリック


↑こんな感じです。


以下に色サンプルをいくつか書いておきますので、使いたい色のボタンのHTMLタグをコピーしてお使いくださいませ。^^

お申込はこちらをクリック
<a href="リンク先のアドレス" target="_blank" style="color:#ffffff; font-weight:bold; text-decoration:none; line-height:5.0;"><span style="margin:3px; padding:15px 30px; background:#bfa469;border-radius:25px; box-shadow:3px 3px 3px #999999;">お申込はこちらをクリック</span></a><br /><br />


お申込はこちらをクリック
<a href="リンク先のアドレス" target="_blank" style="color:#ffffff; font-weight:bold; text-decoration:none; line-height:5.0;"><span style="margin:3px; padding:15px 30px; background:#3b5998;border-radius:25px; box-shadow:3px 3px 3px #999999;">お申込はこちらをクリック</span></a><br /><br />


お申込はこちらをクリック
<a href="リンク先のアドレス" target="_blank" style="color:#ffffff; font-weight:bold; text-decoration:none; line-height:5.0;"><span style="margin:3px; padding:15px 30px; background:#ff1493;border-radius:25px; box-shadow:3px 3px 3px #999999;">お申込はこちらをクリック</span></a><br /><br />


お申込はこちらをクリック
<a href="リンク先のアドレス" target="_blank" style="color:#ffffff; font-weight:bold; text-decoration:none; line-height:5.0;"><span style="margin:3px; padding:15px 30px; background:#006600;border-radius:25px; box-shadow:3px 3px 3px #999999;">お申込はこちらをクリック</span></a><br /><br />


お申込はこちらをクリック
<a href="リンク先のアドレス" target="_blank" style="color:#ffffff; font-weight:bold; text-decoration:none; line-height:5.0;"><span style="margin:3px; padding:15px 30px; background:#dc143c;border-radius:25px; box-shadow:3px 3px 3px #999999;">お申込はこちらをクリック</span></a><br /><br />


お申込はこちらをクリック
<a href="リンク先のアドレス" target="_blank" style="color:#ffffff; font-weight:bold; text-decoration:none; line-height:5.0;"><span style="margin:3px; padding:15px 30px; background:#ff8080;border-radius:25px; box-shadow:3px 3px 3px #999999;">お申込はこちらをクリック</span></a><br /><br />


お申込はこちらをクリック
<a href="リンク先のアドレス" target="_blank" style="color:#666666; font-weight:bold; text-decoration:none; line-height:5.0;"><span style="margin:3px; padding:15px 30px; background:#e6e6fa;border-radius:25px; box-shadow:3px 3px 3px #999999;">お申込はこちらをクリック</span></a><br /><br />


お申込はこちらをクリック
<a href="リンク先のアドレス" target="_blank" style="color:#ffffff; font-weight:bold; text-decoration:none; line-height:5.0;"><span style="margin:3px; padding:15px 30px; background:#4169e1;border-radius:25px; box-shadow:3px 3px 3px #999999;">お申込はこちらをクリック</span></a><br /><br />


お申込はこちらをクリック
<a href="リンク先のアドレス" target="_blank" style="color:#ffffff; font-weight:bold; text-decoration:none; line-height:5.0;"><span style="margin:3px; padding:15px 30px; background:#009DBF;border-radius:25px; box-shadow:3px 3px 3px #999999;">お申込はこちらをクリック</span></a><br /><br />


お申込はこちらをクリック
<a href="リンク先のアドレス" target="_blank" style="color:#ffffff; font-weight:bold; text-decoration:none; line-height:5.0;"><span style="margin:3px; padding:15px 30px; background:#32cd32;border-radius:25px; box-shadow:3px 3px 3px #999999;">お申込はこちらをクリック</span></a><br /><br />


お申込はこちらをクリック
<a href="リンク先のアドレス" target="_blank" style="color:#ffffff; font-weight:bold; text-decoration:none; line-height:5.0;"><span style="margin:3px; padding:15px 30px; background:#ffa500;border-radius:25px; box-shadow:3px 3px 3px #999999;">お申込はこちらをクリック</span></a><br /><br />


お申込はこちらをクリック
<a href="リンク先のアドレス" target="_blank" style="color:#ffffff; font-weight:bold; text-decoration:none; line-height:5.0;"><span style="margin:3px; padding:15px 30px; background:#d2691e;border-radius:25px; box-shadow:3px 3px 3px #999999;">お申込はこちらをクリック</span></a><br /><br />


お申込はこちらをクリック
<a href="リンク先のアドレス" target="_blank" style="color:#666666; font-weight:bold; text-decoration:none; line-height:5.0;"><span style="margin:3px; padding:15px 30px; background:#F5F5DC;border-radius:25px; box-shadow:3px 3px 3px #999999;">お申込はこちらをクリック</span></a><br /><br />


【注意点】
リンク先のアドレスのところは実際のリンク先のアドレス(メールフォームのアドレスなど)に置き換えて下さい。
お申込はこちらをクリックのところは自由に変えられますが、文字数が長いと割れてしまうので10文字程度にしてください。




最後までお読みいただきありがとうございました。

お知らせ
ご登録頂くと、LINE@スタートアップセミナーをプレゼント!
やさしいブログのLINE@のご登録はこちらから

これからブログを頑張っていきたい! まずは基本から。
やさしいブログづくりのための、やさしいメール講座

初めてでも安心して始められるメルマガ作成ガイド。
メルマガスタートアップガイド YouTubeにて配信中

ブログが持つ魅力や可能性を私の言葉で綴りました。
書籍はこちらのオンラインショップのみで販売中です!
いいね!した人  |  コメント(50)  |  リブログ(12)