駐車場状況レイアウトテスト

ああああああああ

フィールド概要

H2タグ。上の画像にPタグが入っています。意識せずに画像を貼付けると、自動的に入るようです。

 

自然の地形を巧みに活かした東西南北に広がる多彩な23コースは、新たなスノースポーツシーンを演出！スキー場から深化した多彩なスタイルで楽しめる新たなイメージ　スノーフィールドへ。あなたの　楽しみ方「自由」！

印刷について

 Macのクロームで印刷をかけると、「クッラッシュ」と表示される。クローム自体は落ちない。FireFoxでは問題無い。

タイトル表示について

タイトルの表示のブルー背景の右側に、作者や日時、印刷アイコンが吹き出すパターンがあったけど、でなくなった。

テーブル表記

項目はthタグ、幅は指定せず。センター配置。style="margin-left: auto; margin-right: auto;"とCSSが当る

リンクボタン

<a class="readon" href="/urlを記述" target="_blank"><span>LinKや詳しく</span></a>
aタグのclassに　readon　を付けるだけ

Link

リフト＆コース状況のモジュール 

classに幅を指定してあげれば、自在な大きさにできます。記事編集の下部「モジュールの挿入」で「1つのDIVに埋め込み」にチェックし、その下の「Divクラスの名」に　w1_2per　（幅の50％）等を入れる

 

0）タイトルにボックスを 付ける方法

駐車場の空室状況のカスタムモジュール配置してみました。ライブカメラと同じ仕組みがあれば、何処でも配置できると思います。

同じようにリフトやコース状況もやれば完璧！カナ？ 

記事編集画面の下部「モジュール挿入」で挿入できます
<p>第一駐車場｛module 第1駐車場-状況｝本当は半角の括弧</p>
<p>第2駐車場｛module 第2駐車場-状況｝本当は半角の括弧</p>
<p>第3駐車場｛module 第3駐車場-状況｝本当は半角の括弧</p>

交通情報

JCEのテキストエディタは、プレーンなテキスト（HTMLタグの指定が無い）は、強制的に<P>または<div>タグで包まれる。（コントロールパネルで変更可能／設定は変更しない予定）。[hide]側で、<span>タグで包んで編集しても、[show]側に変えると、<p>タグに包まれてしまうので、<span>のまましたいのなら、そのまま「保存」するように、注意が必要です。

第一駐車場<span>で包んでいる第2駐車場

第3駐車場 

• 第一駐車場
• 第2駐車場
• 第3駐車場

ライブカメラ} 

上の「ブロック」のタイトルは、Joomlaが制御して付けたこのページ全体のタイトルです。コンテンツ内で同様の表示をしたい場合は、

•  hide（HTMLコード）で下記のように記述する

<div class="module-title-surround">
<div class="module-title">
<h1 style="visibility: visible;" class="title">ゲレンデリポートREPORT</h1>
</div>
</div>

１）2つブロックをブログスタイルでやる方法

• メニューの「ページクラスサフィックス」にサフィックスを追加すると、表示されるサフィックス全体にCSSが適用される。
• 下記は、ブログレイアウト　と同じような仕様で表示した。
• hide（HTMLコード）

<div class="rt-teaser-articles1 multicolumns">
<div class="first float-left width50"> このクラスに box1　などで修飾できる

rt-teaser-articles　を使うと「More Articles」　がJSで判断して、下部に出されるので
rt-teaser-articles1　と新しいスタイルを　template.css　に加える。

.rt-teaser-articles1 {
 display: inline-block;
 margin-top: 20px;
}

２）2つブロックをモジュールスタイルでやる方法

• メニューの「ページクラスサフィックス」にサフィックスを追加すると、表示されるサフィックス全体にCSSが適用される。
• 下記は、モジュールポジションに当てていると同じような仕様で表示した。
• hide（HTMLコード）

  <div class="rt-grid-3">
  <div class="box1 title5">

  の部分のclassを変更して、デザインを変える。

• 1つ目の　rt-grid-3　はボックの幅
• 2つ目の　box1 title5　は装飾。

2列組の使用例

4-1スタイルの例
タイトルに半角スペースを入れるとその前後で色が変わる（<span>要素が入る／全角では入らない）
<div class="rt-grid-1_2per"> <!-- 幅を比率で決める　2列組は　1_2 　3列組は　1_3 -->
<div class="box1"> <!-- ボックスのスタイル box1-3 枠ありの3種類 -->
<div class="rt-block bg_color_w"> <!-- bg_color_w でボックスの背景を白色にする -->
<div class="module-title-surround">
<div class="module-title">
<h3 class="title txt_color_w" style="visibility: visible;">　文字を白色に 4-1タイトル　　</h3>
</div>
</div>
<div class="rt-module-surround">
<div class="rt-module-inner">
<div class="module-content">
<p>　本文が入る。
class="box1"。class="title txt_color_w"
class="rt-block bg_color_w"
</p>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</div>
</div>

 

 

 

 

 

 

 

 

 

 

 

3列組の使用例

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

1列組の使用例