【QooQ】関連記事を中央寄せにする方法【カスタマイズ】

初期の QooQ テンプレートの関連記事は左寄せで表示されます。左寄せの場合、関連記事が少ないと、必要以上に右に余白が空いてしまいます。そこで、関連記事を中央寄せにする方法を紹介します。本ブログは QooQ のリスト形式を利用していますが、通常版も同様の修正で変更できます。

変更する前のお願い！
関連記事の表示を中央寄せにする方法
1. 手順
変更できているか確認
1. 関連記事が1行の場合
2. 関連記事が複数行の場合

変更する前のお願い！

この記事はブログを Blogger でブログを運営していた時のものです。QooQ のバージョンは 1.28 を利用していました。現在の Blogger とは仕様が異なる可能性がございますのでカスタマイズされる際はご注意ください。また、QooQのテンプレートを直接変更しますので、実施前に必ずテンプレートのバックアップ作成をお願いいたします。

関連記事の表示を中央寄せにする方法

手順

1.Blogger のテンプレート編集画面にて「関連記事」で検索して以下の位置にコードを追加してください

/* 関連記事 */
#mrp-wrapper{
    margin-top: 2em;
}
#mrp-title{
    font-weight: bold;
}
#mrp-content{
    display: flex;
    flex-wrap: wrap;
    /* 追加コード */　
    justify-content:center;
}

※/* 追加コード */ の justify-content:center; を追加します。

2.テンプレートを保存します。