【GrandThemeサンプル】 – P 012

ブロックでの
タグ利用

この各ブロックの通常のページ編集はもちろん、
使用する背景画像の構図に合わせ、左寄せ、右寄せ等、タグで簡単に設定可能。
 
このブロックの個別表示や、moreタグで『続きを読む』としたい場合は、
固定ページの編集画面で【1カラム-TOP～Second表示用】テンプレートを選択。
※背景画像の下部が非表示になるケース
【1】掲載画像の回り込み設定等をして、テキストの掲載量が画像サイズより少ない場合。
【2】以下で説明の「長方形エリアタグ」内でmoreタグを設定したい場合。
★修正方法：【1】画像と文章量の調整。【2】moreでは無くリンク（別ページへ）設定。
 
見出しや長方形エリアの設定一覧、カラムや他タグについては以下をご覧下さい。
…続きを読む
 

ボタン　無色+18色

 
Button 00
 
タグ（Button 01 の場合↓）数値『01』とテキスト『Button 01』の箇所を変更してご利用下さい。
そして、#の箇所は、リンク先のURLへ変更して下さい。
※以下をそのままコピー利用すると”が全角になるので、半角に変更して下さい。
<a class=”btn btn01” href=”#”>Button 01</a>
 

円ボタン（大きさ固定5種）無色+18色

 
Button 03Button 07Button 15
 
円ボタン（無色+18色）の設定も可能です。
又、このブロックをmoreタグで『続きを読む』としたい場合は、
固定ページの編集画面で、
【1カラム-TOP～Second表示用】
のテンプレートを選択して下さい。
（このテンプレートのヘッダー部背景はデフォルトを利用しています）
（ヘッダー背景不要の場合は【★中ヘッダー00】の画像類を削除しましょう）
 

…続きを読む
 

四角ボタン（角丸）
（大きさ固定5種）無色+18色

 
Button 05Button 08Button 16
 
四角ボタン（角丸）（無色+18色）の設定も可能です。
又、このブロックをmoreタグで『続きを読む』としたい場合は、
固定ページの編集画面で、
【1カラム-TOP～Second表示用】
のテンプレートを選択して下さい。
（このテンプレートのヘッダー部背景はデフォルトを利用しています）
（ヘッダー背景不要の場合は【★中ヘッダー00】の画像類を削除しましょう）
 

…続きを読む
 

通常ページのタグ
・見出し
・カラム
・表組等

 
詳細を見る
 
 

 
スライドショー利用は、プラグイン【Easing Slider】がレスポンシブ対応でお勧めです。
このブロックで、横幅100%のスライドショーとしたい場合は、
以下のように、スライダーのタグの前に、</div></div>と記載して、
タグの後に、<div id=”container_field_top”><div class=”text_area”>のタグを加える事で可能です。
 
</div></div>●スライダーのタグ●<div id=”container_field_top”><div class=”text_area”>
 

このブロックにテキストエリアを掲載する事は必須ではありません。
以下のように、PNGの透過画像を重ねるだけでも良いと思います。

ブロックはここまでです。