最短ホームページテンプレートのカスタマイズはどこまで出来る?  

最短HPを着せ替える

購入した最短ホームページテンプレートを下のように変化させる事ができます!

気に入った写真を入れたり、好きな色に変えたり・・まずは色々楽しんでみましょう

最短HPのヘッダーに画像を入れる

最短ホームページテンプレートのフォルダに初めから入っている画像を使用する場合はindex.htmlソース中のファイル名を変更するだけでOK!この作業が習得出来ているという前提で進めま~す。

超簡単な方法は下の画像を「名前を付けて画像を保存」で自分のテンプレート①フォルダに入れるだけ!(ファイル名はtitle.jpgとする)

しかし!自分の好きな画像を使用したい場合はどうするか!?私ことMYUはフォトショでチョイチョイとやっちゃいますが・・スマホで撮影した写真、最近はサイズがかなりデカイ!

最初にする事はサイズを小さくしておく事!(ソフトが必要ですが)要は画像処理が出来れば簡単なのでマスターすると自分の思い通りの写真が作れる・・って事です♪

テンプレート①フォルダの中のtitle.jpgは780×120ピクセルとなっているのでこのサイズにすればOK☆ 高さは多少違っても横幅は780ピクセルを守ること!(表示崩れ防止)

(注)ブラウザによっては画像保存が出来ない場合があります。その時は保存出来るブラウザを使用

メインコンテンツに画像を入れる

まず、使用したい画像を作成しま~す(これはどのテンプレートにも用意されていないため)

画像サイズは215ピクセル×130ピクセルが3枚。(例として)

下の画像は左から「content1.jpg」「content2.jpg」「content3.jpg」となっていて、用意が面倒なら下の画像を「名前を付けて画像を保存」でそのまま使用して下さい。

自分の好きな画像を使用する場合、縦サイズは多少長くなっても大丈夫ですが横サイズには注意が必要です(左横に入る文章との兼ね合い)

記述方法は「無料ホームページ制作講座」に画像右置きソースが掲載されています。が、一応ここにも載せておきま~す

<img src=content1.jpg alt="" align=right>

バーの色を変えてみる

一番上のバー「top-bar.jpg」と下のバー「under-bar.jpg」は同じ画像でファイル名だけが違います

サイズは997×35・・これと同じサイズの画像を好きな色で作成して入れ替えるか、ソフトに取り込み色を変えて上書きすればOK!これも面倒なら下の画像を使用するといいでしょう。

サイド(左)の中央辺りにもバー「middle-bar.jpg」がありますが、使用画像は上の画像をもう一つ用意してファイル名を「middle-bar.jpg」と変更する

メインコンテンツのバーを変える

最短HPテンプレートに入っているバー「bar.gif」の画像は71×28ですが下の画像で大丈夫です。

ここまでの入れ替えが出来ていればこのバーも同様に「名前を付けて画像を保存」で使用して下さい。

あと、サイドバー(左)の「お気に入り」はIE以外のブラウザでは使用できないためなくしました。

サイドバー(左上)の文字色は「style.css」ファイルの中のa {color:#~~~の箇所を変更しています。 #93400cに変えるとここで変更した茶系になりますが、色々と試してみるといいでしょう。

最短HPの背景を変更する

最短ホームページテンプレートの背景は全て「style.css」で入れ替えるようになっていますが・・ここではあえてHTML側のbodyで変更してみます!(意外と簡単)

まず「style.css」ファイルの中の background:#ffffff url(bg.gif) repeat-y; という箇所を1行全部削除し、次にHTMLファイルの上部</head>の下にある<body>の部分を<body bgcolor=#ffeeff>にして保存すると背景色が薄いピンクに変わります。

#ffeeffの部分を自分の好きな色にして遊んでみるといいでしょう。

因みにこの方法で背景画像も簡単に貼れま~す^^♪・・・こんな感じ→★★★

最後に・・・

ここまでの事はカスタマイズとは言わず、着せ替えといいます。

例えて言うと、仕切りをしたお弁当箱にご飯を詰め、ウィンナを入れ、ふりかけをかけ・・というのと同じで、お弁当箱の仕切りは触っていません(イジると崩れますよね?)

このお弁当箱の仕切りやサイズを変えてみよう・・というのがカスタマイズ!(エッ?)

もう少し知りたい人は右側のメニューから順番にどうぞ・・・☆

pagetop