ヒデヒデノート

思った事や出来事を書いてるweblogです

SNSシェアボタンを撤去した話&コメント欄を色々いじった話

最近このブログをちょこっといじったので、それについての個人的な備忘録です。

SNSシェアボタンを撤去

WordPressのテーマ作りなどでお世話になった記事まとめ』の、『記事ページにSNSシェアボタンを設置する』に追記で書きましたが、ボタン押されてる気がしないし、色もカラフルでちょっと見た目もアレだった(スクリーンショット撮り忘れた)ので、撤去しました。

そもそもツイートやブクマをしたい人は、ボタンがなくてもツイート・ブクマするよなと。私も以前Twitterやってた時、ボタン押さずにURLコピペしてツイートしてたし。

また気が変わって設置する事もあるかもなので、一応設置方法はメモして保存してあります。

コメントの表示順を変更

掲示板に書きましたが、9月下旬に古いコメントが上に来るよう設定していたのを、新しいコメントが上に来るよう設定し直しました。この方が、複数コメントがつくページは見やすいかなと。

コレは管理画面で簡単に変更できます(ログイン→「設定・ディスカッション」の、「他のコメント設定」の1番下で設定)。

またコレも掲示板で書いたけど、コメントリスト横の番号を、1番古いコメントが「1」になるよう設定し直しました(新しい順に変更したら、1番新しいコメントが「1」になってしまったので)。

「確かリストの順番を逆(降順)にする方法あったよな…」と、『HTML5&CSS3デザイン 現場の新標準ガイド』で確認。comments.phpの、<ol id=”comments-list”>を<ol id=”comments-list” reversed>に変更(reversedを付け足す)で、順番を逆にする事ができました。

コメントフォームをコメントリストの上に表示(CSS編)

掲示板とか複数コメントがつくページだと、かなり下にスクロールしないとコメントできないのがなーと掲示板でぼやいてたら、CSSでコメントフォームとコメントリストの位置を入れ替える方法を教えてもらえました。

そんな訳で下記のCSSを追加したら、無事コメントフォームをコメントリストの上に表示する事ができました。

#comments {
display: flex;
flex-direction: column;
}
#comments-list {
order: 2;
}
.comment-respond {
order: 1;
}

コメントフォームをコメントリストの上に表示(comments.php編)

CSSでコメントフォームの位置を入れ替えたけど、HTMLの方でなんとかできるかなとcomments.phpを再確認。

ちなみにうちのcomments.phpは、『【ワードプレス】簡単!コメント機能をcomments.phpでゼロから作成』を見て作成してます(タイトルの「コメント」だけ微妙に変えてるけど)。

…記事に<?php comment_form(); ?>って部分が、コメントフォームだって書かれてますね。コレをタイトルの「コメント」の下に移動させるだけで、コメントフォームをコメントリストの上に表示できました。

いやぁ、表示順を変更するのにcomments.phpいじった時に、コメントフォーム部分も確認しておくべきでしたね。折角CSSで入れ替える方法を教えてもらったのに、なんか申し訳ないです。

まあこの「CSSで入れ替える方法」は、今後「HTMLがいじれない(またはいじりたくない)けど表示入れ替えたい」ってとこがでてきた時に、使えるかなと思います(ので備忘録として書いておきました)。



コメント

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれないコメントは無視されます(スパム対策)