こんにちは
佐東です。
・・・・・・・・・・・・・・・・・・・・・・・
『アメブロセルフカスタムLesson』
自分でブログを整えたい人のための
分かりやすく整えてみよう！のコーナーを少しづつ書いていきますね。
今回は
『お申込みボタンを作ってみよう！』です。
これがボタン
ブログ記事編集画面下の『HTML表示』タブをクリックして、ボタンを入れたい箇所に下記のソースコードを記入
<p style="text-align: center;"><a href="#" style="color:#ffffff; font-weight:bold; text-decoration:none; line-height:5.0;" target="_blank"><span style="margin:3px; padding:15px 30px; background:#808080;border-radius:10px;">ボタン</span></a></p>
すると↓になります。
※#にリンク先のURLを入れてください
でもこのままコピペだと、このまんまのボタンしかできませんよね・・・。
ということで応用編を幾つかご紹介します。
▼まず、これが中央寄せのコードです。
<p style="text-align:center;">・・・・・</p>のコードが、『中央寄せ』を意味しています。
<p style="text-align: center;"><a href="#" style="color:#ffffff; font-weight:bold; text-decoration:none; line-height:5.0;" target="_blank"><span style="margin:3px; padding:15px 30px; background:#808080;border-radius:10px;">ボタン</span></a></p>
▼左寄せのコードです。
<p style="text-align:left;">・・・・・</p>のコードが、『左寄せ』。
<p style="text-align: left;"><a href="#" style="color:#ffffff; font-weight:bold; text-decoration:none; line-height:5.0;" target="_blank"><span style="margin:3px; padding:15px 30px; background:#808080;border-radius:10px;">ボタン</span></a></p>
▼右寄せのコードです。
<p style="text-align:right;">・・・・・</p>のコードが、『右寄せ』。
<p style="text-align: right;"><a href="#" style="color:#ffffff; font-weight:bold; text-decoration:none; line-height:5.0;" target="_blank"><span style="margin:3px; padding:15px 30px; background:#808080;border-radius:10px;">ボタン</span></a></p>
丸み無しの場合はこれ
border-radiue:0px; としてください。
<p style="text-align: center;"><a href="#" style="color:#ffffff; font-weight:bold; text-decoration:none; line-height:5.0;" target="_blank"><span style="margin:3px; padding:15px 30px; background:#808080;border-radius:0px;">丸みなし</span></a></p>
因みに、この『0px』の数字を大きくすると、丸みが強くなります。
丸み無しはゼロの状態。
数字を『30px』にしてみます。
<p style="text-align: center;"><a href="#" style="color:#ffffff; font-weight:bold; text-decoration:none; line-height:5.0;" target="_blank"><span style="margin:3px; padding:15px 30px; background:#808080;border-radius:30px;">30px</span></a></p>
丸の具合はお好みで調整してくださいね。
ボタンと文字の色を変えてみましょう
<p style="text-align: center;"><a href="#" style="color:#ffffff; font-weight:bold; text-decoration:none; line-height:5.0;" target="_blank"><span style="margin:3px; padding:15px 30px; background:#808080;border-radius:10px;">ボタン</span></a></p>
ここで使う色は#と6つのアルファベットと数字で表記されます。
こちらのページを参考に
文字の色を変える場合
color:#ffffff
この部分の『#ffffff』をお好みの色に変更。
ボタンの色を変える場合は
background:#808080
この『#808080』を変えればOKです。
試しに色々と、、
ただ文字にリンクを貼るよりも、ボタンの方が目立ちますし、
ブログ内のカラーが決まっていれば、それに合わせてカスタムできると統一感もでてとっても見やすいと思います◎
ぜひぜひお試しくださいませ！