Webフォントの適用(さくらインターネット)

2019年3月23日

ホーム>WordPress

コメント(0)

今更ですが、サイトのタイトルにWebフォントを適用してみました。

以下、その時の手順

コントロールパネルの「Webフォント」からドメインを登録した後、次の2つを記述。

<head>タグ内に以下のスクリプトを記述。

<script type="text/javascript" src="//webfonts.sakura.ne.jp/js/sakura.js"></script>

スタイルシートに以下を記述。

#site-title {
  font-family: "Shin Maru Go Regular";
}

これだけで、「#site-title」内の要素に、Webフォント「Shin Maru Go Regular」が適用されます。

公式サイトの説明→Webフォント機能 – さくらのサポート情報

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

2019年3月10日

ホーム>WordPress

コメント(0)

サイトを作成していて、背景画像をフルスクリーンで表示したい時があると思います。
普通は以下のように、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;

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