初期費用(1,050円)が無料になりました!

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

助け合い掲示板

困った時はみんなで解決!お気軽にご投稿ください

↑メインページに戻る

2
2014/10/15(水)  15:40 | カスタマイズ・デザイン | No.1607
desk
よくあるサイトの仕様のように、イラストなどの画像がトビラ(ENTER画面)となっていて、
その画面をクリックするとコンテンツの並ぶブログのページのようにカスタマイズしたいと思っています。

トビラ(ENTER画面)には、壁紙のように画面全体にイラストのみ(もしくはできるだけイラスト画像を大きく)を使用したいです。
どのようなカスタマイズ方法をすればいいのでしょうか?

よろしくお願いいたします。
2014/10/16(木)  14:53
deskさん、こんにちは。


http://clover.petit.cc/
拙サイトですが、こういうトップページにされたい、ということでしょうか?
※自分のプチでは、左下のタイトル文字をクリックすると日記1のページに進めるようになっています。

自分の場合、こういうのを実装するためのプログラムをプチとは別のレンタルサーバーに保存しておいて、
それをプチから呼び出すようにしています。


画面全体を覆う画像を実現するなら、
http://webdesignrecipes.com/how-to-full-page-background-image-with-css-and-jquery/
こちらのページの最初にある「1. CSSのみで画面いっぱいに背景画像」の方法を試してみると良いと思います。


実際にやってみました。
下記のHTMLソースを自作HTMLトップページのHTMLソース欄に記述して、
加筆すべき部分は修正して保存してみてください。

<html>
<head>
<title><?virtual ("../1tools/title.txt");?></title>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
<?virtual ("../1tools/sitedetail.txt");?>
<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>
<link rel="stylesheet" href="../1tools/common.css" type="text/css">
</head>

<body onLoad="setStyle();">

<style type="text/css">
img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;
  /* Set up proportionate scaling */
  width: 100%;
  height: auto;
  /* Set up positioning */
  position: fixed;
  /* またはabsolute; */
  top: 0;
  left: 0;
}

@media screen and (max-width: 1024px){
  img.bg {
  left: 50%;
  margin-left: -512px; }
}

div#container {
  position: relative; 
}
</style>

<img class="bg" src="画面全体を覆いたい画像の相対パス" alt="" />
<div id="container">
<a href="../banana"><img src="../0img/shim.gif" width="100%" height="100%" /></a>
</div>

</body>
</html>


仕組みとしては、ブラウザのウィンドウ全体を覆うような背景画像を配置しておいて、
その上に、これまたウィンドウ全体を覆う透明画像(shim.gif)を配置し、
その透明画像にリンクを張っている、という風になっています。

画面全体を覆いたい画像は、あらかじめプチの画像置き場に保存しておきます。
保存した際に表示される画像の相対パスを利用します。

<a href="../banana">の部分でリンク先のページを指定しています。
下記のURLにある「アドレス一覧」の先頭の「#」を取ったものを「banana」の代わりに記述すれば、
任意のページにリンクさせることができます。
2014/10/17(金)  01:37
desk
でこぽんさん

以前もたいへんお世話になりました!
このたびも懇切丁寧にありがとうございます!

まだ教えていただいた方法で作業していないのですが、やってみます。

↑メインページに戻る

1. 内容はみんなに分かるように、できるだけ詳しく書きましょう。
2. 質問する人も答えてあげる人も、相手を傷つけるような発言は控えてください。
3. 自分が言われて嫌なことは人にも言わないように。
4. ちょっとしたユーモアも忘れずに。
5. 寒いユーモアも暖かく見守ってあげましょう。
6. これらが守られていないコメントは削除することがあります。

助け合い掲示板への投稿は、プチをご利用のお客様のみ可能です。

投稿の際は、認証のためログインしてください。

※ご契約窓口に移動します

旧助け合い掲示板

旧助け合い掲示板の閲覧は、閲覧のみ可能です。
旧助け合い掲示板へ »