無料ホームページテンプレート Template Party無料ホームページテンプレート Template Party

Google Chrome(グーグルクローム)を使ってhtmlを編集してみよう

トップページの編集

ついに最後のページです。今までの作業を繰り返すだけなので簡単です。

お知らせ欄を編集

過去のステップのように、アイコンをクリックして、画面上の編集したい箇所をクリックし、Elementsパネルで編集、、、、Sourcesパネルにコピー、、、、、、を繰り返してもいいのですが、今回は勉強も兼ねてhtml側を直接編集してみましょう。

動画解説:約1分45秒
>> 静止画の解説を見る(※別窓で開きます)

お知らせの下のブロックを削除し、人気のパンリストを並べます

お知らせの下にあるブロックはテンプレートの説明なので削除します。
削除すると、お知らせ1行しかないので寂しすぎます。パンギャラリーから、イチオシしたいパンだけ掲載してみることにしましょう。

動画解説:約3分51秒
>> 静止画の解説を見る(※別窓で開きます)

「Elements」パネルでの作業中は、再読み込みしない&ページ移動しない!
プレビュー画面からリンクで他のページに移動したり、再読み込みをかけるとせっかく編集した情報がリセットされるので注意して下さい。
また、「Elements」パネルで編集した情報はそのまま保存する事ができません。htmlが保存できるのは「Sources」パネルで行った編集のみです。

最後にメイン画像を入れ替えましょう。

ロゴ背景のメイン画像を入れ替えます。

動画解説:約1分2秒
>> 静止画の解説を見る(※別窓で開きます)

画像の高さをカットする

これも以前の「ロゴ画像の変更」ステップで行いましたが復讐です。
画像編集サイトのhttps://pixlr.com/editor/にアクセスし、mainimg.jpgを開いておいて下さい。

動画解説:約1分2秒
>> 静止画の解説を見る(※別窓で開きます)

初心者向けマニュアルトップに戻る