FC2ブログ
ご訪問ありがとうございます。パソコンを使っていて試行錯誤したことを記載した備忘録です。
CSSで表示したヘッダーの画像にリンクを貼りたい場合にどうすればよいのか、ということを悩みまして、検索で調べたり自分で試したりしました。完璧とはいえませんがどうにかリンクを貼りました。ここではその手順を述べてみます。


今回やりました方法は、スタイルシートで表示した画像に、透明な画像を重ねてその重ねた画像にリンクを貼るというものです。ですから正確に言えば背景画像にリンクを貼るではなくて、背景画像にかぶせた画像にリンクを貼るです。

まずは背景画像と同じ大きさの透過画像を作ります。私が使ったツールは「JTrim」です。これで作れます。無料です。窓の杜などからダウンロードできます。

JTrimでメニューのファイルから新規作成をクリックします。

画像の大きさを指定します。背景画像と同じ大きさを指定してOKをクリックします。

そしてOKをクリックすると白い画像が登場するのですが周りの背景も白いのでさっぱりわかりません。メニュー「表示」の背景色でバックの色を替えられます。そうすると作った画像がわかります。

最後にこの真っ白な画像を透過するようにします。

メニュー「イメージ」から透過色設定をクリックします。マウスがスポイトのような形になるのでそのまま先ほどの真っ白な画像の上で左クリックします。そうすると先ほどまで真っ白だった画像がチェック模様に変わり透過する画像に変わりました。

あとは保存してください。画像の準備は以上です。




まずはindex.htmlなどのHTML側に以下の記述を加えます。
加える場所は、基本的に<body>から</body>のの間でしたらどこには位置してもよいと思います。いろいろ試してみてください。


<a id="header" href="http://www.example.or.jp/example.html">
<DIV STYLE="POSITION:absolute; LEFT:30px; TOP:30px;">
<img src="img/blank.gif" alt="" width="530" height="102" border="2">
</DIV>
</a>
 

青色の所は皆さんがお使いになる画像の名前、大きさやリンクさせたいアドレスによって変わるところです。

赤字のところが、背景画像にかぶせる透明の画像(透過画像)の位置を調節しているところです。

いちばん最初の<a id="header"の所はCSS内でその背景画像が記載されている所の#以降の文字です。例えばわたしのCSS(スタイルシート)では以下のようになっています。

以下CSS(スタイルシート)より-------------->
#header {
  width: 100%;
  height: 220px;
  margin-bottom: 20px;
  position: relative;
  background: url(img/bg-header.jpg) no-repeat 230px 100px;
}
ここまで-------------------------------------------->


スタイルシートのこの場所で背景画像を指定してますのでidはHeaderとしております。



 DIV STYLE=で先ほどの透過画像の位置を調節しています。画像といっても透明ですので見えませんが、かろうじて枠線だけは見えます。(この枠線は後で<IMG~の所のBORDER=”2” をBORDER=”0” に変えることで消します。)

あとは、ブラウザで見ながらLEFT:の数字と、TOP:の数字を調節してうまく重なるまで訂正してはアップロードして確認するを繰り返します。(結構根気がいりました)

うまく合わせたら最後に枠線を消すために、<IMG SRC~以降のborder=”” を ”” に書き換えます。そうすると以下のようになります。(例)

<img src="img/blank.gif" alt="" width="530" height="102" border="0">


最後に
この方法ですと、インターネットエクスプロラーとファイヤーフォックスで少し縦方向の位置がずれました。私の場合はそんなにシビアには追求しませんでしたのでインターネットエクスプロラーの方でぴったりに合わせました。ファイヤーフォックスで見るとリンク位置(透過画像の位置)が若干10ピクセルほど、下にずれています。
スポンサーサイト




FC2blog テーマ:ホームページ・ブログ制作 - ジャンル:コンピュータ

【2010/01/19 00:59】 | ホームページ作成
トラックバック(0) |
ぷららはプロバイダーが提供するホームページの中でも、珍しくCGIを使うことができます。ぷららの会員のみが持てるホームページです。

その代わり、有料ですが各セット契約(ぷららライト、ぷらコミ0、フレッツADSLライトセット以外)には、フリーチケットがついています。そのフリーチケットを使えばある一定の金額までは事実上無料と同じです。

