超超初心者向け漫画サイトのつくり方【背景画像を組み込む】

壁紙みたいな背景を貼ってみます。

ただこれ

私は一回も使ったことないです。

記述が難しい?…いいえ、そんな事ないです。むしろ簡単な部類。

アレです。記述より、使いどころのセンス難易度が高すぎる。と思ってる。

背景画像(壁紙)について

シームレスパターンと呼ばれる画像が必要です。

シームレスパターンとは。継ぎ目のない画像…?かな?

壁紙を貼る際、大きな1枚を貼るのではなく、小さな1枚を上下左右に何枚も複製して貼っていくイメージなんです。

なので、その小さな1枚を上下左右どこで繋げても柄が合うような画像にしなければいけない。って事です。

どうやって作るのか。

それは分からない。(役立たず)

多分、お持ちのソフトによって簡単に作れたり作れなかったりすると思います。

漫画描きさんは自作したいかも知れませんが、他の人が作って配布してくれている壁紙をお借りするのが一番いい方法だと思います。

それか、継ぎ目不要の壁紙を用意する。真ん中にどーんと描くだけなら、継ぎ目を気にする必要ありません。

単色なら、砂目トーンみたいな加工をすると、たぶん継ぎ目合ってなくても気にならない。

フォルダ構成

こんな感じ。

作った背景画像、htmlは同じフォルダに入れておいてください。(別フォルダを作って、そこに入れておいてもOKです。その際は、画像パスを適切に記述してください)

今回は、背景画像を20px四方の小さな画像で作ってみました。

html、cssの記述

CSSは、htmlの中に一緒に記述します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>背景画像</title>
</head>
<body>
  <style>
    body { background-image: url(kabegami.png); }
  </style>
</body>
</html>

これでOKです。

完成図

コレです。

こんな感じで、継ぎ目の気にならない画像にしておけば何となく壁紙っぽくなります。

コメント