おちゃのこ通信 Vol.127 - デザイン道場 - おちゃのこネットメールマガジン

このコーナーでは、テンプレートのカスタマイズについて、実際のサンプルページを元に紹介していきます。

皆さん、こんにちは。おちゃのこネットの刑部です。
今回のデザイン道場は、先日リリースされたfacebookコメント欄を利用した際に表示されるタイトル画像を変更する方法をご紹介します。

	http://cafe0808.ocnk.net/

タイトル画像を作成する

タイトルに使用する画像を作成します。

各テンプレートで少しサイズは異なりますが、基本的には横幅670ピクセルで作成して下さい。
画像サイズは下記のように作成して下さい。

横幅	670ピクセル ※サンプル：670ピクセル
縦幅	自由です。 ※サンプル：40ピクセル

画像の保存形式は、GIF、JPG、PNG形式のいずれかで保存して下さい。

サンプル画像 (※縮小表示しています)

画像ファイルをアップロードする

作成した画像をアップロードします。

管理画面→デザイン管理→画像専用管理画面をクリックして下さい。

コンテンツフォルダをクリックし、作成した画像をアップロードして下さい。

赤枠部分が、アップロード箇所、青枠部分にアップロードされた画像が表示されます。

商品画像と区別するためにも、コンテンツフォルダにアップロードして下さい。整理にも役立ちます！

スタイルシートを編集する

スタイルシートの編集を利用して、タイトルを変更します。

管理画面→デザイン管理→スタイルシートの編集をクリックして下さい。

スタイルシートの編集画面が開いたら、下記の指定をコピーして貼り付けて下さい。
※貼り付け位置は、最下部にお願い致します。

.detail_page_body .fb_comment .ptitle {
width: 670px;
height: 40px;
padding: 0px;
text-indent: -9999px;
background-image: url(image/fb_comment_title.gif);
}

編集後、「登録処理を完了する」ボタンをクリックして下さい。

widthについて	width: 670px; 画像サイズの横幅となります。作成された画像ファイルの横幅を指定して下さい。
heightについて	height: 40px; 画像サイズの縦幅となります。作成された画像ファイルの縦幅を指定して下さい。
paddingについて	padding: 0px; テンプレートによりpaddingが指定されている場合がありますので、0pxを指定して下さい。
text-indentについて	text-indent: -9999px; 既存のタイトル名を非表示に設定します。
background-image について	background-image: url(image/fb_comment_title.gif); 背景画像を設定します。背景画像にて設定しますので、STEP2にてアップロードいただいた画像のURLを記載して下さい。画像URLを記載いただく際には、必ずimage/～の相対パスにて記載して下さい。http://～の絶対パスにて記載いただいた場合、SSL保護下のページでセキュリティ警告が表示されます。記載例） background-image: url(image/fb_comment_title.gif);

なお、お問い合わせは下記ページからお願い致します。

https://www.ocnk.net/contact/index.php