The Thor（ザ・トール）を購入してから、外観をカスタマイズするのが楽しくなっています。ブログの記事そっちのけでカスタマイズ設定をいじくっています。
トップページが初期設定では最新記事のアーカイブですが、これを固定ページにして自分好みにカスタマイズしてみました。
「外観」→「カスタマイズ」→「ホームページ設定」
から変更できます。
トップページ設定
まずは「TOPページ設定[THE]」の項目を設定します。
メインビジュアルは非表示にしました。
これは商用のページや企業用のページならかなり有用な機能だと思いますが、ブログ向けのサイトにはちょっと邪魔かなと思いました。
すぐに記事を見てもらいたいのでメインビジュアルは無しで設定。
そのかわり「カールセルスライダー設定」は表示にしました。
ビジュアル的にも面白いので使ってみます。
個別ページ作成
わたしが作りたかったデザインは、カテゴリ別に3記事ぐらいづつアーカイブ表示されているページです。
記事数が多くなってくると、新着に埋もれてしまいそうなので、カテゴリ別に最新記事を3記事ぐらい表示するために、カラムに分けて表示しました。
↑完成イメージです。
6つのカラムを作って、最新記事を左上に配置して、あとは5つのカテゴリー別最新記事を配置しただけのデザインです。
サイドバーも表示したのでちょっと窮屈かもしれませんが、スマホでは1カラムになるので表示は横長になります。
カラムの2カラム1:1(PC)を選びます。これでPCだと2カラム、スマホだと1カラムの表示になるカラムができます。
そして「見出し3」を１行目に配置しました。
その下の行にカテゴリ指定記事一覧を表示させます。
カテゴリ指定記事一覧表示はショートコードで簡単にできます。
archivelistの後のcatにカテゴリーIDをいれて、numに表示したい記事数を入力します。
最新記事を表示したい場合は「cat=0」にします。
次にボタンを配置して、カテゴリーページへのリンクを張りました。
「共有ボタン」→「セカンダリボタン」→「右」これでボタンを配置して、リンクを設定すれば完成です。
これを3段作りました。
赤丸のパーツは<>の「HTMLを挿入」にて広告を入れてあります。
しつこくなるので1段目だけに入れてありますが、2段目以降に入れるとデザインが崩れてしまいました。
基本的にはこれだけです。
非常に簡単にカテゴリー別の記事表示ができました。
カテゴリーリンクのボタンを消す
今の流れで固定ページを作成すると、↑のようなTOPページができます。
アイキャッチの横のカテゴリーボタンが縦幅を取るので消したいと思いました。
しかし、カスタマイズではショートコードで カテゴリ指定記事一覧 を表示した際のカテゴリーボタンを消す設定が無かったのでCSSをいじって消すことにしました。
「外観」→「カスタマイズ」の一番下の「追加CSS」にコードを追加します。
.archiveScode__contents .the__category {display:none;}ついでにアイキャッチ画像にかかっているカテゴリー表示も「追加CSS」で全部消しました。
.eyecatch__cat { display:none;}これで、イメージしていたのかなり近いトップページができあがりました。
あとはGoogleアドセンスの広告のデザインをカスタマイズしてトップページのデザインにマッチさせると良いかもしれません。
わたしは未だに自動広告のコードをヘッダーに入れたままです(^0^;)
TheThor（ザ・トール）は色々とカスタマイズできて楽しいです！