風吹くままに

How To Customize Your Blog, Without The Knowledge Of CSS.(Only OPERA Weblog)
背景色と背景に使用しているテクスチャの変更。

§1．Where is changed?　（何処を変更するか）
The portion designated by the blue box is changed.
青で囲んだ部分を変更します。下図参照。


§2．Tools needed for this guide.（このガイドで必要なツール）

2-1 Text Editor
Usually, you can use "NOTEPAD".

2-2 Background Textures
There are a lot of sites that are provided many "Background Textures" on internet.
And most of those are free.
You should get one of those before beginning this guide.
Unfortunately, if you don't know any sites of background textures, please visit here.
There are some background textures for this guide and all of those was created by me.
It's free.

2-1 テキストエディタ。
通常「メモ帳」使用してください。お気に入りのテキストエディタがあればそれでもかまいません。

2-2 背景画像
インターネット上には様々な背景画像等の素材屋があります。殆どのところは無料ですので、このガイドを始める前に背景に使用する画像を入手しておいてください。
ご存知の素材屋がないのであれば、以下にアクセスしてください。このガイド用に作成した背景画像を置いてありますので適当にご利用ください。

§3．Customize（カスタマイズ）

[Note] Paragraph (1) of this guide is a common step in a series of this guide.
If you got your HTML and CSS, you can skip paragraph (1).

(1) To get your CSS.（使用するCSSを取得する）

1-1. Your "My page" is displayed.
1-2. Click the "Preferences" in your top menu.
1-3. Click "Web page layout" at the displayed page.
1-4. Check one of the themes that you want to use.
1-5. Choose the theme number that you want to use from the image below.
The theme number is bottom-right of each theme at the image.

1-6. Copy the link of the number corresponding (designed by the red text) to the theme that you selected.

http://my.opera.com/community/css/users/1/main.css
http://my.opera.com/community/css/users/2/main.css
http://my.opera.com/community/css/users/3/main.css
http://my.opera.com/community/css/users/4/main.css
http://my.opera.com/community/css/users/5/main.css
http://my.opera.com/community/css/users/6/main.css
http://my.opera.com/community/css/users/7/main.css
http://my.opera.com/community/css/users/8/main.css
http://my.opera.com/community/css/users/9/main.css
http://my.opera.com/community/css/users/10/main.css
http://my.opera.com/community/css/users/11/main.css

1-7. Paste it to the address box of your web browser, and then press [Enter] key. The CSS that you selected will be displayed.
1-8. Save it to your desktop. (File menu > Save as...)

この記事は他の変更方法も紹介していきますが、（１）に関しては全て同じです。既に必要なHTMLとCSSをダウンロードしているのであれば（２）から始めてください。
1-1. 自分のページを表示します。
1-2. トップメニューの"Preferences"をクリック。
1-3. 表示されたページで"Web page layout"をクリック。
1-4. 使用したいテーマをクリックします。
1-5. 選択したテーマの番号を上の1-5に表示してある図から選択します。
1-6. 上の英文の　”1-6”のリストから、その番号に対応するURLをコピーします。”1-5”の図で6番を選択した場合は、リストの6番（赤字の部分）を選択します。
1-7. ブラウザのアドレス欄に、上でコピーしたアドレスをペーストして[Enter]キーを押します。CSSが表示されます。
1-8. 表示されたCSSをデスクトップに保存します。


(2) To upload your background textures and get the link of it.（背景画像をアップロードする）

2-1. Your "My page" is displayed.
2-2. Click the "Preferences" in your top menu.
2-3. Click "My files" at the displayed page.
2-4. Click "Upload new file" tab.
2-5. In the displayed page, don't select any directory to upload the file. Select a file that you want to upload and click "Upload" button.
2-6. Just after upload, scroll down the shown page to bottom.
2-7. Right click on your uploaded file. And then get the link to it from "Copy link address" of context menu.

<<e.g.>> If your account is "foo" and the filename is "sample.gif", the link that you got is like below:
http://my.opera.com/foo/homes/files/sample.gif
[Note] Pay attention to the text designed by the blue.
[Note] You can specify "JPG", "PNG" and "GIF" as a background texture.

2-1. 自分のページを表示します。
2-2. トップメニューの"Preferences"をクリック。
2-3. 表示されたページで"Web page layout"をクリック。
2-4. "Upload new file"　タブをクリック
2-5. 表示されたページで、ファイルをアップロードするディレクトリの指定をせずに、ファイルをアップロードします。
2-6. アップロード後に表示されたページでスクロールダウンします。下の方に、今アップしたファイルがあります。
2-7. 今、アップしたファイルの上で右クリックしコンテキストメニューから「リンクのアドレスをコピー」を選択します。

＜例＞　あなたのアカウントが「foo」、アップしたファイル名を「Sample.gif」と仮定すると、画像のリンクは
http://my.opera.com/foo/homes/files/sample.gif
のようになります。背景画像に使用できる画像フォーマットは、"JPG", "PNG","GIF"です。

