画像を使わずリンクボタンをブログに設置する方法 | 自分で作れるホームページ作成法

自分で作れるホームページ作成法

本業が忙しい人でもビジネス用のホームページを自作する方法をやさしくお伝えします。

こんにちわ、ホームページ作成アドバイザーの田中です。

今日は画像を使わずに、画像で作成したクオリティのボタンをかんたんに設置する方法について動画を作りました



■この動画を見ることによって得られる成果
・画像を作成せずにきれいなリンクボタンをブログ記事に張り付ける事ができます。
・コピペができれば誰でもできます。
・Crome IE Firefox スマホ対応です。

【サンプル設置】
アメブロにボタンを設置

■概要…全体の大まかな流れや考え方
1、オンラインのボタン作成ツールでボタンを作成
2、オンラインのタグ変換ツールでタグを変換
3、ブログに張り付け

■手順…画面を操作しながら解説
1、ボタンジェネレーターでボタンを作成します。
http://cssgradientbutton.com/

2、「Html & css code for gradient button」のタグ全てをコピーする。

3、タグ変換ツールへアクセスします。
http://inlinestyler.torchboxapps.com/styler/convert/
※CSSをインラインCSS化するツールです。

(1)Enter your source HTML に2でコピーしたタグをペースト
(2)「Convert again」ボタンを押す
(3)Converted HTMLに変換後のテキストが表示される

4、タグのいらない部分を除去する
下記の部分です。
<html>
  <head/>
  <body>
<a>~</a>(←ここが必要な部分) 
</body>

</html>

5、変換後のタグをアメブロに張り付ける

■まとめ
・コピペだけで手軽
・画像に負けないクオリティ
・メルマガ、資料請求、電話など目立たせたい用途に利用可能

本日もお読みいただきましてありがとうございました。
ホームページ作成アドバイザーの田中がお伝えしました。


今回の記事を気に入っていただけた方はこちらへ!