事前の注意事項

更新履歴

2017年7月24日、内容をバージョンアップしました

テンプレート「Rome」は、2016年3月30日にレスポンシブレイアウトに変更することができるようになりました。

当記事でご紹介するのは、固定幅レイアウトの「Rome」での有効な方法です。

テンプレート「Rome」で背景画像の大きさと位置を固定する方法

Jimdoのテンプレートは設定した背景画像は、画面全体に拡大されて表示されますが「大きさを固定して表示したい」と思ったことありませんか？

今回はテンプレートの中でも使いやすさに好評にある「Rome」で、背景画像の大きさを固定して表示する方法をステップ形式でご紹介します。

※今回ご紹介する方法は「Rome」専用のため他のテンプレートにはそのまま使用できませんのでご注意ください。

背景画像の大きさを固定した見た目

編集を始める前に知っておきたいこと

CSSと呼ばれるホームページ作成の専門コードが必要となりますが、決まった型があるので、必要な部分（数値）を書き換えるだけと簡単なのでぜひお試しください。

使用するCSSのコード

下記のコードで書き換える部分は、◯の部分のみです。◯には数字が入ります。

背景画像の大きさに合わせて、調整をしながらご利用ください。

※コードはコピー＆ペーストでご利用いただけます

<style type="text/css">
/*<![CDATA[*/
@media screen and (min-width:768px) {
    .jtpl-header--image.jqbga-container.jqbga-web--image {
        background-size: ◯px !important;
        background-position: 50% ◯px !important;
        background: #f5ffe6;
        background-repeat: no-repeat;
        height: ◯px;
}
}
@media screen and (max-width:767px) {
.jtpl-header--image.jqbga-container.jqbga-web--image {
        background-size: 100% !important;
}
/*]]>*/
</style>

数字に書き換えるですが、それぞれ画像の大きさや位置を指定しています。

今回のコードでは下記のような指定をしています。

「background-size」：背景画像の横幅

「background-position」：背景画像が表示される位置

「height」：背景画像を表示するエリアの高さ

ホームページ上の見た目ですと下記のようになります。