テーマシェアボタンを押して情報を共有しましょう。30041041どうも、こんにちは!橋尾渡(@hashio_wataru)です!今回は、Simplicityのウィジェット内にある「人気記事」と「新着記事」をCSSでカスタマイズしていきたいと思います!今まで人気記事と新着記事のカスタマイズは、プラグインを使ってカスタマイズしていたんですけど、プラグインを使わなくてもカスタマイズできることがわかったのでこれからその方法を書いていきますね。一応下記リンクに、以前書いたプラグインをCSSでカスタマイズした記事を載せておきます。Simplicityのテーマ以外をお使いの方は、読んでも損はありません。Postsを「thumb320」にしてカスタマイズする方法~サムネイルとタイトルを重ねて表示させる~どうも、こんにちは!最近眠気が酷い橋尾渡(@hashio_wataru)です。06:25このように、プラグインを使わなくとも、Simplicityの中に人気記事と新着記事のウィジェットがあるんです。こちらのウィジェットを使ってカスタマイズしていけばいいんです。僕は、わざわざ面倒なことをしていたってことになりますね(笑)なので、そんな面倒なことをしなくても、こちらのウィジェットを少しCSSでカスタマイズしてあげれば良い感じの見た目にすることができるのです。まとめ人気記事をカスタマイズでは、Simplicityのウィジェットにある「人気記事」をサイドバーにでも付けてみましょう。※Simplicity専用ウィジェットは文字の先頭に、「S」という文字が付いています。人気記事のウィジェットをサイドバーに設置できたら、タイトルとサムネイルを重ねると、ランキング順位を表示にチェックしておきましょう。すると、このように大きなサムネイルの上に文字が重なって、ランキングの順位が左上に表示されます。ここからCSSで、文字の大きさと順位の色を変えていきましょう!では、こちらのコードをコピーしてスタイルシートに貼り付けてください。bold;}上のコードをコピーして、貼り付けて保存するとこうなります。見た目がスッキリしましたね。初期設定では、少々野暮ったいので、こうやってCSSでカスタマイズしてやることを強くおすすめします。初期設定では、タイトルの文字数が多いと文字がはみ出てしまうので、このように文字のサイズを少し小さくしてやると、良い感じにサムネイル内に文字が収まるんですねぇ~。それでは、次は新着記事をカスタマイズしていきましょう!新着記事をカスタマイズでは、上に書いた流れと同様に、次は新着記事をサイドバーに入れてください。新着記事についてはサムネイルは大きくせず、デフォルトの状態でカスタマイズしていきます。大きなサムネイルばかりでは、くどくなってしまうのでデフォルトがいいと思います。これが、初期状態です。このままでは、よく記事の区切りがわからないので、タイトルの下に線を入れていきましょう。画像には影を付けます。すると、少しリッチな雰囲気に出来上がります。こちらのコードをコピーして貼り付けてください。90%;}どうでしょうか。こんな感じで、またまたスッキリしてしまいましたね(笑)このように、記事を区切る線があれば非常に見やすくなります。線の種類は色々あるので、点線などにするのもいいでしょう。こちらのサイトに全種類が掲載されているので参考にしてみてください。『border-スタイルシートリファレンス』それと、サムネイルにも影が薄く入っていますね。見ではよくわかりませんが、影ありと影なしを比べるとよくわかります。影なしだと、飾り気がなさすぎて寂しさを感じます。影ありのほうがいいですね。それでは、新着記事のカスタマイズをこれで終わりたいと思います。まとめ以上で、人気記事と新着記事のカスタマイズは終わりです。僕の書いたCSSコードをそのまま使うのもいいですが、あなたなりにコードを改変させて、自分のスタイルにするのもいいですね。CSSを自由自在に扱えたら、とても面白いですよ。CSSを覚えると、ウェブデザイナーなど潰しが効くようになります。あとは、ブログをあなた好みのデザインにできるというのがいいですよね。CSSを覚えることを、僕は強く推奨しています。2017-07-21Amazonで探す楽天市場で探すそれでは、そろそろSimplicityの新着記事と、人気記事のウィジェットをカスタマイズする記事を終わりたいと思います。ありがとうございました!スポンサーリンクレクタングル(大)広告レクタングル(大)広告この記事をお届けしたわたろぐの最新ニュース情報を、いいねしてチェックしよう!シェアボタンを押して情報を共有しましょう。今回はワードプレスでとっても簡単に作れる、サイドバーにウ...記事を読むウェブサイトには「ファビコン」と「アップルタッチアイコン」を設定しておこう!どうも、こんにちは。橋尾渡(@hashio_wataru)です。Postsを「thumb320」にしてカスタマイズする方法~サムネイルとタイトルを重ねて表示させる~どうも、こんにちは!最近眠気が酷い橋尾渡(@hashio_wataru)です。FacebookページのURLが無効です。」と表示されて使えない時の解決法を大公開!どうも、こんにちは!橋尾渡(@hashio_wataru)です。今回は各ブログサービスで使えるツイッターのウィジェット機能を...記事を読むカエレバをCSSでカッコ良くカスタマイズする方法を大公開!コピーして貼り付けるだけの簡単設定!どうも、こんにちは。今回は、かん吉さんの作った「カエレバ」をカッコ良くカスタマイ...記事を読む【解決】Simplicityアップデート時にウィジェットがリセットする問題についてどうも、こんにちは。橋尾渡(@hashio_wataru)です。ワードプレスのアップデートって、結構頻繁にありますよね。00:30初めまして!Yokoと申します。最近、アフィエイトをはじめました。文章はできるのですが、wordpressがなかなかうまくいかず、サイトをみていましたら橋尾さんのサイトを拝見いたしました。シンプルで見やすいサイトでした。このようなサイトをどのように作るか教えていただけたら本当にありがたいです。いはまヘッタ、プロフィール、問い合わせなどができずのまだ公開できずにいます。wordpressは難しいですね。シンプルで見やすかったのでメールしてしまいました。メールしてすいません。16:47yokoさんお返事ありがとうございます。僕は初め、CSSをたくさん勉強しました。CSSを学べば、サイトのデザイン、レイアウトを整えることが可能です。20:40はじめまして。無事この記事を参考にしてサイドバーの新着記事の体裁を整えることができました!ありがとうございます。質問なのですが・・・記事下の関連記事も同じようなテイストに変えたいのですがどのように設定すればよいでしょうか?モバイルで表示すると、この記事のカスタマイズで新着ランキングなどは見やすくなったのですが、関連記事だけがデフォルトだと文字が大きく、統一性がなく困っています。アドバイスいただけますと助かります。22:40ぽんちゃんさん、コメントありがとうございます。テーマ編集内にあるCSSで、font-sizeで文字の大きさを変更してみてはいかがでしょうか。16:17はじめまして。simplicity2を使い始めて1ヶ月経ちます。デザインのカスタマイズに時間がかかり、なかなか投稿できていない超初心者です。今回、サイドバー(新着記事)の文字色変更を行いたくて、ここ数日検索に明け暮れてましたが、ピンポイントで参考になるようなサイトが見つからず途方に暮れておりました。わたろぐ様のブログの「新着記事をカスタマイズ」の項目を発見し、CSSを少し変えて文字色指定を入れたところ、バッチリ反映されました。今までの苦労は何だったのかと・・・(;^_^Aコードも載せていただいてたので、コピペで簡単に変更出来ました。21:11Picoさん、コメントありがとうございます。コメントをキャンセルメールアドレスが公開されることはありません。*サイトプロフィールどうも、橋尾渡です。雑記ブログを運営しています。ネットで覚えた事や、Amazonで買ったものを基本的に紹介し、日々の役立つ情報を提供していきます。