【ブログ】有料テーマ「SANGO」と「PORIPU」のカスタマイズメモ。

当ブログはCMSに「WordPress」を用いており、テーマにはこれまで無料高機能な「Luxeritas」を使っていた。とてもシンプル気に入っていたのだが「SANGO」で作られたブログのデザインの良さを見て、導入してみることにした。

この記事は導入のメモ。

SANGOを導入しているブログ

▼マサオカブログ

▼Norilog

上記二つが特に魅力的で「SANGO」を試してみることに。「マサオカブログ」では「SANGO」をカスタマイズした「子テーマ」である「PORIPU」を販売しており、あわせて導入することに。

SANGOとPORIPUの購入金額

SANGOPORIPUあわせて結構な金額になってしまった。

価格
SANGO¥11,000
PORIPU¥4,980
合計¥15,980

ただし、購入には「楽天ペイ」を使用することができたので、楽天ポイントにて支払いを済ませることができた。

SANGOもカスタマイズしてなんぼ

わかってはいたが、SANGOとPORIPUを導入してプレビューを見てみると、とても簡素なものだった。入れただけでは参考サイトのようにはならない。

カスタマイズなしではトップページに新着記事が並ぶだけ。参考にした2つのサイトは相当作りこまれていることがわかる。

とりあえず元の状態に近づける

Luxeritasの時に近づけるためカスタマイズを実施。素人なので5時間くらいかかっただろうか。

なんだかんだ、CSSでの記述が必要な場所があり、とてもてこずった。とくに、カード型表示のアイキャッチ画像部分。

これまで正方形の画像をアイキャッチに使ってきたので、横長の画像に最適化された状態ではレイアウトが崩れた。

▼追加CSSに以下のようなコードを記述

.cardtype__img img {
	max-height : 180px;
	object-fit: cover;
}

これでアイキャッチはなんとかなった。

さらに、YouTubeの埋め込みレイアウトがおかしくなった。

▼追加CSSに以下のようなコードを記述

.wp-block-embed__wrapper {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.wp-block-embed__wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

YouTubeのレイアウトもOK。

Google検索に表示される日付を変更

Google検索で表示される日付は「投稿日」ではなく「更新日」にしておきたい。投稿日のままだだとリライトして新しい情報を加えても、ユーザーが検索結果からそれを知ることは難しい。

そのため、投稿日で検索結果が表示されると大きくアクセスを低下させることになる。これでは頑張ってリライトしても効果は半減だ。

「Luxeritas」は設定で「更新日」を検索結果に表示させることができた。

「SANGO」の子テーマ「PORIPU」でも設定を変更し、投稿画面に「更新日のみ」の表示とすることで、検索結果に「更新日」を表示させられるとのこと。

▼私が導入したバージョンでは「詳細設定」に「更新された投稿では更新日のみを表示する」という設定があった。

▼タイトルの下に表示される日付は、リライトした日付となる。リライトしていない場合は投稿日となる。

Luxeritasでは、投稿日と更新日の両方を表示させたまま検索結果に更新日を表示させられたが、SANGOではこうなってしまうようだ。

とりあえずはこの設定でで更新日が表示されればOK。

トップページを少しカスタマイズ

WordPressテーマ「SANGO」と子テーマ「POPURI」のおかげで以前よりトップページがいいものになった。特におすすめする記事を簡単に表示できるのがありがたい。

▼おすすめ記事の表示

▼タブ表示

トップページにはタブを表示でき「カテゴリ」や「タグ」から記事を取得できる仕組みになっている。

これまではトップページに新着記事のみが表示されていたが、おすすめ記事やタブ表示により、回遊率が上がりそう。

フォローボックスをカスタマイズ

SANGOでは記事の下部に「フォローボックス」を表示できる。フォローボックスにはアイキャッチに登録している画像が表示されるが、ここでもレイアウトがおかしくなった。

▼記事下部に表示されたフォローボックス。そのままではimgの上下に余白があり、文字も見切れている。

▼下記のように表示されるよう修正した。

追加したコード

.like_img img{
	max-height : 250px;
	padding : 0 10px 0 10px;
	margin : 0 auto 0;
	object-fit: cover;
}

上記のコードを追加CSSに追記することによって、正方形のアイキャッチをきれいに表示させることに成功。

おわりに:ほかにも問題がでてきそう

ざっくりとカスタマイズしただけで疲労困憊。他に気づいていない問題もまだありそうだ。

Luxeritasになれてしまっているので、SANGOになじむのはかなり手間がかかる。テーマの導入をするなら早めのほうがいいということを、身をもって知ることになった。

参考ブログのようなレイアウトへの道のりは、果てしなく遠い。

コメントを閉じる

コメントを残す