TCDテーマ「RIKYU」個人的カスタマイズ情報まとめ

メンテナンスのお知らせ

当サイトで導入しているWordPressテーマ・TCD「RIKYU」で、私が個人的に行っているカスタマイズの情報を、この記事にまとめました。これまで複数の記事に分散していた情報をこちらに集約し、新しい情報も書き加えてあります。コードに粗が目立つかもしれませんが、そのあたりは素人のやることなので、温かな目でご覧ください。

なお、本記事の掲載内容は、あくまで一個人による非正規でささやかなカスタマイズでしかありません。ただ、これまで私自身がウェブ上の公開情報に助けられてきたように、このような小さな情報もどなたかのお役に立つかもしれないと思い、記事として残しておくことにしました。より本格的な情報については、下記のTCD LABOなどをご参照願います。

また、本記事はあくまで参考情報であり、以下の点にご注意ください。

CSSやPHPファイルの変更による改修は、不具合等を誘発する可能性があり、TCD非推奨事項です。また、以下のカスタムCSSによる修正・調整等は、あくまで当方の自己責任に基づくものであり、本情報のご利用・転用に伴う損害等に対する責任を学而図書は一切負いませんのでご注意ください。免責事項の詳細はこちらでご確認いただけます。

ヘッダーとフッターで表示するロゴ画像を変える

「RIKYU」は、企業ロゴを白抜きにして背景色をつけたときにデザイン性がもっとも高まります。ただ、学而図書のロゴは揮毫された書が主体となっているため、ヘッダーだけは白地に通常ロゴを掲載したいと考えました。

ロゴの変更

当サイトでは、①通常のロゴ画像(白抜きではないもの)を標準に設定し、②ヘッダーの背景色を消して、③フッターから通常ロゴを消去し、④フッターに白抜きのロゴ画像を上から配置する、という方法にしてみました。

適用先WordPressダッシュボード>TCDテーマ>基本設定>カスタムCSS・スクリプト>カスタムCSS

フッターの調整(モバイル時)

ロゴの変更にあわせて、モバイル時のフッターの挙動を調整したかったので、以下のCSSでカスタマイズしています。ある程度の画面幅になると、ロゴがセンタリングされたり、フッターの高さが調整される仕様です。

適用先WordPressダッシュボード>TCDテーマ>基本設定>カスタムCSS・スクリプト>カスタムCSS

ヘッダーのキャッチフレーズ位置調整

ヘッダー用ロゴの背景色を白にすると、ロゴ本体とキャッチフレーズが離れすぎて、バランスがいまひとつになります。そこで、以下のような形でバランスを整えてみました。ここだけpxではなくemで設定されているのは、私に余裕がなかったからだと思われます。

適用先WordPressダッシュボード>TCDテーマ>基本設定>カスタムCSS・スクリプト>カスタムCSS

カテゴリー表示のレイアウト調整

商品名の上に表示されるカテゴリー表示(角丸四角で囲まれている文字列)のバランス調整です。全体的にフォントを変更したせいか、カテゴリー名の配置が中心からずれたため、位置取りを直しています。

モバイル時の対応は、カテゴリー名が長すぎて2列になってしまうとみっともないので、小さい画面のスマホでも1列で表示しきれるよう文字を詰めたりしています。pxとemが混在しているところに、素人感と切迫感がにじみ出てくる仕上がりとなりました。

適用先WordPressダッシュボード>TCDテーマ>基本設定>カスタムCSS・スクリプト>カスタムCSS

お知らせ・ブログに更新日を表示させない

記事の更新日が自動で表記されるのは本来メリットなのですが、投稿日だけを記載しておきたい場合には、以下のCSSで更新日が消えます。サイトのテーマを変更した当初は、テストを兼ねて頻繁に更新を重ねていたので、一時的にこのコードで投稿日だけを表示するようにしていました。それぞれの記事の編集画面で、カスタムCSS欄にこのCSSを追記すると、その記事でだけ更新日を消すこともできるはずです。

