■東京熱のテストサイトの簡単な説明です。

SANGOテーマのブログ形式

今回は動画レビュー用になっていますが、ランキングなどの機能自体は他に流用できるので、FXサイトのレイアウトの参考にしてください。

下記の画像はクリックすると別窓で拡大表示ができます。

トップページ

・ヘッダーメニュー

サイトの状況をみて項目を増やす予定です。

女優一覧はカリビアンコム動画レビューと同じものを実装予定でいます。

 

・2分割ヘッダーアイキャッチ(画像+文章)

最近のテーマはヘッダーにサイト説明を記入する部分が無いので、この部分で簡潔に記載しておきます。

またスマホ表示では、画像の下に文章を配置するので、トップの看板代わりになります。

 

・PickUP記事

トップページの記事一覧上にのみ表示されます。

管理画面のウィジェット設定の記事一覧上に手動で、記事用のHTMLタグを記述しています。

まとめ記事のリンクにする場合が多い部分です。

 

・記事一覧タブ切替

新着記事に加えて、カテゴリー別、タグ別に記事一覧を表示する部分です。今回は、カテゴリーを動画のシリーズにしています。

 

・サイドバーのランキング

総合ランキング、カテゴリー別、タグ別のランキングを実装しています。表示するページごとに変わります。

タグ別のランキングは珍しく、色々なワードを扱うサイトに使えると思います。

 

・サイドバーのサイトの記事を書いてる人

運営者を今回は、ドM眼鏡女子に設定して画像も用意しました。

運営者情報のプロフィールは、エッチな体験談を記載してプロフィールの代わりにします。

 

・サイドバーの星評価

記事一覧に表示している星評価の記事のまとめ。カテゴリーに見えるけど、特定のタグを抜き出してカテゴリーみたいに表示しています。

 

・サイドバーのカテゴリー

親子のカテゴリーが見やすいように調整しています。

 

・フッター

東京熱にあるキーワードから頻度が高いものを選んで、タグに設定してボタンリンクの形にしました。

 

・フッターメニュー

サイト案内の各ページをボタンリンクで表示しています。

カテゴリー

・記事一覧の並び替え

カテゴリやタグの記事一覧の該当件数とともに、公開日の古い順、累積閲覧数の順に並び替える機能を実装しています。

累積閲覧数は、元々SANGOテーマ自体で累積アクセスをカウントしているのでそれを利用しています。

 

・サイドバーのカテゴリー、タグ別ランキング

サイドバーにあるランキングは、カテゴリーならカテゴリー別、タグならタグ別の人気ランキングです。こちらは、24H、1週間とか期間を設定できるので別物です。

個別ページ・画像が多い場合

個別ページ・画像が少ない場合

公式サイトのサンプル動画のスクリーンショットとサンプル画像を使用して作成しています。

 

・画像が多い場合

撮りおろし徹底陵辱ビデオは、看板シリーズなので画像が豊富にあります。

 

・画像が少ない場合

・チーム木村は、素人の面接風などを装っているので、サンプル画像がほぼ無く動画は数秒です。

記事に使う画像をサンプル動画のスクリーンショットで確保して記事を作成してみました。

 

どちらも記事の構成は同じです。レビュー部分は、黒板と星評価、レーダーチャートを実装しています。

少し手間がかかりますが、記事投稿時に指定の場所にタグやスクリプトを入力して表示しています。

 

また記事の最後にカード形状のカテゴリー別人気ランキングを設置しています。

 

スマホで見た時にランキングが2つになるので、運用時にはサイドバーの方をスマホで表示しないようにします。

スマホトップページ

スマホ表示は、サイドバーが下に回り込む形になります。

トップの2分割ヘッダーアイキャッチ(画像+文章)の見え方がPCとスマホで違います。看板になるという意味は見れば分かります。

Mobile Sliding Menu