ソラマメブログ › * Lovely Wolf Report in SLMaMe * › 【サイドメニュー】

2008年04月21日

★カスタムプラグインをHack する! -Case.1-


【第 21 話】 画像付きのバックナンバーをサイドバーに表示したい!- マイアルバム編集編 -


★地中海よりお越しの外国さんとの会話に夢中になってたら、いつのまにか目の前で踊り始めたハ虫類の女王さまからIM の嵐が届いていた。

・・・ヤバい、オオカミがハ虫類に食われる!ナニっ?!私のおうちに遊びに来ないかだとっ?!Hi, Sexy Man.

・・・hmmm...オオカミは昔から下品なハ虫類系が大好き。ここはひとまず地中海さんsayonara。して、ハ虫類さんkonnichiwa でしょか。




★じつはココだけの話、セカンドライフにはキングギドラが棲んでいる。

・・・ムムっ!来るか?来るか?




★来たっ!

・・・Secret Color はBlack のご様子。




★まさにキングギドラ。パタパタと開きすぎるし。




★出合ってわずかひと晩。週末の夜とはいえ、ココまで気合い入れるのか?




★ボキャ貧と呼ばれようが、Excellent とElegant だけ連発しとけば、だいじょぶでしょ。




★ハ虫類の鋭いまなざしにオオカミは身動きひとつできないのであった。




★てかココさぁ、Avatar 多すぎ。別の意味でフリーズ中。




★セカンドライフに生息するキングギドラは、人工記念物。




★別名、夜の蝶ともいう。You are exactly night butterfly.




★ムムっ。予想したとおり、ツノが出てきたゾ。Are you a human being or a reptile, or night butterfly?




★ナニっ!子が産まれるのか?こんなとこで産まれるのか?・・・俺の子か?Wow, will you give burth to my son, Hon?




★ナニっ!卵なのかっ?俺の子は卵から産まれるのか?No way, have you laid an egg this night, Hon?

・・・hmmm...思ったとおり、彼女はハ虫類か、昆虫のようだ。




★くだらない前置きはこのへんにして、いつものくだらないデザイン講座でも始めましょ。えっ?キングギドラをもっと見たい?ですか。・・・でしたら、本家にアップロードしときますんで今夜のおかずにしてください。

・・・して、本日のお題は、「画像付きのバックナンバーをサイドバーに表示したい!」だそうです。世間にあふれているRSS を読み込んで画像と記事のリンクをサイドバーに表示させるブログパーツを使いたいという方は、スルーして、お次のブログへどうぞ。人の作ったものは直しようがないが、この講座でやり方を覚えると自分のブログのデザインにあったカスタマイズが可能になるハズだ。失敗したら、Wolf せんせの夜の診察室に駆け込めばいいワケで。- by Lovely Wolf -


【シンプルテンプレートをHack する!マイアルバム関連記事】
# Case 4.<Web URL> http://lovelywolf.slmame.com/e206206.html
# Case 5.<Web URL> http://lovelywolf.slmame.com/e206825.html


・・・前回の講座で、マイアルバムのソースの取り方と、テンプレートへの貼り付け方を紹介した。本日は、同じマイアルバムのソースをテンプレートではなく、サイドバーのカスタムプラグインに貼り付けてみることにする。


★前回、テンプレートに貼り付けたHTML ソースをもう一度見てみよう。


<style>
.album{
 text-align:center;
}
.album_frame{
 float:left;
 text-align:center;
 padding:5px 3px 10px 3px;
 margin:5px 3px;
 width:106px;
 border-right:1px solid #888;
 border-bottom:1px solid #888;
}
.album_image{
 overflow:hidden;
 width:100px;
 height:125px;
}
.album_image img{
 height:125px;
 margin:auto;
}
.album_title{
 overflow:hidden;
 width:100px;
 height:1.5em;
 font-size:10px;
}
.album_title a:link,.album_title a:visited,.album_title a:hover,.album_title a:active{

}
.page_nav{
 text-align:center;
}
</style>
<div class="album"><div class="album_frame">
<div class="album_image">
<a href="e162253.html" title="★シンプルテンプレートをHack する! -Case.3- 2008/04/09 12:25:00" alt="★シンプルテンプレートをHack する! -Case.3- 2008/04/09 12:25:00">
<img src="//img01.tec29.com/usr/lovelywolf/08040901-s.jpg" title="★シンプルテンプレートをHack する! -Case.3- 2008/04/09 12:25:00" alt="★シンプルテンプレートをHack する! -Case.3- 2008/04/09 12:25:00">
</a>
</div>
<div class="album_title">
<a href="e162253.html" title="★シンプルテンプレートをHack する! -Case.3- 2008/04/09 12:25:00" alt="★シンプルテンプレートをHack する! -Case.3- 2008/04/09 12:25:00">
★シンプルテンプレートをHack する! -Case.3-</a></div>
</div>
 ・
 ・
 ・
 ・ (ここの部分は、画像付きの記事の数だけ繰り返しているだけ)
 ・
 ・
<br clear=all>
<div class="page_nav">
</div>
</div>
★管理画面 サイドメニュー「ブログの設定」-「ブログ環境設定」を選ぶ。




★画面下のほうにある、「カスタムプラグインの登録」から1 ~3 までのいずれかの入力欄へマイアルバムからコピーしたHTML を貼り付け、一番下にある「確認」ボタンを押して登録するだけだ。




★簡単すぎて、死ぬかと思ったゼ。

・・・できあがりは、俺のブログのサイドバーを参考にしてくれ。ただし、カスタムプラグインに貼り付けたHTML ソースに含まれているスタイルシートは、横幅 width を150px に変更してみた。このへんは、自分のブログに合わせて調整してみたらいいさ。


   Comments(1)【サイドメニュー】