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

最終更新日:

Startup Schwag Bag #9 - DISQUS Shirt
Startup Schwag Bag #9 – DISQUS Shirt Photo by homard.net

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

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

Disqus for mobile theme1

アイコン表記が素敵☆

WordPress › Disqus Comment System « WordPress Plugins

WordPressコメント系プラグインのDISQUSがアイコン表記でいい感じ!再び利用中! | なまら春友流

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

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

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

デザインブック買ったら無性にWordPressテーマ再自作したくなって気づいたら一日でできてしまった その1 | けんけん.com
Disqus for mobile theme2

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

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

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

Disqus for mobile theme3

うん、しょぼいね。

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

PCと表示を合わせる方法

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

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

Disqus for mobile theme4

自分のサイトを選んで、

Disqus for mobile theme5

「Setting」の

Disqus for mobile theme6

「Appearance」を選びます、タイポコワイ

いままで使ってたのはモバイルテーマだった

Disqus for mobile theme7

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

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

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

CSSの調整が必要な場合もある

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

参考: WordPressでモバイル専用テーマをカスタマイズする時に使ったいろいろ | NANOKAMO BLOG

Disqus for mobile theme8

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

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

例えばこんな感じ。

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

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

.comment {
	overflow: hidden;
}

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

PC表示カコ(・∀・)イイ!!

Disqus for mobile theme9

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

  1. リアクション
  2. ピンバック

がちゃんと見られます。

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

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

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

Categories:
Tags:
記事が気に入ったらシェアお願いします!