モバイルテーマ利用者に朗報！コメント投稿・表示サービスDisqusをモバイルテーマでイイカンジに表示するには

最終更新日：2017.07.16

ちょっとした事ですが、目鱗だったのでシェア。

ワタクシ、あるときからコメント投稿&表示にDisqusというサービスを利用しております。
WordPressのコメント&ピンバックと連携させるためにプラグインも使ってます。

アイコン表記が素敵☆

今回はDisqusについてのチョイ技紹介。

モバイルテーマがなんかしょぼい

最近唐突にテーマを変えてしまったのですが、半日ずれくらいでモバイルテーマも自作しました。

ちょっとだけよ。つづきはWebで。（ここもWebだった。）

以前のテーマでもDisqusを使っていたのですが、いかんせん思うのは表示がなんかショボイということ。

百聞は一見にしかずという。これをご覧いただこう。

うん、しょぼいね。

シンプルといえば聞こえはいいのですが、Disqusの象徴であるリアクションのアイコンも、ピンバックも表示されていません。ｶｺﾜﾙｲ
（コメントだけは表示できるようです。）

PCスタイルに合わせる方法がありました。

まず、Disqusのダッシュボードにアクセスします。

自分のサイトを選んで、

「Setting」の

「Appearance」を選びます、タイポｺﾜｲ

ここにチェックが入っていると、モバイルで見たときにDisqusモバイル用のしょぼいテーマに自動変更されます。

つまり個々のチェックを外せばPCスタイルにできるというわけですな。

チェックを外したらうまくいきました。簡単やー。
と、思ったら・・・

私は@kuroji1987さんの記事に沿ってテーマづくりしました。これでほぼ枠内に収まると思います。

惜しい。ピンバックの部分が枠からはみ出してしまいました。なければ問題はないのですがたまにいただくのでね (´∀｀*)ｳﾌﾌ。

改善するにはCSSに少し追加をしてあげます。
プラグインでDisqusを使っている場合はsingle.phpとかでDisqusを表示したい部分にWordPressのコメント用テンプレートタグを書けばできます。

例えばこんな感じ。

<div class="comment">
    <h2 class="post_h2">コメント</h2>
    <?php comments_template(); ?>
</div>

この場合CSSはこのようにするとよいです。

.comment {
	overflow: hidden;
}

「はみ出た分は表示しないよ」ってことですね。スクロールで見られるようにしたい場合はhiddenの部分をautoにすればおｋです。

そんな感じでPCスタイル良い感じ。
ｶｺ(・∀・)ｲｲ!!だけでなく、

がちゃんと見られます。

おそらく何も設定していないとチェックがオンになっているのでしょうね。Disqusを設定している方はみんなモバイル表示でした。
PCスタイルへの変更をぜひおすすめしたいです。

とりま、サイドバーにトップリンクを貼らせてもらったラクイシロクの@rakuishi07さんに教えたいな。同期らしいから@rakuishi07くんと呼ぶべきか。

ちょっとしたことですがオススメですし、目鱗だったので紹介してみました。みんなやるといいさ。

Post Views: 84

Categories:

この記事がよかったら
いいね！で最新情報お届け
(^○^)

フォロー