おはようございます^^
簡単アメブロ集客の住福です。

今まで、沢山の画像に関する記事を書いてきましたが、
今日はそのまとめを書いてみます。

多分、保存版になります^^



画像系カスタムまとめ!!



画像を綺麗にアップしよう!

まず、画像を綺麗にアップする方法です。

せっかく頑張って綺麗に撮った写真や、文字を入れた加工画像ですが、どうも綺麗にアップされない。

そんなときは、適切な画像形式になっているかを確認してください。
詳しくはこちらの記事です。

画像を綺麗にアップするには…


私は、画像をアップするときは、サイズが重くなりますが、基本はPNG形式であげます。
一番綺麗にアップできますよ^^



画像形式を変えるには

これは形式を変えたい画像を、画像編集ソフトで開いて、「名前をつけて保存」の際に、形式を変えて選択すれば簡単に出来ます。

Windowsに初めから入っている“ペイント”でも出来るので、チャンレジしてみて下さい^^

ペイントで開く方法は、編集したいの画像の上で「右クリック」→「プログラムから開く」→「ペイント」で開けます。で、左上のタブにある「名前をつけて保存」→「形式を選択する」で出来ます。



画像サイズを変えるには

画像をアップする際は2つの選択肢があります。

・縮小して表示
・オリジナルで表示

まず、この際に画像をオリジナルサイズでアップします。

オリジナルサイズ



で、例えば大きいサイズであれば、こんなふうに、完全にはみ出ます!


テスト


なので画像サイズを調整してあげないといけません。

この画像のHTMLはこんな感じですが、後半の赤字の部分を少しいじります。


<a href="http://stat.ameba.jp/user_images/20140430/01/next-inv/ea/6f/j/o0800048012924751407.jpg"><img src="http://stat.ameba.jp/user_images/20140430/01/next-inv/ea/6f/j/o0800048012924751407.jpg"  alt="テスト" width="800" height="480" border="0" /></a>


「width=」が横幅で、
「height=」が高さです。

横は350~500くらいで、高さはプレビューを見ながら調節してみて下さい。

<a href="http://stat.ameba.jp/user_images/20140430/01/next-inv/ea/6f/j/o0800048012924751407.jpg"><img src="http://stat.ameba.jp/user_images/20140430/01/next-inv/ea/6f/j/o0800048012924751407.jpg"  alt="テスト" width="400" height="240" border="0" /></a>



こんな感じに数値を変えると、適切なサイズに変更できます。


テスト




画像にリンクを貼る

たとえば上の画像にリンクを貼ります。画像テキスト(HTML)の赤字の部分がリンク先のURLですので、ここをリンク先のURLに変えればOKです。

例として、ヤフーにリンクを貼ってみましょう。

変更前
<a href="http://stat.ameba.jp/user_images/20140430/01/next-inv/ea/6f/j/o0800048012924751407.jpg"> ;<img src="http://stat.ameba.jp/user_images/20140430/01/next-inv/ea/6f/j/o0800048012924751407.jpg" alt="テスト" width="400" height="240"border="0" /></a>

変更後
<a href="http://www.yahoo.co.jp/">;<img src="http://stat.ameba.jp/user_images/20140430/01/next-inv/ea/6f/j/o0800048012924751407.jpg"  alt="テスト" width="400" height="240" border="0" /></a>


するとリンク先が変わります。

テスト


簡単でしょ?



他にもあるある!ユニークな加工!

主に必要な知識はこの3つなんですが、他にも画像にかんするユニークな加工法があります。

以前記事に書いているので、続きはそちらのブログでご覧いただければと思います^^

画像を自動的に“アップにする”方法
画像を動かす方法



以上、画像系カスタムまとめでした。
まだ他にもあれば随時アップしてまいります♪



ポチッと応援お願いします!↓

にほんブログ村 IT技術ブログ ホームページ・サイト制作支援へ
 
にほんブログ村 地域生活(街) 九州ブログ 九州情報へ


アメブロカスタムで
ブランディング&アクセスアップ!
Clik! Clik! Clik!
↓↓↓↓

SBアメブロカスタム


☆大人気☆
HP制作サービス
Clik! Clik! Clik!
↓↓↓↓

0円でホームページ制作