コラム記述法

導入前の課題

工場のBCP対策と電気代削減によるコストカットを図りたい

導入後の成果・効果

年間で約130万円の電気代削減
事業継続力強化計画認定取得（BCP対策）
設備導入にあたり神奈川県の補助金に採択（かながわスマートエネルギー計画）

コラム記述法

table

汎用table

tableタグに”layout_table”を付与

ああああ	ああああああああ
ああああ	ああああああああ
ああああ	ああああああああ


			<table class="layout_table">
		<tr>
			<th>ああああ</th>
			<td>ああああああああ</td>
		</tr>
		<tr>
			<th>ああああ</th>
			<td>ああああああああ</td>
		</tr>
		<tr>
			<th>ああああ</th>
			<td>ああああああああ</td>
		</tr>
	</table>

cellの色を変える

th または td に、class=”stripe_cell”を付与することで、ボーダー背景に変更できる。

	ああああああああ	ああああああああ
ああああ	ああああああああ	ああああああああ
ああああ	ああああああああ	ああああああああ


			<table class="layout_table">
		<tr>
			<th> </th>
			<th>ああああああああ</th>
			<th>ああああああああ</th>
		</tr>
		<tr>
			<th class="stripe_cell">ああああ</th>
			<td>ああああああああ</td>
			<td>ああああああああ</td>
		</tr>
		<tr>
			<th class="stripe_cell">ああああ</th>
			<td>ああああああああ</td>
			<td>ああああああああ</td>
		</tr>
	</table>

スマホ時、スクロールtable

table要素を class=”scroll_box” を指定した要素に入れる

ああああ	ああああああああああああああああああああああああああああああああ
ああああ	ああああああああああああああああああああああああああああああああ
ああああ	ああああああああああああああああああああああああああああああああ


			<div class="scroll_box">
		<table class="layout_table">
			<tr>
				<th>ああああ</th>
				<td>ああああああああああああああああああああああああああああああああ</td>
			</tr>
			<tr>
				<th>ああああ</th>
				<td>ああああああああああああああああああああああああああああああああ</td>
			</tr>
			<tr>
				<th>ああああ</th>
				<td>ああああああああああああああああああああああああああああああああ</td>
			</tr>
		</table>
	</div>

scroll_innerで内包することでtable以外にも使用可能


			<div class="scroll_box">
		<div class="scroll_inner">
			<img src="/wp-content/uploads/2020/11/thumb_sample.jpg" alt="">
		</div>
	</div>

スマホ時、thが上に来る

table要素を class=”sp_table_box” を指定した要素に入れる

ああああ	ああああああああああああああああああああああああああああああああ
ああああ	ああああああああああああああああああああああああああああああああ
ああああ	ああああああああああああああああああああああああああああああああ


			<div class="sp_table_box">
		<table class="layout_table">
			<tr>
				<th>ああああ</th>
				<td>ああああああああああああああああああああああああああああああああ</td>
			</tr>
			<tr>
				<th>ああああ</th>
				<td>ああああああああああああああああああああああああああああああああ</td>
			</tr>
			<tr>
				<th>ああああ</th>
				<td>ああああああああああああああああああああああああああああああああ</td>
			</tr>
		</table>
	</div>

画像について

　アイキャッチについて

サイズ：800px × 450px

　figure要素

figure要素を使用すると、キャプション等も入れられて便利です。


			<figure>
		<img src="https://taiyoukou-secchi.com/wp-content/uploads/2020/11/thumb_sample.jpg" alt="">
		<figcaption>画像のキャプション</figcaption>
	</figure>

　pc_half_img（PC時、画像サイズを50%に）

pcで画像サイズ50%かつ中央寄せ


			<img src="/wp-content/uploads/2020/11/thumb_sample.jpg" alt="" class="pc_half_img">

boxスタイル

　border_box

グレー枠が付与されるboxスタイルです。


			<div class="border_box">
		ああああああああああああああああああああああああああああああああああああああああああ
	</div>

gray_box

グレー背景が付与されるboxスタイルです。

ライトブルー背景が付与されるboxスタイルです。　（class=”liteBlue_box”）

