Tidy サンプルについて

Tidyは見やすく整理されたデザインを意識して作成されたデモサイトです。

このデモで使われているデザイン設定を一部紹介致します。

※サンプルについての注意事項はコチラ

Tidyについて

➀ヘッダー画像

ヘッダーのコンテンツは「テーマ管理」＞「ヘッダー」のヘッダーコンテンツ設定で挿入されています。

挿入文字及び画像が確認できない場合は「③テキストモード」でご確認ください

参考

ヘッダーコンテンツ作成機能

➁おすすめヘッダーカード

おすすめヘッダーカードは「テーマ管理」＞「おすすめ記事一覧」のおすすめヘッダーカードで編集できます。

参考

おすすめヘッダーカード

トップページのカテゴリ一覧

PCでは2列、モバイルでは1列になるカテゴリ一覧を表示するトップページです。

トップページの設定

トップページのコンテンツは「テーマ管理」＞「トップページの設定」の挿入コンテンツで編集できます。

参考

トップページ

作成する手順

2列レイアウトの作成（「PCとTab50%」の挿入）
見出しカバー写真の作成（バナー風ボックスの挿入）
カテゴリ一覧の作成（「カテゴリ一覧タグ」の挿入）
ReadMoreボタンの挿入（「ミニボタン」の挿入）

2列レイアウトの作成（「PCとTab50%」の挿入）

2列レイアウトは「タグ」＞「PCとTab50%」の挿入で作成できます。

この左側のコンテンツと右側のコンテンツにそれぞれカテゴリ一覧を作成し、必要な数だけ追加していきます。

レイアウトの作成方法の詳細は以下を参考にして下さい。

参考

レイアウト（記事パーツ）

見出しカバー写真の作成（バナー風ボックスの挿入）

各カテゴリのカバー見出しには「タグ」のバナー風ボックスを使用します。

[st-flexbox url="（リンク先URL）" rel="nofollow" target="" fontawesome="" title="カテゴリA" width="" height="200" color="#fff" fontsize="150" radius="0" shadow="" bordercolor="" borderwidth="1" bgcolor="#ccc" backgroud_image="（背景にしたい画像URL）" blur="" left="" margin_bottom="0"]
<p style="color: #fff;">旅行に関するまとめ</p>
[/st-flexbox]

バナー風ボックスは「好きな文字」や「背景画像」を指定できます。

詳しい使い方は以下を参考にして下さい。

参考

バナー風デザインを作成するショートコード「バナー風ボックス」

カテゴリ一覧の作成（「カテゴリ一覧タグ」の挿入）

カテゴリ一覧ショートコードでは任意のカテゴリの一覧を表示できます。

デフォルトでは記事ID「0（全て）」になっているので、表示したい記事IDを指定します

[st-catgroup cat="（カテゴリID）" page="（表示件数）" order="desc" orderby="id" child="on" slide="off" slides_to_show="3,3,2" slide_date="" slide_more="ReadMore" slide_center="off"]

参考

カテゴリ一覧ショートコード

ちなみに「記事一覧ショートコード」を使用して読んで欲しい記事を指定して並べるのもオススメよ

ReadMoreボタンの挿入（「ミニボタン」の挿入）

「ReadMore」ボタンはタグのミニボタンを使用し、リンク先には各カテゴリ一覧のURLを設定しています。

また、サンプルでは位置の調整として<div class="center" style="margin-bottom: 20px;">でセンター寄せと下に余白を追加しています。

[st-mybutton-mini url="（リンク先URL）" title="Read More" rel="" fontawesome="fa-file-text-o" target="" color="#fff" bgcolor="#edbbcf" bgcolor_top="" borderradius="20" fontsize="" fontweight="" fontawesome_after="" shadow="" ref=""]

</div>

参考

カスタムミニボタン（ショートコード）