子供、いらない

はりょ。少子化問題とは関係ありません。
カウンタが345678やその付近の方はベースノートに書き込んでね。

タイトルにスローガンを付加してみる

2005-06-24 12:59:49 | junk.test.body
スローガンを画像にしてくれるサービスがあるということで、試しに使ってみたが、そこそこ面白い。

詳しい使い方は BLOG STATION にあるのでそっちを見てねというのも何だし、同じ内容をそのまま書くのも何なので、gooブログのタイトル背景に重ねて表示するためのサンプルを書いてみました。
  1. Sloganizer.netにアクセス
    Sloganizer.netの画像生成ページを開く。

  2. スローガンのキーワード入力
    Your keyword for Sloganizer:のテキストボックスに、スローガンに含みたい言葉を入力する。ただし、英語またはオランダ語じゃなくてドイツ語のみ？が入力可能で、日本語は設定できないみたい。
    試しに「"No Kids, No Life?"」を入力してみる。

  3. スタイルの選択
    Your Style:のリストボックスから、好みの表示スタイルを選択する。
    「Standard (transparent text)」だけが特殊で、スローガンのみの透過画像を生成してくれるスタイル。残りのスタイル（Style 1～Style 8）は、背景つきのスローガン画像（いわゆるバナー）になる。
    バナーのサンプルは、BLOG STATION を見てもらうとして、タイトル背景画像に重ねるために、ここでは「Standard (transparent text)」を選択する。

  4. 文字色と背景色の選択
    「Standard (transparent text)」の場合のみ有効な項目で、文字色と背景色を指定する。
    Colour of your text:のリストボックスから、好みの文字色を選択する。
    Background colourのリストボックスから、スローガンを設定する場所に一番近い色（背景色）を選択する。この背景色と先の文字色の中間色で、文字がちょっとだけ縁取られます。ここで何色を指定しても全体の背景色は透過色なので、貼り付けた場所が透けて見えます。
    今回は、文字色に「Pale Blue」、背景色に「Blue」を選択する。

  5. プレビュー画像とソースコード生成
    「Create image」のボタンを押す。今まで設定した値で、プレビュー画像が表示されて、「The BBCODE for use on messageboards 」と「The HTML-Source code」が生成されます。gooブログなら「The HTML-Source code」の方を使うことになります。

  6. 表示された画像とソースコード
    表示された画像と生成されたHTMLソースコードは、以下の通り。
    プレビュー画像(背景色なし)
    generated by sloganizer.net
    プレビュー画像(背景色あり)
    generated by sloganizer.net
    HTMLソースコード
    <a href="http://www.sloganizer.net/en/" target="_blank"
    title="Sloganizer - the slogan generator"><img src="http://www.sloganizer.net/en/image,
    -bsl--dq-No-spc-Kids-com--spc-No-spc-Life-fz--bsl--dq-,
    blue,lblue.png    " border="0" alt="generated by sloganizer.net" title="This slogan was generated by sloganizer.net"/></a>(改行)
    っておーい。「"（ダブルクォート）」を使うと「\"（バックスラッシュとダブルクォート）」になっちゃうじゃんか。
    他にも「'（シングルクォート）」も「\'（バックスラッシュとクォート）」になっちゃうみたい。

  7. 必要に応じて修正
    仕方がないので、HTMLソースの -bsl- の部分を削ってみる。
    修正したHTMLソースコード
    <a href="http://www.sloganizer.net/en/" target="_blank"
    title="Sloganizer - the slogan generator"><img src="http://www.sloganizer.net/en/image,
    -dq-No-spc-Kids-com--spc-No-spc-Life-fz--dq-,blue,lblue.png    " border="0" alt="generated by sloganizer.net" title="This slogan was generated by sloganizer.net"/></a>(改行)
    スローガン画像(背景色なし)
    generated by sloganizer.net
    スローガン画像(背景色あり)
    generated by sloganizer.net
    バックスラッシュは、なくなったみたいだ。

  8. シンプル系テンプレートのタイトルに重ねて表示
    折角なのでタイトル背景と重ねて表示してみる。
    CSSの編集で、#header h2 として背景画像URLとしてスローガン画像のURLを追加する。
    修正前(クリアブルーのCSS)
    /* ヘッダーの指定 */(改行)
#header {(改行)
  ：（中略）
}(改行)
    修正後(クリアブルーのCSS)
    /* ヘッダーの指定 */(改行)
#header {(改行)
  ：（中略）
}(改行)
/* ヘッダ見出し2（概要）にスローガン画像を追加 */(改行)
#header h2 {(改行)
  background-image:
    url("http://www.sloganizer.net/en/image,
    -dq-No-spc-Kids-com--spc-No-spc-Life-fz--dq-,
    blue,lblue.png");(改行)
  background-position: right top;(改行)
  background-repeat: no-repeat;(改行)
  /* スローガン画像の高さが「概要」の高さより
    大きい場合に指定する */(改行)
  height: 35px;(改行)
}(改行)
    適用例（表示イメージ）
    タイトル背景画像＋スローガン画像

後は自分のブログを見ながら、スローガンが表示される位置を適当に補正してみてください。
それから、スローガンのキーワードには、短めの単語を指定した方が良いです。

めでたしめでたし

タイトルにスローガンを付加してみる (冒頭)

2005-06-24 12:59:00 | junk.test.goo
スローガンを画像にしてくれるサービスがあるということで、試しに使ってみたが、そこそこ面白い。

詳しい使い方は BLOG STATION にあるのでそっちを見てねというのも何だし、同じ内容をそのまま書くのも何なので、gooブログのタイトル背景に重ねて表示するためのサンプルを. . . ..続き(次の記事)も読んでね
コメントは本文(次の記事)にお願いします