ライトレッド背景が付与されるboxスタイルです。（class=”liteRed_box”）


<div class="gray_box">
	ああああああああああああああああああああああああああああああああああああああああああ
</div>

shadow_box

グレーの境界線と box-shadow が付与されるboxスタイルです。


<div class="shadow_box">
	ああああああああああああああああああああああああああああああああああああああああああ
</div>

description_box

タイトル: 内容ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ


<dl class="description_box">
	<dt>タイトル</dt>
	<dd>
		内容ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
	</dd>
</dl>

フキダシ

アイコン画像は100×100px

アイコン左

あああああああああああああああああああああああああああああああああああああああああああああ


<div class="hukidashi_left">
	<div class="faceicon"><img src="アイコン画像のパス" alt=""></div>
	<div class="hukidashi_text">
		あああああああああああああああああああああああああああああああああああああああああああああ
	</div>
</div>

アイコン右

あああああああああああああああああああああああああああああああああああああああああああああ


<div class="hukidashi_right">
	<div class="hukidashi_text">
		あああああああああああああああああああああああああああああああああああああああああああああ
	</div>
	<div class="faceicon"><img src="アイコン画像のパス" alt=""></div>
</div>

aside


<aside>
<dl>
	<dt>Tips</dt>
	<dd>
		<div class="title05">asideタイトルあああ</div>
		asideテキストあああああああああああああああああああああああああああああああああああああああああああああ
	</dd>
</dl>
</aside>

引用

ああああああああああああああああああああああああああああああああああああああああああ

ああああああああああああああああああああああああああああああああああああああああああ
引用元


<blockquote>
	<p>ああああああああああああああああああああああああああああああああああああああああああ</p>
	<p>ああああああああああああああああああああああああああああああああああああああああああ</p>
	<cite>引用元</cite>
</blockquote>

listスタイル

順不同リスト（ul）

list01

あああああああああああああああああああああああ
あああああああああああああああああああああああ
あああああああああああああああああああああああ


			<ul class="list01 gray_box m_l">
		<li>あああああああああああああああああああああああ</li>
		<li>あああああああああああああああああああああああ</li>
		<li>あああああああああああああああああああああああ</li>
	</ul>

list04

あああああああああああああああああああああああ
あああああああああああああああああああああああ
あああああああああああああああああああああああ


			<ul class="list04">
		<li>あああああああああああああああああああああああ</li>
		<li>あああああああああああああああああああああああ</li>
		<li>あああああああああああああああああああああああ</li>
	</ul>

list05

あああああああああああああああああああああああ
あああああああああああああああああああああああ
あああああああああああああああああああああああ


			<ul class="list05">
		<li>あああああああああああああああああああああああ</li>
		<li>あああああああああああああああああああああああ</li>
		<li>あああああああああああああああああああああああ</li>
	</ul>

inline_list01

あああああ
いいいいい
ううううう
えええええ
おおおおお
かかかかか

こちらは短文ワードのリストが多いときに使えるかと思います。


			<ul class="inline_list01">
		<li>あああああ</li>
		<li>いいいいい</li>
		<li>ううううう</li>
		<li>えええええ</li>
		<li>おおおおお</li>
		<li>かかかかか</li>
		<li>ききききき</li>
		<li>くくくくく</li>
		<li>けけけけけ</li>
	</ul>

例）class=”border_box”との組み合わせ

box系のクラスと組み合わせると様々なデザインに汎用的に変えられます。
以下は、class=”border_box”と組み合わせた例です。
他には、class=”gray_box” や class=”shadow_box” 等が使えると思います。

あああああああああああああああああああ
あああああああああああああああああああ
あああああああああああああああああああ


						<div class="border_box">
			<ul class="list01">
				<li>あああああああああああああああああああ</li>
				<li>あああああああああああああああああああ</li>
				<li>あああああああああああああああああああ</li>
			</ul>
		</div>

例）class=”icon_Blue”でアイコン色を変更

ulまたはol要素に、class=”icon_Blue” を付与し、listのアイコンカラーを変更できます。
いまは水色しか用意していないですが、必要に応じて追加します。

