Hacks旅ブログの作り方、ブログデザインのこと、wordpressのことなど。Postsは人気記事を表示するプラグインです。便利なので使っている方も多いのではないでしょうか。Postsで表示した記事のアイキャッチ画像の上に、ランキング順位を表示することができます。今回はランキング順位の表示の仕方と、数字の背景色を変更する方法を説明します。(style.css)の編集は必ず子テーマで行って下さい。Postsの順位に色を付ける方法ランキング順位の全ての色を変更する特定の順位の色を変更するその他のアレンジ1.背景色をなしにする(透明にする)。2.背景の角の丸みをなくす。3.数字の色を変える。4.背景色の透明度を変更する。Postsに順位を表示する方法(Simplicity2)まずは順位を表示するところから説明します。表示している人は飛ばして下さい。wordpress管理画面から「外観」→「ウィジェット」でウィジェットの設定画面を開いて下さい。左側に表示されているウィジェットの中から「[S]人気記事」を選び、任意の位置に追加します。「[S]人気記事」の設定を開き、「ランキング順位の表示」にチェックマークを入れます。これで順位が表示されるようになります。Postsの順位に色を付ける方法メインブログの画面を使って説明します。Postsの順位の色(正確には順位の背景色)に濃い灰色(#666)が指定されています。ここではランキング全ての色と、特定の順位の色の変更の仕方を説明します。ランキング順位の全ての色を変更するCSSでランキング順位の背景色を変更します。(style.css)に以下のコードを追記して下さい。li:before{background-color:#8e8e8e;}「#8e8e8e」の箇所を変えると違う色になります。僕は自分のサイトデザインに合わせて、デフォルトより少し明るい色にしています。特定の順位の色を変更する続いて、特定の順位の色を変更する方法です。僕は1~3までの背景色を変更しています。li:nth-child(3):before{background-color:#C47222;}その他のアレンジその他のアレンジ例です。該当箇所にコピペして使って下さい。1.背景色をなしにする(透明にする)。transparent;2.背景の角の丸みをなくす。border-radius:0;3.数字の色を変える。#000000;4.背景色の透明度を変更する。opacity:0.5;おまけ:アイキャッチ画像を非表示にするこれはメインブログの投稿タイトル上部分に表示している、カテゴリ別人気記事(表示中の記事と同カテゴリ内の人気記事)です。最後にこれの設定方法について書いておきます。先程と同じように、「[S]人気記事」ウィジェットを使います。以下のように設定して下さい。ウィジェットの設定が済んだら、CSSでアイキャッチ画像を非表示にし、枠を付けます。設置したウィジェットのIDを確認して下さい。僕の場合は「popular_ranking-6」というIDが割り当てられていました。ウィジェットのIDは、GoogleChromeのデベロッパーツールで確認することができます。設置したウィジェットの上で右クリック→「検証」をクリックしてください。表示されたIDを確認します。あとは、IDを指定して、スタイルを書くだけです。img{display:none;}CSSでは、IDは「#」で表します。IDと似たものに、class(クラス)という属性があります。classは「.」で表します。この2つの違いは、「ユニーク(固有)かどうか」です。IDは、ひとつのHTMLの中で一つの要素にしか使えません。一方で、classはいくつもの要素に使うことができます。IDを指定することで、特定の要素のみにスタイルを適用させることができるのです。逆に、サイト内の複数か所で同じスタイルを使いたいときなどは、classを使うと便利です。コメント欄のデザインをカスタマイズする方法(枠、色、文字の変更)と、デザインサンプルCocoonのコメント欄(ボタンと入力欄)のデザインをカスタマイズする方法と、デザインサンプルを紹介します。Wordpress高速レンタルサーバーMixHost(ミックスホスト)の申込方法。30日間の無料体験ありブログを開設するには、レンタルサーバーを借りる必要があります。ロリポップとMixHostの2社を利用したことがあるので、それぞれの特徴について述べた後、MixHostの申込方法について説明します。CocoonカスタマイズCocoonのブログカードのデザインカスタマイズCocoonのブログカード(外部・内部)をカスタマイズ(背景色・枠線・フッタードメイン非表示)する方法を紹介します。Wordpressサイドバーの人気記事をタブで日毎、週毎、月毎の3種類表示する方法タブを使った人気記事の日毎、週毎、月毎の3種類表示を、Wordpressのプラグインを使って簡単に実装する方法を紹介します。CocoonカスタマイズCocoonのグローバルナビのカスタマイズ方法(ヘッダー固定、ホバー時に下線)Cocoonのグローバルナビ(ヘッダーメニュー)のカスタマイズを紹介します。画面スクロール時にヘッダーを上部固定表示にする方法と、マウスホバー時に下線をつける方法です。SimplicityのSNSフォローボタンを丸くして、色を変更する方法コピペでできる、記事の見出しデザインサンプル16(CSS)Commentsコメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。Ultimateの使い方。Snippetsの使い方。人気記事ウィジェットのデザインサンプル102019.12.232020.01.03スマホ・パソコン間でテキストやファイルをやり取りする方法。Ultimateの使い方。Snippetsの使い方。人気記事ウィジェットのデザインサンプル102019.12.232020.01.03スマホ・パソコン間でテキストやファイルをやり取りする方法。コメント欄のデザインをカスタマイズする方法(枠、色、文字の変更)と、デザインサンプル2019.11.26CATEGORIESCocoonカスタマイズ11Simplicityカスタマイズ9Windows7Wordpress21その他6ブログデザイン27旅ブログの作り方18タイトルとURLをコピーしました。