前回、ヘッダーとカルーセルスライダーの設定をしましたが、今回はその下のアーカイブ記事などが表示されるメインカラムエリアとサイドカラムエリアの設定をします。
あまりデモサイト04との変更点はないのですが、デモサイト01の記事のレイアウトを変更させるボタンを出したい！画像のアスペクト比を変更したい！ボタンを表示させたい！などなど感じたので、変更しました。
今回は、その変更をどのように行ったのか、解説していこうかと思います。
変更する箇所は以下↓の６つです。
メインカラムエリアの設定
①レイアウト切替ボタンの設定
記事のレイアウトの切替を行うことができるボタンを表示させるのは、コントローラーの設定で行います。
場所は、アーカイブページ設定[THE]＞コントローラー設定にあります。
レイアウト切替ボタンの設定の■レイアウト切替ボタンを表示するか選択の箇所を「表示」に設定します。
■レイアウト切替ボタンの初期checkedを選択という箇所は「ノーマルレイアウト」に設定しますが、サイトを開いた時のデフォルトの記事のレイアウトはどれにしますか。という設定です。
「ノーマルレイアウト」の他にも「ワイドレイアウト(default)」「カードレイアウト」の3種類があり、その3種類のレイアウトを自由に切り替えることができる設定をここで行います。
②③④⑤記事一覧リストの設定
②画像アスペクト比の設定、③投稿日の設定、④本文の文字数の設定、⑤ボタンの設定は記事一覧リスト設定で行えます。
場所は、アーカイブページ設定[THE]＞記事一覧リスト設定です。
②の画像アスペクト比の設定は、■画像アスペクト比を選択の4種類の「16：9(default)」「4：3」「1：1」「0：0(非表示)」から選ぶことができます。当サイトでは「4：3」を選択します。
③の投稿日を表示させるには「投稿日を表示する」にチェックを入ます。
④の文字数の設定は、■本文の抜粋文字数を指定で、どれだけの文字数を表示させるか入力します。当サイトでは「90」としています。90字を越えると […]という文字が表示され、それ以降は隠されます。以降が読みたい場合は、ボタンをクリックし、投稿ページに行く仕組みとなっています。
よって、④の「続きを読む」というボタンを表示させたいので、■ボタンを表示するか選択という箇所で「表示」を選択し設定します。
このボタンの色がデモサイト04では黒っぽい色ですが、その色を次↓で変更していきます。
ボタンの色の設定
パーツスタイル設定[THE]＞共通ボタン設定(全ページ用)でボタンの色変更が行えます。
ノーマルボタンの設定という箇所で、任意の色に変更しましょう！
サイドカラムエリアの設定
見出しデザイン設定
サイドカラムエリアの設定は、共通エリア設定[THE]＞サイドカラムエリア設定で行います。
ウィジット見出しデザイン設定の■ウィジットの見出しデザインを選択で、ヘッダーの記事でも紹介した6種類の中から設定します。
ちなみに、6種類は「角丸(default)、シンプル、ボトムボーダー、はみ出すボーダー、シンプル(ワイド)、内側ボーダー(ワイド)」です！
・角丸(default)
・シンプル
・ボトムボーダー
・はみ出すボーダー
・シンプル(ワイド)
・内側ボーダー(ワイド)
当サイトでは、統一性を持たせるため、メニューパネルで使用した「ボトムボーダー」にしています！
■ウィジット見出しの色を指定でお好みの色を指定しましょう！
サイドカラムエリアについても、デモサイト04と違った項目が出ていますが、これもウィジットを設定したためです。そちらについては、ウィジットについての記事で解説できればと思います。