WordPress(ワードプレス)をオリジナルでカスタマイズしてもっと読みやすく、わかりやすくしていきましょう!最近もコツコツと地味に細かくカスタマイズを続けている、NORI(@norilog4)です。
今回紹介するのは、縦に長いコメント欄をクリックで開閉式にするカスタマイズ方法!すぐにでもカスタマイズができるようにコピペで使えるソースコードも置いておくので、コピペして使ってね!
カスタマイズの見た目の変化
このカスタマイズを行うと以下のような見た目の変化が現れます。またコメント欄の分短縮されるので見た目もスッキリするよ✨
コメント欄 カスタマイズ前
カスタマイズ前の状態
コメント欄 カスタマイズ後
カスマイズ後 クリックでコメント欄開閉
comments.phpを編集
親テーマしかない場合には親テーマにあるcomments.phpを開いて以下のソースコードをコピペして保存。子テーマがある場合には、comments.phpを親テーマから子テーマへコピーしたあとに開いてコピペして保存します。
このコードをcomments.phpにコピペ
CSSでデザインを編集
このままだとボタンが全体的に広がってしまうので、上下のマージン余白も取りつつボタンの色も変更します。別の色へ変更したい場合には6行目のカラーコードを修正すればOKです!
このコードをstyle.cssにコピペ
カスタマイズの反映確認
コピペでコードを追加したあとはブラウザのキャッシュクリアをして確認しましょう。
Google Chromeなどでのキャッシュクリアコマンドは以下になります。
- Mac shift+⌘+R
- Windows Ctrl+F5
WordPressの仕組みがわかっている方であれば、早くて5分くらいでカスタマイズが完了するはず!
チャレンジして変更できたらこちらのコメント欄にでも喜びの声でも書き込んでもらえると喜びます!
WordPerssのコメント欄カスタマイズ方法のまとめ
本記事は、WordPressのコメント欄をカスタマイズする方法を解説した記事です。
縦に長いコメント欄をクリックで開閉式にできるので、スマホでの見え方も変わってきますよ!
以上、NORI(@norilog4)でした。
WordPressのことならお任せください。サーバー設定からインストール、カスタマイズなどを有料で承っております。