ソラマメブログ

flickr badge Gallery
... more
☆手軽にソラマメブログのスタイルシートやHTMLテンプレートを変更できるTips を紹介します。
ソラマメブログ › * Lovely Wolf Report in SLMaMe * › 【ソラマメ】 サイドバー

2008年05月07日

★サイドバーのデザインをHack する! -Case.1-


【第 26 話】 サイドバーのタイトル文字を変更したい!- 横文字 編 -


★デザインとは、全体の調和が取れて何歩の世界。ブログのデザインを変えるなら、全体的に見てCool かどうかが問われるところさ。- by Lovely Wolf -

# Calla
<SLurl> secondlife://Callatropia/81/134/24/


★どんな髪型がいいか?なんて、自分で決めるのが一番。・・・とか言ってる本人は、人にすすめられた髪型がお気に入りで、はや半年。orz



★どうせ俺が選んだところで、ゴミ箱行きがオチ。



★毎日自分の顔見てりゃぁ、髪型くらいベストなのを選ぶだろ?



★真夜中に英語で買い物付き合わせるのだけは勘弁してほしいゼ。・・・色は何がいいか?って、あの、全部買ったら?



★どうやらハ虫類の女王さまは、茶系がお好きなようで。・・・リアルは茶髪と見た。



★俺好みのブロンドにしてくれて正解。・・・Armidi の店内は激重で服はボケボケだというのに、Calla の髪は女神さまの光臨のごとく美しくみえた。
Though outfit is still rez, the hair made by Calla looks clear and makes you like a goodess in Armidi crowded by shoppers.




★GW も明け、まったく仕事が手につかないというキミ、初級レベルのデザイン講座でもおひとついかが?
して、本日のお題は、「サイドバーのタイトル文字を変更したい!」だそうです。あまりにも初級レベルなので、わかる方はお次のブログへどうぞ。

★管理画面 サイドメニューから、「ブログの設定」-「サイドバー」を選ぶ。



★サイドバーのタイトル文字「プロフィール」をクリックしてから、「名称変更」をクリック。



★小ウィンドウが開いた。



★横文字で「Author」にしてから、「OK」をクリック。このあたりは、自分の好きな文字を入れればいい。



★赤字で「保存しました。」と表示され、たしかにタイトル文字が変更された。



★同じ手順で必要なところをすべて修正してみた。



★このあたりは、自己満足の世界と見た。




  

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="http://img01.slmame.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 に変更してみた。このへんは、自分のブログに合わせて調整してみたらいいさ。