THE SONIC ブログ型からサイト型にするやり方

11 min

新着記事から順番に表示されるブログ型からカテゴリーごとやおすすめしたい記事などを自由に配置できるサイト型へとカスタマイズする方法です。

サイイドバーのない、LP(ランディングページ)のようなスッキリとした見た目になります。

再利用ブロックを使っているので、使い回しもしやすくカテゴリーを増やしたいという場合でもすぐに追加できます。

WordPressテーマ THE SONIC でのみ表示を確認しています。ほとんど ブロックエディタ・グーテンベルクの標準機能を使っているので少しいじればほかのテーマでも使えるかもしれません。

動作や表示を保証するものではないのであらかじめご理解下さい。またカスタマイズ前にはバックアップをとっておくことを強くおすすめします。

ブログ型

サイト型

こちらがこのカスタマイズで作成したデモになります。

サイト型にするまでの手順
  1. 固定ページを作成
  2. 子テーマ style.css を編集
  3. カテゴリーごとに再利用ブロックを作成
  4. 上部ウィジットを追加
  5. 下部プロフィールを追加
  6. トップページを公開設定する

WordPressのグーテンベルクエディタは入れ子になっているブロックが分かりにくいので少し苦労すると思いますが挑戦してみて下さい。

トップ用の固定ページを作成

投稿画面の左メニューから「固定ページ > 新規追加」で新しい固定ページを作成します。

ページのタイトルは「トップページ」や「ホーム」など任意のものを付けます。このタイトルはhtmlとして出力されてしまいますが、あとでCSSで非表示にします。

投稿画面右の、「文書 > ページ属性 > テンプレート」を固定ページ1カラム(パンくずとボタンなし) を選択

いったん記事を下書き保存 (Ctrl + S、⌘ + S) しましょう。

つぎに右のメニューからパーマリンクの設定をします。

URL スラッグに 「top」や「home」などを入力します。

投稿画面下の 「SEO:Title・メタタグ」のメタディスクリプションを入力します。(プラグイン「THE SONIC SEO Plugin」 が必要です。)

タイトルは空欄でOKです。カスタマイザーの設定がそのまま出力されます。

子テーマのstyle.css を編集

余白がたくさんできる

現段階(2020年6月)では固定ページの記事周りには上下左右の余白ができます。

この余白を消さないと、画面いっぱいにブロックや画像を表示できないので CSS で調整します。

また、仕様によりページのタイトルがh1タグで挿入されているのも気になるところです。

FTP (SFTP)クライアントを使ってログイン後、THE SONIC の子テーマ内にある「style.css」を編集しましょう。

必ず 子テーマ内のファイル をバックアップしてから編集して下さい。

style.css
/*--------------------------------------
固定トップページ
--------------------------------------*/
/*背景色*/
.bg-white {
	background: #ffffff;
}

.bg-gray {
	background: #eeeeee;
}

.bg-blue {
	background: #ebf4ff;
}

.bg-default {
	background: #ECEBE1;
}

/*ページのタイトルを非表示にする*/
.home .entry-header h1 {
	display: none;
}

/*コンテンツ余白削除*/
.home #content {
	margin: 0;
}

/*横幅を広く*/
.home #content-in {
    width: unset;
}

/*最大幅に*/
.home #content-in.hb {
	max-width: unset;
	padding: 0;
}

/*記事余白削除*/
.home #content-in .main-in {
	margin: 0;
	/* padding: 0; */
}

/*記事上下余白削除*/
.home .entry-content {
	padding-top: 0;
	padding-bottom: 0;
}

/*フルサイズ幅*/
.home .is_fullwidth {
	margin-left: -16px;
	margin-right: -16px;
	margin-bottom: 0;
}

.home .wp-block-group.is_fullwidth {
	margin-bottom: 0;
}

/*固定幅を指定*/
.home .width-1120 {
	max-width: 1120px;
	margin: 0 auto;
	padding: 15px 0;
}

/*カテゴリーh2タイトルをリセット*/
.home .entry-content h2 {
	background: transparent;
	text-align: center;
	color: #555;
	margin: 0 auto;
	padding-top: 30px;
	border: none;
}

.home .entry-content h2:before {
	display: none;
}

/*カラムの上部余白*/
.home .wp-block-columns {
	padding-top: 2rem;
}

.home .wp-block-column {
	margin: 1rem;
}