ぷららでは、メールフォームや掲示板、チャット名そのCGIを提供しています。このサービスを使えば、タグをホームページに埋め込むだけですぐに使えます。(ぷらら提供無料CGIのURL:http://www.plala.or.jp/access/community/phps/cgi_main.html


私の場合、最初はこのぷららが提供するメールフォームCGIを使用していましたが、メールフォームに記載してくれた人に、自動返信で送信完了のお知らせを送りたくなったために、無料で提供されているSYNCKGRAPHICAさんの「簡単設置!自動返信機能付メールフォームCGI」を使用する事にしました。

今回はその設定についてです。

まずは、ぷららが提供してくれるCGI専用のサーバーの申し込み(無料)をします。

ぷららでは、普通のホームページスペース(サーバー)とは別に、CGIを動かすための専用のサーバーが5メガバイト分無料で提供してもらえます。無料ですが登録が必要です。登録はホームページのID(ユーザー名)とパスワードで行うことができます。

ぷららの「オプションサーバ
http://www.plala.or.jp/access/community/phps/option_main.htmlのページより、【●サービス紹介・利用方法, 開設・確認・変更・削除】と書いてあるところをクリックします。

次の画面では【●ユーザCGI 利用規約 アカウント開設】をクリックします。後は画面を見ながら順次クリックしていけば、CGIページの申し込みは終わります。


申し込みが終わりましたら、設定に入ります。

send.cgiとcheck.cgiをterapad(テキストエディタ)で開いてパス(場所)などの記載をぷらら用に変えます。以下の例は、SYNCKGRAPHICAさんの「簡単設置!自動返信機能付メールフォームCGIの場合です。

-----------send.cgi設定例ここから----------------

#!/usr/local/bin/perl

## SYNCKGRAPHICA Mailform 6.1 / UPDATE::2009-04-02
#use Jcode;
require 'jcode.pl';

##########################################################
##一般的な設定############################################
##########################################################

#00.テスト時の誤送信を制御 / 0にしないとメールが飛びません
$conf{'debug'} = 0;

#03.スパムブロック([URL]や[LINK]が含まれた送信をブロック) 1:ON / 0:OFF
$conf{'spam_block'} = 1;

#04.sendmailのパス(サーバ会社へお問い合わせ下さい)
$conf{'sendmail'} = '/usr/lib/sendmail';

#06.設置者のアドレス(カンマ区切り)
$conf{'mailto'} = 'info@●●●.jp,thanks@●●●.jp,webmaster@●●●.jp';

#07.送信完了時にリダイレクトするサンクスページ
$conf{'thanks'} = 'http://www▲.plala.or.jp/■■■/○○○.html';

#08.設置者に届くメールの件名
$conf{'subject'} = 'メールフォームより';

#09.送信者に届くメールの件名
$conf{'res_subject'} = 'ご意見・ご質問ありがとうございました';

----------send.cgiここまで-------------

まだこの後に続くのですが、例としてsend.cgiの最初の一部分を書かせていただきました。

私の場合、メールフォームを送るための(メールフォームを載せたページの)HTMLファイルもCGIサーバー内にアップロードしました。つまり、http://cgiで始まるアドレス内へアップロードしました。なぜかと言いますと、通常ホームページを設置するhttp://www▲(三角は数字)のアドレスへアップロードしてメールフォームを起動しても「SPAM BLOCK」とでてしまい、送れなかったからです。(なぜかはわかりません)


【2009/07/03 17:32】 | ホームページ作成
トラックバック(0) |

プロバイダが提供するホームページサービスでCGIが使えるところの一つに「ぷらら」があります。料金は開設時にかかる開設料が315円、毎月かかるのは5メガバイトあたり63円です。

このホームページサービスは、ぷららの会員でないと利用できません。

ぷららライト、ぷらコミ0、フレッツADSLライトセット以外のプランを利用しているとフリーチケットと呼ばれるぷららのサービスに使えるポイントがもらえるので、それをこのホームページサービスに当てることができるようです。

プロバイダが提供する”おまけ”のホームページではCGIなどは使えないと思い込んでいたので、ぷららのこのサービスはかなり画期的だと思いました。

CGIが使えれば、ホームページの中にメールフォームを付けることもできますし、掲示板なども独自に付けられます。CGIが使えない場合には、これらを使いたいと思えば有料、もしくは無料(広告付き)の外部のサービスを使うしかありません。

ただしこのCGIにも一定の制限はあるようです。以下ぷららのホームページからの抜粋です。

8. 利用制限について

サーバの安定稼働を実現するために、お客様が設置されるCGIに対して、以下の制限を設けております。

お客様ごとに同時に起動できるCGIの数は一つです。

既に一つCGIが起動している場合、次に要求されたCGIは、はじめから起動しているCGIが終了した時点で、実行されます。一定時間待機したにも関わらず、はじめから起動しているプロセスが終了しない場合には、そのCGIを中断します。

1CGIあたりのCPU割り当て時間を制限いたしました。一定時間を超えてCGIがCPUを使った場合、そのCGIを中断いたします。



これらの制限があったとしても、私のような一般のユーザーからすれば、プロバイダーが提供するホームページサービスとしてはかなり画期的だとおもいます。


【2009/06/29 15:51】 | ホームページ作成
トラックバック(0) |
メニューを作るときにCSSを使って作ったのですが、ファイヤーフォックスとインターネット・エクスプロらーでは表示のされ方が違い困りました。

メニューの表示に<ul>を使ってインライン要素で横並べにしました。しかし、IEではきちんと枠内におさまるのにファイヤーフォックスだと左側に余白が生じます。

問題のタグは下です。
<div id="header-menu">
   <ul>
    <li><a href="#">HOME</a></li>
    <li><a href="#">お知らせ</a></li>
    <li><a href="#">サービスメニュー</a></li>
    <li><a href="#">料金について</a></li>
    <li><a href="#">よくあるご質問</a></li>
    <li><a href="#">サイトマップ</a></li>
    <li><a href="#">お問い合わせ</a></li>
   </ul>
</div>

divの後にCSSのid=header-menuを記載してあるのです。

解決した方法は、DIVを使わずに以下のようにしました。

   <ul id="header-menu">
    <li><a href="#">HOME</a></li>
    <li><a href="#">お知らせ</a></li>
    <li><a href="#">サービスメニュー</a></li>
    <li><a href="#">料金について</a></li>
    <li><a href="#">よくあるご質問</a></li>
    <li><a href="#">サイトマップ</a></li>
    <li><a href="#">お問い合わせ</a></li>
   </ul>

<ul>の後にCSSのid=~をつなぐことでIEとファイヤーフォックスの表示を同じにすることができました。

【2009/03/24 16:36】 | ホームページ作成
トラックバック(0) |