背景画像を固定してイケてる感を出す方法

こんばんは。

最近PCメガネが壊れて、毎日ブルーライトの脅威に曝されているまさです。

背景画像を変えてから、友人から「スクロールしても背景画像を固定したままにするのってどうやるの？」という質問を受けたので、今回はブログの背景画像を固定する方法についてご紹介したいと思います。

背景画像の固定とは？

背景画像が固定されている状況を分かりやすく説明するために、実際の背景画面を使ってみます。

この画面からスクロールしてみると、画像は動かずに文字の部分だけが下にスクロールされていくのがわかると思います。

イメージ的には、このように画像と文字の部分が分かれている感じですね。

それでは、早速固定する方法を見ていきましょう！

背景画像を固定する方法

背景を固定するには、CSSを編集する必要があります。

CSSとは、簡単に言うとWebページのレイアウトを指定することができる言語です。

まずは、はてなブログのデザイン欄から"デザインCSS"を選択します。

CSSを開くと、このようにCSSを編集できる欄が表示されるので、ここにコードを入力していきましょう。

背景画像を固定するCSSはこちら。

.headimg { 
    background-attachment:fixed;
    background-image: url("画像のURL");
    background-repeat: no-repeat;
    background-position: center;

このように、background-attachmentをfixedにすることで背景画像を固定することができます。
background-repeatは、スクロールして画像の1番下に達した際に再度同じ画像を表示させるかというもので、background-positionは画像の表示位置を表しています。
ぜひ、上記コードをコピペして使ってみてくださいね。

補足：画像のURLの取得方法

背景画像を固定するには、そもそも背景画像を設定しなければいけません。
まだ画像を設定していない人に向けて、画像のURLの取得方法をご紹介します。

あくまではてなブログユーザー用の方法なので、他のサイトを使っている方はGoogle先生に聞いてみてくださいね。

1.はてなフォトライフを開く

まずはじめに、はてなフォトライフを開きましょう。

2.アップロードを選択

アップロードを選択し、写真をアップロードしましょう。
アップロードされた写真は、こちらのように一覧で表示されます。
URLを取得したい写真を選択しましょう。

3.画像上で右クリック

URLを取得したい写真を選んだら、写真の上で右クリックを押します。
そこから、"画像アドレスをコピー"して、上記のコードのURL欄に貼り付けたら完了です！

最後に

ブログをやってる人が友人が多いので、参考になればと思って書いてみました。

デザインが綺麗なサイトって、自然ともう一度見たくなりますよね。

簡単なコードで変更できるので、ぜひ試してみてくださいね！
それでは、最後まで読んでいただいてありがとうございました！