livedoorパソコン：ブログカスタマイズ の話
2008年03月25日
４ヶ月間皆様に御愛顧頂いた（？）、オヤジの素人写真館 KDX写真館「オヤジ」 を閉店致しました。
御愛顧頂いたお客様におかれましては、大変有難う御座いました m(_ _)m
何故かって〜！？
ライブドアにログインして管理するのがメッチャ大変だったのよ〜・・orz
それと、、２月末にライブドアブログのシステム変更があり （ライブドア開発日誌へ）、写真のアップロードと投稿がメッチャ楽になって、こちらのブログでも写真管理がし易くなった！！って所が大きい・・かな（？_？；
で、、ココからが大変・・
写真ブログに投稿した記事をこちらのブログに移すにしても、カテゴリが増えすぎ、そのままだと下のほうまでズラズラ〜っと・・
そこで、カテゴリをツリー化 & 開閉式にプチカスタマイズしてみましたぁ ^o^;
今回お世話になったのは、「弱小エンジニアの小言」様のスクリプト （ミニカスタマイズ２５） でござる。
オヤジの頭では理解するのにチョッと骨を折ったが、、まぁ.. 何とか・・^_^;
takoasi 様有難う御座いまする〜 m(_ _)m
ついでに、、いくらかでも写真をスッキリ見せる為に （何せ下手の横好きだからのぅ・・）、１年間使用していたバナー画像を削除し、サイドバーも若干変更。
CSS もチ〜っと弄り、記事の幅を拡げてみました ^o^
如何なもので御座いましょう （？？；
本当はブログ自体をもう少し拡げたかったのだが （現在は９９５ｐｘ）、、
NINJA TOOLSの管理画面で確認すると、、オヤジのブログにお越しの方は、パソコン画面の横幅が１０２４ｐｘの方が多いみたいなんだよね〜
IE ６ と IE ７、Fire Fox ２ では、問題なく表示される筈なのだが （解像度１０２４ｐｘ以上）・・
エラー表示される方は御一報くだされ〜 m(_ _)m
対処出来るかどうかは解らんが・・（￣＾￣；
2007年12月28日
殆ど原形を留めておらんかった Liquid シリーズに見切りをつけ、、スタンダード （ブラック ３カラム） に変更してみたのだが・・
メッチャ大変だったぁぁ〜！！^_^;
左の画像が、スタンダード （ブラック ３カラム） の初期状態でござる。（現状は、、まぁ・・御覧の通り.. ^_^; ）
オヤジのPC環境は、DELLのデスクトップPCがIE6。。SONYのノートPCがIE7であるので、、その２つのブラウザで表示具合を確認している。
しかし、、最近はファイアフォックスなるブラウザを使っておられる方の御訪問も多く、ファイアフォックスも導入して確認してみたのだが・・
なっ・・なんとぉ〜！！デスクトップの表示がメチャクチャだぁぁ〜・・orz
ネットを徘徊して調べまくり、ファイアフォックスでサイドバーが落ちる原因は・・とか、、前々回お話した #container #wrapper #content 等の調整を、あ〜でもない、こ〜でもない・・と弄繰り回し、、
何とか原因が判明！！
で、、前回の記事を修正しなければならない羽目に・・m(_ _)m
続きを読む
2007年12月14日
さあ皆様が大変待ちかねておった（...orz）、オヤジのブログカズタマイズ第４弾。。ブログの構造の基本☆その２でござる。
大まかなライブドアブログの構造は前回記事にしたので、今回は、カスタマイズに使える（？）チョッとだけ細かい部分の構造の話を（＾＾；
前回。。左側の画像で、青線で囲っている所が、#content （Liquid シリーズでは、#blog も含む） と説明したが・・
チョッと待て、、青線が２重になっておるではないかぁ！？書き間違いかぁ！？
いやいや・・今回の説明用にワザと書いた線であって、ミスでは御座らん！！・・と言うことにしませぅ（￣＾￣；
って、、また脱線してしまった・・orz
外側の青線で囲まれた範囲全てが、#content です。。内側の青線の意味はと言うと、、
「ブログのカスタマイズ」で修正できる、「トップページ」「カテゴリ別アーカイブ」「月別アーカイブ」「個別記事」のHTML （まぁ、命令文だな） にある、、
<!-- Loop Start -->
の境界線です。。結局は、「スタイルシート（CSS）」で言う #content の中の一部ですね。。
（注意 HTMLの範囲的には・・ですが ＾＾；）
記事は記事。。広告は広告。。で表示を分けたかったオヤジは、各HTML内の #content と <!-- Loop Start --> の間に、amazon からコピペしてきたスクリプトを埋め込んでいるのである。
（これはトップページだけにある、記事ナビゲーター （ライブドアブログにも最近出来た） も同様だな）
2007年12月13日
皆さんお待ちかねの （誰が？ ＾＾；）、オヤジのブログカスタマイズ復習編、第３弾でござる。
本来なら、一番最初に説明すべきだった「ブログの構造」（スタイルシート） について、オヤジの解る範囲で御説明。。（＾＾；
記事を書くスペースを拡げたい！！とか、この部分の色（画像）を変更したい！！
なんて思っても、「スタイルシート（CSS）」のどの部分を弄ればイイのか解らない・・と仰る、超〜初心者向けで御座います m(#_ _)n先ずは左の画像 （クリックすると大きな画像が見れまする）。。
記事を投稿している時点での、オヤジのブログのトップページなのだが・・
「管理ページ」の「デザインのカスタマイズ」で編集できる「スタイルシート（CSS）」の、どの命令文が？ 何処にあたるのか？ を簡単に。。
☆ライブドアブログの構造☆
�ゝ�事が書かれていない部分も含めた、ページ全体を、、
ボディ body{..命令文..}
��一番上の、ライブドアのリンクや広告が表示されている部分を、、
ヘッダー #header{..命令文..} 又は table#header{..命令文..}
��色線で囲んである部分全てを、、
コンテナ #container{..命令文..}
�の仞�で囲んでいる部分を、、
#cgmmenu{..命令文..} なんて読むんだろ（？_？；
�ダ崟�で囲んでいる部分を、、
バナー #banner{..命令文..}
�ξ仞� （サイドバー） と青線 （記事欄） で囲んでいる部分全体を、、
ブログコンテナ #blogcontainer{..命令文..}
で、、ココからがチョッと厄介・・（＾＾；
2007年12月12日
（何時の間にか「ブログカスタマイズ」のカテゴリを新設し、シリーズ化てしまったオヤジ。。暇人だね〜・・ ＾＾；）
信長の野望「革新」の攻略日記（？）を御紹介する為、サイドバーに設置した「信長の画廊」や「正宗の画廊」であるが・・（他にも沢山あったなぁ〜＾＾； 。。整理してしまったが・・）
画像の枚数が少ないうちは、先日御紹介した「開閉式サイドバー」で十分だったのだが・・
画像が次々と増え、気が付いた時には、、下ぁ〜の方までサイドバーが繋がってしまっておった。
そこで挑戦したのが、今回ご紹介しておるサイドバーの「プラグイン」をスクロール表示させる技（？）である。。
検索サイトで「サイドバー」「スクロール」とか入力すると、数限りなく設定方法を紹介しているサイトに行き当たるが・・
オヤジが使用しているのは、、satokoto 様が運営されている「ブログパーツをさがせ」で紹介しておられるスクリプト （命令文だな） でござる。
この命令文の使い方で、、一つの「プラグイン」全体をスクロール化したり、、「プラグイン」内の一部の文章と写真だけをスクロール化する事も出来る。。
とっても便利だねぇ。
まぁ、、細かい設定方法と命令文は、「ブログパーツをさがせ」様の記事、、「かこんで楽しいスクロールバーの設定」を御覧頂くとして （２次配布は出来んからの〜）、
オヤジからは設置時の注意点を少々・・
続きを読む
2007年12月11日
初期状態のデザインは、上左の画像で紹介しておる Liquid Pearl なのだが・・
この記事を投稿しておる時点では、右の通り・・
殆ど原型をとどめておらんな・・（＾＾；
先日、ブログのカスタマイズ方を教えてくれぇ、、とのメ〜ルを頂いたので、オヤジの復習も兼ねて、少しづつ御紹介していきます （カスタマイズしすぎて一気には無理・・）。
興味のある方は、たま〜に更新していく予定なので、覗いて見て下され。。
m(#_ _)n
☆開閉式サイドバーにする方法☆
左の画像でもご紹介しておるように、オヤジのブログのサイドバーは、一部開閉式になっている。これは、勿論オヤジのオリジナルのスクリプト （まぁ命令文だな） のお陰ではなく、、「食と日記とウェブログと」様のブログから拝借してきたスクリプトです。
（ブログ主様も、誰が最初に作られたのかは解らんそうでござる m(_ _)m）
細かい設定方法とスクリプトは、「食と日記とウェブログと」様の「コラム開閉スクリプト」の記事を御覧頂くとして。。（￣＾￣；
設置方法を簡単に御説明・・
（以下、ライブドアブログでの例で御座る）
��まず、、自分のブログのサイドバーに、プラグインの「フリーエリア」を設置します （改行は「変換しない」にチェック）。。既に設置してある場合は、それを利用できます。。
（注意 スクリプトを設置するフリーエリアは、サイドバーの一番下に設置すること。。また、A、Bサイド両方開閉させたい場合は、A、B両方に設置する）
ちなみに・・オヤジのブログの場合は、Aサイド （左側） の、テクノラティ・ヤフー・イザのブックマークが貼ってある「フリーエリア」を利用してます （１２.１１現在）。
�� そのフリーエリアに、「コラム開閉スクリプト」の記事からスクリプトをコピペ （コピー＆ペースト） します。。
��そぅしたら、、開閉させたいプラグインの名前 （ブログ上で表示されている名前） を、以下に書き込みます。。
aryTitle[1] = "Search";
aryDefault[1] = false;
まずは、開閉させたいプラグインの数だけ、上記命令文をコピペし増やしておく。。一つだけなら必要は無いけどねぇ。
で、、aryTitle[1] = "Search"; の、Search を開閉させたいプラグインの名前に変更。。
（注意 コピペした命令文の [1] の数字は、２番目は [2] 、その次は [3] と変更すべし）
出来上がりは、、
aryTitle[1] = "はじめてお越しの方へ";
aryDefault[1] = false;
aryTitle[2] = "月別アーカイブ でござる";
aryDefault[2] = false;
aryTitle[3] = "最新コメント でござる";
aryDefault[3] = false;
こんな感じだね（＾＾
��お次は、、▲と▼を自分の好きな言葉に変更します。。「開ける」「OPEN」「閉める」「CLOSE」なんかですね。。そのままでもイイけどねぇ。
（注意 ▲は３箇所、、▼は２箇所あるので、全て変更する。。また、変更した場合は、�Δ虜邏箸�必須となる・・と思われる...？）
出来上がりは、、
function toggleOpenClose(id,val){
if(val == "閉じる"){
document.getElementById(id).style.display = "none";
document.getElementById('btn' + id).value = "開けてみてちょ";
}
こんな感じだね。。（一部のみ表示してます）
��で、、スクリプトの下〜の方に、、
if (sTmpInner.indexOf(aryTitle[i]) != -1 ) {
aryDiv[j].innerHTML = getButton(aryDiv[j+1], i , sTmpInner , aryDefault[i]);
}
こんな表記があるのだが、、
[j+1] と書いてある部分を、[j+2] と変更します。。変更しないと何故かライブドアブログでは使用不能なのよねぇ・・何故でしょう（？_？；
��この状態でも使える筈なのだが、、フォントの装飾にも凝ってみませう♪
その場合、、文字の大きさや色、枠線の太さや種類を決めるスクリプトを、今まで作ったスクリプトの一番上に記述します。。
オヤジが設置しているスクリプトは、、
（何処のサイト様から頂いてきたスクリプトなのか・・覚えてないんだよなぁ orz）
<script language="JavaScript">
<!--
var sBtnStl ="{font-size:10px;color:#d39828;text-align:center;border:1px solid #666;background:#fff;width:100px;}"
で御座る。。
「 font-size:**px; 」や「 color:#******; 」「 background:#******; 」等は、お好みで変更すべし。。
変更作業が終わったら、全てのスクリプトの一番最後に、、
</script>
を設置して、終了〜！！（�Δ離好�リプトを、最後に閉じる為の命令文です。。閉じ忘れると構文エラーになるので注意。。�Δ鮴瀉屬靴覆ぞ豺腓脇�りません）
こんな感じなのだが、、上手く説明出来たかの〜（？_？；
と言うか、、間違えてナイよなぁ（＾＾；
この改造を施したことにより表示エラー・不利益等が発生しても、一切の責任は取れません！！全て自己責任でお願いします。。
