そーたろは、HTMLとかPHPとかCSSとかさっぱり分かりません。

 さっぱり分からないので、基本的にそーいったことにお詳しい方が公開してくださるありがたーいタグを切った貼った(コピペ)して、継ぎ接ぎにつぎはぎを重ねてサイトをこしらえています。

 僕は、Wordpressを使い始めた頃から、賢威(けんい)という有料テンプレートを使っています。

 この賢威がいいとか使いやすいとか、SEOに強いらしい、という話はおいておきまして、この”いち歩”は賢威7というテンプレートを使っています。

 で、賢威7でランキングの表示をしようと思ったんです。

スクリーンショット 2016 01 16 13 40 36

 こんな感じに。

 そしたら、賢威6と全然違っていて、できませんでした。

 賢威7のテンプレートの中にはランキングのアイコンとかたくさん入っているのに、使い方がわからない。

 賢威のフォーラムをのぞいてみても”適時コードを変更してご対応ください”の一点張り。グーグルさんで訊いてみても、賢威7は凄い!的な販売ページばっかり出てきて上手く検索できない。。。

 仕方ないので、”適宜コードを変更して対応する”ことにしました。

スポンサーリンク

賢威7の記事中にランキングを表示する方法

 賢威7のWordpress版のスタンダードというテンプレートを使っています。

賢威7にランキングのリストを表示するタグです。

<!--ランキング-->
<div class="main-body">
<ul class="ranking-list ranking-list01">
<li class="rank01">
<p class="rank-title">★タイトル★</p>
<p class="rank-thumb">★画像のURL★</p>
<p class="rank-desc">★説明文★</p>
</li>

<li class="rank02">
<p class="rank-title">★タイトル★</p>
<p class="rank-thumb">★画像のURL★</p>
<p class="rank-desc">★説明文★</p>
</li>

<li class="rank03">
<p class="rank-title">★タイトル★</p>
<p class="rank-thumb">★画像のURL★</p>
<p class="rank-desc">★説明文★</p>
</li>
</ul>
</div>
<!--/ランキング-->

 このままコピーして、記事中にペーストして、タイトル、画像、説明文をそれぞれ入れれば、ランキングが表示されるはずです。

賢威7ランキングのアイコン

上をコピペすると王冠のアイコンのランキングになります。

<ul class="ranking-list ranking-list01">

の”ranking-list01”の”01”を”02”にするとメダルのアイコンになります。”03″に変更すると四角に数字の入ったアイコンになります。

ランキング_001


スポンサーリンク


賢威7ランキングの画像

 ランキングに貼る画像のURLは、

・WPの投稿画面の「メディアを追加」から、画像を選択して、
「配置」”なし”にして、
「サイズ」”サムネイル – 150 × 150”にして
「投稿に挿入」で書きだしたタグから
<a>~</a>タグを取り除いて使いました。

 サイズを変更したければ、数字を変更してリサイズできます。

 

賢威7ランキングの増やし方

<li class="rank03">
<p class="rank-title">★タイトル★</p>
<p class="rank-thumb">★画像のURL★</p>
<p class="rank-desc">★説明文★</p>
</li>

の部分をコピーして</ul>の上にペーストして”rank03″の”03″を”04”、”05”としていくと、ランキングは10位まで増やせます

 もっとこう書いたほうがいいよ、ということはあると思いますが、とりあえず、賢威7でランキングが無事表示されたので良しとしました。

 賢威7をお使いのお詳しい方、僕はこんな簡単なことで日々躓いています。どうぞ賢威7でコピペで使えるありがたーいタグを公開してください〜^_^