春なのでこのブログのトップページも桜色な風景を背景画像にしてみました。
このサイトはWordPressテンプレートDigipress Attractive(デジプレス)を使ってます。
Matureでも同様のカスタマイズが可能です。
DigipressのオリジナルCSSサンプルコードをこちらで紹介します。
目次
Digipressメインバナー部分の背景を画像にする方法
まず、サイトを公開しているサーバーへFTP接続
サーバー内の好みの階層へ背景に使う画像をアップロードします。
今回の例ではドメイン直下に/imgというフォルダを作りました。
そのimgフォルダに使いたい画像をアップロード
使用する画像サイズは横幅1600px 縦500pxにしています。
Digipress Attractiveはデフォルトでこのバナー表示エリアの高さ(div#site_banner_container )は420pixになっていますが、なんとなく大きめの画像をエリアの中心に配置するよう調整してみました。
サンプルコード
div#site_banner_container {
background-image: url(“http://あなたのドメイン/img/画像ファイル名.jpg”);
background-repeat: no-repeat;
background-position: center center;
}
このコードをDigipressデザイン編集画面でコピペするだけです。
これでサイトのトップページの雰囲気がガラリと変わりますね。
※デジプレスのversionによっては誤作動を起こしますので利用の際はバックアップの上自己責任で行ってください。
今流行の少しぼかしをいれた風景写真んあかを背景にすると洗練された雰囲気が出たりしますので是非お試しください。
サンプル背景画像を無料配布
個人的に趣味で撮影したものですのでお好きに使って頂いて大丈夫です。
(再配布は禁止です)
ややファイルサイズが大きくなりますが加工していただいてもOKです。
クリックして拡大の上、右クリック→画像を保存
などでPCに保存した上でご利用ください。
(このURLへの直リンク使用はご遠慮ください)