適用先WordPressダッシュボード>TCDテーマ>基本設定>カスタムCSS・スクリプト>カスタムCSS

商品画像に「在庫切れ」を表示させない

当サイトでは非売品も紹介していますが、WooCommerceとの兼ね合いから、「非売品=在庫切れ」扱いで商品登録しています。ただ、これだけだと非売品の書影(商品画像)に「在庫切れ」表示が出てしまうので、以下のCSSで消すことにしました。当サイトの主目的がオンラインストアではなく、書籍の紹介だからこその調整で、一般的には必要のない行為だと思われます。

適用先WordPressダッシュボード>TCDテーマ>基本設定>カスタムCSS・スクリプト>カスタムCSS

お買い物カゴ・購入数バッジのレイアウト調整

商品をお買い物カゴ(カート)に入れていただくと、ヘッダー部分のカートに商品点数がバッジ(丸数字)で表示されます。ただ、この数字が丸の中央から少しずれてしまったのが気になり(フォントをいじくり回したので……)、位置を調整してみました。ちなみに、私が愛用しているメーラー・Thunderbirdの新着メール数を表示するバッジも、数字が丸の中心から大きくずれています。このような部分を気にする人間など、世界にはほとんど存在しないのでしょう。私の神経質さがよくあらわれているカスタマイズです。

適用先WordPressダッシュボード>TCDテーマ>基本設定>カスタムCSS・スクリプト>カスタムCSS

WooCommerce関連ボタンのデザインを少しだけ角丸化

実は、当サイトのWooCommerce関連ボタン(「注文する」など)は、誰にも気づかれない程度に角丸化されています。これらのボタンは、元々ぴしっとした四角形なのですが、Google Payのエクスプレスチェックアウトとの兼ね合い等々で、少しだけ角丸にしたほうが違和感がなかったのです。そのぶん、モバイル時のクーポン入力用ボタンなど、四角形を前提としたデザインに、わずかなほころびが生じています。ただ、ボタンごとに設定を変えるのは業務量的に割に合わないので(面倒なので)、これで妥協しました。

適用先WordPressダッシュボード>TCDテーマ>基本設定>カスタムCSS・スクリプト>カスタムCSS

購入手続き時のチェックボックスを大きくする

WooCommerceでは、アカウント登録や、配送先住所の追加、利用規約への同意などに、チェックボックスを利用することになります。ただ、標準のサイズでは▢が小さくて、チェックしにくいのが気になりました。そこで、以下のCSSで、少しだけチェックボックスのサイズを大きくしています。ボックスのサイズは、「scale」の値で調整可能です。

適用先購入手続きページ(固定ページ)>編集>カスタムCSS など

お支払い方法のアイコンを右寄せ

WooCommerceに決済サービスを導入すると、購入手続き画面で、お支払い方法(クレジットカードなど)にアイコンを表示できる場合があります。

当サイトが導入している決済サービス「KOMOJU」では、お支払い方法の名前とアイコンがくっついて表示されますが、このアイコンだけを右端に揃えたいと考えました。そのためのCSSが、以下となります。

適用先購入手続きページ(固定ページ)>編集>カスタムCSS など

KOMOJU導入後の相性問題への対処

以下は、決済サービス「KOMOJU」をTCDテーマ「RIKYU」に導入した際に発生する相性問題への対処方法です。より詳細な情報は、以下の記事からご確認ください。

スマホ決済系の説明ボックスが空白になる

「RIKYU」の支払い画面(おそらく最近のTCDテーマ共通のデザイン)では、支払い手段を選ぶと、説明ボックス(フキダシ)がスライドして出てきます。ただ、「KOMOJU」導入後に、au Pay、PayPay、Line Payなど、スマホ決済系の支払い手段を選ぶと、この説明ボックスの中身が空白で、私にはエラーとしか見えないという問題(?)が発生していました。そこで、以下のCSSを追加することで対処しています。

