Gush2 ブログ運用

【Gush2カスタマイズ】新着記事と人気記事の見た目をそろえて場所を変える方法

2016/05/22

ご案内 紆余曲折を経て、現在はStinger7を使用しています。

 

今日はGush2の新着記事と人気記事の見た目をそろえて、場所を自由に動かす方法についてです。

それだけではすぐに終わってしまうので、PC用とスマホ用で表示記事数を変えて、スマホでも快適にみられるブログづくりについてもお話ししたいと思います。

スポンサーリンク

Gush2で新着記事をカスタマイズする

最初から入っている新着記事表示機能。

これを少しいじってやることにしましょう。

ウィジェットではなく、直接テンプレートを編集してやる必要があります。

外観>>テーマの編集>>サイドバー(sidebar.php)へお願いします。gush2カスタマイズ サイドバーの新着記事

ちょっと長いですが、<!--新着記事・ホーム非表示-->から<!--新着記事ここまで--> の間が新着記事をトップページ以外で表示する部分になっています。

これをそのまま切り取って<!--ウィジェット・リスト出力-->の上などに貼り付けて保存すれば、場所を変えることができます。

ほかにもいくつかカスタマイズできる部分があるので、まとめておきます。

NEW エントリーを別の文字にしたい

この部分の文字を打ちかえるだけです。

<h4></h4>で囲まれていますので、> とか < を削っちゃわないように気を付けましょう。

表示件数を変えたい

と書いてある部分の数字を変えればその数になります。

標準では10ですので、もっと表示したい人は数字を増やし、減らしたい人は5とかにするといいでしょう。

アイキャッチ写真の大きさを変えたい

width=の後ろに入っているのが幅、height=の後ろに入っているのが高さになりますので、お好きに変更してください。

日付を消しておきたい

少数派かもしれませんが、世の中ミニマリスト・ブームですから削れるものは極限まで削りたいという人向けに一応書いておきます。

上記部分を削除、これでOKです。

Gush2に人気記事を表示させる、カスタマイズする

人気記事をサイドバーに表示させるには、素人はプラグインを使います。

いくつかあるようですが、今回は一番有名な「Wordpress Popular Posts」を使うことにします。

インストールしてから有効かしておいてください。

 

あとはウィジェットのサイドメニューエリアにドラッグアンドドロップでOK・・・

Gush2に人気記事を表示する

とはいきません!!

なんか、変な線が入っちゃいます。

Gush2人気記事挿入失敗

これを解消してやるには、ウィジェットからの挿入ではなく、テンプレートに直接、表示情報を記述してやる必要があります。

CSSいじれば早いのかもしれませんが、ウィジェットを使うと新着記事の上に人気記事が表示されるようになってしまいます。

だったら直接好きなところに記述して表示したほうが早いです。

そう面倒なこともありませんから、一つ一つやってみてください。

人気記事を新着記事の下に挿入する

当たり前ですが、Wordpress Popular Postsを入れてなければ無理ですから先に入れてくださいね。

インストールが終わったら、以下のコードを貼り付けます。

今回は新着記事の下、ということで<!--新着記事ここまで--> の後ろに貼ってみました。

一応、変な線が入らない状態で新着記事の下に貼れたと思います。

ただ、これだとアイキャッチ画像がぴったりくっついちゃってて美しくない。

これはあとで直しますので、もう少しこの画面でカスタマイズを続けます。

最大表示数を変更する

この部分の10を好きな数に変えていただければ結構です。

集計期間を変更する

monthlyの部分を変えてやります。

monthlyだと1か月、weeklyだと1週間、dailyだと1日単位、allだとリセットなしでの集計になりますので、これもお好みでどうぞ。

並び順を変更する

viewsでページビューの数順、commentsでコメントの数順、avgで1日の平均閲覧数順に並びます。

写真の大きさを変える

widthが幅、heightが高さです。

新着記事が隣接しているのであれば、同じ大きさに見えるほうがいいと思います。

Gush2の新着記事と人気記事の見栄えを統一する

最後にできる限り新着記事と同じ見栄えにするように、スタイルシート(CSS)に数行追加してやります。

外観>>テーマの編集 と進むとそこがスタイルシート編集画面ですので、一番後ろにでも下記を追加して保存してください。

コピペして一番下にでも貼ってやってください。

いかがでしょうか?

いい感じになりましたでしょうか?

僕の場合は背景が白なので、アイキャッチの周りに灰色の枠を付けて見やすくしていますが、必要なければ以下の一行を削除してください。

スマホとPCで表示内容を変えてスマホユーザーをもてなす

せっかくなのでもう少しだけ凝ってみましょう。

やりたいのが、PCでは新着記事・人気記事ともに10記事ずつ表示させて、スマホだと5記事ずつにしてやります。

 

スマホで20記事下に並べられても、絶対見ないですよ(笑)。

あと、写真が多くなってロード時間が長くなり、スマホで見てくれている人にパケットを多く消費させてしまいます。

 

考え方はいたってカンタン。

PHPを使ってスマホだけの表示とPCだけの表示をまとめて記入してあげればいいのです。

それすら面倒だったら、下記コードをコピペしていただければOKです。

ただ表示数を10と5にしただけなので、写真の大きさ変えるとか、見出し変えるとか、いろいろやってみてください。

まとめ

僕も決して詳しいわけではありませんが、何かありましたらブログのURLを添えてコメントか問い合わせフォームよりお問い合わせください。

返事遅かったり、「ごめんなさい、わかりません。」のお返事をしてしまう可能性もありますが、できる限りお答えさせていただきます。

もしかしたらエローラさんに直接聞いたほうが早いかもしれませんけど。。。

スポンサーリンク

-Gush2, ブログ運用

(たかなし むつき)と読みます。元某大手通信系コールセンター派遣社員。36歳で派遣脱出を達成!今はシステム運用の中の人です。コールセンター仕事術や転職など、自分でいうのもアレですが、いいこと言ってます。 >> 詳細プロフィール


【運用ブログ】

WinF
日常を理系目線で鋭くえぐる大人の読み物
http://winfriede.com/

WinF-JC
30代から派遣を脱出する方法満載の転職ブログ
http://winfriede.com/jobchange/

WinF-FX
FXを使って1日2分で作業と月々5,000円の積立を7,000万円にする方法まとめ
http://winfriede.com/FX/

しょうもないことばっか送りつけるのであまりSNSのフォローはオススメしません。。

【Instagramやってます】
Instagram

【LINE@やってます】
更新情報のほかに、毎朝7時と夜10時に”意識高い系の独り言"を配信します。
暇な時、気が向いたら返事するので気軽に話しかけてください。

友だち追加数

※@winfで検索でも友達登録ができます。