DQ10 まめぞぅのエリンギ便り

背景に画像を固定する方法 ~livedoorブロガーさん向け~

   

前略

 

だいぶ前に、ある方が言いました。

 

ある方……と、匿名にした意味がまったく無くなってしまいました。

このリプに対し、お教えしますよとお答えして早2週間。月日の経つものは早いものですな。

さて、そのイラストとは……。

 

ホユさんから戴きました右下にあるイラストのことです。

スクロールしてもじっと右下でたたずんでいます。頑なにその場を動かない意志の強さはまさに私そのものですね。

そんな様に感銘を受けたのか、うさまはこれを真似したいというわけです。

質問を受けたのがTwitterなので、DMで説明してもいいのですが、たまに書くこういった記事のほうが需要あったりするので記事にしてみます。

というわけで、今日の記事はlivedoorブロガーさん、とりわけ、うさま向けの記事となりますのでご了承ください。

CSSとテンプレートをちょこっといじるだけなので、自由度の高いFC2ブロガーさんも真似できると思います。アメブロとヤフーは出来ないこと多すぎるので諦めたほうがいいかと思います。

 

画像を用意する

うさまのブログを確認してみましょう。

 

匿名なのでモザイク処理しました。

すでに背景画像が設定されていますね。ここにただのJPEG画像をくっつけただけでは残念な結果に終わることでしょう。

何がどう残念になるのか。例えば……。

 

わかりやすく背景を緑にしていますが、これが普通のJPEG画像だと思ってください。

これをうさまのブログ画像に合成すると……。

 

はい、残念。

もうひとつあります。

 

これは、見る人が見れば背景が透明に見える不思議なPNG画像です(この画像自体はJPEG画像)。

これをうさまのブログに合成してみると……。

 

こう見えるわけです。

何が言いたいかというと、まずは背景を透過したPNG画像を用意してくださいということです。

貼り付けたい画像がJPEGっていう時点で透過されていないのは確実なので、何かしらのツールを使って透過し、PNGで保存してくださいね。ただ、JPEG画像って少なからずノイズがあるので、一色に見えても一色じゃないなんてことがあります。

 

例えば、この画像の背景は黄緑色一色に見えますよね。

 

これをWeb上で透過PNGを作ってくれるサービスで背景を透明にしようとすると……。

 

ぎゃああぁぁっ!!

これが許容値設定できるツールなら割りと簡単に透明化できるんですけどね。Photoshopとか……。

絵師さんが描いてくれたイラストを載せたいというのであれば、きっと透過されているか、されていなくてもPNGで保存されているだろうから大丈夫。たぶん。

 

画像をアップロードする

背景が透過されたPNG画像を用意できたら、次はブログにアップロードします。

あいにく私はlivedoorのブログを持っていないので、イベントスタッフの打ち合わせ用として用意されたブログを使わせてもらいます。

 

マイページの「画像/ファイル」をクリックします。

 

「ファイル管理」タブを開きます。

 

アップロードする場所に問題なければ「アップロード」をクリックし、用意した画像を指定します。

この場合だとルートフォルダにアップロードされますが、フォルダを作りたい場合はフォルダを作ってからそこにアップロードしてください。

 

「mamena_nurse.png」という画像ファイルがアップロードされました。

アップロードされた場所を確認するためにも、このファイルをクリックしてみてください。

 

ファイルの場所をメモするなり、コピーするなりしておきます。

 

スタイルシートに追記する

続いてスタイルシートに、画像を右下に居座らせるためのおまじないを追記します。

 

マイページの「ブログ設定」をクリックします。

 

デザイン/ブログパーツ設定の「PC」をクリックします。

スマホ用のテンプレートに設定してもいいですが、画面が狭く、メニューやら本文やらで隠れてほとんど見えませんので無駄です。

 

「カスタマイズ」タブを開きます。

 

「CSS」タブが開いていることを確認します。

そろそろ頭が痛くなってきた頃でしょうか?

もうちょっとなのでがんばってくださいね。

 

わかりやすいように、一番下に追記しましょう。

追記する内容は……。

 

こんな感じです。

内容を簡単に説明すると……。

 

.nurse{}

{}で閉じられた部分に名前を付けています。この場合「nurse」という名前を付けました。自分でつけた名前なので忘れないでしょうが、後から使いますので名前は覚えておいてください。

先頭のドットの付け忘れに注意してください。

 

position: fixed;

絶対的な座標を指定するよ。スクロールしても動かないでねという意味です。

 

bottom: 10%;

下端から全体の10%ほど離れた場所という意味です。ピクセルなどで指定してもOK。

bottom: 10px;

とすると、下端から10px上という意味になります。

 

right: 2%;

右端から全体の2%離れた場所という意味です。これもbottom同様ピクセルなどで指定できます。

お気付きでしょうが、bottomやrightをtopやleftに書き換えると左上に固定できます。色々試してみてください。

 

忘れずに保存しておきます。

 

HTMLに追記する

続いてトップページなどのHTMLを編集します。

マイページから「ブログ設定」、「デザイン/ブログパーツ設定」の「PC」、「カスタマイズ」タブまではスタイルシートの追記と同じです。

 

「トップページ」タブをクリックします。

 

BODYタグ(<body~>の部分)以下ならどこでも問題ないのですが、わかりやすいようにBODYタグ直下に追記します。

追記する内容は……。

 

私の場合、ファイルの場所は「http://blog.livedoor.jp/○○○/mamena_nurse.png」で、スタイルシートで付けた名前が「nurse」です。

保存したら「個別記事ページ」、「カテゴリアーカイブ」、「月別アーカイブ」にも同じようにBODYタグ直下に追記しましょう。

 

ブログを開いてみて、ちゃんと表示されるか確認してみましょう。

場所が気に入らない場合は、スタイルシートのbottomやrightの値をいじってベストなポジションを模索してください。

以上、livedoorブログで背景に画像を固定する方法でした。

 

おまけ

ほとんどのブラウザで問題なく表示されると思いますが、ちょっとクセのあるブラウザだとイラストが邪魔になってブログが読めないといったこともありえます。

そんな場合、特定のブラウザで見る場合にはイラストを表示させないということもできます。

HTMLに追記したIMGタグの代わりに以下を追加します。

 

こうすることで、ブラウザが勝手に送信しているユーザーエージェントというブラウザの名前のようなものに特定の文字が含まれていたら表示しないようにできます。一応参考までに覚えておくといいかもしれません。

何かあれば聞いてくださいね。

 

草々