脱初心者講座[第4回]画像編集方法と手順を理解する！

脱初心者講座[第4回]画像編集方法と手順を理解する！

【第４回】画像編集方法と手順を理解する！
(※画像編集も脱初心者で覚えられます)
ヽ(´▽｀ヽ)



まずは、脱初心者アフィリエイト記事講座
[連載概要]をお読みいただけると講座内容
がどんな流れかお分かりいただけます！



では、ここからは画像編集方法をご説明
させていただきます！



トップページは、手を加えなければ、
以下のように表示されています。




上の画像の赤点線枠の箇所を今回、あなた
のお好きな画像で変更してみましょう！



画像を入れ替えるには、CSS(スタイルシート)
というものと、HTMLというものを基本だけ、
覚えておく必要があります。
でも、大丈夫！
この連載記事で基本的なことを覚えてしまえば
後々、あなたのブログやホームページで編集
の応用が利きますよ！



以下の画像ですが、xxx.cssというファイルが
ありますが、このスタイルシートというもの
は、ホームページやブログ内で共通したテキスト
文字サイズに変更したり、画像サイズを統一
したりするときに使います。




また、htmlには規則があり、index.htmlや
index.htmと名前を付けることで、勝手にトップ
ページとして認識されます！これはルールです。



もう少し、分かりやすく例を挙げると、
例えば、あなたのブログ全体のテキスト文字の
サイズを大きくしたい場合、このcssという
ファイル内でブログ全体やブログの記事部分
だけなどの指定をしてあげることが可能です。
(※ここでは基本だけお教えしますので無理に
今覚えない方が良いでしょう。)



この記事連載講座では、画像編集方法とcssと
htmlの見方と編集の仕方を基本だけお教え
致します。



後は、応用することが可能になるかと思います。



では、以下の順で開いているトップページの
バナー画像の名前をコピーもしくは、覚えて
おいてください！(※コピーお勧め！)






次に、以下の手順でバナー画像がhtmlで打ち込まれて
いる場所を探します！






見つかった結果の画像です。あなたも同様の画面になっているでしょう！





とりあえず、この流れをやっていただいた
理由は、お好きな画像を編集して入れ替える
時に、html上のどこを編集すれば良いかが場所
だけでもすぐに探せるようになるためです！



では、今までの作業をしっかり覚えておき、
以降、あなたの好きな画像を探して、編集
して、先ほどの要領でトップページのバナー
画像を入れ替えます！



あなたの好きな画像を探します！
画像は著作権がありますので、海外の画像を
拝借致します。



Google.comやYahoo!USAを今回は使います！
今回は、以下の手順でGoogle検索オプションを
使います！

Google検索オプション




検索ボタンを押下します！

次に、以下のように画像リンクを押下します！





するとたくさんの「イラスト」に関わる画像が
検索結果として表示されます！



ずらっ！と検索結果表示されたたくさんの画像の
中から、あなたのホームページテーマ性に合った、
画像を選び、以下のように「原寸大」の画像を
表示させて、冒頭で作業した、トップページ
バナー名を、「名前を付けて保存」のところで、
使います！以下の通りです。
分かりやすいように「デスクトップ」に保存します！





ようやく、今回のテーマである、画像編集に
入ります！

以下のようにWindowsに標準でインストールされて
いる画像編集用ソフト、「ペイント」を起動！






次に、先ほど名前を変えてダウンロードした
お好きな画像をペイントにドラッグ&ドロップ
します！





「ペインタ」で画像に色々と試しでデザイン
編集してみてください！
(※ペインタの使い方は申し訳ありませんが、
色々と試してみてくださいね！)



今回は、とりあえず練習、基礎を覚えるため
なので、練習で出来上がった「画像」を保存
する方法を以下に示します。






そして、以下のようにオリジナル画像と名前
を上書きします！後でどっち！にしようかな
・・・となる場合も考えられるので、上書き
せずに、専用のフォルダーにオリジナル画像
を移しておいてから保存するというのも良い
でしょう！





では、出来上がったトップページの画像を、
simple16_greenフォルダーの中の「images」
フォルダーに上書きで保存してようやく完成！



では、トップページのindex.htmlをダブル
クリック！して画像編集後の出来栄えを見て
見ましょう！



私の大雑把ではありますが、以下の画像のように
画像が置き換わりました！





