ジンドゥーホームページの人気レイアウト「TOKYO」のトップページにあるメイン画像の上下を大きくするためのカスタマイズ方法をご紹介します。
TOKYOレイアウトのトップページ画像
メイン画像の上下が大きく、広くなっていると思います。
ちなみに、写真はジンドゥーカフェ太田の店長が撮影した「ルリビタキ」です。
カスタマイズ方法
上記のカスタマイズを行うには、「ヘッダー編集」で以下のソースを追加する必要があります。
TOKYOレイアウトカスタマイズ用ソースコード
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<style type="text/css">
/*<![CDATA[*/
/* =======================================
全体用スタイル
======================================= */
/* =======================================
PC用スタイル
======================================= */
@media screen and (min-width: 768px) {
/*ここにPC用スタイルを記述*/
.cc-indexpage .jtpl-title{
margin: 0;
padding: 500px 0 500px 0 !important;
}
}
/* =======================================
タブレット用スタイル
======================================= */
@media screen and (min-width:768px) and ( max-width:1000px) {
/*ここにタブレット用スタイルを記述*/
}
/* =======================================
モバイル用スタイル
======================================= */
@media screen and (max-width: 767px) {
/*ここにスマホ用スタイルを記述*/
}
/*]]>*/
</style>
PC、タブレット、スマホ用の指示（プログラム）を記載する場所が分かれているので、「PC」の部分にだけ、上下を広げるソースを記述します。
padding: 500px 0 500px 0 !important;
の数値を変更することで、上下の拡大する幅を変更することができます。
注意事項
「ヘッダー編集」の中身をカスタマイズする場合は、上書きなどしてしまうと、元に戻すことができませんので、必ずバックアップをとってから行いましょう。
うまく行かずに元に戻らなくなっても、一切の責任は負いかねますのでご了承ください。