こんにちは、パソコンインストラクターの川上雄大です。
アメブロで、HTMLタグを記事で使う方法を書いておきます。
例えば、アメブロの記事内に、このような「お申し込みはこちら」という水色のリンクボタンを使いたい、
という場合を例にあげて、説明いたしますね。
<p align="center"><a href="#" style="background: -moz-linear-gradient(top,#BFD9E5, #3D95B7 50%,#0080B3 50%,#0099CC);background: -webkit-gradient(linear, left top, left bottom, from(#BFD9E5), color-stop(0.5,#3D95B7), color-stop(0.5,#0080B3), to(#0099CC));color: #FFF;border-radius: 4px;-moz-border-radius: 4px;-webkit-border-radius: 4px;border: 1px solid #0099CC;-moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(255,255,255,0.5);-webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(255,255,255,0.5);text-shadow: 0px 0px 3px rgba(0,0,0,0.5);width: 200px;padding: 10px 0;text-decoration: none;font-weight: bold;text-align: center;font-size: 13px;display: block;">お申し込みはこちら</a></p><br>
はい、この↑英語の羅列が
HTMLタグ
です！
それではいきましょう！
STEP１
まず、使いたいHTMLタグをそのままコピーします。
STEP２
マイページで、「ブログを書く」をクリックして、「通常表示」であることを確認します。（画面左下）
（ここでは、パソコンで、記事投稿画面（エディタの設定）が「最新版エディタ(標準)」であることを前提に説明していきます。）
STEP３
右側の「HTML表示」をクリックします。
STEP４
すると、「HTML表示」画面が表示されますので、さきほどコピーしたHTMLタグを「貼り付け」ます。
STEP５
HTMLタグが貼り付けられました。
修正はここで行います。
STEP６
「通常表示」をクリックして、記事を書く画面に戻します。
STEP７
リンクボタンができていることを確認します。
補 足
今回のリンクボタンのHTMLタグの場合、
<p align="center"><a href="#" style="background: -moz-linear-gradient(top,#BFD9E5, #3D95B7 50%,#0080B3 50%,#0099CC);background: -webkit-gradient(linear, left top, left bottom, from(#BFD9E5), color-stop(0.5,#3D95B7), color-stop(0.5,#0080B3), to(#0099CC));color: #FFF;border-radius: 4px;-moz-border-radius: 4px;-webkit-border-radius: 4px;border: 1px solid #0099CC;-moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(255,255,255,0.5);-webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(255,255,255,0.5);text-shadow: 0px 0px 3px rgba(0,0,0,0.5);width: 200px;padding: 10px 0;text-decoration: none;font-weight: bold;text-align: center;font-size: 13px;display: block;">お申し込みはこちら</a></p><br>
この#は
<a href="#"
リンク先のURLに変更してください。
そして、リンク文字の
お申し込みはこちら
はお好きな文字に変更してください。
さらに、ボタンの幅が広かったり、狭かったりした場合は、
width: 200px;
の数字を変更してください。
以上、アメブロでHTMLタグを使うには、でした。
LIDS札幌・ライフデザインスクール
川上 雄大
