THE THOR で投稿ページの 記事コンテンツ をレイアウト変更します。
THE THOR の導入はこちら
Google が推奨する最新の機能を搭載した「THE THOR」を導入する。
※ THE THOR の詳細・ダウンロードについては公式サイトをご覧ください。
レンタルサーバー/ドメインは設定や管理がわかりやすい ConoHa WING を推奨します。
サーバー移行は 専門の業者にお願い することもできます。
関連記事投稿ページのレイアウト基本
このカスタマイズは大きな変更となり不具合が出る可能性がありますので予めご了承ください。また THE THOR のバージョンアップの際に正常に動作しなくなる可能性もあります。（執筆時ver2.2.0）
※カスタマイズは自己責任でお願いします。
カスタマイズ「 記事コンテンツ 」の確認
ここで取り扱う「記事コンテンツ」とは記事本文だけではなく、その後のCTAやウィジェットやコメントなどを指します。つまりヘッダー関連とフッター関連とサイドバー以外のコンテンツを並び替えます。
では記事内容にはどのようなコンテンツがあるか見ていきましょう。
- 記事タイトル
- 投稿日/更新日/閲覧数/コメント数
- アイキャッチ画像
- 投稿ページ上部エリアのウィジェット
- 記事本文
- 投稿ページ下部エリアのウィジェット
- 記事下CTA
- ダブルレクタングル
- SNSフォロー
- Prev Next 記事
- プロフィール
- 関連記事
- コメント
上記は、ページタイトルデザインをノーマル(default)に設定している場合です。バイラル風に設定している場合は、ページタイトルがヘッダーの一部として扱われパンくずリストとの位置関係が変わります。
また、紛らわしい位置にあるカテゴリーの最新記事はフッターとして扱われます。トップページのカテゴリー最新記事と同様の扱いです。
つまりバイラル風タイトルとカテゴリーの最新記事はこのカスタマイズで位置を変更することができません。
以上を踏まえた上で位置変更を行いたいコンテンツはありましたか？
そうなんです。THE THOR のバージョンアップでいくつかのコンテンツの順番を入れ替えることができるようになりました。
順番の入れ替えができるのは以下のコンテンツ
- SNSフォロー
- Prev Next 記事
- プロフィール
- 関連記事
前述の一覧でいう⑨〜⑫です。バージョアップにより9〜11の中で順番を入れ替えることができるようなりました。標準設定でのコンテンツの入れ替え方法は以下のとおり。
外観 → カスタマイズ → 投稿ページ設定[THE] → 各設定の■表示順の指定で1〜4の順番を入力
でももっと他に変えたい場所、ありますよね。
このカスタマイズでは標準設定で変更できる場所以外も変更することが可能です。
記事内容の順番を変更する理由
では改めて、変更したい箇所はありましたか？
個人的な注目は投稿ページ上部エリアのウィジェットと投稿ページ下部エリアのウィジェットです。
当サイトで採用しているカスタマイズは、記事タイトルと投稿日/更新日/閲覧数/コメント数とアイキャッチ画像の並び替え。投稿ページ下部エリアのウィジェットと記事下CTAの並び替えを行っています。
タイトル部分は見た目の好み。記事下CTA部分は、標準のSNSシェアボタン(下部)を非表示にして投稿ページ下部エリアのウィジェットを使いSNSシェアボタンを表示することで記事からCTAが一体化するよう変更しました。※不具合がでたのでSNSボタンは現在表示していません。
記事内容の順番を変更するCSS
CSSを使って順番を変更します。
基本的なコードをコピペしてorderの部分の数字を変更してください。その数字が順番になるので必ず1〜13を割り当てるよう注意。
外観 → カスタマイズ → 追加CSS
コピペする基本的なコードは以下の通り。
/*記事順序入れ替え*/
.l-main > .dividerBottom{
display:flex;
flex-direction: column;
}
.widget{
width:100%;
}
/*記事タイトル*/
.heading.heading-primary{
order:1;
}
/*記事日付など*/
.dateList.dateList-main{
order:2;
}
/*アイキャッチ画像*/
.eyecatch.eyecatch-main{
order:3;
}
/*投稿ページ上部エリアのウィジェット*/
.dividerBottom{
order:4;
}
/*記事本文*/
.pageContents,.postContents{
order:5;
}
/*投稿ページ下部エリアのウィジェット*/
.dividerTop{
order:6;
}
/*記事下CTA*/
.content.postCta{
order:7;
}
/*レクタングル広告*/
.rectangle.rectangle-no{
order:8;
}
/*SNSフォロー*/
.snsFollow{
order:9;
}
/*Prev Next 記事*/
.prevNext{
order:10;
}
/*プロフィール*/
.profile{
order:11;
}
/*関連記事*/
.related{
order:12;
}
/*コメント*/
.comments {
order:13;
}
以上です。
※カスタマイズは自己責任でお願いします。
出来上がりサンプル
あとがき
できないより、できたほうが良いかもしれない？くらいのマニアックなカスタマイズでした。
挨拶で必ずプロフィール書くような人は、プロフィールを上に持っていったり、
クリック率の高いページ上部にCTAを持っていくとか…
工夫しだいで THE THOR のイメージをガラリと変えることができるんじゃないかなーと思います。