このコーナーでは、テンプレートのカスタマイズについて、実際のサンプルページを元に紹介していきます。
皆さん、こんにちは。
おちゃのこネットの刑部です。
今回のデザイン道場は、テンプレートが少し限定されますが、キャッチフレーズ欄を利用してページ上部に画像を挿入する方法をご紹介します。
※推奨テンプレート
このカスタマイズでは、ページ上部に固定で全ページに画像を挿入するため、トップ画像が背景画像パターンである程度上部にスペースのあるテンプレートのご利用を推奨します。
※「管理画面」→「画像とコメントの設定」内の上部説明内に※注意内に「こちらのテンプレート」で表示されるテンプレートとなります。
画像サイズ
横幅 |
自由
※画像サンプル200ピクセル |
縦幅 |
自由
※画像サンプル90ピクセル |
画像の保存形式は、GIF、JPG、PNG形式のいずれかで保存して下さい。
サンプル画像
管理画面→デザイン管理→画像専用管理画面をクリックして下さい。
コンテンツフォルダをクリックし、作成した画像をアップロードして下さい。
管理画面→デザイン管理→画像とコメントの設定をクリックして下さい。
キャッチフレーズに下記の内容をコピーして貼り付けて下さい。
<div class="header_banner">
<a href="#">
<img src="https://cafe0808.ocnk.net/data/cafe0808/image/banner_sa.jpg"
width="200" height="90" alt="送料無料"border="0" />
</a>
</div>
<div class="header_banner">
について |
画像を囲む枠となります。 |
<a>
について |
画像からリンクする場合は、リンク先を指定して下さい。
※リンクされない場合は、<a>と</a>タグを削除して下さい。
|
<img>
について |
<img>タグを利用して画像を挿入します。。
※今回の例では画像にしていますが、htmlタグやテキストを挿入いただいても結構です。
※全ページに表示されますので、画像URLは、必ず
https://共用ドメイン/のURLにて記載して下さい。
|
管理画面→デザイン管理→スタイルシートの編集をクリックして下さい。
スタイルシートの編集画面から、下記の指定をコピーしてスタイルシート内に貼り付けて下さい。
※貼り付け位置は、最下部にお願い致します。
#copy {
position: relative;
}
.header_banner {
position: absolute;
top: 150px;
left: 50px;
}
編集後、「登録処理を完了する」ボタンをクリックして下さい。
#copy
について |
キャッチフレーズ欄にposition指定を追加します。
※ご利用テンプレートの中には、既に#copy内にposition指定のあるテンプレートがございます。
その場合は、必要ありませんので、必ずご利用テンプレートの#copyをご確認下さい。
※サンプルで利用しているcafe0808のハイクオリティも既に#copy内に指定があります。
|
.header_banner
について |
画像の表示位置を指定します。
position指定でabsoluteを指定します。
この指定は、絶対位置指定となりますので、ブラウザのサイズ等を変更しても位置は変更しません。
位置の指定は、topが上部からの位置、leftが左からの位置となりますが、基準点は、#copyの左上となります。
テンプレートによりこの数値は異なりますので、ご自身で調整して下さい。
topの値を大きくすることで、位置は下に移動します。
leftの値を大きくすることで、位置は右に移動します。
|
前号へ
