ランキングを設置しよう



 ひとまずブログが表示されるようになりましたが、見た目にはちょっと寂しい感じがしますね。

ウェブサイトの調査


 ところで、いくつかのウェブサイトを見てどのようにレイアウトされているのかを軽く調べてみましょう。

ブログというとニュース記事のようなものと考えることもできますので、日々のニュースを流している新聞社のサイトを参考にしてみます。

そのニュースサイトを参考にしながら拡張機能をついでに考えてみましょう。

日本経済新聞


まずは、日本経済新聞(通称:日経新聞)のサイト:




タイトルは、「日本経済新聞」ですね。

メニューには、新聞が取り扱う分類(カテゴリー)が並んでいて、
2行目には、特集やコラム、社説などがならんでいます。

次に広告が入っています、その次から記事の概要(左側)と為替などの情報(右側)に分かれています。

ここで目に付く機能としては「おすすめ情報」と「外国為替や株価など」の情報でしょうか。




画面をスクロールすると、右側の部分に「アクセスランキング」「人気連載ランキング」「保存記事ランキング」などができてます。

ランキング機能はつけたいとおもいません?




さらにスクロールすると、今度は左側に「ピックアップ」がでてきました。

ピックアップは「オススメ記事」と同じですね。 分類(スポーツやテクノロジ)毎に2つづつをオススメ記事にしているようですね。


また、左側に並ぶ「日経***」は、関連の雑誌広告のようですよ。



日経新聞のサイトでは、オススメ記事、アクセスランキングの2つの機能をつかっているようです。

ザ・ウォール・ストリート・ジャーナル


もう一つ別のサイトを見てみましょう。

今度はウォール・ストリート・ジャーナルというアメリカの経済新聞の日本語版。




無料の記事を開いてみました。


新聞のタイトルと大分類がタイトルに設定してあるようですよ。

次に広告欄、そして「注目記事」が並んでいます。

そして、記事の内容です。




スクロールすると、「注目ランキング」「国内の記事をもっと読む」などがあります。

さらにスクロールしていくと



「関連記事」、「ピックアップ」がでてきました。



ランキング(人気の記事)を追加


ランキングを表示するガジェットを追加しましょう。


「sidebar-right-1」の「ガジェットを追加」をクリックして追加します。


「人気の投稿」の「+」をクリックすると


各項目を設定して、「保存」するとランキング機能が追加できます。

このままですと面白くないですね。

ランキングの見た目を変更しよう


ランキングを少しカラフルにしてみましょう。

CSS(カスケード・スタイル・シート)を追加するとランキングをカラフルにすることができます。




テンプレート→カスタマイズをクリックしてCSSコードを追加します。

「上級者向け」をクリックして、「ページ」の下でスクロールします。




「CSSを追加」がでてきたら、選択するとカスタムCSSを入力できるウィンドウが開きますのでそこにCSSコードを追加します。


追加するコードは:

<!-- Popular posts multi colored UI theme -->
#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:#ff4c54;width:97%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
#PopularPosts1 ul li a{font-size:13px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts1 img{
-moz-border-radius: 130px;
-webkit-border-radius: 130px;
border-radius: 130px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
padding:4px;
border:1px solid #fff !important;
}
#PopularPosts1 img:hover {
border-radius: 0 0 0 0;
-moz-transform: scale(1.2) rotate(-711deg) ;
-webkit-transform: scale(1.2) rotate(-711deg) ;
-o-transform: scale(1.2) rotate(-711deg) ;
-ms-transform: scale(1.2) rotate(-711deg) ;
transform: scale(1.2) rotate(-711deg) ;
}
<!-- popular posts multicolored UI theme -->

このCSSをコピーして、カスタムCSSウィンドウに貼り付けします。

「ブログに適用」をクリックして表示を確認すると・・・

 カラフルなランキング・ガジェットになりました。

お、関連記事が表示されてますね。



次回は、関連記事を表示するように変更していましょう。