(3) To get "body" enntry of your CSS.（CSS中のbodyエントリを取得する）

3-1. Open your CSS which was saved at paragraph (1) with text editor.
3-2. Search "body" in your CSS. You will find similar "body" below.

<<e.g.>>
body {
background:#b8c2cf url(/community/graphics/users/7/bg.gif);
margin:0;
padding:0;
font-family:'lucida grande','lucida sans unicode','bitstream vera sans','trebuchet ms',arial,sans-serif;
font-size:12px;
text-align:center;
color:#3a6882;
}

In "Body" above, the background entry is specified for "background:#b8c2cf url(/community/graphics/users/7/bg.gif);".
The specification of background color is "#b8c2cf".
The specification of background texture is "url(/community/graphics/users/7/bg.gif)".

3-1. （１）で保存したCSSをテキストエディタで開きます。
3-2. CSS中でbodyエントリを探します。上の英文での項の”3-2”に示したbody類似になっているはずです。

上記の例で、背景はbackground:#b8c2cf url(/community/graphics/users/7/bg.gif);として指定されています。
背景色の指定が　#b8c2cf
背景画像の指定が　url(/community/graphics/users/7/bg.gif)です。


(4) To replace background texture.（背景画像の置き換え）

4-1. Replace url, designated by the red text, with the URL of background texture that got at paragraph (2).

<<e.g.>>
background:#b8c2cf url(http://my.opera.com/foo/homes/files/sample.gif);
[Note] Don't delete ";" and "space". Refer to the image below.


4-1. （2）で取得した背景画像のURLで　/community/graphics/users/7/bg.gif　を置き換えます。

＜例＞
background:#b8c2cf url(http://my.opera.com/foo/homes/files/sample.gif);
上述類似の指定になります。この時、色指定と画像指定の間にある「半角スペース」と行末の「セミコロン」を削除しないようにしてください。上図参照。

(5) To replace background color.（背景色の置き換え）

In "Body" above, the specification of background color is "#b8c2cf".
This is hexadecimal.
We can specify it by RGB color.

5-1. Get RGB color you want to use to background color.
5-2. Replace color value, designated by the blue text, with the new background color value.

<<e.g.>>
The new color value that you got is assumed to be rgb(255,200,15).
The specification of the background entry becomes the following.

background:rgb(255,200,15) url(http://my.opera.com/foo/homes/files/sample.gif);

[Note] Don't delete ";" and "space". Refer to the image above.
[Note] If you don't know to get a RGB color, refer to here.

上述のbodyでは、背景色は　#b8c2cf　として指定されています。この値は16進数で表現されていますが、16進数の代わりにRGBカラー値を使用することも可能です。

5-1. 使用したいRGB色を取得します。
5-2. 現在の背景色を使用したい背景色で置き換えます。

＜例＞
例えば、設定したい値がrgb(255,200,15)であれば、backgroundエントリの指定は以下となります。

background:rgb(255,200,15) url(http://my.opera.com/foo/homes/files/sample.gif);

[Note] 上でも記しましたが、色指定と画像指定の間にある「半角スペース」と行末の「セミコロン」を削除しないようにしてください。
[Note] もしも、RGBカラーの値の取得方法を知らないのであれば、以下の記事を参照してください。

(6) To set your customized CSS.（カスタマイズしたCSSを設定する）
6-1. Your "My page" is displayed.
6-2. Click the "Preferences" in your top menu.
6-3. Click "Web page layout" at the displayed page.
6-4. Click "custom style sheet."
6-5. Paste the changed "body" on "Enter CSS:".

<<e.g.>>
body {
background:rgb(255,0,0) url(http://my.opera.com/foo/homes/files/sample.gif);
margin:0;
padding:0;
font-family:'lucida grande','lucida sans unicode','bitstream vera sans','trebuchet ms',arial,sans-serif;
font-size:12px;
text-align:center;
color:#3a6882;
}

6-6. Check "Use my custom style sheet together with the current theme".
6-7. Click "SAVE" button.
6-8. When it is not displayed by the changed setting, click "Reflesh" button of your browser to display your new specification.

6-1. 自分のページを表示します。
6-2. トップメニューの"Preferences"をクリック。
6-3. 表示されたページで "Web page layout" をクリック。
6-4. "custom style sheet."をクリック。
6-5. "Enter CSS:"に今変更したbodyをペーストします。
＜例＞
body {
background:rgb(255,0,0) url(http://my.opera.com/foo/homes/files/sample.gif);
margin:0;
padding:0;
font-family:'lucida grande','lucida sans unicode','bitstream vera sans','trebuchet ms',arial,sans-serif;
font-size:12px;
text-align:center;
color:#3a6882;
}
6-6. "Use my custom style sheet together with the current theme"をチェックします。
6-7. "SAVE" ボタンをクリックします。
6-8. 変更した設定で表示されていない場合は、ブラウザの「更新」ボタンをクリックしてください。