ブログカスタマイズの雑談BLOG

Seesaaブログに画像をアップロードする方法を説明します。
ブログに画像を使用することは多いと思いますし、例えばブログの背景に画像を使用することもあると思います。記事の中にたくさん画像が入っていた方が、閲覧者も読んでいて楽しい気分になると思いますので（文字だけの記事よりは華やかになりますからね）、画像は使った方がいいと思います。
Seesaaブログでは、簡単に画像をアップロードすることができます。



この記事ではまず、Seesaaブログに画像をアップロードする手順を説明します。
その後で、アップロードした画像をブログの背景画像に設定する方法を書いておきます。

Seesaaブログに画像をアップロードする

記事内で使用したい画像をパソコンのフォルダの中に準備しておきます。
画像を準備しておかないと話になりません。適当にフォルダを作っておいて、その中にブログで使用する画像を入れていくようにしたら、ごちゃごちゃしないですみますね。
まずはブログ記事用の画像を準備しておきましょう。



画像を準備したら、Seesaaブログの「管理画面＞ファイルマネージャー」をクリックして「ファイルのアップロード」の画面を開きます。






ブログを開いていると同時に、画像を入れているフォルダも開きます。
アップロードしたい画像を「クリック、もしくはここにファイルをドロップ」と書かれている部分にドラッグ＆ドロップします。






これでSeesaaブログに画像をアップロードできます。
ちゃんと「ファイル一覧」の中に画像が入っているのを確認します。






「ファイル一覧」の中から画像をクリックすると、別窓が開きます。
これが画像の設定をする部分です。
画像のタイトルを編集したり、タグを付けたり、サムネイルのサイズを変更することができます。





赤枠で囲っている部分が、その画像のURLです。
画像のURLは、例えばブログの背景に画像を使うような時に必要になります。



今回は「ファイルマネージャー」から画像をアップロードしましたが、同じような画面が、記事作成画面の下にもあります。ここでも同じやり方で画像をアップロードすることができます。
記事作成画面の下で画像のアップロードをする場合、記事に書く文章を考えながらその都度画像も考えて挿入できるので、すごく便利だと思います。

Seesaaブログに背景画像を入れる

新しくSeesaaブログを始めると、最初のブログは真っ白です。
何も記事を書いていない場合は本当に真っ白で、ブログタイトルとサイドバーのカレンダーや、サイドバーのタイトルが並んでいるだけの、簡素なブログです。
さきほど画像をアップロードする方法を説明しましたので、ここでは真っ白なブログに背景用の画像を設定したいと思います。

背景用の画像をアップロードしてURLを取得する

まずは背景に使いたい画像を準備します。
ネットで検索すると親切な方が背景用の画像を無料でダウンロードさせてくれます。
このブログに使用している背景画像も、ネットからダウンロードしました。
画像をダウンロードする時は、必ず規約を確認します。無料で頂くわけですから、製作者様の指示に従いましょう。もちろん、背景画像には自分で撮影した画像も使用できます。



画像を準備したら、Seesaaブログに画像をアップロードします。
アップロードの手順は上記で説明した通りです。
「ファイルマネージャ」でアップロードした画像をクリックすると、画像の詳細情報を確認することができます。





赤枠で囲っている部分が、画像のURLです。
アップロードした画像はネット上のココにあるからね、ってことです。
この赤枠の中のURLをクリックすると、画像が開きます。



画像を開いた時にパソコンのブラウザの上部に表示されているURL（ページのアドレス）部分をマウスでクリックすると、URL部分が反転して青色になります。
これをそのまま「Ctrlキー」＋「C」でコピーします。（右クリックでコピーでも大丈夫です）






今の状態は画像のURLをコピーしているだけなので、パソコンの「メモ帳」ソフトを開いて、「メモ帳」の中にコピーしたURLを貼り付けておきます。
「Ctrlキー」＋「V」で貼り付けることができますし、マウスの右クリックで貼り付けてもかまいません。（Windowsのパソコンならば「メモ帳」というソフトが入っているはずです。他のパソコンのことは私は知りません）


「メモ帳」は閉じずに、そのまま開いたままにしておいてください。

CSS（スタイルシート）で「body」タグを探す

Seesaaブログの「管理画面＞デザイン」を開き、「デザイン設定」をクリックします。
使っているテンプレートの名前が表示されているので、クリックして開きます。
デフォルトのままだとテンプレート名は「シンプルA. ホワイト 右カラム」です。
というか、このブログでは「シンプルA. ホワイト 右カラム」というテンプレートのカスタマイズをしていますので、他のテンプレートのことは知りません。



