スタイルシートで背景画像のフルスクリーン表示

サイトを作成していて、背景画像をフルスクリーンで表示したい時があると思います。
普通は以下のように、body要素に対して、スタイルシートでbackgroundプロパティを指定することが多いのではないでしょうか。

body  {
  background-image: url("./img/background.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
  height:100%;
  width:100%;
}

※ 各プロパティの説明
background-image: url(“./img/background.jpg”);
背景画像の指定。(WordPressで、テーマのスタイルシートがある階層にimgフォルダを作成して、そこに画像ファイルを置く場合)

background-repeat: no-repeat;
背景画像が複数表示されないように。

background-position: center center;
背景画像が中央に表示されるように。

background-attachment: fixed;
画面をスクロールしても背景画像が移動しないように。

background-size: cover;
背景画像がブラウザ全体を覆うように。

height:100%;
width:100%;
ブラウザ幅に合わせて、背景画像が拡大、縮小されるように。

これで一見うまくいくと思いますが、ブラウザで表示したとき周囲にわずかに余白ができてしまいます。

この原因がわからず、私は結構な時間を使ってしまいました。。orz

原因は、ブラウザ側で設定してあるデフォルトスタイルシートと呼ばれるものです。
body要素では、予めmargin: 8px;が指定されているブラウザが多いです。
なので、余白をなくしたい場合は、body要素に以下を追記します。

margin: 0;

この他にもブラウザ側で色々と指定されているスタイルがあります。
基本的なデザインを行う場合は、ブラウザの開発者ツールなどで予め確認しておくことをおすすめします。

WordPressでPOST-MAILの設置

せせらぎの音のページ作成時に、 KENT-WEB さんのPOST-MAILの設置をさせていただきましたので、その手順を記録しておきます。

POST-MAIL(フォームメール)からUTF-8版をダウンロード。

・zipファイルを展開、中のフォルダ名をpostmailに変更。

・index.htmlまたは記事内に記載したform actionを次のように変更。

<form action="https://tsuredure-diary.info/postmail/postmail.cgi" method="post">

・init.cgiの編集

~
# 送信先メールアドレス、
$cf{mailto} = '送り先のメールアドレスを入力';
~
# sendmailのパス【サーバパス】
$cf{sendmail} = '/usr/sbin/sendmail';(サクラインターネットの場合)
~
フォームのname値、メール件名の変更。
~
# 送信後の戻り先【URLパス】
$cf{back} = 'https://tsuredure-diary.info/post/740/';
~

・なぜか、postmail.cgiのはじめの行の#!/usr/local/bin/perlを#!/usr/bin/perlに変更するとInternal Errorとなってしまう。(サクラインターネットのプログラムパスとなっているが・・→CGI・PHP・SSI について – さくらのサポート情報)なので、postmail.cgiは編集せず。

・WordPressのはじめのディレクトリ(wp-config.phpがあるディレクトリ)にpostmailのフォルダをアップロード。

・サクラインターネットのファイルマネージャーで、ファイルのプロパティから属性値を以下のように変更。
postmail.cgi → 755 or 705
check.cgi → 755 or 705
init.cgi → 666 or 604
dataフォルダ内
log.cgi → 666 or 606
ses.cgi → 666 or 606

・ブラウザから、https://サイトのドメイン/postmail/check.cgiにアクセスして動作チェック。

・すべてOKならcheck.cgiを削除して終了。