/*上部最新記事*/
.home .latest-column p.latest-title {
	margin-bottom: 0;
	background: #02B1C3; /*ボックスの色*/
	color: #fff;
	font-size: 1.1em;
	font-weight: 900;
	padding: .3rem;
}

.home .latest-column ul {
	padding: 10px 20px;
	margin-bottom: 10px;
}
.home .latest-column ul li {
	border-bottom: 1px solid #ddd;
}

.home .latest-column {
	background: #fff;
	border: 2px solid #02B1C3;/*ボックスの枠色*/
	padding-top: 0;
	text-align: center;
}

/*カテゴリーの説明ラッパー*/
.home .category-detail {
	padding: 0 1rem;
}

/*ピックアップラベル*/
.home .pickup-label {
	display: block;
	text-align: center;
	padding: .5rem;
	letter-spacing: 3px;
	box-shadow: 0 0 3px #888; /*ボーダー色*/
	color: #555;
	font-weight: 600;
	width: 92vw;
	max-width: 1080px;
}

/*もっと見るボタン*/
.home .category-detail .wp-block-buttons {
	text-align: center;
	padding-bottom: 1rem;
}

/*カテゴリー最新記事リスト*/
.home .category-latest {
	padding-left: 0;
}

.home .category-latest li {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-right: 1rem;
	border-bottom: 1px solid rgba(0, 0, 0, .2);
}

/*記事カードのラベル*/
.home .inlink-label {
	display: none;
}

/*記事カード背景色*/
.home .inlink-linkarea {
	background: rgba(255,255,255,.4);
}

/*フッタのプロフィール*/
.home .footer-profile .wp-block-column {
	background: rgba(255,255,255,.4);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	padding: 1.5rem;
	margin: 0 1rem;
	border-radius: 5px;
}

/*SNSボタンのカラー*/
.home .footer-profile .wp-block-column .share-btn {
    color: #555;
}

@media (max-width: 767px) {
	.home .wp-block-group .wp-block-column:first-child {
		margin-bottom: 2rem;
	}

	.home .bg-profile .wp-block-column:first-child {
		margin-bottom: 2rem;
	}

	.home .pickup-articles .link-card {
		max-width: 95%;
		margin: 0 auto 1rem;
	}
}

@media (min-width: 768px) and (max-width: 1029px) {
	.home .main-in {
		padding: 0;
	}

	.home .pickup-articles .link-card {
		max-width: 95%;
		margin: 0 auto 1rem;
	}

	.home .wp-block-group .wp-block-column:first-child {
		margin-bottom: 2rem;
	}

	.home .bg-profile .wp-block-column:first-child {
		margin-bottom: 2rem;
    }
}

@media (min-width: 1030px) {
	.home .is_fullwidth {
		margin-left: -36px;
		margin-right: -36px;
	}

	.home .pickup-articles .link-card {
		display: inline-block;
		width: 49.5%;
		vertical-align: top;
		margin-bottom: 1rem;
	}
	.home .pc-reverse {
		display: flex;
		flex-direction: row-reverse;
	}
}

/*空のpタグ非表示*/
.home p:empty {
	display: none;
}

各色などはTHE SONIC デフォルトに合わせているので適宜 color: # やbackground: # を変更して下さい。

完了したら子テーマ内のstyle.css にコードを追記します。

トップページ用の再利用ブロックを作成

トップページの構成
  1. 上部のウィジット、検索バー、新着記事の再利用ブロック
  2. おすすめ記事やカテゴリーの再利用ブロック x 好きな数
  3. 下部のプロフィール再利用ブロック

トップページは全て再利用ブロックで構成されています。

そのため、まずはカテゴリーごとに再利用ブロックを作成していきましょう。

再利用ブロック全体 > 1つのグループの中に子ブロックが全て入っている = フル幅指定

グループ内の子ブロック (カラム、見出し、記事一覧など) > 固定幅(1,120px) 指定

子ブロック

再利用ブロックはすべて1つの「グループ」ブロックで囲んでいます。そのグループにはフル幅で表示するためのCSSクラス「is_fullwidth」の指定をしています。

そのフル幅指定したグループの中に固定幅の子ブロックを配置します。見出しや、画像、記事一覧などのブロックが全てここに入ります。

ただし、そのまま子ブロックを配置するとPCなど広い画面で表示したとき横に広がってしまいかなり見にくくなってしまいますので、子ブロックに幅指定の追加CSS 「width-1120」 を指定する必要があります。

ここでは子ブロックは固定幅(1,120px)としています。ちょっと手間ですが、カラムや段落ごとに指定しましょう。

