当サイトで導入しているWordPressテーマ・TCD「RIKYU」で、私が個人的に行っているカスタマイズの情報を、この記事にまとめました。これまで複数の記事に分散していた情報をこちらに集約し、新しい情報も書き加えてあります。コードに粗が目立つかもしれませんが、そのあたりは素人のやることなので、温かな目でご覧ください。
なお、本記事の掲載内容は、あくまで一個人による非正規でささやかなカスタマイズでしかありません。ただ、これまで私自身がウェブ上の公開情報に助けられてきたように、このような小さな情報もどなたかのお役に立つかもしれないと思い、記事として残しておくことにしました。より本格的な情報については、下記のTCD LABOなどをご参照願います。
また、本記事はあくまで参考情報であり、以下の点にご注意ください。
ヘッダーとフッターで表示するロゴ画像を変える
「RIKYU」は、企業ロゴを白抜きにして背景色をつけたときにデザイン性がもっとも高まります。ただ、学而図書のロゴは揮毫された書が主体となっているため、ヘッダーだけは白地に通常ロゴを掲載したいと考えました。
ロゴの変更
当サイトでは、①通常のロゴ画像（白抜きではないもの）を標準に設定し、②ヘッダーの背景色を消して、③フッターから通常ロゴを消去し、④フッターに白抜きのロゴ画像を上から配置する、という方法にしてみました。
/* ヘッダーロゴ背景色の透明化 */
.l-header__logo {
background-color: transparent;
}
/* フッターロゴのみ白抜き画像に変更 */
.l-footer__bottom-logo img {/* ロゴの消去 */
display: none !important;
}
.l-footer__bottom-logo {/* ロゴの差し替え */
background-image: url("/* 白抜きロゴ画像のURLを挿入 */");
background-repeat: no-repeat;
width: 160px; /* サイズ調整 */
height: 52px; /* サイズ調整 */
background-size:contain;
}フッターの調整（モバイル時）
ロゴの変更にあわせて、モバイル時のフッターの挙動を調整したかったので、以下のCSSでカスタマイズしています。ある程度の画面幅になると、ロゴがセンタリングされたり、フッターの高さが調整される仕様です。
@media screen and (max-width: 599px) {/* モバイル時センタリング */
.l-footer__bottom-inner {
justify-content: center !important;
}
}
@media screen and (max-width: 767px) {/* モバイル時フッター幅調整 */
.l-footer__bottom-inner {
height: 65px !important;
}
}ヘッダーのキャッチフレーズ位置調整
ヘッダー用ロゴの背景色を白にすると、ロゴ本体とキャッチフレーズが離れすぎて、バランスがいまひとつになります。そこで、以下のような形でバランスを整えてみました。ここだけpxではなくemで設定されているのは、私に余裕がなかったからだと思われます。
/* ヘッダーのキャッチフレーズ位置調整 */
.l-header__catch {
margin-left: -3em;
}カテゴリー表示のレイアウト調整
商品名の上に表示されるカテゴリー表示（角丸四角で囲まれている文字列）のバランス調整です。全体的にフォントを変更したせいか、カテゴリー名の配置が中心からずれたため、位置取りを直しています。
モバイル時の対応は、カテゴリー名が長すぎて2列になってしまうとみっともないので、小さい画面のスマホでも1列で表示しきれるよう文字を詰めたりしています。pxとemが混在しているところに、素人感と切迫感がにじみ出てくる仕上がりとなりました。
/* 商品カテゴリー表示のバランス調整 */
.c-post-category {
padding: 0 15px 0 !important;
}
@media screen and (max-width: 1250px) {/*モバイル時・横向き対応*/
.c-post-category {
letter-spacing: -0.09em !important;
}
}お知らせ・ブログに更新日を表示させない
記事の更新日が自動で表記されるのは本来メリットなのですが、投稿日だけを記載しておきたい場合には、以下のCSSで更新日が消えます。サイトのテーマを変更した当初は、テストを兼ねて頻繁に更新を重ねていたので、一時的にこのコードで投稿日だけを表示するようにしていました。それぞれの記事の編集画面で、カスタムCSS欄にこのCSSを追記すると、その記事でだけ更新日を消すこともできるはずです。
/*お知らせ・ブログの更新日を表記しない*/
.c-date--updated {
display: none;
}
商品画像に「在庫切れ」を表示させない
当サイトでは非売品も紹介していますが、WooCommerceとの兼ね合いから、「非売品＝在庫切れ」扱いで商品登録しています。ただ、これだけだと非売品の書影（商品画像）に「在庫切れ」表示が出てしまうので、以下のCSSで消すことにしました。当サイトの主目的がオンラインストアではなく、書籍の紹介だからこその調整で、一般的には必要のない行為だと思われます。
/* 商品画像に「在庫切れ」を表示させない */
.p-archive03-item-outofstock {
visibility: hidden;
}お買い物カゴ・購入数バッジのレイアウト調整
商品をお買い物カゴ（カート）に入れていただくと、ヘッダー部分のカートに商品点数がバッジ（丸数字）で表示されます。ただ、この数字が丸の中央から少しずれてしまったのが気になり（フォントをいじくり回したので……）、位置を調整してみました。ちなみに、私が愛用しているメーラー・Thunderbirdの新着メール数を表示するバッジも、数字が丸の中心から大きくずれています。このような部分を気にする人間など、世界にはほとんど存在しないのでしょう。私の神経質さがよくあらわれているカスタマイズです。
/* お買い物カゴ・購入数バッジのレイアウト調整 */
.p-header-membermenu-cart-badge {
padding-bottom: 2px !important;
}WooCommerce関連ボタンのデザインを少しだけ角丸化
実は、当サイトのWooCommerce関連ボタン（「注文する」など）は、誰にも気づかれない程度に角丸化されています。これらのボタンは、元々ぴしっとした四角形なのですが、Google Payのエクスプレスチェックアウトとの兼ね合い等々で、少しだけ角丸にしたほうが違和感がなかったのです。そのぶん、モバイル時のクーポン入力用ボタンなど、四角形を前提としたデザインに、わずかなほころびが生じています。ただ、ボタンごとに設定を変えるのは業務量的に割に合わないので（面倒なので）、これで妥協しました。
/* WooCommerce関連ボタンのデザイン調整 */
.button {
border-radius: 3px !important;
}購入手続き時のチェックボックスを大きくする
WooCommerceでは、アカウント登録や、配送先住所の追加、利用規約への同意などに、チェックボックスを利用することになります。ただ、標準のサイズでは▢が小さくて、チェックしにくいのが気になりました。そこで、以下のCSSで、少しだけチェックボックスのサイズを大きくしています。ボックスのサイズは、「scale」の値で調整可能です。
/* チェックボックスのサイズ変更 */
input[type=checkbox] {
transform: scale(1.4);
margin: 0 5px 0 0;
}お支払い方法のアイコンを右寄せ
WooCommerceに決済サービスを導入すると、購入手続き画面で、お支払い方法（クレジットカードなど）にアイコンを表示できる場合があります。
当サイトが導入している決済サービス「KOMOJU」では、お支払い方法の名前とアイコンがくっついて表示されますが、このアイコンだけを右端に揃えたいと考えました。そのためのCSSが、以下となります。
/* KOMOJU関連アイコンを右寄せ */
.payment_methods img {
float: right;
}KOMOJU導入後の相性問題への対処
以下は、決済サービス「KOMOJU」をTCDテーマ「RIKYU」に導入した際に発生する相性問題への対処方法です。より詳細な情報は、以下の記事からご確認ください。
スマホ決済系の説明ボックスが空白になる
「RIKYU」の支払い画面（おそらく最近のTCDテーマ共通のデザイン）では、支払い手段を選ぶと、説明ボックス（フキダシ）がスライドして出てきます。ただ、「KOMOJU」導入後に、au Pay、PayPay、Line Payなど、スマホ決済系の支払い手段を選ぶと、この説明ボックスの中身が空白で、私にはエラーとしか見えないという問題（？）が発生していました。そこで、以下のCSSを追加することで対処しています。
対処1：説明ボックスに文字列を上書きする
説明ボックスに文字を追加で表示させることで、違和感を軽減しようという試みです。この方法の場合、少しだけバランス調整も必要になります。ちょっとくどいので、当サイトではこの方法は取りやめました。
/* 支払方法の説明を追加、レイアウト調整 */
.payment_method_komoju_aupay::after {
content: "/* 説明ボックスに入れたい文字列を記入 */";
}
.payment_method_komoju_aupay {
padding: 0 0 1.4em 0 !important;
}※上記コードの「aupay」の部分を「paypay」「linepay」等にすることで、他の支払方法にも適用できます。
対処2：特定の支払方法の説明ボックスだけを削除する
au PAYなど、追加の情報入力が不要な決済手段では、説明ボックス自体が出てこないようにします。おそらく、KOMOJUが想定している動きはこちらのはずなので、当サイトではこの方法を用いることにしました。
/* 支払方法の説明を削除 */
.payment_method_komoju_aupay .payment_box {
display: none !important;
}
※上記コードの「aupay」の部分を「paypay」「linepay」等にすることで、他の支払方法にも適用できます。
au Payアイコン（ロゴ）が巨大化する
KOMOJUの設定では、支払い手段の名前の部分に、それぞれアイコンを追加できます。ただ、au PAYのアイコンだけが、なぜか巨大に表示されるという問題が生じていました。
この画像データは外部から引っ張られてきているようなので、画像差し替えなどでは対処が難しそうです。また、WooCommerce設定の「決済」タブからau Payの設定を選び、「Show icon on checkout」をオフにすればアイコンを消すこともできますが、根本的な解決にはなりません。
そこで、当サイトでは、以下のCSSでとりあえずの対処を済ませてあります。縮小率は、スマホを横回転させるケースも考えつつ、大雑把な設定でまとめてみました。
/*au Payアイコンのサイズ調整*/
.payment_method_komoju_aupay img {
width: 5%;
}
@media screen and (max-width: 1250px) {/*モバイル時*/
.payment_method_komoju_aupay img {
width: 15%;
}
}ニュースティッカーの文字が消える問題への対処
2024年3月28日時点（RIKYUのバージョン1.3適用後）でのトラブルですが、なぜかニュースティッカー上の文字が透明になって見えなくなる（リンクは生きているので存在はしている）という現象に遭遇しました。
当サイトはカスタマイズ箇所がやたらに多いため、こういうときには原因の判別が非常に困難になり、恐怖に襲われます。本来、WordPress用テーマはまっさらな状態で使うのが最良なのだと思い知らされる瞬間です。それでも、いちおう解決しましたので、ここにメモ書きとして情報を残しておきます。
原因は、TCDテーマオプションの「SEO＞高速化」にある「CSSコードの最適化を行う」機能でした。私の環境では、この機能のチェックをオフにすると、ニュースティッカーの中身が正常に表示されるようになります。
WooCommerceとWP External Linksの競合
2023年11月時点の私の環境では、RIKYU内の「WooCommerce」機能と、プラグイン「WP External Links」が競合する不具合が生じていました。当環境の場合、「WP External Links」と決済サービス（Stripeなど）関連プラグインを同時に有効化すると、レジでのクーポン使用時や、利用規約に同意するチェックボックスの表示時に、商品情報の読み込みが終わらなくなるエラーが発生します。
問題の解決には、「WP External Links」の無効化が必要でした。その経緯は、以下の記事でもご紹介しています。
おわりに（その他のカスタマイズについて）
以上をもって、カスタマイズ情報のまとめとしたいと思います。このほかにも、フォントを変えてみたり、行間を広げてみたり、といろいろな微調整を行っているのですが、設定内容があまりに細かすぎますし、需要もないはずなので、今回は割愛することにしました。最後までお付き合いいただき、誠にありがとうございました。