対処1:説明ボックスに文字列を上書きする

説明ボックスに文字を追加で表示させることで、違和感を軽減しようという試みです。この方法の場合、少しだけバランス調整も必要になります。ちょっとくどいので、当サイトではこの方法は取りやめました。

適用先購入手続きページ(固定ページ)>編集>カスタムCSS など
※上記コードの「aupay」を「rakutenpay」「paypay」「linepay」等にすることで、他の支払方法にも適用できます。
対処2:特定の支払方法の説明ボックスだけを削除する

au PAYなど、追加の情報入力が不要な決済手段では、説明ボックス自体が出てこないようにします。おそらく、KOMOJUが想定している動きはこちらのはずなので、当サイトではこの方法を用いることにしました。

適用先購入手続きページ(固定ページ)>編集>カスタムCSS など
※上記コードの「aupay」を「rakutenpay」「paypay」「linepay」等にすることで、他の支払方法にも適用できます。

(不具合解消済み)au Payアイコン(ロゴ)が巨大化する

この不具合は、いつの間にか解消されていましたので、対処不要となります。

KOMOJUの設定では、支払い手段の名前の部分に、それぞれアイコンを追加できます。ただ、au PAYのアイコンだけが、なぜか巨大に表示されるという問題が生じていました。

この画像データは外部から引っ張られてきているようなので、画像差し替えなどでは対処が難しそうです。また、WooCommerce設定の「決済」タブからau Payの設定を選び、「Show icon on checkout」をオフにすればアイコンを消すこともできますが、根本的な解決にはなりません。

そこで、当サイトでは、以下のCSSでとりあえずの対処を済ませてあります。縮小率は、スマホを横回転させるケースも考えつつ、大雑把な設定でまとめてみました。

適用先購入手続きページ(固定ページ)>編集>カスタムCSS など

ニュースティッカーの文字が消える問題への対処

2024年3月28日時点(RIKYUのバージョン1.3適用後)でのトラブルですが、なぜかニュースティッカー上の文字が透明になって見えなくなる(リンクは生きているので存在はしている)という現象に遭遇しました。

当サイトはカスタマイズ箇所がやたらに多いため、こういうときには原因の判別が非常に困難になり、恐怖に襲われます。本来、WordPress用テーマはまっさらな状態で使うのが最良なのだと思い知らされる瞬間です。それでも、いちおう解決しましたので、ここにメモ書きとして情報を残しておきます。

原因は、TCDテーマオプションの「SEO>高速化」にある「CSSコードの最適化を行う」機能でした。私の環境では、この機能のチェックをオフにすると、ニュースティッカーの中身が正常に表示されるようになります。

適用先WordPressダッシュボード>TCDテーマ>SEO>高速化>「CSSコードの最適化を行う」をオフ

WooCommerceとWP External Linksの競合

2023年11月時点の私の環境では、RIKYU内の「WooCommerce」機能と、プラグイン「WP External Links」が競合する不具合が生じていました。

当環境の場合、「WP External Links」と決済サービス(Stripeなど)関連プラグインを同時に有効化すると、レジでのクーポン使用時や、利用規約に同意するチェックボックスの表示時に、商品情報の読み込みが終わらなくなるエラーが発生します。

問題の解決には、「WP External Links」の無効化が必要でした。その経緯は、以下の記事でもご紹介しています。

おわりに(その他のカスタマイズについて)

以上をもって、カスタマイズ情報のまとめとしたいと思います。このほかにも、フォントを変えてみたり、行間を広げてみたり、といろいろな微調整を行っているのですが、設定内容があまりに細かすぎますし、需要もないはずなので、今回は割愛することにしました。最後までお付き合いいただき、誠にありがとうございました。

笠原 正大

笠原 正大

学而図書 代表

関連記事