Simplicityにある人気記事と新着記事のウィジェットをカスタマイズしてみよう!

シェアボタンを押して情報を共有しましょう。

corona-arch-70818_1920

どうも、こんにちは!橋尾渡(@hashio_wataru)です!

今回は、Simplicityのウィジェット内にある「人気記事」と「新着記事」をCSSでカスタマイズしていきたいと思います!

今まで人気記事と新着記事のカスタマイズは、プラグインを使ってカスタマイズしていたんですけど、プラグインを使わなくてもカスタマイズできることがわかったのでこれからその方法を書いていきますね。

一応下記リンクに、以前書いたプラグインをCSSでカスタマイズした記事を載せておきます。Simplicityのテーマ以外をお使いの方は、読んでも損はありません

どうも、こんにちは!最近、運動不足の橋尾渡(@hashio_wataru)です! さて今回は、WordPressの「最近の投稿...
どうも、こんにちは!最近眠気が酷い橋尾渡(@hashio_wataru)です。こんなに眠いと「ナルコレプシー」なのか疑っちゃいますね...

スクリーンショット_060116_111735_PM

このように、プラグインを使わなくとも、Simplicityの中に人気記事と新着記事のウィジェットがあるんです。なので、こちらのウィジェットを使ってカスタマイズしていけばいいんです。僕は、わざわざ面倒なことをしていたってことになりますね(笑)

なので、そんな面倒なことをしなくても、こちらのウィジェットを少しCSSでカスタマイズしてあげれば良い感じの見た目にすることができるのです。では、さっそくSimplicityウィジェットをカスタマイズしていきましょう!

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

人気記事をカスタマイズ

スクリーンショット_060216_042224_PM

では、Simplicityのウィジェットにある「人気記事」をサイドバーにでも付けてみましょう。

※Simplicity専用ウィジェットは文字の先頭に、「S」という文字が付いています。

ss1_060216_060254_PM

人気記事のウィジェットをサイドバーに設置できたら、タイトルとサムネイルを重ねると、ランキング順位を表示にチェックしておきましょう。

スクリーンショット_060216_061133_PM

すると、このように大きなサムネイルの上に文字が重なって、ランキングの順位が左上に表示されます。ここからCSSで、文字の大きさと順位の色を変えていきましょう

では、こちらのコードをコピーしてスタイルシートに貼り付けてください。↓

.widget_popular_ranking .popular-entrys-large-on .wpp-list li a.wpp-post-title {
    color: #fff;
    opacity: 1;
    display: block;
    font-size: 80%;
}
.widget_popular_ranking ul li::before {
    background: none repeat scroll 0 0 #F3FF2B !important;
    color: #000 !important;
    content: counter(wpp-ranking, decimal);
    counter-increment: wpp-ranking;
    font-size: 85% !important;
    left: 3px !important;
    top: 3px !important;
    line-height: 1;
    padding: 6px 10px !important;
    position: absolute;
    z-index: 1;
    opacity: 0.9;
    border-radius: 2px;
    font-family: Arial;
    font-weight: bold;
}

スクリーンショット_060216_064259_PM

上のコードをコピーして、貼り付けて保存するとこうなります。だいぶ見た目がスッキリしましたね。初期設定では、少々野暮ったいので、こうやってCSSでカスタマイズしてやることを強くおすすめします。

初期設定では、タイトルの文字数が多いと文字がはみ出てしまうので、このように文字のサイズを少し小さくしてやると、良い感じにサムネイル内に文字が収まるんですねぇ~

それでは、次は新着記事をカスタマイズしていきましょう!

新着記事をカスタマイズ

スクリーンショット_060216_070012_PM

では、上に書いた流れと同様に、次は新着記事をサイドバーに入れてください。そして、新着記事についてはサムネイルは大きくせず、デフォルトの状態でカスタマイズしていきます。大きなサムネイルばかりでは、くどくなってしまうのでデフォルトがいいと思います。

スクリーンショット_060216_071107_PM

これが、初期状態です。このままでは、よく記事の区切りがわからないので、タイトルの下に線を入れていきましょう。そして、画像には影を付けます。そうすると、少しリッチな雰囲気に出来上がります。

では、こちらのコードをコピーして貼り付けてください。↓

