こんな時もありました。
やっぱり、gooさんが作ったテンプレートの部品画像を借りるのは、
まずいみたいです。
なので、完全オリジナルに変更する前に、記念に保存。
gooの新テンプレート「竹」から、
ヘッダの画像と、メニュー見出し背景の画像をお借りして、
オリジナル・テンプレートを編集してみました。
竹のヘッダは、ほんとうは３つの部品で出来ている。
↓ こんな感じ。↓
この３つの部品を写真用ソフトに読み込んで、
１枚の絵のようにくっつけて、保存。
間に少し隙間があるのは、適当に拡大したりしてごまかす。
下の「各メニュー見出しの背景」用の画像は、
ちょっと短いけど、そのまま使用。
↓ 問題はこれ ↓
本当はgooの「竹」テンプレートを真似して、
エントリー背景の両端に使いたいのだけど、どこへどうやったら入るのか不明。
下の部品も、エントリータイトルの文字の背景に使用できるが、
私には、長さをうまく調節できなかった。
出来ている「竹」テンプレートがかなり気に入ったので、
できれば、そのまま使用したかったのですが、
エントリー本文の背景の色が薄緑色なのがちょっと不満でした。
お気に入りのgooテンプレートの部品を使って、
css編集するのは初めてだったので、面白かったですが、
著作権の侵害になるのかどうかが不明です。
gooさん、問題があれば、ご連絡ください。
面白いのでやってみただけですから、短期間で変更する予定です。
スタッフブログに問い合わせのコメントを書いたら、
スタッフ以外の親切な方がお返事を書いてくださって、
「規約によれば、駄目みたいですよ」というようなことを
教えてくださいました。
残念ながら、「竹」のテンプレートは諦めます～。
ヘッダの画像と、メニュー見出し背景の画像をお借りして、
オリジナル・テンプレートを編集してみました。
竹のヘッダは、ほんとうは３つの部品で出来ている。
↓ こんな感じ。↓
この３つの部品を写真用ソフトに読み込んで、
１枚の絵のようにくっつけて、保存。
間に少し隙間があるのは、適当に拡大したりしてごまかす。
下の「各メニュー見出しの背景」用の画像は、
ちょっと短いけど、そのまま使用。
↓ 問題はこれ ↓
本当はgooの「竹」テンプレートを真似して、
エントリー背景の両端に使いたいのだけど、どこへどうやったら入るのか不明。
下の部品も、エントリータイトルの文字の背景に使用できるが、
私には、長さをうまく調節できなかった。
出来ている「竹」テンプレートがかなり気に入ったので、
できれば、そのまま使用したかったのですが、
エントリー本文の背景の色が薄緑色なのがちょっと不満でした。
お気に入りのgooテンプレートの部品を使って、
css編集するのは初めてだったので、面白かったですが、
著作権の侵害になるのかどうかが不明です。
gooさん、問題があれば、ご連絡ください。
面白いのでやってみただけですから、短期間で変更する予定です。
スタッフブログに問い合わせのコメントを書いたら、
スタッフ以外の親切な方がお返事を書いてくださって、
「規約によれば、駄目みたいですよ」というようなことを
教えてくださいました。
残念ながら、「竹」のテンプレートは諦めます～。
テーブルのテスト２
border＝0
左のbgcolor＝#dddddd、width="150"
右のbgcolor＝#333333、width="150" だと、こんな感じ
| らんらんらんらん 表（テーブル）の中に 文字を入れる | らんらんらんらん 表（テーブル）の中に 文字を入れる |
テーブルのテスト２ー２
border＝5 bordercolor="#ff0000"
左のbgcolor＝#dddddd、width="150"
右のbgcolor＝#333333、width="150" だと、どんな感じ？
| らんらんらんらん 表（テーブル）の中に 文字を入れる |
らんらんらんらん 表（テーブル）の中に 文字を入れる |
なんか違う。
| あああああ | いいいいい | ううううう |
|---|---|---|
| えええええ | おおおおお | |
| かかかかか | ききききき |
全然違う。
| あああああ | ||||
|---|---|---|---|---|
| いいいいい | ううううう | えええええ | おおおおお | |
これも違う。
| あああああ | ||||
|---|---|---|---|---|
| いいいいい | ううううう | えええええ | ||
| おおおおお | かかかかか | ききききき | ||
わからん。
中の区切の線にも色をつけたいだけなんだけど、できない。
あきたので、休憩。
テーブルのテスト１
border＝0
中のbgcolor＝#333333、width="150" だと、こんな感じ
| らんらんらんらん 表（テーブル）の中に 文字を入れる |
|---|
テーブルのテスト２
border＝0
左のbgcolor＝#dddddd、width="150"
右のbgcolor＝#333333、width="150" だと、こんな感じ
| らんらんらんらん 表（テーブル）の中に 文字を入れる | らんらんらんらん 表（テーブル）の中に 文字を入れる |
テーブルのテスト３
border＝0
左のbgcolor＝#008800で、width="10"
右のbgcolor指定なし、widht="150"だと、こんな感じ
| 実はこの文字も 表（テーブル）の中に 書いてあるんだよ |
テスト２は、こんな感じで書いてあります。
＜＞の部分は、半角の<>で書きました。
＜center＞
＜table border=0＞
＜tr＞
＜td width="150" bgcolor=#aaaaaa＞らんらんらんらん
表（テーブル）の中に
文字を入れる
＜/td＞
＜td width="150" bgcolor=#ddddddらんらんらんらん
表（テーブル）の中に
文字を入れる
＜/td＞
＜/tr＞
＜/table＞
＜/center＞
「今日もがんばれ！サワゴジラ」の、この記事で、
素敵な歌詞を強調するために、技（緑色の太い縦線に見える）が使われていました。
その太い縦の線の作り方を、565yamaさんに教えて頂いたので、
挑戦してみました。
見た目は似たような感じにできたと思うのですが、
やり方として、これで良かったのでしょうか？？？
ちょっとすみません。罫線のテストさせて下さい。
プレビューでは、表のように見えるのですが、
gooブログでは、どんなふうに表示されるのか、
知りたいのです。
例１
＜table border="3"＞
＜tr＞＜th＞○○＜/th＞＜th＞△△＜/th＞＜th＞◇◇＜/th＞＜/tr＞
＜tr＞＜th＞ＡＡ＜/th＞＜th＞ＢＢ＜/th＞＜th＞ＣＣ＜/th＞＜/tr＞
＜tr＞＜th＞ａａ＜/th＞＜th＞ｂｂ＜/th＞＜th＞ｃｃ＜/th＞＜/tr＞
＜/table＞
と書くと、こうなる。（＜＞は、<>と半角で）
例２
＜table border="3"＞
＜tr＞＜td＞○○＜/td＞＜td＞△△＜/td＞＜td＞◇◇＜/td＞＜/tr＞
＜tr＞＜td＞ＡＡ＜/td＞＜td＞ＢＢ＜/td＞＜td＞ＣＣ＜/td＞＜/tr＞
＜tr＞＜td＞ａａ＜/td＞＜td＞ｂｂ＜/td＞＜td＞ｃｃ＜/td＞＜/tr＞
＜/table＞
と書くと、こうなる。（＜＞は、<>と半角で）
やっとわかった。＜tr＞＜/tr＞は表の改行。
＜th＞＜/th＞なら太字。＜td＞＜/td＞だとふつうの字。らしい。
最初と最後の＜talbe＞＜/table＞は、
表の始めと終わりの合図。
例３
＜table border="3"＞
＜tr＞
＜th＞ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ＜/th＞
＜/tr＞
＜/table＞
と書くと、こうなる。（＜＞は、<>と半角で）
例４
＜table border="3"＞
＜tr＞
＜th＞あああああああああああああああああああああああ
あああああああああああああああああああああああ
あああああああああああああああああああああああ
あああああああああああああああああああああああ
＜/th＞
＜/tr＞
＜/table＞
と書くと、こうなる。（＜＞は、<>と半角で）
「橋掛かり風流合戦・お構と公子の源平モモンジ腹話術」の中で、
お構と公子さまが、罫線（表）をうまく使っていらっしゃるので、
表の作り方を教えて頂きました。
今までは、表を書いたり、罫線で囲んだりする時には、
「今日もがんばれ！サワゴジラ」の565yamaさんに教えて頂いたのを
草稿状態で保存してあるので、それをコピーして使っていました。
今回、お構と公子さまに教えて頂いたものと、
以前に565yamaさんに教えて頂いたものを見比べながら、
お構と公子様の解説をよく読んで、よ～く考えたら、
やっと意味を理解することができました。
（と思いますが、やや不安）
どうもありがとうございました～♪
プレビューでは、表のように見えるのですが、
gooブログでは、どんなふうに表示されるのか、
知りたいのです。
例１
＜table border="3"＞
＜tr＞＜th＞○○＜/th＞＜th＞△△＜/th＞＜th＞◇◇＜/th＞＜/tr＞
＜tr＞＜th＞ＡＡ＜/th＞＜th＞ＢＢ＜/th＞＜th＞ＣＣ＜/th＞＜/tr＞
＜tr＞＜th＞ａａ＜/th＞＜th＞ｂｂ＜/th＞＜th＞ｃｃ＜/th＞＜/tr＞
＜/table＞
と書くと、こうなる。（＜＞は、<>と半角で）
| ○○ | △△ | ◇◇ |
|---|---|---|
| ＡＡ | ＢＢ | ＣＣ |
| ａａ | ｂｂ | ｃｃ |
例２
＜table border="3"＞
＜tr＞＜td＞○○＜/td＞＜td＞△△＜/td＞＜td＞◇◇＜/td＞＜/tr＞
＜tr＞＜td＞ＡＡ＜/td＞＜td＞ＢＢ＜/td＞＜td＞ＣＣ＜/td＞＜/tr＞
＜tr＞＜td＞ａａ＜/td＞＜td＞ｂｂ＜/td＞＜td＞ｃｃ＜/td＞＜/tr＞
＜/table＞
と書くと、こうなる。（＜＞は、<>と半角で）
| ○○ | △△ | ◇◇ |
| ＡＡ | ＢＢ | ＣＣ |
| ａａ | ｂｂ | ｃｃ |
やっとわかった。＜tr＞＜/tr＞は表の改行。
＜th＞＜/th＞なら太字。＜td＞＜/td＞だとふつうの字。らしい。
最初と最後の＜talbe＞＜/table＞は、
表の始めと終わりの合図。
例３
＜table border="3"＞
＜tr＞
＜th＞ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ＜/th＞
＜/tr＞
＜/table＞
と書くと、こうなる。（＜＞は、<>と半角で）
| ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ |
|---|
例４
＜table border="3"＞
＜tr＞
＜th＞あああああああああああああああああああああああ
あああああああああああああああああああああああ
あああああああああああああああああああああああ
あああああああああああああああああああああああ
＜/th＞
＜/tr＞
＜/table＞
と書くと、こうなる。（＜＞は、<>と半角で）
| あああああああああああああああああああああああ あああああああああああああああああああああああ あああああああああああああああああああああああ あああああああああああああああああああああああ |
|---|
「橋掛かり風流合戦・お構と公子の源平モモンジ腹話術」の中で、
お構と公子さまが、罫線（表）をうまく使っていらっしゃるので、
表の作り方を教えて頂きました。
今までは、表を書いたり、罫線で囲んだりする時には、
「今日もがんばれ！サワゴジラ」の565yamaさんに教えて頂いたのを
草稿状態で保存してあるので、それをコピーして使っていました。
今回、お構と公子さまに教えて頂いたものと、
以前に565yamaさんに教えて頂いたものを見比べながら、
お構と公子様の解説をよく読んで、よ～く考えたら、
やっと意味を理解することができました。
（と思いますが、やや不安）
どうもありがとうございました～♪
10，メニュー見出しの飾りをつける
エントリータイトルの飾りとほとんど同じです。
メニューの見出し部分に飾りをつけてみました。
今回は、見出しの左側にマークだけを付けるというよりも、
マークのついた細長い背景の絵を、見出しの文字の下に貼り付ける感じにしてみました。
↑の部分を、↓に変更しました。
①「color: #ffff00;」で、メニュー見出しの文字色を黄色に変更します。
②「text-align: center;」で、見出しの文字の位置を真ん中に表示させます。
（左側のマークが文字にかぶらないようにするために）
③「background-image: url(http://blogimg.goo.ne.jp/user_image/～.jpg);」で、
背景の絵を、もともとあった白い小さい四角のようなマークから、下の絵に変更。
サイズは横170px×縦23pxで描きました。
ちなみに、下がもともと表示されていたマーク。
ほんとうは、こっちのままの方がすっきりしていて素敵だと思ったのですが、
試しにやってみたかったのです。
エントリータイトルの飾りとほとんど同じです。
メニューの見出し部分に飾りをつけてみました。
今回は、見出しの左側にマークだけを付けるというよりも、
マークのついた細長い背景の絵を、見出しの文字の下に貼り付ける感じにしてみました。
/* メニューの各見出し */ .menuBar { color: #333333; font-size: ; font-weight: bold; text-align: left; background-image: url(/images/tmp_sm_wh_r/menu_icon.gif); background-position: left center; background-repeat: no-repeat; padding: 0px 0px 0px 15px; margin-bottom: 5px; } |
↑の部分を、↓に変更しました。
/* メニューの各見出し */ .menuBar { color: #ffff00; font-size: ; font-weight: bold; text-align: center; background-image: url(http://blogimg.goo.ne.jp/user_image/～.jpg); background-position: left center; background-repeat: no-repeat; padding: 0px 0px 0px 15px; margin-bottom: 5px; } |
①「color: #ffff00;」で、メニュー見出しの文字色を黄色に変更します。
②「text-align: center;」で、見出しの文字の位置を真ん中に表示させます。
（左側のマークが文字にかぶらないようにするために）
③「background-image: url(http://blogimg.goo.ne.jp/user_image/～.jpg);」で、
背景の絵を、もともとあった白い小さい四角のようなマークから、下の絵に変更。
サイズは横170px×縦23pxで描きました。
ちなみに、下がもともと表示されていたマーク。
ほんとうは、こっちのままの方がすっきりしていて素敵だと思ったのですが、
試しにやってみたかったのです。
９、エントリータイトルに飾りをつける
テンプレートのカスタムをしている人のブログの中には、
エントリータイトルのところに、オリジナルの飾りをつけている人を見かけます。
面白いな～と思いながらも、やり方がわからなかったのですが、
もしかしたら、こうやれば出来るのかな？と試行錯誤の末、
なんとなくそれらしい飾りをつけることができました。
↑の部分を、↓に変更しました。
①「color: #ffff00;」によって、エントリータイトルの色は黄色になりました。
②「Padding-left:50px;」で、エントリータイトルの表示位置を、少し右へ移動。
③「background-image: url(http://blogimg.goo.ne.jp/user_image/～.jpg);
background-repeat: no-repeat;」で、タイトルの下（背景）に絵を置く。
タイトルの文字を右へずらしてあるので、左に飾りが付いたように見える。
というわけです。
飾りとして使った絵はコレです。
本当は、このオレンジの虫みたいなマークの背景部分を透明にして、
マークだけを表示したかったのですが、透明にしたつもりが
背景が真っ黒になったりしてうまくいきませんでした。
↑この絵は、たまたま？pngで保存できたので、マークの背景は透明です。
でも、地味なので使用しませんでした。
テンプレートのカスタムをしている人のブログの中には、
エントリータイトルのところに、オリジナルの飾りをつけている人を見かけます。
面白いな～と思いながらも、やり方がわからなかったのですが、
もしかしたら、こうやれば出来るのかな？と試行錯誤の末、
なんとなくそれらしい飾りをつけることができました。
/* エントリータイトル */ .etTitle { color: #333333; font-size : large; font-weight: bold; } |
↑の部分を、↓に変更しました。
/* エントリータイトル */ .etTitle { color: #ffff00; font-size : large; font-weight: bold; Padding-left:50px; background-image: url(http://blogimg.goo.ne.jp/user_image/～.jpg); background-repeat: no-repeat; } |
①「color: #ffff00;」によって、エントリータイトルの色は黄色になりました。
②「Padding-left:50px;」で、エントリータイトルの表示位置を、少し右へ移動。
③「background-image: url(http://blogimg.goo.ne.jp/user_image/～.jpg);
background-repeat: no-repeat;」で、タイトルの下（背景）に絵を置く。
タイトルの文字を右へずらしてあるので、左に飾りが付いたように見える。
というわけです。
飾りとして使った絵はコレです。
本当は、このオレンジの虫みたいなマークの背景部分を透明にして、
マークだけを表示したかったのですが、透明にしたつもりが
背景が真っ黒になったりしてうまくいきませんでした。
↑この絵は、たまたま？pngで保存できたので、マークの背景は透明です。
でも、地味なので使用しませんでした。
ＣＳＳ編集をして、テンプレートのカスタムをしてみました。
ベースには、「クリアホワイト右メニュー」を使用しています。
変更した部分を、ＣＳＳ編集画面の上の方から、少しずつ紹介します。
１，ページ全体の背景を変更
下が使用した画像です。
クリックして大きくした状態のurlを貼り付けて、
リピート（repeat）するようにしています。
ベースには、「クリアホワイト右メニュー」を使用しています。
変更した部分を、ＣＳＳ編集画面の上の方から、少しずつ紹介します。
１，ページ全体の背景を変更
/* ページ全体の背景と余白 */ body { background-image: url(http://blogimg.goo.ne.jp/user_image/6f/b9/bd2698f209787d93d786d452b66fc788.jpg); background-repeat: ; background-position: ; margin:0px; padding:0px 20px; background-color:; } |
下が使用した画像です。
クリックして大きくした状態のurlを貼り付けて、
リピート（repeat）するようにしています。
２，ページ全体の文字を変更
クリアホワイトのページ全体の文字は、少し薄目の黒(color: #333;)に
設定されています。
エントリー本文の背景が白（background-color: #fff;)の場合は、問題なく読めますが、
私は背景の色を薄茶色（background-color: #f2e097;）にしたかったので、
真っ黒（color: #000;)に変更しました。
/* ページ全体の文字 */ BODY,TD,DIV { FONT-SIZE : SMALL; color: #000000; } |
クリアホワイトのページ全体の文字は、少し薄目の黒(color: #333;)に
設定されています。
エントリー本文の背景が白（background-color: #fff;)の場合は、問題なく読めますが、
私は背景の色を薄茶色（background-color: #f2e097;）にしたかったので、
真っ黒（color: #000;)に変更しました。
３，全体のリンク色
この部分を変更すると、
◎メニューからのリンク
◎エントリー上の投稿日時の情報
◎エントリー上のカテゴリー
◎エントリー本文中のリンク
これらの色を全てまとめて変更できます。
上の変更によって、まだ見ていないリンク先は黒（color: #000;）、
マウスポインタを置いた時と、クリックした瞬間は緑（color: #00ff00）、
すでにみたことのあるリンク先は青（color: #0000ff）で表示されます。
/* リンク（まだ見ていない状態） */ A:link { color: #000000; } /* リンク（マウスポインタを乗せた状態） */ A:hover { color: #00ff00; } /* リンク（クリックされた状態） */ A:active { color: #00ff00; } /* リンク（すでに見た状態） */ A:visited { color: #0000ff; } |
この部分を変更すると、
◎メニューからのリンク
◎エントリー上の投稿日時の情報
◎エントリー上のカテゴリー
◎エントリー本文中のリンク
これらの色を全てまとめて変更できます。
上の変更によって、まだ見ていないリンク先は黒（color: #000;）、
マウスポインタを置いた時と、クリックした瞬間は緑（color: #00ff00）、
すでにみたことのあるリンク先は青（color: #0000ff）で表示されます。