[GUIDE-2] How to decorate your title of article.
Saturday, 20. May 2006, 00:27:09
How To Customize Your Blog, Without The Knowledge Of CSS. (Only OPERA Weblog)
Blogタイトルの飾りつけ。
§1．Where is changed? (何処を変更するか)
Reffer to the image below.
上図参照してください。
§2．Tools needed for this guide.（このガイドで必要なツール）
2-1 Text Editor
Usually, you can use "NOTEPAD".
2-2 Background Textures
We need a background texture.
I will describe in each subsection of "§3. Customize".
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 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...)
この記事は他の変更方法も紹介していきますが、（１）に関しては全て同じです。既に必要な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 get ".title" enntry of your CSS.（CSS中の.titleエントリを取得する）
2-1. Open your CSS which was saved at paragraph (1) with TextEditor.
2-2. Search ".title" under "/* :: BLOG :: */" section in your CSS. You will find similar ".title" below.
<<e.g.>>
.post .title {
margin:0 0 10px 0;
font-size:20px;
line-height:normal;
}
2-1.(1)項で入手したCSSをテキストエディタで開きます。
2-2."/* :: BLOG :: */"の下にある".title"エントリを見つけます。上の例のようになっているはずです。
(3) Paste ".text" entry to TextEditor. (".title"部分のコピー&ペースト)
Copy like the following and paste ".text" entry to TextEditor.
[NOTE]The specification of the title's background doesn't exist in above-mentioned ". title".
<<e.g.>>
.title {
margin:0 0 10px 0;
font-size:20px;
line-height:normal;
}
上の例に示したようにコピーし、テキストエディタに貼り付けます。上記の例ではタイトルの背景に関する指定が無いことに注意してください。
(4) Let's decorate the background of the title. （タイトルに背景を飾る）
4-1. For adding a background-color. (背景色を設定するには)
A color value of CSS usually use hexadecimal.
However we can use RGB color value.
4-1-1. Get RGB color value.
Please get RGB color value you wish.
If you don't know how to make RGB color value, please refer to HERE.
4-1-2. Add a "background" property to ".title" entry.
If you wish to add rgb(181,230,230) :
<<e.g.>>
.title {
background:rgb(181,230,230);
margin:0 0 10px 0;
font-size:20px;
line-height:normal;
}
[NOTE] Don't forget ":" and ";"
Sample Image.
4-1-3. To continue your setting, move to paragraph(5) of this article.
通常、色の指定は16進数を用いることが多いのですが、RGBカラーも使用できます。設定したいRGBカラーを取得してください。RGBカラーの作成方法をご存じない場合は以下の記事を参考にしてください。
"title"エントリにbackgroundプロパティを追加します。設定したい色がrgb(181,230,230)であれば、上述の例のように指定します。この時、”：”と”；”を忘れないでください。
サンプル画像のようになります。この設定でカスタマイズする場合は(5)項に移動してください。
4-2. For adding a texture to the whole of title's division. (タイトル領域全体をテクスチャで飾る)
4-2-1. Get a background texture.
The size of texture is arbitrary.
4-2-2. Upload it to your site and get its URL.
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 now.
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.
* Your "My page" is displayed.
* Click the "Preferences" in your top menu.
* Click "My files" at the displayed page.
* Click "Upload new file" tab.
* 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.
* Just after upload, scroll down the shown page to bottom.
* 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.
You need to replace "foo" and "sample.gif" with your account and your filename.
[Note] You can specify "JPG", "PNG" and "GIF" as a background texture.
4-2-3. Add a "background" property to ".title" entry.
If your texture's URL is "http://my.opera.com/foo/homes/files/sample.gif" :
<<e.g.>>
.title {
background:url("http://my.opera.com/foo/homes/files/sample.gif");
margin:0 0 10px 0;
font-size:20px;
line-height:normal;
}
[NOTE] Don't forget ":", "space" and ";".
[Note] Pay attention to the text designed by the blue.
You need to replace "foo" and "sample.gif" with your account and your filename.
Sample Image
If you also want to add background color and its color value is RGB(181,230,230) :
<<e.g.>>
.title {
background:rgb(181,230,230) url("http://my.opera.com/foo/homes/files/sample.gif");
margin:0 0 10px 0;
font-size:20px;
line-height:normal;
}
[NOTE] Don't forget ":", "space" and ";".
[Note] Pay attention to the text designed by the blue.
You need to replace "foo" and "sample.gif" with your account and your filename.
Sample Image
4-2-4. To continue your setting, move to paragraph(5) of this article.
4-2-1. 画像のサイズは任意です。
4-2-2. インターネット上には様々な背景画像等の素材屋があります。殆どのところは無料ですので、このガイドを続ける前に背景に使用する画像を入手しておいてください。
ご存知の素材屋がないのであれば、以下にアクセスしてください。このガイド用に作成した背景画像を置いてありますので適当にご利用ください。
・ 自分のページを表示します。
・ トップメニューの"Preferences"をクリック。
・ 表示されたページで"Web page layout"をクリック。
・ "Upload new file" タブをクリック
・ 表示されたページで、ファイルをアップロードするディレクトリの指定をせずに、ファイルをアップロードします。
・ アップロード後に表示されたページでスクロールダウンします。下の方に、今アップしたファイルがあります。
・ 今、アップしたファイルの上で右クリックしコンテキストメニューから「リンクのアドレスをコピー」を選択します。
＜例＞ あなたのアカウントが「foo」、アップしたファイル名を「Sample.gif」と仮定すると、画像のリンクは
http://my.opera.com/foo/homes/files/sample.gif
のようになります。
"foo"をあなたのアカウントに"sample.gif"をあなたが使用するテクスチャのファイル名に変更します。
背景画像に使用できる画像フォーマットは、"JPG", "PNG","GIF"です。
4-2-3.".title"エントリに"background"プロパティを追加します。あなたの画像のアカウントを"http://my.opera.com/foo/homes/files/sample.gif" とすると以下のように指定します。
.title {
background:url("http://my.opera.com/foo/homes/files/sample.gif");
margin:0 0 10px 0;
font-size:20px;
line-height:normal;
}
これに背景色をつける場合は以下のように指定します。
.title {
background:rgb(181,230,230) url("http://my.opera.com/foo/homes/files/sample.gif");
margin:0 0 10px 0;
font-size:20px;
line-height:normal;
}
それぞれサンプル画像は上のようになります。
4-2-4. この指定でカスタマイズする場合は(5)項に進んでください。
4-3. For adding a texture like upperline/underline. (テクスチャをアンダーラインやアッパーラインのように加える)
4-3-1. Get a background texture.
The texture's width is arbitrary, but its height should be smaller than the "font-size"(default 20px).
I recommend its height to be adjusted to 10pixels or less.
4-3-2. Upload it to your site and get its URL.
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 now.
* Your "My page" is displayed.
* Click the "Preferences" in your top menu.
* Click "My files" at the displayed page.
* Click "Upload new file" tab.
* 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.
* Just after upload, scroll down the shown page to bottom.
* 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.
You need to replace "foo" and "sample.gif" with your account and your filename.
[Note] You can specify "JPG", "PNG" and "GIF" as a background texture.
4-3-3. Add a "background" property to ".title" entry.
If your texture's URL is "http://my.opera.com/foo/homes/files/sample.gif" :
* Decorate your title like the upperline.
Specify "top" to "background" property.
<<e.g.>>
.title {
background:url("http://my.opera.com/foo/homes/files/sample.gif") top repeat-x;
margin:0 0 10px 0;
font-size:20px;
line-height:normal;
}
[NOTE] Don't forget ":", "space" and ";".
If you also want to add background color and its color value is RGB(181,230,230) :
<<e.g.>>
.title {
background:rgb(181,230,230) url("http://my.opera.com/foo/homes/files/sample.gif") top repeat-x;
margin:0 0 10px 0;
font-size:20px;
line-height:normal;
}
[NOTE] Don't forget ":", "space" and ";".
* Decorate your title like the underline.
Specify "bottom" to "background" property.
<<e.g.>>
.title {
background:url("http://my.opera.com/foo/homes/files/sample.gif") bottom repeat-x;
margin:0 0 10px 0;
font-size:20px;
line-height:normal;
}
[NOTE] Don't forget ":", "space" and ";".
Sample Image
If you also want to add background color and its color value is RGB(181,230,230) :
<<e.g.>>
.title {
background:rgb(181,230,230) url("http://my.opera.com/foo/homes/files/sample.gif") bottom repeat-x;
margin:0 0 10px 0;
font-size:20px;
line-height:normal;
}
[NOTE] Don't forget ":", "space" and ";".
Sample Image
4-3-4. To continue your setting, move to paragraph（5） of this article.
4-3-1. 画像の幅は任意ですが、高さの方は10ピクセル以下にしたほうが良いように思います。
4-3-2. インターネット上には様々な背景画像等の素材屋があります。殆どのところは無料ですので、このガイドを続ける前に背景に使用する画像を入手しておいてください。
・ 自分のページを表示します。
・ トップメニューの"Preferences"をクリック。
・ 表示されたページで"Web page layout"をクリック。
・ "Upload new file" タブをクリック
・ 表示されたページで、ファイルをアップロードするディレクトリの指定をせずに、ファイルをアップロードします。
・ アップロード後に表示されたページでスクロールダウンします。下の方に、今アップしたファイルがあります。
・ 今、アップしたファイルの上で右クリックしコンテキストメニューから「リンクのアドレスをコピー」を選択します。
＜例＞ あなたのアカウントが「foo」、アップしたファイル名を「Sample.gif」と仮定すると、画像のリンクは
http://my.opera.com/foo/homes/files/sample.gif
のようになります。
"foo"をあなたのアカウントに"sample.gif"をあなたが使用するテクスチャのファイル名に変更します
背景画像に使用できる画像フォーマットは、"JPG", "PNG","GIF"です。
4-3-3. ".title"エントリに背景となるテクスチャを指定します。
背景画像をアッパーラインのように設定するには以下のように指定します。
.title {
background:url("http://my.opera.com/foo/homes/files/sample.gif") top repeat-x;
margin:0 0 10px 0;
font-size:20px;
line-height:normal;
}
この時"："、"スペース"、"；"を忘れないようにしてください。
アッパーラインのように指定するには"background"プロパティに"top"を指定します。
これに背景色もつける設定は以下となります。
.title {
background:rgb(181,230,230) url("http://my.opera.com/foo/homes/files/sample.gif") top repeat-x;
margin:0 0 10px 0;
font-size:20px;
line-height:normal;
}
背景画像をアンダーラインのように設定するには以下のように指定します。
.title {
background:url("http://my.opera.com/foo/homes/files/sample.gif") bottom repeat-x;
margin:0 0 10px 0;
font-size:20px;
line-height:normal;
}
この時"："、"スペース"、"；"を忘れないようにしてください。
アンダーラインのように指定するには"background"プロパティに"bottom"を指定します。
これに背景色もつける設定は以下となります。
.title {
background:rgb(181,230,230) url("http://my.opera.com/foo/homes/files/sample.gif") bottom repeat-x;
margin:0 0 10px 0;
font-size:20px;
line-height:normal;
}
4-3-4. この指定でカスタマイズする場合は（5）項に進んでください。
4-4. For adding a texture in front of your title. (タイトルの前にテクスチャを追加する)
4-4-1. Get a background texture.
I recommend a texture's width to be adjusted to about 15pixels and its height should be smaller than the "font-size"(default 20px).
4-4-2. Upload it to your site and get its URL.
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 now.
* Your "My page" is displayed.
* Click the "Preferences" in your top menu.
* Click "My files" at the displayed page.
* Click "Upload new file" tab.
* 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.
* Just after upload, scroll down the shown page to bottom.
* 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.
You need to replace "foo" and "sample.gif" with your account and your filename.
[Note] You can specify "JPG", "PNG" and "GIF" as a background texture.
4-4-3. Add a "background" property to ".title" entry.
If your texture's URL is "http://my.opera.com/foo/homes/files/sample.gif" :
<<e.g.>>
.title {
background:url("http://my.opera.com/foo/homes/files/sample.gif") repeat-y;
margin:0 0 10px 0;
font-size:20px;
line-height:normal;
padding:0 0 0 20px;
}
[NOTE] Don't forget ":" and ";".
[NOTE] To avoid piling up the heading of title string on the texture, we need to move it backward.
So we added "padding" property.
Sample Image
If you also want to add background color and its color value is RGB(181,230,230) :
<<e.g.>>
.title {
background:rgb(181,230,230) url("http://my.opera.com/foo/homes/files/sample.gif") repeat-y;
margin:0 0 10px 0;
font-size:20px;
line-height:normal;
padding:0 0 0 20px;
}
[NOTE] Don't forget ":", "space" and ";".
Sample Image
4-4-4. To continue your setting, move to paragraph（5） of this article.
4-4-1. タイトルの先頭にテクスチャをつけますので、テクスチャの幅は15ピクセル前後のものが適当と思います。
4-4-2. インターネット上には様々な背景画像等の素材屋があります。殆どのところは無料ですので、このガイドを続ける前に背景に使用する画像を入手しておいてください。
・ 自分のページを表示します。
・ トップメニューの"Preferences"をクリック。
・ 表示されたページで"Web page layout"をクリック。
・ "Upload new file" タブをクリック
・ 表示されたページで、ファイルをアップロードするディレクトリの指定をせずに、ファイルをアップロードします。
・ アップロード後に表示されたページでスクロールダウンします。下の方に、今アップしたファイルがあります。
・ 今、アップしたファイルの上で右クリックしコンテキストメニューから「リンクのアドレスをコピー」を選択します。
＜例＞ あなたのアカウントが「foo」、アップしたファイル名を「Sample.gif」と仮定すると、画像のリンクは
http://my.opera.com/foo/homes/files/sample.gif
のようになります。
"foo"をあなたのアカウントに"sample.gif"をあなたが使用するテクスチャのファイル名に変更します
背景画像に使用できる画像フォーマットは、"JPG", "PNG","GIF"です。
4-4-3. ".title"エントリに"background"プロパティを追加します。
.title {
background:url("http://my.opera.com/foo/homes/files/sample.gif") repeat-y;
margin:0 0 10px 0;
font-size:20px;
line-height:normal;
padding:0 0 0 20px;
}
先頭に表示する画像上にタイトル文字列が重なるのを避けるために、左側に余白を取ります。"padding"の指定がそれにあたります。"padding"の指定順は「上」「右」「下」「左」の順です。
この時、"："、"space"、"；"を忘れないでください。
更に、背景色も指定する場合は以下のように指定します。
.title {
background:rgb(181,230,230) url("http://my.opera.com/foo/homes/files/sample.gif") repeat-y;
margin:0 0 10px 0;
font-size:20px;
line-height:normal;
padding:0 0 0 20px;
}
4-4-4. この指定でカスタマイズする場合は（5）項に進んでください。
4-5. For using a texture longer than "line-height". (行の高さより大きなテクスチャを使用するために)
[Caution] The interlinear space might open too much in this trick when the title becomes two or more lines.
If you use this trick, please make an effort so that the title may become one line.
.title {
margin:0 0 10px 0;
font-size:20px;
line-height:normal;
}
See "line-hight" property of ".title" entry.
"line-height" is specified by "normal".
Usually, "line-height:normal;" is "font-size" * 1.2.
In this case, "font-size" is specified by 20px, therefore "line-height" become 24px.
I recommend a texture that is smaller than "Line-height".
4-5-1. Get a background texture.
I use the texture of the following.
The size of texture is 514*33pixels.
4-5-2. Upload it to your site and get its URL.
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 now.
* Your "My page" is displayed.
* Click the "Preferences" in your top menu.
* Click "My files" at the displayed page.
* Click "Upload new file" tab.
* 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.
* Just after upload, scroll down the shown page to bottom.
* 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.
You need to replace "foo" and "sample.gif" with your account and your filename.
[Note] You can specify "JPG", "PNG" and "GIF" as a background texture.
4-5-3. Add a "background" property to ".title" entry.
If your texture's URL is "http://my.opera.com/foo/homes/files/sample.gif" :
<<e.g.>>
.title {
background:url("http://my.opera.com/foo/homes/files/sample.gif") no-repeat;
margin:0 0 10px 0;
font-size:20px;
line-height:33px;
text-indent:35px;
}
[NOTE] Don't forget ":" and ";".
[NOTE] To show the whole of texture, replace "line-hight:normal" with "line-hight:35px".
[NOTE] To avoid piling up the heading of title string on the texture, we need to move it backward.
So we added "text-indent" property.
You can also use "padding" instead of "text-indent."
Sample Image
4-5-4. To continue your setting, move to paragraph（5） of this article.
4-5-1. この方法はあまりお勧めしません。テクスチャの高さが大きいものを使用し、それを全て表示するには"line-height"プロパティを大きくしなければなりません。そうするとタイトルが複数行になった時、行間が開きすぎて間延びします。
取得したCSSの"line-height"プロパティの指定は"normal"となっています。通常"normal"は"font-size"＊1.2です。取得したCSSの場合、タイトルのdefaultのフォントサイズは20ピクセルです。したがって、"line-height"プロパティの値は24ピクセルとなります。出来る限り24ピクセル前後のものを使用することをお勧めします。
4-5-2 インターネット上には様々な背景画像等の素材屋があります。殆どのところは無料ですので、このガイドを続ける前に背景に使用する画像を入手しておいてください。
・ 自分のページを表示します。
・ トップメニューの"Preferences"をクリック。
・ 表示されたページで"Web page layout"をクリック。
・ "Upload new file" タブをクリック
・ 表示されたページで、ファイルをアップロードするディレクトリの指定をせずに、ファイルをアップロードします。
・ アップロード後に表示されたページでスクロールダウンします。下の方に、今アップしたファイルがあります。
・ 今、アップしたファイルの上で右クリックしコンテキストメニューから「リンクのアドレスをコピー」を選択します。
＜例＞ あなたのアカウントが「foo」、アップしたファイル名を「Sample.gif」と仮定すると、画像のリンクは
http://my.opera.com/foo/homes/files/sample.gif
のようになります。
"foo"をあなたのアカウントに"sample.gif"をあなたが使用するテクスチャのファイル名に変更します
背景画像に使用できる画像フォーマットは、"JPG", "PNG","GIF"です。
4-4-3 ".title"エントリに"background"プロパティを指定します。
.title {
background:url("http://my.opera.com/foo/homes/files/sample.gif") no-repeat;
margin:0 0 10px 0;
font-size:20px;
line-height:33px;
text-indent:35px;
}
"background"プロパティには"no-repeat"を指定して繰り返しを拒否します。
画像全体を表示するために"line-height:33px;"と画像の高さに合わせます。
"text-indent:35px;"として、テクスチャ先頭の犬の肉球とタイトル文字列の重なりを避けています。
"text-indent"の代わりに"padding"を使用することも可能です。"text-indent"は段落の先頭の行だけの字下げ、"padding"は段落全体の余白が取られます。
4-5-4. この指定でカスタマイズする場合は（5）項に進んでください。
(5) To set your customized CSS.（カスタマイズしたCSSを設定する）
5-1. Your "My page" is displayed.
5-2. Click the "Preferences" in your top menu.
5-3. Click "Web page layout" at the displayed page.
5-4. Click "custom style sheet."
5-5. Paste the changed ".title" on "Enter CSS:".
<<e.g.>>
.title {
background:rgb(255,0,0) url(http://my.opera.com/foo/homes/files/sample.gif);
margin:0 0 10px 0;
font-size:20px;
line-height:normal;
}
5-6. Check "Use my custom style sheet together with the current theme".
5-7. Click "SAVE" button.
5-8. When it is not displayed by the changed setting, click "Reflesh" button of your browser to display your new specification.
5-1. 自分のページを表示します。
5-2. トップメニューの"Preferences"をクリック。
5-3. 表示されたページで "Web page layout" をクリック。
5-4. "custom style sheet."をクリック。
5-5. "Enter CSS:"に今変更した .title をペーストします。
＜例＞
.title {
background:rgb(255,0,0) url(http://my.opera.com/foo/homes/files/sample.gif);
margin:0 0 10px 0;
font-size:20px;
line-height:normal;
}
5-6. "Use my custom style sheet together with the current theme"をチェックします。
5-7. "SAVE" ボタンをクリックします。
5-8. 変更した設定で表示されていない場合は、ブラウザの「更新」ボタンをクリックしてください。
Blogタイトルの飾りつけ。
§1．Where is changed? (何処を変更するか)
Reffer to the image below.
上図参照してください。
§2．Tools needed for this guide.（このガイドで必要なツール）
2-1 Text Editor
Usually, you can use "NOTEPAD".
2-2 Background Textures
We need a background texture.
I will describe in each subsection of "§3. Customize".
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 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...)
この記事は他の変更方法も紹介していきますが、（１）に関しては全て同じです。既に必要な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 get ".title" enntry of your CSS.（CSS中の.titleエントリを取得する）
2-1. Open your CSS which was saved at paragraph (1) with TextEditor.
2-2. Search ".title" under "/* :: BLOG :: */" section in your CSS. You will find similar ".title" below.
<<e.g.>>
.post .title {
margin:0 0 10px 0;
font-size:20px;
line-height:normal;
}
2-1.(1)項で入手したCSSをテキストエディタで開きます。
2-2."/* :: BLOG :: */"の下にある".title"エントリを見つけます。上の例のようになっているはずです。
(3) Paste ".text" entry to TextEditor. (".title"部分のコピー&ペースト)
Copy like the following and paste ".text" entry to TextEditor.
[NOTE]The specification of the title's background doesn't exist in above-mentioned ". title".
<<e.g.>>
.title {
margin:0 0 10px 0;
font-size:20px;
line-height:normal;
}
上の例に示したようにコピーし、テキストエディタに貼り付けます。上記の例ではタイトルの背景に関する指定が無いことに注意してください。
(4) Let's decorate the background of the title. （タイトルに背景を飾る）
4-1. For adding a background-color. (背景色を設定するには)
A color value of CSS usually use hexadecimal.
However we can use RGB color value.
4-1-1. Get RGB color value.
Please get RGB color value you wish.
If you don't know how to make RGB color value, please refer to HERE.
4-1-2. Add a "background" property to ".title" entry.
If you wish to add rgb(181,230,230) :
<<e.g.>>
.title {
background:rgb(181,230,230);
margin:0 0 10px 0;
font-size:20px;
line-height:normal;
}
[NOTE] Don't forget ":" and ";"
Sample Image.
4-1-3. To continue your setting, move to paragraph(5) of this article.
通常、色の指定は16進数を用いることが多いのですが、RGBカラーも使用できます。設定したいRGBカラーを取得してください。RGBカラーの作成方法をご存じない場合は以下の記事を参考にしてください。
"title"エントリにbackgroundプロパティを追加します。設定したい色がrgb(181,230,230)であれば、上述の例のように指定します。この時、”：”と”；”を忘れないでください。
サンプル画像のようになります。この設定でカスタマイズする場合は(5)項に移動してください。
4-2. For adding a texture to the whole of title's division. (タイトル領域全体をテクスチャで飾る)
4-2-1. Get a background texture.
The size of texture is arbitrary.
4-2-2. Upload it to your site and get its URL.
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 now.
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.
* Your "My page" is displayed.
* Click the "Preferences" in your top menu.
* Click "My files" at the displayed page.
* Click "Upload new file" tab.
* 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.
* Just after upload, scroll down the shown page to bottom.
* 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.
You need to replace "foo" and "sample.gif" with your account and your filename.
[Note] You can specify "JPG", "PNG" and "GIF" as a background texture.
4-2-3. Add a "background" property to ".title" entry.
If your texture's URL is "http://my.opera.com/foo/homes/files/sample.gif" :
<<e.g.>>
.title {
background:url("http://my.opera.com/foo/homes/files/sample.gif");
margin:0 0 10px 0;
font-size:20px;
line-height:normal;
}
[NOTE] Don't forget ":", "space" and ";".
[Note] Pay attention to the text designed by the blue.
You need to replace "foo" and "sample.gif" with your account and your filename.
Sample Image
If you also want to add background color and its color value is RGB(181,230,230) :
<<e.g.>>
.title {
background:rgb(181,230,230) url("http://my.opera.com/foo/homes/files/sample.gif");
margin:0 0 10px 0;
font-size:20px;
line-height:normal;
}
[NOTE] Don't forget ":", "space" and ";".
[Note] Pay attention to the text designed by the blue.
You need to replace "foo" and "sample.gif" with your account and your filename.
Sample Image
4-2-4. To continue your setting, move to paragraph(5) of this article.
4-2-1. 画像のサイズは任意です。
4-2-2. インターネット上には様々な背景画像等の素材屋があります。殆どのところは無料ですので、このガイドを続ける前に背景に使用する画像を入手しておいてください。
ご存知の素材屋がないのであれば、以下にアクセスしてください。このガイド用に作成した背景画像を置いてありますので適当にご利用ください。
・ 自分のページを表示します。
・ トップメニューの"Preferences"をクリック。
・ 表示されたページで"Web page layout"をクリック。
・ "Upload new file" タブをクリック
・ 表示されたページで、ファイルをアップロードするディレクトリの指定をせずに、ファイルをアップロードします。
・ アップロード後に表示されたページでスクロールダウンします。下の方に、今アップしたファイルがあります。
・ 今、アップしたファイルの上で右クリックしコンテキストメニューから「リンクのアドレスをコピー」を選択します。
＜例＞ あなたのアカウントが「foo」、アップしたファイル名を「Sample.gif」と仮定すると、画像のリンクは
http://my.opera.com/foo/homes/files/sample.gif
のようになります。
"foo"をあなたのアカウントに"sample.gif"をあなたが使用するテクスチャのファイル名に変更します。
背景画像に使用できる画像フォーマットは、"JPG", "PNG","GIF"です。
4-2-3.".title"エントリに"background"プロパティを追加します。あなたの画像のアカウントを"http://my.opera.com/foo/homes/files/sample.gif" とすると以下のように指定します。
.title {
background:url("http://my.opera.com/foo/homes/files/sample.gif");
margin:0 0 10px 0;
font-size:20px;
line-height:normal;
}
これに背景色をつける場合は以下のように指定します。
.title {
background:rgb(181,230,230) url("http://my.opera.com/foo/homes/files/sample.gif");
margin:0 0 10px 0;
font-size:20px;
line-height:normal;
}
それぞれサンプル画像は上のようになります。
4-2-4. この指定でカスタマイズする場合は(5)項に進んでください。
4-3. For adding a texture like upperline/underline. (テクスチャをアンダーラインやアッパーラインのように加える)
4-3-1. Get a background texture.
The texture's width is arbitrary, but its height should be smaller than the "font-size"(default 20px).
I recommend its height to be adjusted to 10pixels or less.
4-3-2. Upload it to your site and get its URL.
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 now.
* Your "My page" is displayed.
* Click the "Preferences" in your top menu.
* Click "My files" at the displayed page.
* Click "Upload new file" tab.
* 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.
* Just after upload, scroll down the shown page to bottom.
* 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.
You need to replace "foo" and "sample.gif" with your account and your filename.
[Note] You can specify "JPG", "PNG" and "GIF" as a background texture.
4-3-3. Add a "background" property to ".title" entry.
If your texture's URL is "http://my.opera.com/foo/homes/files/sample.gif" :
* Decorate your title like the upperline.
Specify "top" to "background" property.
<<e.g.>>
.title {
background:url("http://my.opera.com/foo/homes/files/sample.gif") top repeat-x;
margin:0 0 10px 0;
font-size:20px;
line-height:normal;
}
[NOTE] Don't forget ":", "space" and ";".
If you also want to add background color and its color value is RGB(181,230,230) :
<<e.g.>>
.title {
background:rgb(181,230,230) url("http://my.opera.com/foo/homes/files/sample.gif") top repeat-x;
margin:0 0 10px 0;
font-size:20px;
line-height:normal;
}
[NOTE] Don't forget ":", "space" and ";".
* Decorate your title like the underline.
Specify "bottom" to "background" property.
<<e.g.>>
.title {
background:url("http://my.opera.com/foo/homes/files/sample.gif") bottom repeat-x;
margin:0 0 10px 0;
font-size:20px;
line-height:normal;
}
[NOTE] Don't forget ":", "space" and ";".
Sample Image
If you also want to add background color and its color value is RGB(181,230,230) :
<<e.g.>>
.title {
background:rgb(181,230,230) url("http://my.opera.com/foo/homes/files/sample.gif") bottom repeat-x;
margin:0 0 10px 0;
font-size:20px;
line-height:normal;
}
[NOTE] Don't forget ":", "space" and ";".
Sample Image
4-3-4. To continue your setting, move to paragraph（5） of this article.
4-3-1. 画像の幅は任意ですが、高さの方は10ピクセル以下にしたほうが良いように思います。
4-3-2. インターネット上には様々な背景画像等の素材屋があります。殆どのところは無料ですので、このガイドを続ける前に背景に使用する画像を入手しておいてください。
・ 自分のページを表示します。
・ トップメニューの"Preferences"をクリック。
・ 表示されたページで"Web page layout"をクリック。
・ "Upload new file" タブをクリック
・ 表示されたページで、ファイルをアップロードするディレクトリの指定をせずに、ファイルをアップロードします。
・ アップロード後に表示されたページでスクロールダウンします。下の方に、今アップしたファイルがあります。
・ 今、アップしたファイルの上で右クリックしコンテキストメニューから「リンクのアドレスをコピー」を選択します。
＜例＞ あなたのアカウントが「foo」、アップしたファイル名を「Sample.gif」と仮定すると、画像のリンクは
http://my.opera.com/foo/homes/files/sample.gif
のようになります。
"foo"をあなたのアカウントに"sample.gif"をあなたが使用するテクスチャのファイル名に変更します
背景画像に使用できる画像フォーマットは、"JPG", "PNG","GIF"です。
4-3-3. ".title"エントリに背景となるテクスチャを指定します。
背景画像をアッパーラインのように設定するには以下のように指定します。
.title {
background:url("http://my.opera.com/foo/homes/files/sample.gif") top repeat-x;
margin:0 0 10px 0;
font-size:20px;
line-height:normal;
}
この時"："、"スペース"、"；"を忘れないようにしてください。
アッパーラインのように指定するには"background"プロパティに"top"を指定します。
これに背景色もつける設定は以下となります。
.title {
background:rgb(181,230,230) url("http://my.opera.com/foo/homes/files/sample.gif") top repeat-x;
margin:0 0 10px 0;
font-size:20px;
line-height:normal;
}
背景画像をアンダーラインのように設定するには以下のように指定します。
.title {
background:url("http://my.opera.com/foo/homes/files/sample.gif") bottom repeat-x;
margin:0 0 10px 0;
font-size:20px;
line-height:normal;
}
この時"："、"スペース"、"；"を忘れないようにしてください。
アンダーラインのように指定するには"background"プロパティに"bottom"を指定します。
これに背景色もつける設定は以下となります。
.title {
background:rgb(181,230,230) url("http://my.opera.com/foo/homes/files/sample.gif") bottom repeat-x;
margin:0 0 10px 0;
font-size:20px;
line-height:normal;
}
4-3-4. この指定でカスタマイズする場合は（5）項に進んでください。
4-4. For adding a texture in front of your title. (タイトルの前にテクスチャを追加する)
4-4-1. Get a background texture.
I recommend a texture's width to be adjusted to about 15pixels and its height should be smaller than the "font-size"(default 20px).
4-4-2. Upload it to your site and get its URL.
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 now.
* Your "My page" is displayed.
* Click the "Preferences" in your top menu.
* Click "My files" at the displayed page.
* Click "Upload new file" tab.
* 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.
* Just after upload, scroll down the shown page to bottom.
* 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.
You need to replace "foo" and "sample.gif" with your account and your filename.
[Note] You can specify "JPG", "PNG" and "GIF" as a background texture.
4-4-3. Add a "background" property to ".title" entry.
If your texture's URL is "http://my.opera.com/foo/homes/files/sample.gif" :
<<e.g.>>
.title {
background:url("http://my.opera.com/foo/homes/files/sample.gif") repeat-y;
margin:0 0 10px 0;
font-size:20px;
line-height:normal;
padding:0 0 0 20px;
}
[NOTE] Don't forget ":" and ";".
[NOTE] To avoid piling up the heading of title string on the texture, we need to move it backward.
So we added "padding" property.
Sample Image
If you also want to add background color and its color value is RGB(181,230,230) :
<<e.g.>>
.title {
background:rgb(181,230,230) url("http://my.opera.com/foo/homes/files/sample.gif") repeat-y;
margin:0 0 10px 0;
font-size:20px;
line-height:normal;
padding:0 0 0 20px;
}
[NOTE] Don't forget ":", "space" and ";".
Sample Image
4-4-4. To continue your setting, move to paragraph（5） of this article.
4-4-1. タイトルの先頭にテクスチャをつけますので、テクスチャの幅は15ピクセル前後のものが適当と思います。
4-4-2. インターネット上には様々な背景画像等の素材屋があります。殆どのところは無料ですので、このガイドを続ける前に背景に使用する画像を入手しておいてください。
・ 自分のページを表示します。
・ トップメニューの"Preferences"をクリック。
・ 表示されたページで"Web page layout"をクリック。
・ "Upload new file" タブをクリック
・ 表示されたページで、ファイルをアップロードするディレクトリの指定をせずに、ファイルをアップロードします。
・ アップロード後に表示されたページでスクロールダウンします。下の方に、今アップしたファイルがあります。
・ 今、アップしたファイルの上で右クリックしコンテキストメニューから「リンクのアドレスをコピー」を選択します。
＜例＞ あなたのアカウントが「foo」、アップしたファイル名を「Sample.gif」と仮定すると、画像のリンクは
http://my.opera.com/foo/homes/files/sample.gif
のようになります。
"foo"をあなたのアカウントに"sample.gif"をあなたが使用するテクスチャのファイル名に変更します
背景画像に使用できる画像フォーマットは、"JPG", "PNG","GIF"です。
4-4-3. ".title"エントリに"background"プロパティを追加します。
.title {
background:url("http://my.opera.com/foo/homes/files/sample.gif") repeat-y;
margin:0 0 10px 0;
font-size:20px;
line-height:normal;
padding:0 0 0 20px;
}
先頭に表示する画像上にタイトル文字列が重なるのを避けるために、左側に余白を取ります。"padding"の指定がそれにあたります。"padding"の指定順は「上」「右」「下」「左」の順です。
この時、"："、"space"、"；"を忘れないでください。
更に、背景色も指定する場合は以下のように指定します。
.title {
background:rgb(181,230,230) url("http://my.opera.com/foo/homes/files/sample.gif") repeat-y;
margin:0 0 10px 0;
font-size:20px;
line-height:normal;
padding:0 0 0 20px;
}
4-4-4. この指定でカスタマイズする場合は（5）項に進んでください。
4-5. For using a texture longer than "line-height". (行の高さより大きなテクスチャを使用するために)
[Caution] The interlinear space might open too much in this trick when the title becomes two or more lines.
If you use this trick, please make an effort so that the title may become one line.
.title {
margin:0 0 10px 0;
font-size:20px;
line-height:normal;
}
See "line-hight" property of ".title" entry.
"line-height" is specified by "normal".
Usually, "line-height:normal;" is "font-size" * 1.2.
In this case, "font-size" is specified by 20px, therefore "line-height" become 24px.
I recommend a texture that is smaller than "Line-height".
4-5-1. Get a background texture.
I use the texture of the following.
The size of texture is 514*33pixels.
4-5-2. Upload it to your site and get its URL.
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 now.
* Your "My page" is displayed.
* Click the "Preferences" in your top menu.
* Click "My files" at the displayed page.
* Click "Upload new file" tab.
* 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.
* Just after upload, scroll down the shown page to bottom.
* 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.
You need to replace "foo" and "sample.gif" with your account and your filename.
[Note] You can specify "JPG", "PNG" and "GIF" as a background texture.
4-5-3. Add a "background" property to ".title" entry.
If your texture's URL is "http://my.opera.com/foo/homes/files/sample.gif" :
<<e.g.>>
.title {
background:url("http://my.opera.com/foo/homes/files/sample.gif") no-repeat;
margin:0 0 10px 0;
font-size:20px;
line-height:33px;
text-indent:35px;
}
[NOTE] Don't forget ":" and ";".
[NOTE] To show the whole of texture, replace "line-hight:normal" with "line-hight:35px".
[NOTE] To avoid piling up the heading of title string on the texture, we need to move it backward.
So we added "text-indent" property.
You can also use "padding" instead of "text-indent."
Sample Image
4-5-4. To continue your setting, move to paragraph（5） of this article.
4-5-1. この方法はあまりお勧めしません。テクスチャの高さが大きいものを使用し、それを全て表示するには"line-height"プロパティを大きくしなければなりません。そうするとタイトルが複数行になった時、行間が開きすぎて間延びします。
取得したCSSの"line-height"プロパティの指定は"normal"となっています。通常"normal"は"font-size"＊1.2です。取得したCSSの場合、タイトルのdefaultのフォントサイズは20ピクセルです。したがって、"line-height"プロパティの値は24ピクセルとなります。出来る限り24ピクセル前後のものを使用することをお勧めします。
4-5-2 インターネット上には様々な背景画像等の素材屋があります。殆どのところは無料ですので、このガイドを続ける前に背景に使用する画像を入手しておいてください。
・ 自分のページを表示します。
・ トップメニューの"Preferences"をクリック。
・ 表示されたページで"Web page layout"をクリック。
・ "Upload new file" タブをクリック
・ 表示されたページで、ファイルをアップロードするディレクトリの指定をせずに、ファイルをアップロードします。
・ アップロード後に表示されたページでスクロールダウンします。下の方に、今アップしたファイルがあります。
・ 今、アップしたファイルの上で右クリックしコンテキストメニューから「リンクのアドレスをコピー」を選択します。
＜例＞ あなたのアカウントが「foo」、アップしたファイル名を「Sample.gif」と仮定すると、画像のリンクは
http://my.opera.com/foo/homes/files/sample.gif
のようになります。
"foo"をあなたのアカウントに"sample.gif"をあなたが使用するテクスチャのファイル名に変更します
背景画像に使用できる画像フォーマットは、"JPG", "PNG","GIF"です。
4-4-3 ".title"エントリに"background"プロパティを指定します。
.title {
background:url("http://my.opera.com/foo/homes/files/sample.gif") no-repeat;
margin:0 0 10px 0;
font-size:20px;
line-height:33px;
text-indent:35px;
}
"background"プロパティには"no-repeat"を指定して繰り返しを拒否します。
画像全体を表示するために"line-height:33px;"と画像の高さに合わせます。
"text-indent:35px;"として、テクスチャ先頭の犬の肉球とタイトル文字列の重なりを避けています。
"text-indent"の代わりに"padding"を使用することも可能です。"text-indent"は段落の先頭の行だけの字下げ、"padding"は段落全体の余白が取られます。
4-5-4. この指定でカスタマイズする場合は（5）項に進んでください。
(5) To set your customized CSS.（カスタマイズしたCSSを設定する）
5-1. Your "My page" is displayed.
5-2. Click the "Preferences" in your top menu.
5-3. Click "Web page layout" at the displayed page.
5-4. Click "custom style sheet."
5-5. Paste the changed ".title" on "Enter CSS:".
<<e.g.>>
.title {
background:rgb(255,0,0) url(http://my.opera.com/foo/homes/files/sample.gif);
margin:0 0 10px 0;
font-size:20px;
line-height:normal;
}
5-6. Check "Use my custom style sheet together with the current theme".
5-7. Click "SAVE" button.
5-8. When it is not displayed by the changed setting, click "Reflesh" button of your browser to display your new specification.
5-1. 自分のページを表示します。
5-2. トップメニューの"Preferences"をクリック。
5-3. 表示されたページで "Web page layout" をクリック。
5-4. "custom style sheet."をクリック。
5-5. "Enter CSS:"に今変更した .title をペーストします。
＜例＞
.title {
background:rgb(255,0,0) url(http://my.opera.com/foo/homes/files/sample.gif);
margin:0 0 10px 0;
font-size:20px;
line-height:normal;
}
5-6. "Use my custom style sheet together with the current theme"をチェックします。
5-7. "SAVE" ボタンをクリックします。
5-8. 変更した設定で表示されていない場合は、ブラウザの「更新」ボタンをクリックしてください。
WIDGETIZE