アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦! -4ページ目

記事下に別のブログの最新記事一覧を・・・

アメブロを複数運用されている方・・・

他のブログの最新の記事を記事下に標示して

他のブログへ読者さまを誘導・・ っていかがでしょう



わたしのお勧めは

お気に入りサイトの最新情報・投稿記事をあなたのブログやHPに掲載 フィードウィンド

こちらは横幅も記事にあわせるように変更できますし・・・

あまり余計なものも付いていないシンプルなのがいいと思います
それに余計な登録もなくていきなり使えちゃうし・・




とりあえずAという2つのアメブロを運用している場合で説明します

アメブロBの記事下にアメブロAの最新の記事一覧を貼り付けてアメブロBの読者様をアメブロAに誘導しようと思います





で・・・・問題はアメブロのRSSには広告が付いてくることなんです

配信しているFringe81(旧社名:RSS広告社)はアメブロの業務提携している会社だから・・

ここもか~って感じです・・・・


アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!



で・・使わせていただくのが RSS広告削除社




アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

枠の中に・・・

http://rssblog.ameba.jp/AのアメブロID/rss20.xml






アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

再びこのURLをフィードウィンド に入力・・・


今度はPR:が入っていません・・・
アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!
フレーム設定で記事にあわせてサイズを入れて・・

タイトル設定や見出し設定・本文設定を好きなように設定してプレビューがOKなら



枠内のコードをコピーして表示するアメブロBのフリープラグインに貼り付けます

が・・・そのときに一手間細工をします




<div id="feedwind">

ココにコードを入れます

</div>


FeedWindのコードを<div id="feedwind"></div>で囲います


あとはフリープラグインのその下に・・


<script type="text/javascript">
$(function(){
$("#feedwind").insertBefore("#advertising2:first");
});
</script>

すべての記事下に表示されるのもウザイので・・・

1ページに最初の記事の記事下にだけ表示するようにしてみます・・

つまりは記事下広告の上って~こと・・・




ちなみにわたしの場合でしたら・・・


<div id="feedwind">
<script type="text/javascript">
<!--
rssmikle_url="http://pipes.yahoo.com/pipes/pipe.run?_id=3e1acf180  f2b4733&_render=rss";
rssmikle_frame_width="450"; ←貼り付けてみて横幅をかえる場合はここをかえます
rssmikle_frame_height="280"; ←貼り付けてみて縦をかえる場合はここをかえます
rssmikle_target="_blank";
rssmikle_font_size="12";
rssmikle_border="on";
rssmikle_css_url="";
rssmikle_title="off";
rssmikle_title_bgcolor="#0066FF";
rssmikle_title_color="#FFFFFF";
rssmikle_title_bgimage="";
rssmikle_item_bgcolor="#FFFFFF";
rssmikle_item_bgimage="";
rssmikle_item_title_length="20";
rssmikle_item_title_color="#666666";
rssmikle_item_border_bottom="on";
rssmikle_item_description="on";
rssmikle_item_description_length="40";
rssmikle_item_description_color="#666666";
rssmikle_item_description_tag="off";
rssmikle_item_podcast="icon";
//-->
</script>
<script type="text/javascript" src="http://feed.mikle.com/js/rssmikle.js"></script>
<div style="font-size:10px; text-align:right;">
<a style="COLOR: #cccccc" href="http://feed.mikle.com/" target="_blank">RSS表示パーツ</a>
</div>

</div>
<script type="text/javascript">
$(function(){
$("#feedwind").insertBefore("#advertising2:first");
});
</script>



最後にCSSです
アメブロBのCSSの最後に・・・

記事下との間にスキマをあけて中央に配置します


#feedwind{
width:450px;/*FeedWindの幅*/
margin:50px auto 0;/*記事とのスキマ*/
}




わたしは・・ 実は RSS広告削除社 は使っていません

Yahoo! Pipes をつかっています

つぎはそちらの説明・・・

その次が3つ以上ブログを運用しているって~場合のYahoo! Pipes でまとめて最新一覧の作り方を予定しています

Yahoo! Pipes って・・2日前に1回使っただけだから記事が書けるか・・・・ふ・あ・ん



livedoor BlogRoll

こちらは複数のRSSフィードが使えてしかも誘導したクリック数がわかるレポートが表示されるようなのでよさそうなんですが・・

最初の1行目に広告が表示されるのが嫌だ!(バナーの場合は大きいからもっと嫌!!)
ファビコン表示にしてもアメブロのファビコンを拾ってしまう・・
動作が快適って書いてある割には・・なんか反応が悪い・・・(設定も・・表示も・・)

これが思ったように使えれば Yahoo! Pipes なんて使わなくてもいいのに・・残念







できたよ~って方

見本ブログとしてコメントで宣伝してください(本日コメント開放しておきます)

また・・フィードウィンド以外でやったって方・・大歓迎です

よろしくお願いします m(_ _)m


※なのでこの記事に関係した質問以外はこの記事にはコメントしないでください
また・・こちらのブログは旧?ベーシック専用です

新しい「CSS編集用デザイン」については 新・アメブロ向上企画書  へ質問ください

(質問のある方がはたして興味のないこの記事の最後まで読んでいただけるものなのか・・・?)

画像[拡大する]を他の画像に変更

コレはお勧めしません!

って記事にしておいてなんって~ことを・・・?チカチカしたりスムーズに表示できません



を表示しないようにするのでしたら・・・

画像を拡大するナビゲーションが設置されました・・を消す




画像の上にマウスがのると付いてくる


って表示される画像・・・


他の画像に変えちゃえ~




新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ



新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ



新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ   新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ   新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ

新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ


新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ   新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ   新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ


新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ

こんな画像を用意します・・・



画像を作るとこの注意


新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ
マウスポインターと画像の左上角の位置関係は固定されています

元の画像のサイズは 横58px 縦27px です


CSSに・・


/*画像[拡大する]を変更*/
#naviLink{
width:58px;/*画像の横*/
height:27px;/*画像の縦*/
background-image:url(画像のURL);
background-repeat:no-repeat;/*繰り返さない*/
display:block;
}
#naviLink img{
visibility:hidden!important;
}




新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ

RSSのテストです

RSSを使って最新の記事一覧・・・


複数のブログを運営されていて
その複数のブログをまとめて新しい順に記事一覧が表示されていたら便利じゃないですか?



が・・・できるかな~ 





・・・のテストです


結果は 新・アメブロ向上企画書  の記事の下に表示されるはずです・・
どうなることでしょう?






アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!



うまくいったようです・・・



問題は・・・ わかりやすく記事に書けそうもナイ・・・ってこと