あああああああああああああああああああ
あああああああああああああああああああ
あああああああああああああああああああ


							<ul class="list01 icon_Blue">
				<li>あああああああああああああああああああ</li>
				<li>あああああああああああああああああああ</li>
				<li>あああああああああああああああああああ</li>
			</ul>

タイトル付きリスト

title_list

リストタイトル

ああああああああああああああああああああああああああ
リストタイトル

ああああああああああああああああああああああああああ
リストタイトル

ああああああああああああああああああああああああああ


<ul class="title_list">
	<li>
		<dl>
			<dt>リストタイトル</dt>
			<dd>ああああああああああああああああああああああああああ</dd>
		</dl>
	</li>
	<li>
		<dl>
			<dt>リストタイトル</dt>
			<dd>ああああああああああああああああああああああああああ</dd>
		</dl>
	</li>
	<li>
		<dl>
			<dt>リストタイトル</dt>
			<dd>ああああああああああああああああああああああああああ</dd>
		</dl>
	</li>
</ul>

番号リスト

num_list01

あああああああああああああああああああ
あああああああああああああああああああ
あああああああああああああああああああ


<ol class="num_list01">
	<li>あああああああああああああああああああ</li>
	<li>あああああああああああああああああああ</li>
	<li>あああああああああああああああああああ</li>
</ol>

num_list02

あああああああああああああああああああ
あああああああああああああああああああ
あああああああああああああああああああ


<ol class="num_list02">
	<li>あああああああああああああああああああ</li>
	<li>あああああああああああああああああああ</li>
	<li>あああああああああああああああああああ</li>
</ol>

タイトル付き番号リスト

num_list01

リストタイトル

ああああああああああああああああああああああああああ
リストタイトル

ああああああああああああああああああああああああああ
リストタイトル

ああああああああああああああああああああああああああ


<ol class="num_title_list">
	<li>
		<dl>
			<dt>リストタイトル</dt>
			<dd>ああああああああああああああああああああああああああ</dd>
		</dl>
	</li>
	<li>
		<dl>
			<dt>リストタイトル</dt>
			<dd>ああああああああああああああああああああああああああ</dd>
		</dl>
	</li>
	<li>
		<dl>
			<dt>リストタイトル</dt>
			<dd>ああああああああああああああああああああああああああ</dd>
		</dl>
	</li>
</ol>

注記リスト

caution_list

ああああああああああああああああああああああああああ
ああああああああああああああああああああああああああ
ああああああああああああああああああああああああああ


<ul class="caution_list">
	<li>ああああああああああああああああああああああああああ</li>
	<li>ああああああああああああああああああああああああああ</li>
	<li>ああああああああああああああああああああああああああ</li>
</ul>

caution_num_list

ああああああああああああああああああああああああああ
ああああああああああああああああああああああああああ
ああああああああああああああああああああああああああ


<ul class="caution_num_list">
	<li>ああああああああああああああああああああああああああ</li>
	<li>ああああああああああああああああああああああああああ</li>
	<li>ああああああああああああああああああああああああああ</li>
</ul>

その他装飾リスト

voice_list

ああああああああああああああああああああああああああ
ああああああああああああああああああああああああああ
ああああああああああああああああああああああああああ


<ul class="voice_list">
	<li>ああああああああああああああああああああああああああ</li>
	<li>ああああああああああああああああああああああああああ</li>
	<li>ああああああああああああああああああああああああああ</li>
</ul>

check_list

ああああああああああああああああああああああああああ
ああああああああああああああああああああああああああ
ああああああああああああああああああああああああああ


<ul class="check_list">
	<li>ああああああああああああああああああああああああああ</li>
	<li>ああああああああああああああああああああああああああ</li>
	<li>ああああああああああああああああああああああああああ</li>
</ul>

circle_list

ああああああああああああああああああああああああああ
ああああああああああああああああああああああああああ
ああああああああああああああああああああああああああ


<ul class="circle_list">
	<li>ああああああああああああああああああああああああああ</li>
	<li>ああああああああああああああああああああああああああ</li>
	<li>ああああああああああああああああああああああああああ</li>
