最短でイメージ画像を差し替えるコツ
イマドキの手に職って、ITエンジニアだと思う【IT派遣テクノウェイブ】
【振り返り】
テキストを差し替えるコツはつかめたでしょうか?
白い文字の部分のみを変更して保存すれば大丈夫です。
また、入れ子(ネストとも言う)構造や全角になってないか確認してくださいね。
ーーーーー
今回は最短で画像を差し替えるコツをお伝えします。
Webページは主に画像とテキストがコンテンツ(内容)です。
画像データは画像がまとまって入っているフォルダに入っています。
そこからHTMLファイルへリンクして表示させています。
まず、差し替え後に使用する画像データを画像フォルダに入れます。
おそらく画像フォルダの名前はimgフォルダまたはimagesフォルダ
になってるかと思います。
画像を表示させる方法はimg(イメージorアイエムジー)タグを使用します。
|例として
<img src="images/old.jpg">
と言う記述があったとします。
この中のold.jpgを変更すれば良いのです。
差し替え後に使う画像をimgフォルダに入れてから
<img src="images/new.jpg">
表示させたい画像の名前を指定してあげれば良いのです!
もちろん、ちゃんと保存してからブラウザで確認してくださいね!
ちなみにalt="株式会社デザート"となってるalt(オルト)属性は
画像が表示されない場合にテキストで表示されます。
また、SEO的にも有効なので出来る限り内容を指定してあげましょう。
htmlファイルのテキスト変更の注意点
ブラケッツでhtmlファイルを開くと自動的に色分けされて表示されます。
テキストの変更だけならエディタ上の白文字の箇所を打ちかえれば、
データが壊れることはありません。
ゆっくり丁寧に白文字の箇所を選択し文字を変更し、
保存して作業完了です!
続きを読む
いきなりホームページの更新・修正(汗
「若いんだからインターネットわかるだろ?」
「うちのホームページの写真と文章を変えて欲しい」
「わからなかったらネットで調べて対応しろ」
など、いきなりホームページの更新・修正を振られても困りますよね。。
このサイトでは職業訓練校の講師歴5年、渋谷・代官山でWEB制作4年超の現役エンジニアが基礎はおいといて、今現在、目の前にある危機を最短で乗り越えるためのコツのみを発信していきます!
テキスト変更のコツ
- htmlファイルを入手する
- テキストエディタでhtmlファイルを開く
- テキストを変更し、保存する
1.htmlファイルを入手する
まず修正するページの元データ、つまりhtmlファイルが必要です。
htmlファイルがなければ、ブラウザからコピーを取ってしまいましょう!
ブラウザ(ここではchrome)上で右クリックして「ページのソースを表示」
表示されたソースをコピーしてテキストエディタにペーストしましょう。
別名保存で拡張子を.html(ドットエイチティーエムエル)ファイル
にして保存します。