「シンプルA. ホワイト 右カラム」をクリックするとデザイン設定の画面になり、4つのタブ（「スタイルシート編集」「HTML編集」「コンテンツHTML編集」「カバー画像設定」）が表示されます。
4つのうち「スタイルシート編集」を選択します。
（通常、デザイン設定の画面では「スタイルシート編集」がデフォルトの画面になります）






「スタイルシート編集」に記述されているコード（文字）の中から、「body」を探します。
テンプレートがデフォルトのままだとおそらく348行目あたりです。





「body」は、ブログ全体の基本的な設定になります。
背景画像の指示がありませんので、「body」のコード記述に背景画像を指定するコードを追加します。

背景画像を指定して繰り返す

現在、パソコンの「メモ帳」には背景画像のURLが記載されている状態です。
そのURLの下に、下記の「追加するコード」をコピーして貼り付けます。
まだ「メモ帳」上での作業ですので気を付けてください。



下記コードの枠内すべてを選択してコピーし、「メモ帳」に貼り付けます。
コード内には赤色で表示している文字列がありますが、気にせずに全部「メモ帳」にコピーしてください。（文字列だけをコピーするので、赤い色はコピーされません）


＜「メモ帳」に追加するコード＞



コピーして貼り付けると、「メモ帳」には、背景画像のURLと追加したコードの2つが存在します。ブログに背景画像を入れるためには、上記コード記述内の赤色の文字の部分（URL部分）を編集する必要があります。



上記コードの赤字の部分は、今は「仮」で記述しています。
この赤字の部分を、使用したい背景画像用のURL（メモ帳に最初にコピーしたURL）と入れ替えます。
くれぐれも「"」は消さないでください。（URLを前後の「"」でURLを挟んでいます。注意してください）

●「background-image」で背景画像を指定しています。なので画像のURLの記述が必要です。
●「background-repeat」で「使用した画像を繰り返して表示する」という指示を出しています。使用している画像サイズは決まっていますので、そのままだと背景画像として成り立ちません。使用画像を繰り返して表示させることで、背景として成立するわけです。「繰り返す」という指示は絶対に必要になります。

作ったコードをCSS（スタイルシート）に記述する

赤字部分に背景画像用のURLを入れ替えたことで、「メモ帳」には画像を指定するコードができました。
元々のコードに、新しく作ったコードを貼り付けます。


スタイルシートの「body」の中に、追加用のコードを記述します。
注意していただきたいのは「}」です。
スタイルシートでの指示は「{」と「}」で囲んであげなければ有効になりません。
必ず「}」の前に、追加用のコードを記述してください。



まずは、「メモ帳」にできた新しいコード「background-image」と「background-repeat」を「Ctrlキー」＋「C」でコピーします。
そして、元々のコードの「zoom: 1;」の下に、「Ctrlキー」＋「V」で貼り付けます。
貼り付けることができたら、「保存」をクリックします。





＜編集後の「body」＞


●編集後の「body」内の記述はデフォルトの状態とは異なっています。フォントを「メイリオ」に指定していたりしますので、そこらへんは無視してください。大切なのは赤色の文字列の部分と、追加する位置です。


●どのタグに対する記述なのかがすぐにわかるように「見出し」を記述しています。
上記「/******* 全体の領域 *******/」という部分です。

CSS（スタイルシート）では「/*」と「*/」で囲まれた文字は、コード上では記述していますがブラウザ上では見えません。（これを「コメントアウト」と言います）
色んな指示をたくさん出すのがスタイルシートです。class名など複雑になってきますので、こうやって「見出し」を付けておくと便利です。
「/* 背景画像*/」や「/* 画像の繰り返し */」も、コメントアウトしていますからブラウザ上では見えません。私はこうやって、何に対する指示なのかを表記することが多いです。
すべてのカスタマイズが終わったら、見出しを消せばいいです。

コード編集後の実際のブログ（背景画像を設定）

Seesaaブログに背景画像を設定することができましたが、上記の画像のように、背景画像を繰り返しているだけなので記事コンテンツやサイドバーなどの境界が全くありません。
このままで良いという場合もあるでしょうが、もしもコンテンツと背景画像をきちんと分けて表示したいと思われる場合は、こちらの記事をご覧ください。






次の記事の紹介

次の記事では、Seesaaブログのフォントを変更する方法を説明します。