このコーナーでは、テンプレートのカスタマイズについて、実際のサンプルページを元に紹介していきます。
皆さん、こんにちは。
おちゃのこネットの刑部です。
今回のデザイン道場は、ご利用案内ページの各欄(※お買い物の流れや送料について欄)へのリンク(※左エリアに画像リンク)作成方法をご紹介します。
画像サイズは下記のように作成して下さい。
テキストリンクの場合、画像の作成は必要ありません。
横幅 |
160ピクセル(左エリアの場合)
※中央エリアの場合は、最大490px～500pxとなります。
※画像サンプル160ピクセル |
縦幅 |
特に指定はありません。
※画像サンプル30ピクセル |
画像の保存形式は、GIF、JPG、PNG形式のいずれかで保存して下さい。
サンプル画像
管理画面→デザイン管理→画像専用管理画面をクリックして下さい。
コンテンツフォルダをクリックし、作成した画像をアップロードして下さい。
自由記入欄にhtmlタグを記載します。
管理画面→デザイン管理→画像とコメントの設定の自由記入欄にhtmlタグを記載して下さい。
<div class="side_box" id="help_menu">
<a href="http://cafe0808.ocnk.net/help#01">
<img src="https://cafe0808.ocnk.net/data/cafe0808/image/help_step.gif"
width="160" height="30" alt="お買い物の流れ" border="0">
</a>
<a href="http://cafe0808.ocnk.net/help#02">
<img src="https://cafe0808.ocnk.net/data/cafe0808/image/help_charge.gif"
width="160" height="30" alt="送料について" border="0">
</a>
<a href="http://cafe0808.ocnk.net/help#07">
<img src="https://cafe0808.ocnk.net/data/cafe0808/image/help_tax.gif"
width="160" height="30" alt="税金の表示について" border="0">
</a>
<a href="http://cafe0808.ocnk.net/help#03">
<img src="https://cafe0808.ocnk.net/data/cafe0808/image/help_payment.gif"
width="160" height="30" alt="お支払い方法について" border="0">
</a>
<a href="http://cafe0808.ocnk.net/help#05">
<img src="https://cafe0808.ocnk.net/data/cafe0808/image/help_point.gif"
width="160" height="30" alt="ポイントについて" border="0">
</a>
<a href="http://cafe0808.ocnk.net/help#06">
<img src="https://cafe0808.ocnk.net/data/cafe0808/image/help_member.gif"
width="160" height="30" alt="会員制限について" border="0">
</a>
<a href="http://cafe0808.ocnk.net/help#04">
<img src="https://cafe0808.ocnk.net/data/cafe0808/image/help_icon.gif"
width="160" height="30" alt="アイコンについて" border="0">
</a>
<a href="http://cafe0808.ocnk.net/help#04">
<img src="https://cafe0808.ocnk.net/data/cafe0808/image/help_spec.gif"
width="160" height="30" alt="推奨環境について" border="0">
</a>
</div>
編集後、「設定処理を完了する」ボタンをクリックして下さい。
各リンク先について |
※demo部分はご利用のアカウントIDに変更して下さい。
※独自ドメインの方は、http://demo.ocnk.net/部分を独自ドメインに変更して下さい。
例）http://www.ocnk.net/help/#01
●お買い物の流れ
http://demo.ocnk.net/help/#01
●送料について
http://demo.ocnk.net/help/#02
●お支払い方法について
http://demo.ocnk.net/help/#03
●アイコンについて、推奨環境
http://demo.ocnk.net/help/#04
●ポイントについて
http://demo.ocnk.net/help/#05
●会員制限について
http://demo.ocnk.net/help/#06
●税金の表示について
http://demo.ocnk.net/help/#07 |
リンクの指定方法について |
<a href="http://cafe0808.ocnk.net/help#01">画像用imgタグもしくはテキスト</a>
<a>タグを利用して設定して下さい。
画像をご利用の場合は、<img>タグを、テキストをご利用の場合は、名称を記載して下さい。 |
画像の指定について |
<img src="https://cafe0808.ocnk.net/data/cafe0808/image/help_step.gif"
width="160" height="30" alt="お買い物の流れ" border="0">
<img>タグを利用して設定して下さい。
左エリアに指定される場合は、SSL保護領域にも表示されますので、必ずhttps://のようにhttpの後ろに「s」を付けて記載して下さい。
※独自ドメインをご利用の方
独自ドメインをご利用の方は、画像URLを独自ドメインではなく共用ドメインにて記載して下さい。
例）独自ドメイン：http://www.ocnk.net/ アカウントID：ochanokoの場合
<img src="https://ochanoko.ocnk.net/data/ochanoko/image/help_step.gif"
width="160" height="30" alt="お買い物の流れ" border="0">
|
スタイルシートを編集します。
管理画面→デザイン管理→スタイルシートの編集をクリックして下さい。
スタイルシートの編集画面が開いたら、下記の指定をコピーしてスタイルシート内に貼り付けて下さい。※貼り付け位置は、最下部にお願い致します。
#help_menu img {
margin-bottom: 3px;
}
#help_menu A:hover {
background-color: transparent;
}
編集後、「登録処理を完了する」ボタンをクリックして下さい。
画像間の余白
について |
#help_menu img {
margin-bottom: 3px;
}
#help_menuのid名については、STEP3のhtmlタグ内にて<div>タグに設定したid名を利用します。
|
画像背景
について |
#help_menu A:hover {
background-color: transparent;
}
画像の背景を削除する指定となりますので、そのままコピーしてご利用下さい。
|
前号へ
