メインコンテンツ

漫画、アニメ、ライトノベルのタイトルロゴジェネレーター

(Thu)

Posted in デザイン

もう有名ですが、ライトノベル「とある魔術の禁書目録」と漫画「らき☆すた」のタイトルロゴを生成するジェネレーターです。
こんなのが作れます。
とある櫻花の画像生成で生成出来る画像のサンプル
とある櫻花の画像生成
がぞ☆つく
ブームが終らないうちはサイトのロゴに使っても元ネタが分かってもらえそうですね。

とある櫻花の画像生成、がぞ☆つくはテキストを全て自由に選べる訳ではありません。「とある」と「の」は固定になってしまいます。
がぞ☆つくは間の星が固定になってしまいます。
サイトのタイトルロゴに使用するならば、サイトのタイトルも画像に合わせた名称に変更した方が良いでしょう。
また、生成される画像に透過処理は施されていないため、背景が黒いサイトに使うのならば画像を生成後に透過処理を施す必要があります。

試しに共有テンプレート「html5_common_01」にとある櫻花の画像生成で生成した画像を埋め込んでみましょう。
HTMLに直接imgタグで修正した場合、見た目では問題ありませんがサイトタイトル(h1タグ)を画像にしてしまうのは抵抗がありますのでCSSを使ったテキスト飛ばしでタイトルロゴを埋め込む方法を選択します。

完成図:
とある櫻花の画像生成で生成したタイトルロゴ画像を共有テンプレート「html5_common_01」のヘッダに埋め込んだ完成図です
まずとある櫻花の画像生成でタイトルロゴを生成しFC2にアップロードします。
次に以下のCSSをCSS内に追記します。
#header h1 a {
  display: block;
  width: 320px; /* アップロードしたタイトルロゴのwidth */
  height: 150px; /*アップロードしたタイトルロゴのheight */
  background-image: url(http://XXXXXXXX.png); /* アップロードしたタイトルロゴのURL */
  background-position: 0px 0px;
  background-repeat: no-repeat;
  text-indent: -9999px;
  outline: none;
  border: none;
}

以上で完成です。
関連記事

Comments

Trackbacks

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。