WordPressテーマ「GOLD BLOG」で注意書きや補足を字下げ表示する方法

※当サイトにはプロモーションが含まれています。

クライアント

ワードプレステーマの「GOLD BLOG」で文章を字下げする方法を教えてくれ！

にゃテック

おけまるだにゃ。

「GOLD BLOG（ゴールドブログ）」は、2024年１月に発売された、比較的新しいワードプレステーマ。

自分もこのテーマを使用して、サイトを２つ作成しましたが、思ったより“クセ”のあるテーマの割に、情報が少ないのでサイト作成の際に苦労しました。

さて、“注意書き”や“補足事項”を記載する際などに、１行目の冒頭に「※」や「注：」などの記号や文字を利用して文章を作成することがあると思います。

例えば、下記のような文章です。

※注意書きや補足事項の１行目です。注意書きや補足事項の１行目です。
　２行目です。２行目です。２行目です。２行目です。２行目です。

ただ、「GOLD BLOG」には、字下げできる機能がないのでCSSを使って字下げをしてみました。

なお、字下げの代わりに「脚注」機能が用意されているので、補足説明などはその機能を活用して記載するのが想定されていると思われます。

GOLD BLOG｜脚注

１行目を字下げするCSS

「GOLD BLOG」で、１行目を字下げするCSSです。

.nya-note {
display: block;
padding-left: 1em;
text-indent: -1em;
}

これを「追加CSS」に記載します。

にゃテック

追加CSSに記載する方法はこちら。

１行目を字下げしたい文章を選択して、ブロックタブの「高度な設定」を選択。

追加 CSS クラスに、nya-noteのクラス名を記載すればOKです。

GOLD BLOG｜追加CSSクラス

にゃのらいと

これで、字下げして表示されてたにゃ。

なお、GOLD BLOGで説明していますが、概ねどのワードプレステーマでも同様の方法で字下げをすることができます。

現在のワードプレステーマにCSSを追加したい場合、左メニューにある、

外観 > カスタマイズ

を選択します。

「追加CSS」を選択します。

追加したいCSSを記述します（コピペして貼り付けます）。

「公開」ボタンを押して保存すれば完了です。

なお、追加CSSに記載する際に、ブラウザ上で全角から半角に変換すると、エンコーディング（文字コード）の関係で、不具合が発生することがあります。

その為、編集する時は、メモ帳などに貼り付けたものを編集をしてからペーストするようにしましょう。

なお、ブラウザにキャッシュが残っていると、前のデザイン（CSS）が表示されたり、デザインが崩れて表示される事があります。

その際は、強制リロード（ハードリフレッシュ）をしてみてください。

各ブラウザごとの、強制リロードの方法は次の通りです。