現在Belfascino~ベルファッシノ~のホームページをリニューアルしようと１からプログラムを勉強しています。なのでつまずく所が沢山あり同じ箇所で同じように悩んでいる方も沢山いるはず！
そんな方々に少しでも参考にして頂けたらと思います。
今回の僕のつまずきポイントはこちら
壁紙に画像やイラストを入れたい
画像やイラストが適用されない原因と対処法
こんなお悩みの方のお役に立てればと思います。
＜使用した壁紙イラストはこちら＞
壁紙に画像やイラストを入れたい
いま作成しているサイトの壁紙全体にに桜の花びらが散っているように設定したいと思い早速Photoshopで桜の花びらのイラストを作成しました。
ここで簡単に桜の花びらの作り方を紹介します。
少し縦長のレイヤーを用意
ペンツール等で桜の花びらを描き 「レイヤー」→「新規塗りつぶしレイヤー」→「お好みの色に設定」
「編集」→「ブラシの定義」をクリック
「ウィンドウ」→「ブラシの設定」→「シェイプ」 「サイズのジッター」→100% 「角度のジッター」→100%
「散布」 「散布」→1000% 「両軸」にチェック（任意の場所に置きたい場合はチェックを外す）
「カラー」 「描画色・背景色のジッター」→100%
「ブラシ先端のサイズ」 これ以上大きくしたくないサイズを指定
「ブラシ」を選択した状態でキャンパス上でクリックすると花びらが舞います。
CSS
この作業で作成したイラストを壁紙に設定するcssのにはこれを使いました。
background-image: url();
カラーを設定するCSSはこちら↓
background-color:
画像やイラストが適用されない原因と対処法
上記のイラストを入れるのにbackground-image: url();を使用しimageファイルを入力したのですが壁紙は元の白のままで変わらず
スペル間違いやファイル間違いも見直したが全く変わらず
だけどカラー設定を入れると反応し壁紙は青や緑に変わる
調べまくった結果、基礎的な入力ミスがあることに気付きました。 それはimageファイルの階層表記をしていなかった事です。
不正解 background-image: url(image/kabegami.png);
正解 background-image: url(../image/kabegami.png);
たった../だけの為に僕は何時間悩んでいたのか・・・。
恐ろしやプログラミング・・・ そしてプログラミングの深さを思い知りました。
壁紙にイラストを設定できた後はイラストのリピートや位置・表示サイズを決めてなんとかこの関門はクリアできました。その時の設定↓
background-repeat: no-repeat; background-position: center center; background-size: cover;
最後に
今までも何度かつまずく事があり、その度に調べるのですが中々書いてる通りに作動してくれなくて何度かサイト作りに限界を感じてやめようかと思った事もあったのですが、こうやって解決することによって同じ悩みを持った人が少しでも前に進めるのではないかと思ったので、自分も少しずつでも前に進んで行こうと思います。
またつまずくような事があった時に解決方法を紹介したいと思います。
最後までお読みいただきありがとうございます★
Comments