WordPressテーマstinger3のスマホ用コメント欄をカスタマイズして2ch風にする方法 #stinger3

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

stinger3のスマホ用コメント欄をカスタマイズ

WordPressテーマであるstinger3のPC用をコメント欄をカスタマイズして2ちゃんねる風にする方法は以前書きました。

参考 WordPressのコメント表示を2ちゃんねる風にする方法(stinger3をカスタマイズ)

ただ、僕はスマホでブログを見ないので、すっかり忘れていたんですがスマホの表示に対応していませんでした。

スマホで表示するとこんな感じでデフォルトのままでした。

stinger3スマホ表示に対応前

ですので、前回の続きとして、スマホ表示に対応をする方法を書きたいと思います。

stinger3のコメント欄を、2ちゃんねる風にしたい場合は、前回のページを読んでから、こちらを読んでください。

スポンサーリンク
レクタングル(大)広告

子テーマ用のファイルを用意

まずは、子テーマ用のファイルを作成します。まずは、子テーマフォルダにスマホ用のスタイルシートファイル(smart.css)を作成します。

あとは、今回「header.php」を編集することになるので、stinger3の親テーマから、子テーマのフォルダ内に、「header.php」を複製コピーしておいてください。

子テーマフォルダ内のファイル構成は、このようになります。

子テーマのファイル構成

前回のカスタマイズから、smart.cssとheader.php(親テーマから複製)が加わりました。

smart.cssの編集

smart.cssを編集して、以下のようにします。(子テーマのsmart.cssを開いて以下の内容をコピペ)

以下の行は、親テーマの設定を引き継ぐため、親テーマのsmart.cssをインポートしています。

親テーマの相対パスを設定してください。

header.phpの編集

普通ならこれで、スタイルシートの反映OKと行きたいところなんですが、これだけではうまくいきません。

スマホのスタイルシートを反映させるには、header.php内のの一行を編集してやる必要があります。

header.php内にある次の一行を

以下のように編集する。

これで、スマホで表示時に、smart.cssのスタイルが反映されます。

表示の確認

修正後は、このように表示されるようになりました。

stinger3スマホ表示対応後

まとめ

今回行った方法で、スマホでも何とか見た目は2ちゃんねるっぽいコメント欄表示が出来ました。

ただ、WordPressのコメント表示を2ちゃんねる風にする方法(stinger3をカスタマイズ)に詳しく書いてあるのですが、仕様は違うのでご注意ください。

『WordPressテーマstinger3のスマホ用コメント欄をカスタマイズして2ch風にする方法 #stinger3』へのコメント

  1. 名前:ゆいくん 投稿日:2015/09/06(日) 14:34:40 ID:ce7aac012

    ブログ、拝見させていただきました。
    「header.phpの編集」の欄が何も表示されてませんよ。
    修正お願いします。

    それと、こちらのブログでコメントを2ch風にしようとしましたができませんでした…
    「cssやphp」を編集する時は、もとのソースを全部決してこのブログで紹介していただいたソースを入力するのであってますか?
    未熟者ですいません。

  2. わいひら 名前:わいひら 投稿日:2015/09/06(日) 21:30:00 ID:59bfa35a3

    記事を修正しておきました。

    サイトを拝見しましたが、使用されているテーマはstinger5ですよね。
    stinger5でこのカスタマイズを行ったことがないので、この方法がうまくいくかはちょっとわからないです。

  3. 名前:ゆいくん 投稿日:2015/09/06(日) 22:29:48 ID:ce7aac012

    ご返答ありがとうございます。

    記事の修正ありがとうございます。

    私のブログはSTINGER 3 for FANSです。
    詳しくはこちらに載っています。
    http://rentalhomepage.com/oosugi/

    「STINGER 3 for FANS」では貴サイトに書かれてあるコメント欄は作れませんかね。。

    それと、質問させていただきたいんのですが、
    貴サイトの「smart.cssを編集して、以下のようにします。」
    とは、以下の内容そのままのsmart.cssを作成したらよろしいのでしょうか?

  4. わいひら 名前:わいひら 投稿日:2015/09/06(日) 22:46:23 ID:59bfa35a3

    STINGER 3 for FANSってそんな外観なんですね。
    FANSも使ったことがないので、正常動作するかは、わからないです。
    ただ、FANSにしろ、stinger5にしろ、CSS設定をテーマに合わせれば利用できるとは思います。
    ただ、それをするには、ある程度CSSの知識は必要かもしれません。

    貴サイトの「smart.cssを編集して、以下のようにします。」
    とは、以下の内容そのままのsmart.cssを作成したらよろしいのでしょうか?

    それでOKだと思います。本文にもそのように追記しておきます。