この記事の所要時間: 22
doi

大事なお知らせだよ!
っていう枠を作ってみた(笑)

 

 

こんにちは、ゆーすけです。

 

material_99_10_sまずはポチっとお願いします。
 

HTMLでオリジナル吹き出し画像を作ってみよう

さてさて、今日はあなたのHTMLサイトやブログに

インパクトを与えるためのHTMLの使い方を学びましょう。

 

《手順》

1)台紙となる画像を作成

2)HTMLを組み込む

3)投稿

 

のたったの3ステップ。

今日はちょっとむずかしい記事になるけど、一緒に頑張りましょう!

 

台紙となる画像を作ろう

まずは土台となる画像を作りましょう。

今日は誰でも簡単に作れるをテーマにいきますので、

Excelとペイントを使って作ってみましょう。

 

[1] ペイントで630(横) X 100(縦)の枠を作る

右下の四角を内側にドラッグし下の数値が630X100になるように調整

image

 

[2] CTRL+Aを押し、次にCTRL+Cを押して630 X 100の白紙をコピーしておく

(1)CTRL+Aを押すと点線になる

image

(2)CTRL+Cを押すとコピーになる

 

CTRL+Cは「コピー」という意味です。

CTRL+Vは「貼り付け」という意味です。

CTRL+Aは「範囲を全て選択」という意味です。

 

[3] EXCELをたちあげて、CTRL+Vを押します

見えづらいですが、灰色のセルの中に630 X 100の台紙がはられます

image

 

[4] 右上のピンクの図ツール[書式]をクリックして台紙に色を付けます。

色▼ から目立つ色を選択して下さい。ここでは[紫アクセント4]を選択します。

image

 

[5] 台紙を真ん中に持ってきます。

image

 

[6] [挿入タブ]ー[図]を挿入します。

image

 

[7] 挿入できたら、紫の台紙の中に収まるように縮めます

image

 

[8] [挿入タブ]ー[図形]▼を選択して吹き出しを選びます。

image

image

 

[9] 同じく吹き出しを紫の台紙の中に描きます。

image

 

[10] 下の黄色いポッチを人物の方へ持ってきます。

image

 

[11] 吹き出しを選択し[描画ツールタブ]ー[書式]ー[図形の塗りつぶし▼]から

塗りつぶしななし(N)を選択します。

image

 

[12] 枠をクリックしたあとで図形をCTRLキーをおしたまま選択する。

ポイントは CTRLキーを押して2つ目の図形を選択することです。

CTRLを押して選択すると2つ以上の図形をいっぺんにコピーや移動ができます。

image

 

[13] 2つの図形を選択した状態でCTRL+Cを押します。

[14] ペイントに戻り、CTRL+Vを押して下さい。下の図のようになればOKです。

image

 

[15] 次に[選択▼]をクリックし文字を入れたい範囲をドラッグします。

その際に左下の起点を表す数字をメモしておきます。

下の100,15pxは十字が「左から100pxの位置、上から15pxの位置」

という意味です。

image

 

[16] 選択の点線の枠は500 X 65 pxの枠になります。この数字もメモしておきましょう。

文字が入る枠のサイズになります。

image

 

[17] 保存してペイントを終了します。

 

 

お疲れ様でした。

土台が完成しました!続いて文字を入力する設定についてです・・・・

 

 

doi

続きは・・・明後日?(^^
会話の中は文字だからSEOにも強いぜ!!

 

material_99_10_sまずはポチっとお願いします。