</ul>

cross_list

ああああああああああああああああああああああああああ
ああああああああああああああああああああああああああ
ああああああああああああああああああああああああああ


<ul class="cross_list">
	<li>ああああああああああああああああああああああああああ</li>
	<li>ああああああああああああああああああああああああああ</li>
	<li>ああああああああああああああああああああああああああ</li>
</ul>

リンク

ボタン

btn01


<div class="btn01">
	<a href="#">btn01</a>
</div>

btn02


<div class="btn02">
	<a href="#">btn02</a>
</div>

ブログカード

ワードプレスのショートコードで記述します。

コラム記述法


[nlink url="/column/***/**********/"]

「/column/」以下はコラムページのパス

見積もりフォームへのカード

[quote title=”お見積りはこちら！！！”]

title=”” のところに入力したテキストが、ブログカードのテキストとして出力される。


[quote title="お見積りはこちら！！！"]

空白または[quote]だけの場合、「お見積り作成（無料）」となる。

[quote title=””] [quote]


[quote title="お見積りはこちら！！！"]
[quote]

画像

そのままimgタグを埋め込んでもコラムの最大幅を上回らないようになっています。
最大幅以下の画像の場合、真ん中寄せになります。

回り込み画像

右回り込み

テキストが右に回り込みます。ああああああああああああああああああああああああああああああああああああああああああああああああああああ

ああああああああああああああああああああああああああああああああああああああああああああああああああああ


<div class="clearfix">
	<div class="align_right">
		<img src="https://taiyoukou-secchi.com/wp-content/uploads/2020/11/thumb_sample.jpg" alt="">
	</div>
	<p>ああああああああああああああああああああああああああああああああああああああああああああああああああああ<p>
</div>

左回り込み

テキストが左に回り込みます。ああああああああああああああああああああああああああああああああああああああああああああああああああああ

ああああああああああああああああああああああああああああああああああああああああああああああああああああ


<div class="clearfix">
	<div class="align_left">
		<img src="https://taiyoukou-secchi.com/wp-content/uploads/2020/11/thumb_sample.jpg" alt="">
	</div>
	<p>ああああああああああああああああああああああああああああああああああああああああああああああああああああ<p>
</div>

画像の角丸化

画像が角丸になります。


<div class="radius_img">
	<img src="https://taiyoukou-secchi.com/wp-content/uploads/2020/11/thumb_sample.jpg" alt="">
</div>

動画掲載


<div class="video">
	［embed］https://www.youtube.com/watch?v=YU4VXA9Cras［/embed］
</div>

fontスタイル

fontサイズ

class=”f_s”	フォントサイズがデフォルト値の 89% になります。（約-2pt）
class=”f_l”	フォントサイズがデフォルト値の 120% になります。
class=”f_xl”	フォントサイズがデフォルト値の 120% になります。

font太さ

strong要素やb要素は使用せず、こちらを使用する。

class=”f_bold”	テキストが太字になります。

fontカラー

class=”f_Navy”	フォントのカラーがネイビーになります。
class=”f_L-Blue”	フォントのカラーがライトブルーになります。
class=”f_Gold”	フォントのカラーがゴールドになります。
class=”f_Red”	フォントのカラーがレッドになります。

マーカー・ライン

class=”maker_Yellow”	テキストに半分マーカーペンを引いたようなスタイルになります。
class=”maker_Yellow_full”	テキストに全体にマーカーペンを引いたようなスタイルになります。
class=”maker_L-Bule_full”	テキストに半分マーカーペンを引いたようなスタイルになります。
class=”maker_L-Bule_full_full”	テキストに全体にマーカーペンを引いたようなスタイルになります。
class=”underline_Gold”	テキストにゴールドの下線を引きます。
class=”underline_L-Blue”	テキストにライトブルーの下線を引きます。

余白のスタイル

下余白

class=”m_xs”	要素の下に5px marginをとります。
class=”m_ss”	要素の下に10px marginをとります。
class=”m_s”	要素の下に15px marginをとります。
class=”m_l”	要素の下に25px marginをとります。
class=”m_ll”	要素の下に30px marginをとります。
class=”m_xl”	要素の下に40px marginをとります。
class=”m_xxl”	要素の下に50px marginをとります。

