【読者限定】FLEXISPOT デスク15%割引クーポン

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

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

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

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

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

NORI

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

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

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

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

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

WordPerssのコメント欄カスタマイズ方法のまとめ

本記事は、WordPressのコメント欄をカスタマイズする方法を解説した記事です。

縦に長いコメント欄をクリックで開閉式にできるので、スマホでの見え方も変わってきますよ!

以上、NORI(@norilog4)でした。

WordPressのことならお任せください。サーバー設定からインストール、カスタマイズなどを有料で承っております。

0 0 評価
記事の評価
guest

0 件のコメント
Inline Feedbacks
全てのコメントを見る