HIT MAGAZINE詳細のタイトルHIT MAGAZINE詳細のタイトルHIT MAGAZINE詳細のタイトル

2018/3/20

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。

記事用小見出しクラス名:.sub_ttl

記事用タイトルクラス:.ttl

通常テキスト。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキス
トテキストテキストテキストトテキストテキストテキストトテキストテキストテキストトテキストテキストテキストテキスト。

テキストテンプレ

テキストリンクにはリンク<a>タグに、クラス「c_txtLink」を付加。

テキストリンクに外部リンクアイコンを付ける場合はクラス「c_txtBlank」を追加。外部リンクテキストテキストテキスト。

テキストリンクにファイルアイコンを付ける場合はクラス「c_txtDl」を追加。ファイル(サイズ****MB)

<p class="u_em">赤テキスト</p>

通常テキスト。太字テキストは<strong>または<b>タグを使用。太字を見た目でさらに強調したいときはクラス「u_em」を設定。<strong class="u_em">強調テキスト</strong>

※注釈テキストクラス名:c_ruleTxt

センター寄せクラス名:u_txtC

左寄せクラス名:u_txtL

右寄せクラス名:u_txtR

回り込みテキストテンプレ

回り込みテキスト右画像クラス:.fig_r

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストトテキストテキストテキストトテキストテキストテキストトテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストトテキストテキストテキストトテキストテキストテキストトテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストトテキストテキストテキストトテキストテキストテキストトテキストテキストテキストテキスト。


<p><img class="fig_r" src="/_dummy/img_article.jpg" width="149" height="132">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストトテキストテキストテキストトテキスト</p>
            

回り込みテキスト左画像クラス:.fig_l

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストトテキストテキストテキストトテキストテキストテキストトテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストトテキストテキストテキストトテキストテキストテキストトテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストトテキストテキストテキストトテキストテキストテキストトテキストテキストテキストテキスト。


<p><img class="fig_l" src="/_dummy/img_article.jpg" width="149" height="132">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストトテキストテキストテキストトテキスト。</p>
            

画像Blockテンプレ

【画像1枚のとき】

画像blockクラス名:img_block
単体で表示させる画像の横幅は最大918pxまで。それ以上の画像は「横:918px・縦:成り行き」に縮小される。

校舎の画像
<div class="img_block">
  <img src="/_dummy/img_article.jpg" alt="" width="720" height="266">
</div>

【画像横並び】

横並びにしたいときは画像にitemクラスを付ける。
横並びさせたい画像のサイズ横幅最大456pxまで。それ以上の画像は「横:456px・縦:成り行き」に縮小される。

<div class="img_block">
  <img src="/_dummy/img_article.jpg" alt="" width="350" height="266" class="item">
  <img src="/_dummy/img_article.jpg" alt="" width="350" height="266" class="item">
</div>

【画像にコメント】

横並びにして画像にコメントも付けたいとき。

<div class="img_block">
  <p class="item"><img src="/_dummy/img_article.jpg" alt="" width="350" height="266">横並びクラス名:item</p>
  <p class="item"><img src="/_dummy/img_article.jpg" alt="" width="350" height="266">横並びクラス名:item</p>
  <p class="item"><img src="/_dummy/img_article.jpg" alt="" width="350" height="266">横並びクラス名:item</p>
</div>

横並びクラス名:item

横並びクラス名:item

横並びクラス名:item

テキストテキストテキストテキストテキストテキス
テキストテキスト

画像の配置について

画像はすべてサイズに関係なくすべてセンター寄せになる。

横並びクラス名:item

横並びクラス名:item

横並びクラス名:item

横並びにした画像の高さが異なると上揃えになる。