でもいちいちそんな指定するのは面倒ですよね。

再利用ブロックは外部からインポート(取り込み)可能です。すでに作成済みの再利用ブロックを使いましょう。

ブロックの中身を入れていくだけである程度完成します。

まずはこちらの3つの .jsonファイル をダウンロードします。

カテゴリーごとに再利用ブロックを作成

左メニューの「再利用ブロック管理」を開いて、「JSONからインポート」をクリックしましょう。

ファイルの選択をクリックして、ダウンロードした「トップ-カテゴリーテンプレート.json」を選択してインポートボタンを押します。

jsonインポート

表示したいカテゴリーの分だけインポートしてください。

インポートしたらブラウザを再度読み込みしましょう(WindowsはF5キー)

カーソルをタイトル名に乗せて、編集をクリックしてテンプレートを編集します。

インポートした

まずは、タイトルをカテゴリー名など分かりやすいように変更しましょう。再利用ブロックの管理に使うだけなのでタイトルはトップページには表示されません。

テンプレートの編集

そして、再利用ブロック全体を囲んでいる「グループ」ブロックを選択します。ブロックが入れ子になっていて分かりにくいですが、このアイコンが出るまで矢印キーで上下してください。

これがグループブロックアイコン。

グループブロックを選択

全体のブロックを囲んでいるのがグループブロックです。

グループブロック

そしてカテゴリー全体の背景色を変更するにはグループを選択後、投稿画面右の「追加CSSクラス」の bg-default となっているところを変更します。

白なら bg-white、灰色なら bg-gray、青なら bg-blue を用意しています。もしくはstye.cssを編集して好きな色を追加してください。

グループの設定

投稿画面右の高度な設定から、HTMLアンカーを設定できます。(リンクをクリックしたときに見出しまで移動する機能のこと) こうしておくことで後で設定するボックスナビからリンクを飛ばすことができるようになります。

つぎにカテゴリー名を変更します。デフォルトではh2としてタイトルが出力されます。削除してカバー画像を使った見出しにしてもよいでしょう。

左カラムのカテゴリーの説明を任意のものに変えます。

続いて、もっと見るには表示させたいカテゴリーへのリンクを入れておきます。

右カラムにはカテゴリー別の新着記事を表示されるようになっています。

投稿画面右のメニューからカテゴリーを選択して、表示させたい数を選択します。

アイキャッチ画像を表示したいときには一覧をタイル表示にしてから、「アイキャッチ画像を表示」にチェック、画像サイズを「中」、カラム数を2か3くらいにしておくと良いと思います。画像の位置は「中央揃え」にします。

ピックアップ記事を追加

こちらのピックアップ記事は子グループブロックに「width-1120」が指定してあり固定幅となっています。

ピックアップの下の+マークをクリックして、「内部/外部リンク」を好きなだけ追加していきましょう。

ピックアップ記事

ピックアップ記事もグループの中に入っているので、グループ外になってしまうと表示が崩れます。ブロックの移動をしてグループの中に入るようにしましょう。

2つ目以降を追加するときは、すでに追加してあるリンクカードをクリックしてEnterを押すとうまく追加できます。

ここまでいくとこんな感じの表示になります。

途中経過

あとは追加したいカテゴリーの数だけを.jsonを追加していきましょう。

おすすめ記事だけをまとめた再利用ブロックを作成してもよいと思います。

その場合などは、新規再利用ブロックを作って以下のように追加CSSを指定しましょう。

グループを作成、追加CSSに 「is_fullwidth」を指定

そのグループ内の子ブロック(カラム、段落など)に対して「width-1120」を指定

グループ(フル幅) :> グループ(固定幅) > ブロック

グループを入れ子にすれば子ブロックに対していちいち追加CSSを指定する必要はありません。しかしブロックエディタだとどっちのグループに入れたのか視覚的に分かりにくいので個別に固定幅を指定するほうがよさそうな気がします。

応用:カラムを交互に表示する方法

逆表示

デフォルトでは左にカテゴリー説明、右に新着記事というカテゴリー表示になっています。カテゴリーごとに同じスタイルも下に続くのもいまいちなのでカテゴリーが1個ごとに左右を入れ替えるようにしてみましょう。

やり方は簡単で、カテゴリー説明と新着記事のカラムに対して、高度な設定の 追加CSSで「pc-reverse」を指定してするだけです。(画像のpc_reverseは誤りです)

ただし、モバイルの縦表示では見にくくなるので正順で表示できるようになっています。

逆表示