あなたのトップページのバナーの見栄えが、
縦長になってしまった・・。

あるいは、横長になってしまった・・。



その場合、以下のようにhtmlを修正しましょう！




縦長であるならば、横幅を意味するwidthの箇所
の数字を変えてあげます！
または、縦幅を意味するheightの数字を少し小さく
します！

横長の場合、縦幅を意味するheightの箇所の
数字を変えてあげます！
または、横幅を意味するwidthの数字を少し小さく
します！


数字を変えた後は、必ず、Ctrlキーを押した
まま、Sキーを押下して、index.htmlを
上書き保存してあげましょう！



また、どんな感じに編集されたかをチェック
する必要があるので、index.htmlを更新ボタン
を押して、出来栄えを見ましょう！

index.htmlを開いていなかった場合は、index.
htmlファイルをダブルクリック！して開いて
出来栄えをチェック！してみてくださいね！



以上で、画像の編集方法の基本をお伝えして
まいりました＿〆(∀`●)

後は、今までの作業を思い出していただき、
変えたい画像をhtml文から探しては、あなた
のお好きな画像を編集して保存し、保存した
画像をimagesフォルダーに入れてあげて、
出来栄えをチェックする！の繰り返しで、
ホームページの見栄えがあなたオリジナル、
になっていきます！



index.htmlだけではありません。
simple16_greenフォルダーの中には、色んな
htmlファイルが入っていますので、これらは
最初からindex.htmlからリンクされている、
ページたちです！



なので、各ページごとにいらなければ削除
して、残しておきたいページがあれば、その
ページの画像も編集していきます。



また、この記事でご案内してきた画像編集
方法と手順で、index.htmlやその他のhtml
ファイル内に探している画像が見当たらない
場合、style.cssの中に画像を表示させる
プログラミングが書かれている可能性も
出てきますが、別に恐れることなく、この
記事でお教えした方法と手順を踏めば、
ちゃんとcss(スタイルシート)に記述された
画像も変更、編集することができます！



ここまでで、新たに画像を追加するhtmlや
cssのプログラミング(コーディングといい
ます)はお伝えしませんでしたが、この記事
の基本さえ覚えれば、後々、分かります！



また、ブログアフィリエイトを今後も、
今もされる、されている場合もとてもお役
にたてる記事内容になったかと思います！



では、あなたが作業した画像編集！無事！
☆⌒(*＾-゜)v おめでとうっ!!



以上で、
【第４回】画像編集方法と手順を理解する！
を終えさせて頂きます！



次回は、【第５回】HTML編集方法を理解する！
(※HTML編集方法の基本を脱初心者で覚えられます)
＿〆(∀`●)
(※多少、タイトルが変わる可能性があります。)



お楽しみに（o´・ェ・｀o）♪



ありがとうございましたﾟヽ(｡･c_,･｡)ﾉﾞ



以下のリンクを1クリック！応援お願いします☆⌒(*＾-゜)v Thanks!!

評価：★★★でしたら↓↓↓
人気ブログランキングに参加してます！

評価：★★☆でしたら↓↓↓
ブログ村ランキングに参加してます！

評価：☆☆☆でしたら↓↓↓
クリックなし！でお願いします♪


ページ最下部のコメント＆トラックバック大歓迎(^-^*)/
コメントは、あなたのブログリンクがトップページにも貼られ(記事とトップページ2箇所)宣伝になりますよ！

また、相互リンクをしていただけるようでしたら、相互リンク募集中です！を
宜しくお願いします＿〆(∀`●)

アフィリエイト関連の特に人気のコンテンツ

人気アフィリエイト記事 ブログランキングを上げる方法・小裏技を動画解説	人気動画講座風 マインドマップ高品質フリーソフトで動画講座風に作り方をさらっと(1/3)
人気無料レポート 楽チンっ！【再配布可】無料レポート作成用テンプレート10種セット[Vol.1] すぐに使えてメールを送るくらい超簡単！	人気アクセスランキング 人気ブログランキング≫アフィリエイト

« 脱初心者講座[第3回]無料物販アフィリ向きHPテンプレート入手＆表示！　脱初心者講座[第4回]画像編集方法と手順を理解する！　アフィリエイト収入を稼ぐ方法と思考法をパターン別で調査してみた。vol.1 »