【SANGO】WordPressの縦に長いコメント欄をクリックで開閉式にするカスタマイズ方法

SANGO(サンゴ)のカスタマイズ

WordPress(ワードプレス)をオリジナルでカスタマイズしてもっと読みやすく、わかりやすくしていきましょう!最近もコツコツと地味に細かくカスタマイズを続けている、NORI(@norilog4)です。

今回紹介するのは、縦に長いコメント欄をクリックで開閉式にするカスタマイズ方法!すぐにでもカスタマイズができるようにコピペで使えるソースコードも置いておくので、コピペして使ってね!

NORI

SANGO(サンゴ)ユーザーは要チェック!

カスタマイズの見た目の変化

このカスタマイズを行うと以下のような見た目の変化が現れます。またコメント欄の分短縮されるので見た目もスッキリするよ✨

カスタマイズ前

WordPressコメント欄カスタマイズ

カスタマイズ前の状態

カスタマイズ後

WordPressコメント欄カスタマイズ

カスマイズ後 クリックでコメント欄開閉

このカスタマイズ方法について
手軽さ
(4.0)
難しさ
(3.0)
デザインの美しさ
(5.0)
総合評価
(4.0)

NORI

ここで紹介しているソースコードをコピペで利用するとこのブログと同じようになるよ!
注意
カスタマイズは自己責任でお願いいたします。カスタマイズにチャレンジしたけどテーマが壊れた場合にはサポートができません。

comments.phpを編集

comments.phpの編集

親テーマしかない場合には親テーマにあるcomments.phpを開いて以下のソースコードをコピペして保存。子テーマがある場合には、comments.php親テーマから子テーマへコピーしたあとに開いてコピペして保存します。

このコードをcomments.phpにコピペ

CSSでデザインを編集

このままだとボタンが全体的に広がってしまうので、上下のマージン余白も取りつつボタンの色も変更します。別の色へ変更したい場合には6行目のカラーコードを修正すればOKです!

このコードをstyle.cssにコピペ

カスタマイズの反映確認

コピペでコードを追加したあとはブラウザのキャッシュクリアをして確認しましょう。
Google Chromeなどでのキャッシュクリアコマンドは以下になります。

NORI

ここまで来たらもう少し!最後に反映してチェック!
  • Mac shift++R
  • Windows Ctrl+F5

WordPressの仕組みがわかっている方であれば、早くて5分くらいでカスタマイズが完了するはず!

チャレンジして変更できたらこちらのコメント欄にでも喜びの声でも書き込んでもらえると喜びます!

NORI

カスタマイズしてシンプルにしてみよう!

今回のカスタマイズはこれで終了になります。
以上、NORI(@norilog4)でした。

WordPressのカスタマイズ依頼

WordPressのことならお任せください。サーバー設定からインストール、カスタマイズなどを有料で承っております。WordPressで作られたサイトの制作実績は以下お問い合わせページからご確認ください。

制作・カスタマイズ依頼をする

コメントを閉じる

コメントを残す