Tidy サンプルについて

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

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

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

Tidyについて

➀ヘッダー画像

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

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

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

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

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

トップページの設定

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

作成する手順

  1. 2列レイアウトの作成(「PCとTab50%」の挿入)
  2. 見出しカバー写真の作成(バナー風ボックスの挿入)
  3. カテゴリ一覧の作成(「カテゴリ一覧タグ」の挿入)
  4. 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;">でセンター寄せと下に余白を追加しています。

<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>

その他

  • TOPページの「NEW ENTRY」はウィジェットのトップページ下部ウィジェットに挿入されています

配布データはコチラ

更新日:

Copyright© Tidy , 2019 All Rights Reserved Powered by AFFINGER5.