マクノスケblog

スター・ウォーズ、映画、ドール大好きおたく主婦の日記。

TOP >  パソコン・ブログ >  ブログパーツ >  FC2アクセスランキングで人気ページを表示

FC2アクセスランキングで人気ページを表示

20180412-02.jpg

FC2アクセスランキングに登録して右サイドバーに人気ページを表示するようにしてみました。
表示するにあたって、タイトルの折り返し、フォント、リンクのフォントカラーをカスタマイズ。
FC2アクセスランキングの登録はこちら


1.解析用タグをテンプレートのhtmlの<body>のすぐ下にコピペして保存します。

<script type="text/javascript" src="//×××××.ranking.fc2.com/analyze.js" charset="utf-8"></script>



2.人気ページ URL除外設定にトップページなど表示したくないURLを記入します。
設定をクリックして保存します。




3.サイドバーのプラグインのフリースペースに人気ページブログパーツの貼り付け用タグをコピペ。

<script type="text/javascript" src="//×××××.ranking.fc2.com/accessory.js?rtype=page" charset="utf-8"></script>



4.前後を<div id="ranking-page"></div>で挟み<script type="text/javascript" charset="utf-8">を追加。

<div id="ranking-page">
<script type="text/javascript" src="//×××××.ranking.fc2.com/accessory.js?rtype=page" charset="utf-8"></script>
</div>
<script type="text/javascript" charset="utf-8">

↑のタグの下に以下の5~7を追加します。


5.タイトルの折り返しタグ

document.getElementById("ranking-page").innerHTML=document.getElementById("ranking-page").innerHTML.replace(/white-space:\s?nowrap/ig,"white-space: normal");


6.リンクフォントのカラー変更(ピンクの部分を好みの色に変えて下さい)

document.getElementById("ranking-page").innerHTML=document.getElementById("ranking-page").innerHTML.replace(/color:#0000CC;/ig,"color:#6e3f49;");


7.フォントを変更(私はメイリオにしましたが、お好きなフォントに変えて下さい)

document.getElementById("ranking-page").innerHTML=document.getElementById("ranking-page").innerHTML.replace(/'MS UI Gothic'/ig,"'Meiryo'");



8.まとめ
3~6までの作業で出来たhtmlが以下のものになります。
これを保存します。

<div id="ranking-page">
<script type="text/javascript" src="//×××××.ranking.fc2.com/accessory.js?rtype=page" charset="utf-8"></script>
</div>
<script type="text/javascript" charset="utf-8">
document.getElementById("ranking-page").innerHTML=document.getElementById("ranking-page").innerHTML.replace(/white-space:\s?nowrap/ig,"white-space: normal");
document.getElementById("ranking-page").innerHTML=document.getElementById("ranking-page").innerHTML.replace(/color:#0000CC;/ig,"color:#6e3f49;");
document.getElementById("ranking-page").innerHTML=document.getElementById("ranking-page").innerHTML.replace(/'MS UI Gothic'/ig,"'Meiryo'");
</script>


カスタマイズにはこちらのページを参考にさせて戴きました。管理人さまありがとうございます。

表示させてから半日くらい経ちましたが、個別記事に設定しているため、
アクセスがあっても、ほとんどがトップページなので、
なかなかページランキングには反映されませんねえ。
でも、ゆるゆるとでも、こんなページを見てくれている人がいるんだーと思うと、
嬉しくなります。(検索ワードで引っかかっただけかもしれませんけどね。)
自分の参考やモチベーションのためにも今回の導入は正解だったなと思いました。

 今日の更新

    のほほん本舗     今朝の空、マクタロウのお弁当、スターウォーズ日めくりの画像追加
    日刊のほほん本舗     今朝の空のまとめブログ
    マクノスケマクタロウの日常     インスタグラムでアップした画像の一覧


記事を読んで下さったみなさまへ
コメント面倒という方は拍手ボタンを押して
励ましてやって下さい。
 
関連記事
    ポチッと押して貰えるととっても嬉しいな!    
[Tag] * ブログ

Last Modified : 2018-04-13

Comments







非公開コメント