【Stinger7】右サイドバーのNEWPOSTと人気記事を統一感のあるデザインにする4つの手順

   

NEWPOSTと人気記事を統一感のあるデザインにする4つの手順

@yuichico_です。コメントやメッセージを頂く際に、多くあった問い合わせ内容が「ゆういちさんのブログの右サイドバーのNEWPOST(新しい記事)と人気記事のデザインを統一感があるようにしてるのはどうやってカスタマイズするんですか?」という内容が多かったので、そのやり方を書きます。Wordpress Popular Postsというプラグインと、その中にあるCSSのカスタマイズとウィジェットの設定をすれば簡単できます。なお、統一感を出すのはStinger7のみとなります。Stinger5や3などのシリーズは試してことがないので、わかりません。ご了承ください。

スポンサードリンク

NEWPOST(新しい記事)のカスタマイズ

リンク 【Stinger7】関連記事とNEWPOSTの抜粋文字をなくしてタイトル上に投稿時間をカスタマイズ

まずはNEW POSTの抜粋記事などカスタマイズしましょう。上のリンクは関連記事も入っています。コピペでできますので、ぜひトライしてみてください。

プラグイン

プラグイン→新規追加

プラグイン 新規追加

右上の検索バーに Wordpress Popular Posts と入力してEnterを押します。

Wordpress Popular Post 入力してEnter

すると、Wordpress Popular Posts のインストール画面が出ます。今すぐインストールをクリックします。

Wordpress Popular Posts 今すぐインストール

プラグインを有効化します。

Wordpress Popular Posts プラグイン有効化

有効化されました。次はプラグインのCSSをカスタマイズします。

CSS

プラグインのCSSをカスタマイズしましょう。Wordpress Popular Posts の下にある 編集 をクリックします。

Wordpress Popular Posts 編集

赤枠で囲ってあるCSSをカスタマイズします。wordpress-popular-posts/style/wpp.css をクリック

Wordpress Popular Posts CSS編集

コピペで貼り付けてください。

下にあるファイルを更新をクリックします。

Wordpress Popular Posts ファイルを更新

次はウィジェットに追加しましょう。

ウィジェット

外観→ウィジェットをクリック

Wordpress Popular Posts ウィジェット追加

ドラッグ&ドロップでサイバーウィジェットへ

Wordpress Popular Posts ドラッグ&ドロップでサイバーウィジェットへ

設定

順をおって説明します。

Wordpress Popular Posts 入力とチェックと保存

Title

文字通り、タイトルです。yuichi.co のブログでいうと 右サイドバーの プロフィール や 新しい記事 の文字にあたります。人気記事 や よく読まれる記事 という形の入力が良いでしょう。

Show up to

いくつ記事を表示させるか、という意味です。ここでは5つまで記事を表示します。

Sort posts by

Tatal views →すべてのトータルでのPV(どこくらいクリックされたか)を集計して表示します。

Time Range

All time →すべての時間においてのPVで計算される、という意味です。

Post type

post,page →ランクインするページを対象とします。これは 単一記事のみを対象とする という意味ですので、固定ページは対象になりません。

Posts setting

Display post thumbnail →人気記事が反映されると同時に、サムネイル画像も同じように反映される、という意味です。チェックを付けましょう。

Set size manually

サムネイルのサイズです。widthとheightが100pxにすることで NEWPOST(新しい記事)と同じサイズにします。

最後に保存をクリックします。

まとめ

右サイドバーのNEW POST(新しい記事)と人気記事をそろえることで、だいぶ統一感がでて、かっこよくなりました。参考にしてみてください。

 

シェアしていただけると助かります。

 - Stinger7, カスタマイズ ,