相互リンクを更新順に表示する方法! - やまきちのネットでお小遣い稼ぎ&節約主婦日記♪

相互リンクを更新順に表示する方法!

  おかげさまで、只今私のブログと相互リンクしていただいてるサイトも少しづつ増えてきています(*^-^*)
ありがとうございます♪

まだまだ相互リンクは引き続き募集中です♪希望される方は左サイドバー中ほどに私のブログ情報を掲載してますのでどうぞご利用ください♪また、その際はご一報ください(*^-^*)

ところで、前々からずっと相互リンクの並び順をサイトの更新順にしたいな~と思ってて、この度無事に更新順に表示することが出来ました!

今回、とぅどぅっきーさんの記事を参考にさせていただき大変勉強になりました!とぅどぅっきーさん、ありがとうございます!

そこで私も、今後少しでも皆様のお役に立てる様、また自分の覚書の為にも

相互リンクの並び順をサイトの更新順にする方法をUPしておきたいと思います(*^-^*)
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
今回私が利用したのは、BlogPeople(ブログピープル)というサイト。

BlogPeopleで出来る主な事柄は以下の通りです↓↓(BlogPeopleより抜粋)

。他サイトのリンク集を作成して自分のブログに埋め込むことができます。

。埋め込んだリンク集を通じて、リンク先の更新情報を取得できます。

。自分のブログを他のBlogPeople会員に簡単にリンク集に加えてもらえる仕組みが利用できます。

。リンク集に加えあうことでブログを通じた仲間作りができます。

。トラックバックの仕組みを使って、同じ興味を持つ仲間の記事を自分のブログに表示できます。

。自分のブログをブログピープルサイト上でアピールできます。

。自分のブログのアクセス数やランキング情報などを知ることできます。


相互リンクを更新順に表示させるにはこちらのサイトで会員登録が必要 

まずはこちらからBlogPeopleのサイトに入り会員登録を済ませます。

 

ブログを持っている人用と持ってない人用の2種類の登録画面が出てきますが、ブログを持ってる人は上記の画面の方(blog保有者登録)に必要事項を入力します。

必要事項を入力後送信すると、登録用のメールが送られてくるのでURLをクリックしたら登録完了!

次に、リンクリストの作成に入ります。再度BlogPeopleのサイトに入り、

スクリーンショット (11)
左サイドバーから『リンクリストの作成』をクリック。

無題

『リンクリストの新規作成』のリスト名には、自分の相互リンク欄の一番上に入れたい文字を入力します。私のブログでは『相互リンク募集中!』とありますね。ここの文章を自由に決められます。また、後から修正で変えることが可能なのであまり考えすぎずにとりあえず何か入れておきましょう(*^-^*)

次に『リンクの追加』です。この欄に自分が相互リンクをしているサイトの情報を1件ずつ登録していきます。リンク数が多い人はちょっと大変ですが・・(;^ω^)私はその時は12件だったのでさほど時間もかからずに登録することが出来ました(笑)

カテゴリはよくわからなかったので私は『その他』にしておきました。

以下、説明、表示先の欄も空白のままにしてます。ポイントも更新順にするなら関係なさそうなのでそのままで。最後に『追加』で登録完了!

次に、左サイドバーから『表示形式の設定』をクリック。

基本設定の欄を入力します。ここで、『2.リンクの表示順』を『最新』にすることで更新順に表示されるようになります。
リンクの前に『New』をつけるには『4.更新マーク表示時間』の『リンクサイト名の前に表示するグラフィックまたはテキスト』から好みのものを選ぶと頭に『New』等の更新マークが付けられます♪

他の所は私は以下のように設定しました。ご参考までに(*^-^*)

スクリーンショット (11)

次に詳細設定のタブをクリック。

『6・リンクの出力形式』は、<DIV>タグ形式を選択。
『9.クリック後の表示先の指定』の、表示先の指定を選択し、欄に『_blank』を入力。
『10.リンクリストの出力形式と文字コード』は 出力形式:JavaScript 文字コード:UFT-8 を入力。(FC2ブログの場合)
(※他のブログの場合はBlogPeopleのQ&Aに案内が掲載されています。ちなみに、FC2での表示方法もBlogPeopleの案内では文字コード:EUC-JPで入力となっていましたが、今回私はとぅどぅっきーさんの記事を参考にしたのでUFT-8 で入力しています) 

その他の欄も選択出来たら更新をクリック。

更新できたらコード生成、スクリプトが表示されるのでそれを自分のブログに貼りつけます。

私と同じFC2の場合は、プラグインの設定→公式プラグインの追加→フリーエリアを追加→HTMLの編集で欄を開きそこにコードをコピペします。

その時、コードを以下の赤字で書いてあるタグで挟んでください。 
スクリーンショット (11)
 
次に、スタイルシートを変更します。

テンプレートの設定→スタイルシートの編集を開き、1番下の欄に以下のタグを貼りつけます。

html {
scrollbar-base-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-face-color: #FFFFFF;
scrollbar-shadow-color: #67CB66;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #67CB66;
scrollbar-arrow-color: #67CB66;
}
.scroll {
overflow:auto;width:100%;height:170px;
border: 1px #67CB66 dotted;
}

これで更新すれば相互リンクをスクロールバーで表示することができます!
バーの長さを変えたければ赤字の数字(ここでは170)を変えると調整できます。(ちなみに私は350にしました)

後は実際にサイトをみてちゃんとなっているかどうか確認してみてください♪

ああ、こうしてだんだんと自分のブログがカスタマイズされていくのは楽しいですね(≧◇≦)ちょっと疲れもするけれど・・(;^ω^)
私もなんとかできてよかったです(*^-^*)

みなさまのお役に立てたら幸いです♪ にほんブログ村 小遣いブログへ
良かったらポチッとお願いします♪
コメント
非公開コメント

ありがとうございます!

こんにちは☆

相互リンクのご連絡を頂きありがとうございました(^O^)
私のブログにも設置完了しましたのでお知らせ致します。

また、無事にスクロールバーの長さを変更できたようで
良かったですね♪
結構前にアップした自分の記事が、誰かのお役に立てるなんて
思いもしなかったので、私もうれしかったですヽ(´▽`)/

これからもどうぞ宜しくお願いします。

2015-09-08 10:53 | from とぅどぅっきー

トラックバック

http://yamakithi.blog120.fc2.com/tb.php/398-bb37b334