注目度の高い記事
ワードプレスブログのコメント欄の表示順を入れ替える方法(Diver用CSSも有ります)

 

わかば
ワードプレスブログのコメント欄って
コメントを書く欄が一番上にきてますよね
あれって何とかなりませんかねー??

山本
あーあれ確かに気になるよねー
簡単に順番を入れ替えることができるから教えてあげるよ

わかば
はい、おねがいしますー!

 

ワードプレスブログの記事の一番下にあるコメント欄の

「コメント」「名前」「メール」「サイト」の順番を入れ替える方法を解説します。

CSSを使ってコメント欄の順番を入れ替えよう!

WordPress4.4 になってからコメント欄の順序が逆になってしまいました。
現在のデフォルトの状態だと、このような並びになっているかと思います。

ワードプレスのコメント欄画像

 

コメント欄が一番上にきてしまっているので、ちょっと違和感を感じますよね。

山本
前まではこれの逆の並び方だったんだけどねー

わかば
それってちょっと改悪されてますよね...

山本
ワードプレスの開発者がアメリカの人だから
向こうではこれが普通なのかもしれないね。

 

コメント欄は、function.php を使って順番を入れ替えることも可能ですが

このファイルは書き換えに失敗するとブログが表示されなくなる危険性もあるので

今回は、css(スタイルシート)を使ってコメント欄の順序を変更したいと思います。

 

 cssを編集する際は必ず事前にバックアップをとっておくようにしましょう

1 スタイルシートのページを開く

ワードプレスのスタイルシート(style.css)の画面は

管理画面 ⇒ 外観 ⇒ テーマエディター と進むことで開くことができます。

スタイルシートの画面を開く

 

ワードプレステーマ Diver を使っている場合は

管理画面 ⇒ 外観 ⇒ カスタマイズ ⇒ 追加CSS の画面でも同じ作業ができます。

この場合は、ライブプレビューで実際のレイアウトを見ながら変更できます。

 

テーマの編集画面右側のテーマファイル一覧の中から、スタイルシート(style.css) を選択しましょう。

テーマの編集画面でスタイルシートを開く

 

2 スタイルシートにCSSを追記する

スタイルシートのハイライト部分に、以下のCSSをコピペしましょう。

スタイルシートにCSSをコピペする

 

山本
コピペするCSSはこちらです

/*コメント欄並び替え*/
#commentform {
    display: flex;
    flex-direction: column;
}
/*名前*/
.comment-form-author {
    order: 0;
}
/*メールアドレス*/
.comment-form-email {
    order: 1;
}
/*ウェブサイト*/
.comment-form-url {
    order: 2;
}
/*コメント記入欄*/
.comment-form-comment {
    order: 3;
}
/*注意書き*/
.comment-notes {
    order: 4;
}
/*コメント送信ボタン*/
.form-submit {
    order: 5;
}

 

簡単に解説すると、order: の後に記載されている数字がコメント欄の並び順で

0より数字が大きくなるほど順番が下になります。

 

ですのでこの場合だと

「名前」⇒「メールアドレス」⇒「ウェブサイト」⇒「コメント欄」⇒「注意書き」⇒「送信ボタン」

の順に表示されます。

 

コピペしたら画面下部の、ファイルを更新 ボタンを押せば設定完了!

 

わかば
やってみたけどチェックボックスが間に挟まっちゃいます...

Diverだとこう表示されてしまう

山本
あーそういえばわかばちゃんはDiverを使ってたよね!

 

このCSSは要素をセレクタで指定しているので

お使いのテーマによっては、このように上手く表示されない可能性もあります。

 

山本
Diverの方はこちらのCSSを記載してください!

/*コメント欄並び替え*/
#commentform {
    display: flex;
    flex-direction: column;
}
/*名前*/
.comment-form-author {
    order: -4;
}
/*メールアドレス*/
.comment-form-email {
    order: -3;
}
/*ウェブサイト*/
.comment-form-url {
    order: -2;
}
/*コメント記入欄*/
.comment-form-comment {
    order: -1;
}
/*コメント送信ボタン*/
.form-submit {
    order: 1;
}

 

わかば
おおっ!これでちゃんと表示されました!

Diverでのコメント欄の並び替え例

 

さいごに

今回は、CSS を使用してコメント欄の表示順を入れ替える方法を解説しました。

CSS を使用することで、このようにサイトデザインを色々と自分好みに変更することができます。

 

わかば
やっぱりこの並びの方がしっくりきますねー

山本
わー研。のコメント欄もこの設定にしているので
下にスクロールして実際の表示を確認してみてくださいね!

 

ゼロから始める!ワードプレスブログ スタートマニュアル
ワードプレスブログスタートマニュアル

ブログには興味があるけど、ワードプレスってなんか難しそうだなぁなんて思ってませんか?

わー研。では、そんなあなたのために、手順通り進めるだけでワードプレスブログが開設できるマニュアル(特設ページ)をご用意しました!

もちろん無料で利用が可能ですので、はじめての方はぜひご活用ください!

Twitterでフォローしよう

おすすめの記事