プチ・ホームページサービス

カスタマイズTips

HTMLやCSSを編集するオリジナルのプチを作る方法です

ホームページの表紙(トップページ)を作成する

画面中央に写真を1枚掲載して、その写真をクリックすると
ホームページが開く表紙(トップページ)を作成します。

1.使用する写真(画像)をプチに保存します

まず、使用する写真( 画像 )をプチに保存します。
保存場所は、カスタマイズページの「 画像置き場1( もしくは2 ) 」です。

※使用する写真は、プチに保存する前にサイズ変更などの加工をおこなってください。
どの閲覧環境でも画面からはみ出さない程度( 600~800ピクセル(px) )のサイズが適当ですが、お好みで調整をしてください。

「 参照 」ボタンを押すとファイルの選択画面が表示されますので、
使用する写真( 画像 )を選び「 開く 」ボタンを押します。

※Safari・Chromeをご利用の場合は、「 参照 」ボタンの名称は「 ファイルを選択 」になります。

写真の選択が済んだら、「 保存する 」ボタンを押します。

処理が完了すると、ページ内にその写真( 画像 )と一緒に「 相対パス 」が表示されます。

※「 相対パス 」は、後の工程でHTMLの編集をおこなう際に使用します。

2.自作HTMLトップページを編集します

次に、「 自作HTMLトップページ 」の編集画面を開き、編集欄の内容を以下の記述に差し替えます。

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title><?virtual ("../1tools/title.txt");?></title>

<link rel="stylesheet" href="../1tools/font-family_en.css" type="text/css">
<link rel="stylesheet" href="../1tools/color.css" type="text/css">
<link rel="stylesheet" href="../1tools/wide.css" type="text/css">
<link rel="stylesheet" href="../1tools/blank.css" type="text/css">

<script src="../1tools/grobal.js" type="text/javascript"></script>
<script src="../1tools/select_css.js" type="text/javascript"></script>

<style>
body {
margin: 0;
padding: 0;
}

.container {
position: relative;
width: 100%;
height: 100%;
}

.content {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 90%;
height: 90%;
margin: auto;
}

.content > div {
text-align: center;
}

.content .wrap_img img {
max-width: 100%;
max-height: 100%;
margin: auto;
}
</style>

</head>
<body id="toppage">

<div class="container">

<div class="content">

<div>
<a class="wrap_img" href="../apple1/" target="_top">
<img src="写真(画像)の相対パス" border="0"></a>
</div>

</div>

</div>

</body>
</html>

記述の差し替えが終わりましたら、
記述中の「 写真(画像)の相対パス 」と書かれた箇所に、
先ほど保存した写真( 画像 )の「 相対パス 」を入力します。

すべての編集が終わりましたら、編集画面下の「 変更する 」ボタンを押します。

3.トップページの表示設定を変更します

最後に、編集した画面をトップページとして表示されるよう設定を変更します。

カスタマイズページの「 トップページのコンテンツ 」を開き、
一覧の下から2番目にある「 自作HTMLトップページ 」左のラジオボタン( 丸印 )を押します。

※丸印にチェックが入り、この項目が選択された状態になります。

設定を変更しましたら、編集画面下の「 変更する 」ボタンを押します。

4.トップページの表示を確認します

トップページを開いて、今回の編集内容が反映されているか確認します。