成功マインドを学ぶ夢を描くメルマガ講座CONTACTホームブログを開設する賢威カスタマイズ【賢威7】人気記事/PV数ランキングのカスタマイズ-表示順やサイズ変更2017/01/05賢威カスタマイズ賢威6まではプラグインをインストールしないと人気の投稿記事ランキングを表示させることができませんでした。賢威7はデフォルトで人気の投稿記事ランキングを表示させる機能が備わっています。ウィジェットでサイドバーに表示させる、この人気の投稿記事ランキングをカスタマイズしてみました。サムネイルの画像サイズを変更する賢威7の人気記事/PV数ランキングをこうカスタマイズしたい!賢威7には「PV数ランキング表示」という機能がデフォルトでついているのでこちらを使ってみたのですが、こんな感じでデザイン・レイアウトがビミョーT0T※クール版・「シンプルなリスト」です記事タイトルがの文字サイズがとにかく大きい。1位・2位のランキング表示も大きいしダサい。記事本文の表示も消したい。このようにカスタマイズしてみたので、その方法をお伝えします。賢威7のPV数ランキング(人気記事)のカスタマイズ表示される要素の順序を変更するデフォルトのPV数・人気記事ランキングでは1順位画像の表示2記事タイトル3サムネイル4記事本文の引用という順序で要素が表示されています。これを1順位画像の表示2サムネイル3記事タイトルに変更し、4記事本文の引用は削除します。元ファイルのバックアップをとっておくようにしてください。function.phpファイルの2541行目にページのPV数を表示するウィジェットというエリアがあります。on-image"));ここがウィジェットでPV数・人気記事ランキングを表示させるための記述です。今回はシンプルなリストを選択した時の表示のされ方を編集するので、上記で定義されている通りcase「3」の箇所を編集していきます。"</li>\n";break;記事タイトルの文字サイズをカスタマイズする続いてデフォルトではかなり大きめの記事タイトルの文字サイズを小さくします。子テーマのbase.cssファイルに下記を追記します。0.9em;}0.9emの箇所はお好みに合わせて好きな数値に変更してください。ランキング表示のデザインをカスタマイズするつづいて1・2・3...のランキング表示のデザインを変更していきます。こんな感じで、サイトのテーマカラーに合わせたデザインに変更して、サイズも小さくします。自分の好みのデザインの画像ファイルを用意します。自分の好きなカラーやサイズで1/2/3を明記した四角や丸のデザインをPPTなんかでササッと作ってしまいます。私はこんな感じのものをPowerPointで作りました。20px角の正方形です。Pressにアップロードします。子テーマのbase.cssに下記を追記します。urlに続くカッコの中に、アップロードした画像のURLを入力します。URLはhttp://pj-freedom/...となっていると思いますが、http:を除いたURL、つまり//pj-freedom/...といったように入力してください。.rank07と変更して追記していってください。サムネイルの画像サイズを変更する最後に、デフォルトだと正方形に近い形のサムネイル画像を好みのサイズ・縦横比に変更する方法です。私はこんな感じで16:9に近い縦横比に設定しています。こちらについては以下の過去記事を参照してください。【賢威7】「最近の投稿」サムネイル画像と文字サイズを変更する方法いかがでしたでしょうか?過去の人気記事ランキングは、サイト内リンクでもアクセスを集めやすいウィジェットなので、ぜひ訪問者の目に止まりやすく、カッコいいデザインにカスタマイズしてみてください。働いていたバリバリの元キャリアウーマン。残業が月150時間を超える働き方に疑問を持ち、会社に雇われない働き方にシフトする。《週3日だけ働く》をテーマに、PC1で自由な働き方を実現するための情報を発信しています。