画像を表示したい場合

画像を挿入するときには、「カバー」ブロックを使いましょう。

グループで「is_fullwidth」を指定指定しているので、カバー画像は自動的にフル幅表示になります。

  • 背景の透過率 0 % で画像の通常の明るさ
  • 画像の高さをpx単位で指定

またカバーには文字や別のブロックを挿入できるので、カテゴリーの見出しに使ったりしてみましょう。

他のブロックと幅を揃えたい場合は、追加CSS「width-1120」を指定することもできます。

上部に表示するウィジットを作成

ダウンロードした「トップ-上部ウィジットテンプレート.json」を再利用ブロックの管理からインポートしましょう。

上部ウィジット

ナビゲーションアイコンを追加

ボックスナビゲーションを表示させたい場合は、ぽんひろ.com のコードを子テーマの style.css へコピペします。

そのままのコードだと表示が崩れるので該当箇所を修正しましょう。余白調整と、PC表示のカラムを3列に変更します。

style.css
.p-nav{
    margin: 0 0 2em;/* 全体外余白 */


.p-nav ul li{
    -ms-flex-preferred-size: calc(100%/3);/* 3列 */
    flex-basis: calc(100%/3);/* 3列 */

あとは、ボックスナビゲーションを入れたカスタムHTMLの中身を自分の好きなようにカスタマイズしてください。

FontAwesomeのアイコンなどを設定したり、URLを入れます。このURLをグループブロックで指定したHTMLアンカー(#アンカー名)にすると、ボックスナビアイコンをクリックしたとき、カテゴリーまで移動できます。

また、検索 <form>内の action=”https://xxx.com” を自分のサイトのURLに変更して下さい。

右カラムの「すべての記事」に「/all_archives/」へのリンクを挿入しておきます。

下部プロフィールを追加

お好みでトップページの一番下にプロフィールを追加しましょう。

再利用ブロックの管理からダウンロードした「トップ-プロフィールテンプレート.json」をインポートします。

プロフィール

YouTubeやTwitterなどSNSのリンクは自分のものに書き換えて下さい。

SNS情報は、自分のブログのプロフィール(サイドバーなど)のソースからコピペしてもOKです。

サイドバーのSNS情報

自分のサイトのソースを表示してコピー

トップページに再利用ブロックを配置

これまでに作った再利用ブロックのショートコードをコピペして、表示したい順番にコピペしていきましょう。

  • 上部ウィジット
  • カテゴリー x 任意の数
  • プロフィール
再利用ブロック

再利用ブロック管理画面のショートコードをそれぞれクリックしてコピーします。

そして、固定ページの作成したトップページに表示したい順番に貼り付けていきましょう。

順番に貼り付ける

投稿記事一覧を表示するページを追加

記事一覧

固定ページ > 新しいページを作成

タイトルは「投稿記事一覧」など適当につけて、下書き保存をする

パーマリンクを 「all_archives」 などを付けて「公開」

中身は空でOKです。

トップページをフロントに表示させる

表示設定

設定 > 表示設定

固定ページを選択

  • ホームページ:トップページ
  • 投稿ページ:投稿記事一覧

これで完成です。おつかれさまでした。

補足メモ

グーテンベルクを使っているといつの間にか空のpタグ <p></p>が挿入されてしまうことがあります。ブロック間に変なスキマができてしまう場合はこいつが原因の場合があります。

文章を入力、または / でブロックを選択」となっている箇所をBackspaceで削除する方法が一番手っ取り早いですが、空のpタグ目立たなくて分かりにくいのです。

このカスタマイズではpタグが空だった場合に非表示にしています。

.post-id-XXXXX p:empty {
  display: none;
}

投稿画面右上の縦3つの…アイコンをクリック

コードエディターを選択。以下の記述を削除します。

消す箇所を間違えるとブロックの表示が崩れるので注意して下さい。

終わったら、ビジュアルエディターに戻しましょう。

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

好きなようにカスタマイズ可能

フル幅指定と、固定幅指定を使い分ければ好きなようにブロックの配置が可能です。

このカスタマイズは一例なので、応用して自分のサイトに合うようなデザインにしてみてください。

THE SONIC カスタマイズ記事

ZIMA

気になるガジェットやサービスをレビュー!日常生活のアップデートを目標に役に立つ情報を掲載していきます。

仕事のご依頼などはお問い合わせからどうぞ。

FOLLOW

カテゴリー:
関連記事

コメントを残す

メールアドレスが公開されることはありません。