上余白

class=”mt_xs”	要素の上に5px marginをとります。
class=”mt_ss”	要素の上に10px marginをとります。
class=”mt_s”	要素の上に15px marginをとります。
class=”mt_l”	要素の上に25px marginをとります。
class=”mt_ll”	要素の上に30px marginをとります。
class=”mt_xl”	要素の上に40px marginをとります。
class=”mt_xxl”	要素の上に50px marginをとります。

class=”tag_L-Blue”	タグライトブルーのタグ
class=”tag_White”	タグホワイトのタグ

ツールチップ

テキストにカーソルを合わせるとツールチップが表示されます

事業所の屋根・駐車場・遊休地などの敷地を活用してソーラーパネルを設置し、太陽光によって作った電気を事業所へ供給する仕組みを「自家消費型太陽光発電」といいます。電力会社から自家消費型太陽光発電に電力の供給を切り替えることで、電気料金の負担を大幅に削減します。また、太陽光発電によって作られた電気（再生可能エネルギー）を使うことで、CO2排出量を削減し企業価値向上に繋がります。

ツールチップの追加は、 /tooltip/tippy.js に記述していく。

CTAショートコード

自家消費型太陽光発電

Contact

太陽光発電に関する

ご相談・見積もり

はこちら

ご不明点などお気軽にご相談ください
無料相談
まずは導入コストや費用対効果を確認
無料概算見積もり

0120-751-126

（平日｜9時～18時）


[cta_selfsolar]

FIT権利・発電所売却

[cta_fit]


[cta_fit]

土地買取

Contact

土地・農地の買取査定

はこちら

かんたん入力60秒！
無料買取査定スタート

0120-751-126

（平日｜9時～18時）


[cta_estate]

PHPインクルードショートコード

事例スライダー

Warning: include(/home/houseproduce/taiyoukou-secchi.com/public_html/test/wp-content/themes/taiyo-new2023/include-file/jirei.php): failed to open stream: No such file or directory in /home/houseproduce/taiyoukou-secchi.com/public_html/test/wp-content/themes/taiyo-new2023/functions.php on line 194

Warning: include(): Failed opening '/home/houseproduce/taiyoukou-secchi.com/public_html/test/wp-content/themes/taiyo-new2023/include-file/jirei.php' for inclusion (include_path='.:/opt/php-7.4.33-2/data/pear') in /home/houseproduce/taiyoukou-secchi.com/public_html/test/wp-content/themes/taiyo-new2023/functions.php on line 194

PHPファイルのディレクトリは、
/taiyoukou-secchi.com/public_html/wp-content/themes/taiyo-new2022/include


[myphp file='jirei']

コラム記述法

table

画像について

boxスタイル

gray_box

shadow_box

description_box

フキダシ

アイコン左

アイコン右

aside

引用

listスタイル

順不同リスト（ul）

list01

list04

list05

inline_list01

例）class=”border_box”との組み合わせ

例）class=”icon_Blue”でアイコン色を変更

タイトル付きリスト

title_list

番号リスト

num_list01

num_list02

タイトル付き番号リスト

num_list01

注記リスト

caution_list

caution_num_list

その他装飾リスト

voice_list

check_list

circle_list

cross_list

リンク

ボタン

ブログカード

見積もりフォームへのカード

画像

回り込み画像

右回り込み

左回り込み

画像の角丸化

動画掲載

fontスタイル

fontサイズ

font太さ

fontカラー

マーカー・ライン

余白のスタイル

下余白

上余白

タグ

ツールチップ

CTAショートコード

自家消費型太陽光発電

FIT権利・発電所売却

土地買取

PHPインクルードショートコード

事例スライダー

Contact 太陽光発電に関する ご相談・見積もり はこちら

さらに詳しく知りたい方へ 気になるポイントを詳しく解説します

Contact

太陽光発電に関する
ご相談・見積もり
はこちら

さらに詳しく知りたい方へ
気になるポイントを詳しく解説します