.widget_new_entries ul li, .widget_new_popular ul li, .widget_popular_ranking ul li {
    clear: left;
    float: none;
    margin-bottom: 10px;
    overflow: auto;
    border-bottom: 1px solid #ccc;
}
.widget_new_entries ul li img, .widget_new_popular ul li img, .widget_popular_ranking ul li img {
    border: medium none;
    display: inline;
    float: left;
    margin-top: 3px;
    margin-right: 8px;
    width: 75px;
    height: 75px;
    margin-bottom: 10px;
    box-shadow: 2px 2px 5px #ccc;
}
.widget_new_entries a, .widget_new_popular a, .widget_popular_ranking a, .wpp-list a, .article-list .entry-title a {
    text-decoration: none;
    font-size: 90%;
}

スクリーンショット_060216_072905_PM

どうでしょうか。こんな感じで、またまたスッキリしてしまいましたね(笑)このように、記事を区切る線があれば非常に見やすくなります。線の種類は色々あるので、点線などにするのもいいでしょう。

こちらのサイトに全種類が掲載されているので参考にしてみてください。『border-スタイルシートリファレンス

それと、サムネイルにも影が薄く入っていますね。パッと見ではよくわかりませんが、影ありと影なしを比べるとよくわかります。影なしだと、飾り気がなさすぎて寂しさを感じます。なので断然、影ありのほうがいいですね。

それでは、新着記事のカスタマイズをこれで終わりたいと思います。

まとめ

以上で、人気記事と新着記事のカスタマイズは終わりです。僕の書いたCSSコードをそのまま使うのもいいですが、あなたなりにコードを改変させて、自分のスタイルにするのもいいですね。

CSSを自由自在に扱えたら、とても面白いですよ。CSSを覚えると、ウェブデザイナーなど潰しが効くようになります。あとは、ブログをあなた好みのデザインにできるというのがいいですよね。なので、CSSを覚えることを、僕は強く推奨しています。

それでは、そろそろSimplicityの新着記事と、人気記事のウィジェットをカスタマイズする記事を終わりたいと思います。ありがとうございました!

スポンサーリンク
レクタングル(大)広告
レクタングル(大)広告
この記事をお届けした
わたろぐの最新ニュース情報を、
いいねしてチェックしよう!

シェアボタンを押して情報を共有しましょう。

フォローする

関連記事



コメント

  1. yoko より:

    初めまして!
    Yokoと申します。
    最近、アフィエイトをはじめました。
    文章はできるのですが、wordpressがなかなかうまくいかず、サイトをみていましたら
    橋尾さんのサイトを拝見いたしました。
    とてもシンプルで見やすいサイトでした。
    このようなサイトをどのように作るか教えていただけたら本当にありがたいです。
    でも無理ですよね。
    いはまヘッタ、プロフィール、問い合わせなどができずのまだ公開できずにいます。
    wordpressは難しいですね。
    とてもシンプルで見やすかったのでメールしてしまいました。
    突然メールしてすいません。

    • 橋尾 渡 より:

      yokoさんお返事ありがとうございます。僕は初め、CSSをたくさん勉強しました。
      CSSを学べば、サイトのデザイン、レイアウトを整えることが可能です。
      あと文章については、書いているうちにスキルアップしていくはずです!
      大変遅い返事になってしまいましたが、wordpressがんばってくださいね(笑)

  2. ぽんちゃん より:

    はじめまして。無事この記事を参考にしてサイドバーの新着記事の体裁を整えることができました!ありがとうございます。
    質問なのですが・・・記事下の関連記事も同じようなテイストに変えたいのですが
    どのように設定すればよいでしょうか?
    モバイルで表示すると、この記事のカスタマイズで新着ランキングなどは見やすくなった
    のですが、関連記事だけがデフォルトだと文字が大きく、統一性がなく困っています。
    アドバイスいただけますと助かります。

    • 橋尾 渡 より:

      ぽんちゃんさん、コメントありがとうございます。
      テーマ編集内にあるCSSで、font-sizeで文字の大きさを変更してみてはいかがでしょうか。

  3. pico より:

    はじめまして。simplicity2を使い始めて1ヶ月経ちます。
    デザインのカスタマイズに時間がかかり、なかなか投稿できていない超初心者です。
    今回、サイドバー(新着記事)の文字色変更を行いたくて、ここ数日検索に明け暮れてましたが、ピンポイントで参考になるようなサイトが見つからず途方に暮れておりました。
    ですが、わたろぐ様のブログの「新着記事をカスタマイズ」の項目を発見し、CSSを少し
    変えて文字色指定を入れたところ、バッチリ反映されました。今までの苦労は何だったのかと・・・(;^_^A
    コードも載せていただいてたので、コピペで簡単に変更出来ました。感謝感謝です。