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

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

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

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

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



■この動画を見ることによって得られる成果
・画像を作成せずにきれいなリンクボタンをブログ記事に張り付ける事ができます。
・コピペができれば誰でもできます。
・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、変換後のタグをアメブロに張り付ける

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

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


今回の記事を気に入っていただけた方はこちらへ!
こんにちわ、ホームページ作成アドバイザーの田中です。


先日、実験でこのブログに張り付けてみたボタンですが…
ブログにcssで作成したボタンを張り付けてみました


IEで確認したところボタンの中が白くなってしまいまして、使いものにならない事が判明しました(汗)



おまけにボタンのテキストが改行するとボタンの見た目が変になります(涙)


というわけで別の方法を実験しました。

今回の方式でタグを張り付けてみたところ下記のようになりました。
今度はIEでも白抜けになっていません♪
おまけにめちゃくちゃ長いテキストでもボタンの形になっています。


電話0123-456-7890


お問い合わせはこちら


メルマガの購読はここをクリック!


公式ページをご覧ください→


続きを見る


資料請求はこちら


めちゃくちゃ長いテキスト文章のテストめちゃくちゃ長いテキスト文章のテスト
めちゃくちゃ長いテキスト文章のテストめちゃくちゃ長いテキスト文章のテストめちゃくちゃ長いテキスト文章のテストめちゃくちゃ長いテキスト文章のテストめちゃくちゃ長いテキスト文章のテスト


スマホで見てももちろん大丈夫でした。


今度こそこのボタンのはり方を書きます。
簡単な操作で張り付けできますのでお楽しみに^^

【追記】作りました

画像を使わずリンクボタンをブログに設置する方法

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

早速ボタンも張替です(笑)
今回の記事を気に入っていただけた方はこちらへ!

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


今日は、ブログの記事内にクールなボタンを貼りつけてみようかと思います。


■いくつか張り付けてみた
【注意】ボタンはサンプルなのでリンクしていません

電話0123-456-7890



お問い合わせはこちら



メルマガの購読はここをクリック!



公式ページをご覧ください


続きを見る



資料請求はこちら



いかがでしょうか?
色つきで立体的なボタンを張り付ければ、結構目立つのでボタンを思わず押してもらいやすくなります。

メルマガの購読ページに飛ばしたり、資料請求ページに飛ばしたり。
最近ではスマホ向けに電話ボタンを用意するのもいいですね♪

今回張り付け実験するのはCSSで作成されたボタンです。
ボタンの作成方法は2種類あって、画像で作る場合とCSSで作る場合です。

どちらも作成する知識が必要なのですが、今回実験した方法はコピペさえできれば誰でもできる方法を行いました!

次回のブログでそのやり方について図解で解説しようと思います。

■あと、この記事をスマホで確認してみました。


実験成功です♪

という事で、今度のブログでやり方について図解していきますのでお楽しみに♪

【追記】作りました

http://ameblo.jp/belink/entry-11887051919.html

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

↓で早速ブログの読者登録をボタンに変更してみました!
もしよかったら登録してやってください♪


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

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

手間無く「円グラフを作成するツール」について書きたいと思います。

円グラフを使うと「文章」だけに比べて目を引きますし、その文章に説得力が増します。
円グラフは「数字」を視覚化するので、訪問者に容易にイメージさせる事ができます。

例えば、「%の方に満足いただいています」の様な円グラフですね。


そこで、今日はオンラインで手軽に作れる円グラフの作成ツールについて紹介します。

紹介するのはGoogle ドライブに付属している「スプレットシート」を使います。
Gmail(Googleアカウント)を利用していればすぐに利用できます。

■Google ドライブでどんな円グラフが作れるのか?



【作成手順】
1、グーグルドライブにアクセスします
https://drive.google.com/

2、作成から「スプレットシート」を選びます


3、作成されたシートにデータを入力していきます。


4、グラフにしたいデータをマウスで選択します。


5、「挿入」メニューからグラフを選択します。

6、グラフタブからお好きなグラフの形式を選択します。
挿入でグラフが確定します。

7、画像を保存&ダウンロードします。


いかがでしたでしょうか?
本日お伝えした事を有効に活用できれば円グラフの画像が簡単に手に入りますので是非挑戦してみてください。


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


今回の記事を気に入っていただけた方はこちらへ!
こんにちわ、ホームページ作成アドバイザーの田中です。
アメブロの記事内にコピペで枠をいれる方法やサイトについて調べてみました。

ブログの枠ってこんな感じの奴です。


■この枠をブログ記事内に枠を入れるタイミングや用途など
他のサイトへのリンク
他のサイトからの引用記事
自分の文章の目立たせたい部分、主に告知など
記事が長すぎる場合に区切りや見出しとして使う

等です。

サイトの紹介だけでなく、実際にアメブロに張り付けて動作確認も含めてサンプルも掲載しましたので参考にしてください。

アメブロ 記事内に枠で囲む方法(囲い枠・囲み枠・枠囲い・枠囲み)

アメブロの記事内に枠を入れる方法について図解で解説しています。
少しですがコピペで使える枠のサンプルも掲載されています。

サンプルです


コピペで使える簡単スタイル「コピペ枠わく」

ブログ用にコピペできる「枠」やスタイルの専門サイトです。
タグがシンプル&見た目もシンプルなので、ブログ記事においても本文を邪魔しません。
コピペ枠の入門的なサイトです。

コピペで使える簡単スタイル「コピペ枠わく」のサンプルです


コピペBOX

ポップな感じの色合いが多いボックスのサンプルが掲載されています。
楽天をメインに使っている方向けです。
枠の横幅のカスタマイズ方法についても説明があります。
コピペBOXのサンプル
内容のサンプルです。これは連絡先や告知などに使えますね。


ボックス装飾

これでもか!と言うほどの枠素材がたくさん掲載されています。
色の指定のやり方が解らない方や色の見本が見たい方にお勧めです。
タグはそのままコピペで使えます。

ボックス(直線)
ボックス(二重線)
ボックス素材(ダッシュ線)
ボックス素材(点線)
ボックス装飾のサンプルです。これは見出しとかによさそうですね。


ブログ記事内囲み枠簡単作成ツール

自分のお気に入りの枠を作りたい!
でも難しいタグが解らない…というこだわりのある方はこのツールがお勧めです。
文章を書いて作成ボタンをおすだけで、コピペ用のタグが生成される便利なツールです。
もちろんタグはそのままコピペで使えます。
枠の太さや色、角を丸くするなどがマウス操作で細かに設定できるので、自分のブログデザインにあった枠を自分で作れるのが特徴です。

自分の文章の目立たせたい部分、主に告知など
電話や連絡先などの告知文章電話や連絡先などの告知文章

生成されるデザインがシンプルなのでどんなデザインにも合うんじゃないでしょうか。

枠をいれるにはちょっとだけ手間ですが、これを上手に使えれば、ブログ記事の価値がぐっと上がると思いますので是非挑戦してみてください。

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

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