RSSはこちら

ブログテンプレートならHKD

ブログタイトルを3時間悩んでやっと思いつきました。変にこだわるデザインです。すでに変にこだわって時間をロスしています。

更新休止のお知らせ

現在HKDは更新を休止しており、緊急を要する修正以外は手をつけれない状態です。 ご利用していただいてる方々には申し訳ございませんが、よろしくお願いいたします。
  • --⁄--⁄--(--)
  • --:--

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
category
スポンサー広告
  • 2011⁄10⁄16(Sun)
  • 18:45

CustomRssReaderを2つ同時に使う方法

 CRRhukusuu_image01.jpg
CustomRssReaderを2つダウンロードして、複数起動に対応させる方法です。
2つダウンロードしたままだと上の画像のようにおかしくなりますね。これを修正します。

この機能はVer0102以上で可能です。

詳しくは続きをどうぞ。
このプラグインのプログラムの流れは、表示させるRSSの内容を作る→その内容を#CustomRssReaderAreaというID名のdivボックスに表示する、という流れになっています。
そのため、同時にダウンロードした二つ目のプラグインも同じdivボックスに内容を表示させようとするので、表示がおかしくなります。

つまり#CustomRssReaderAreaとは違う表示領域を設けて、そこに表示させるようにすればOKとなります。

ではいつものようにダウンロードしたプラグインの編集画面からHTMLの編集を開いてください。


/********** javascriptのカスタマイズはここまで ***********/


$("#CustomRssReaderArea").CustomRssReader({"rssArr" : rssList, "displayItem": displayItem, "sortItem": sortItem, "rssItemLimit": rssItemLimit, "titleLength": titleLength, "descriptionLength": descriptionLength, "dateFormat": dateFormat, "effectSpeed": effectSpeed, "newmark": newmark, "thumnail": thumnail});
});
-->
</script>
この青字の部分を仮に#hutatumeという名前に変更します。
この部分でどこに表示させるかの命令を行っています。

/********** CSSのカスタマイズはここまで ***********/

-->
</style>
<div id="CustomRssReaderArea"></div>
この青字の部分をさっきと同じようにhutatumeと変更します。
これで表示させるdivボックスが完成しました。

/********** CSSのカスタマイズはここから ***********/

#CustomRssReaderArea{
margin:0px;
padding:0px;
}
#CustomRssReaderArea div.crr_container{
/*ここのheightで高さを設定*/
height:300px;

overflow-x:hidden;
overflow-y:scroll;
padding-right:5px;
}
#CustomRssReaderArea div.crr_container ul.rssBox{
margin:0px;
padding:0px;
}
#CustomRssReaderArea div.crr_container ul.rssBox li.rssList{
width:100%;
list-style:none;
list-style-image:none;
background-image:none;
padding:0px;
margin:0px;
}
/* シーケンス番号が入っている */
#CustomRssReaderArea div.crr_container ul.rssBox li.rssList span.crr_seq{
}
/* カテゴリーが入っている */
#CustomRssReaderArea div.crr_container ul.rssBox li.rssList span.crr_category{
}
/* タイトルが入っている */
#CustomRssReaderArea div.crr_container ul.rssBox li.rssList span.crr_title{
}
/* 日付が入っている */
#CustomRssReaderArea div.crr_container ul.rssBox li.rssList span.crr_date{
display:block;
padding-bottom:2px;
text-align:right;
}
/* Newマークが入っている */
#CustomRssReaderArea div.crr_container ul.rssBox li.rssList span.crr_newmark{
}
/* ソーシャルブックマークのリスト */
#CustomRssReaderArea div.crr_container ul.rssBox li.rssList ul.crr_bookmark{
display:inline;
}
/* はてブ・twitter・FaceBookが入っている */
#CustomRssReaderArea div.crr_container ul.rssBox li.rssList ul.crr_bookmark li{
display:inline;
margin:0px;
padding:0px;
background-image: none;
list-style:none;
}
/* サムネイルのリスト */
#CustomRssReaderArea ul.thumnailBox li.crr_thumnail{
list-style:none;
padding:0px;
}
/* サムネイルの画像 */
#CustomRssReaderArea ul.thumnailBox li.crr_thumnail img{
border:1px solid #333333;
}

/********** CSSのカスタマイズはここまで ***********/
最後にこの青字の部分を#hutatumeに変更し、CSSの変更も行います。


これで完了です。
関連記事
スポンサーサイト
category
カスタマイズ > CustomRssReader
tag
複数カスタムプラグイン
genre
ブログ
theme
FC2ブログ共有プラグイン

TrackBack Url

http://hkdesign.blog91.fc2.com/tb.php/150-62597a15

検索フォーム

プロフィール

HKD TEMPLATE


Author:
 Hellow
mail:
 hkdesign.mail☆gmail.com
 ☆を半角@に変えてください。

Henni
Kodawaru
Design
略してHKD

ブログテンプレートならHKDにようこそ!
このサイトではFC2で使える共有テンプレートを配布しています。
サイトについての説明はこちらをどうぞ。

カテゴリ

アクセスランキング

[ジャンルランキング]
ブログ
2240位
アクセスランキングを見る>>

[サブジャンルランキング]
共有テンプレート
19位
アクセスランキングを見る>>

FC2カウンター

メールフォーム

名前:
メール:
件名:
本文:

アプリ紹介

google chrome拡張機能「high! like!」を作りました。
機能1:はてなハイクをサイト上に投稿できる
機能2:はてなハイク投稿時に同時にtwitterにも投稿する
詳しくは次のURLへお越しください
hk-factory
Googleウェブストア

プラグインギャラリー

ブログ管理画面の共有プラググイン追加から、作者:hkdesignと検索してダウンロードしてください。

CastomCategory
CustomRssReader
ImageClock

テンプレートギャラリー

ブログ管理画面の共有テンプレート追加から、作者:hkdesignと検索してダウンロードしてください。

動作環境について

テンプレートは以下の環境・方法で動作確認を行ってからFC2に申請しています。もし、記載の環境でも表示が崩れて見えない場合は連絡してくれるとありがたいです。

【Win】FireFox 3 / IE8 / IE7(*) / IE6(*) / Google Chrome
【Mac】FireFox 3.0(*) / Safari 3.0(*)
*マークがあるブラウザは手元に環境がないので、Adobe BrowserLabを使ってチェックしています。

Adobe BrowserLab
https://browserlab.adobe.com/

ライセンスについて

ライセンス形態はGPLライセンスをとります。
簡単に言うと次の4つです。
  • カスタマイズ・再配布など連絡なしに使用OK。
  • ただし、著作権表示は消したらダメです。
  • なんらかの損害が出た場合は自己責任です。
  • 再配布する場合、GPLライセンスが適用されます。
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。