FC2ブログ

サイドバーの折りたたみ

2007年03月14日
私のブログは2カラムですので、どうしてもサイドが長くなってしまいます。(^^;;
そこでいろいろ悩んだのですが、サイドバーの折りたたみを導入することにしました。
こちらのカスタマイズは「小粋空間」のyujiroさんの
小粋空間: サイドメニュー折りたたみスクリプト(cookie等改善版)
「yozoの気が向いたと記2.0」yozoさん
サイドメニューの折りたたみの設定(こちらはHTML編集が出来るブログ用)、
FC2ブログ用サイドメニューの折りたたみの設定(こちらはFC2ブログのプラグインを利用)を
参考にさせていただきました。
ありがとうございました♪(*- -)(*_ _)ペコリ

ちなみにこのサイドバーの折りたたみはCookieを使用しておりますので
開いたところは次回来たときも開いたままになっています。
(Cookieを削除してしまうとまたもとに戻りますが。)
なので自分の必要な部分を開けてお楽しみくださいね♪(=´ー`)ノ

さて私の手順を書いていきます。
私はFC2ブログのプラグインをそのまま使う形をとりましたのでyozoさんの
FC2ブログ用サイドメニューの折りたたみの設定の記事の順に従って
カスタマイズさせていただきました。
その際の手順だけ書かせていただきます。
細かいソースはyujiroさん、yozoさんの記事のソースをご覧ください。分かりやすいです!!
(1)menufolder.jsをダウンロードし、FC2ブログにアップロードします。
(2)<head></head>の部分にインクルード文を追加します。
(3)次にプラグイン部分のhtmlを変更します。
折りたたみする部分としない部分で記述が違いますので注意!!
うちのブログはBlogPetうさびと一心同体ですので
こちらは折りたたみできません。(笑)
(4)CSSを追加します。
折りたたみする部分のCSSの追加です。
私のテンプレートの場合は
折りたたみする部分は.sidetitle2
折りたたみしない部分は.sidetitleとなっています。

さてこのCSSを自分なりに変更して見た目を改良してみることにしました。
基本はyozoさんのサイドメニューの折りたたみの設定 yozoの気が向いたと記2.0
CSSを使わせていただいています♪
私が変更したり追加した部分は赤字の部分です。

●折りたたみ部分
/*サイドバーの折りたたみ用の設定*/
.sidetitle2 {
width: auto;
background:#ffffff;
margin:3px 0px 0px 0px;
padding: 0px;
text-align: center; /* テキスト配置 */
}
.sidetitle2 a {
width: auto;
}
/* 通常 */
.sidetitle2 a:link,
.sidetitle2 a:visited {
display: block;
padding: 2px;
font-family: Verdana, Arial, sans-serif;
font-size:12px;
letter-spacing:1px;

text-decoration: none;
margin-top: 3px;
margin-bottom:0;
padding: 6px 3px 0px 3px;
_padding: 5px 3px 2px 3px;
height:22px;
_height:30px;
border:1px solid #ff7ba6;
text-align: center;
color: #444444;
line-height: 140%;
background-image:url(http://画像1のURL);
background-position: 5px 2px;
background-repeat: no-repeat!important;

}
/* マウスポイント時 */
.sidetitle2 a:hover {
padding: 6px 3px 0px 3px;
_padding: 5px 3px 2px 3px;
margin-bottom:0;

font-family: Verdana, Arial, sans-serif;
font-size:12px;
letter-spacing:1px;
color: #ffca2b;

text-decoration: none;
background-image:url(http://画像2のURL);
background-position: 5px 2px;

}

070314oritatami.jpg

画像をタイトル部分に配置してみました。
画像1が何もしないときの画像、
画像2がマウスをタイトルの上に置いたときの画像です。
左のキャプのようにマウスを上に置いたときは
別の画像が出るようにしています♪
通常の部分とマウスポイント時の部分の記述をそろえておかないと、
マウスを置いたときに画像や文字がずれてしまい、
気持ち悪くなるのでご注意ください。


●折りたたみしない部分
/* サイドメニュータイトル */
.sidetitle {
margin-top: 3px;
margin-bottom:0;
padding: 6px 3px 0px 3px;
_padding: 5px 3px 2px 3px;
height:22px;
_height:30px;
border:1px solid #ff7ba6;
text-align: center;
letter-spacing:1px;
color: #444444;
background: #ffffff;
font-size: 12px;
line-height: 140%;
background-image:url(http://画像1のURL);
background-position: 5px 2px;
background-repeat: no-repeat!important;
}

今の段階でこんな感じのCSSになっています。
少しだけソースについてまとめてみました。

background-image:url(http://画像のURL);
background-position: 5px 2px;

プラグインのタイトル部分の画像の設置です。
赤字部分は画像のURLを記入してください。
background-position: ○px ☆px; は
画像を左から○px、上から☆pxの位置に配置する記述です。

height:22px;
_height:30px;

heightはタイトル部分の高さの調節です。
画像の大きさにより調節が必要になります。
「_」アンダーバーが付いている記述に関しては
IE6.0とFirefoxの見た目を同じにするために(アンダースコアハック)をご覧ください。

今の段階で折りたたみの設定をしていないのは
「BlogPetうさび」「アクセス解析♪」「Appendix」の部分。
そして今までは折りたたみにしていたブログパーツのリラックマですが、
足跡機能が増えたようなのでデフォルトで開く設定に変更しました。
他の部分はデフォルトで閉じる設定になっています。
先ほども書きましたがCookieを使っているのでCookieを削除しないかぎり、
開いた部分、閉じた部分はブラウザが記憶してくれますので
皆様の使う部分のみを開いて楽しんでいただけると嬉しいです♪

↓ぽちっとよろしくお願いします♪ペコリ(o_ _)o))
banner_02.gif

スポンサーサイト



スレッドテーマ:カスタマイズ:ブログ

IE6.0とFirefoxの見た目を同じにするために(アンダースコアハック)

2007年03月03日
「小粋空間」のyujiroさんのテンプレートのソースを見ていますと
padding: 6px 3px 0px 3px;
_padding: 5px 3px 2px 3px;

のような記述がところどころにありました。
「_」って何だろう???(^・ω・^).....ンニュニュ?
ということでいろいろ調べてみることにしました。
すると同じく「小粋空間」のyujiroさんの
アンダースコア・ハックにて書いてありました。
「_」で記述するとIE(Internet Explorer)ではこちらの方が有効になるのだとか!!

padding: 6px 3px 0px 3px;
_padding: 5px 3px 2px 3px;

この記述だと
padding: 6px 3px 0px 3px;
を全てのブラウザが読み込み、その後
_padding: 5px 3px 2px 3px;
をIEが読み込むわけですね!!

私はIE6.0とFirefoxを併用しているのですが、
見た目があまりにも違うので困っていました。
右のサイドバーの各プラグインタイトルの部分ですが、
その高さをheightにて設定しています。
height:22px;
と設定してあるだけだとIE6.0とFirefoxでは下のような見た目の違いがでました。
↓IE6.0
070303ie6.jpg070303firefox.jpg

Firefox2.0↑
IE6.0の方は高さが足りず、
アイコンの画像が全て表示しきれていません。

ここでアンダースコアハックを使い
height:22px;
_height:30px;

(書く順番に注意してくださいね。)
のように設定してみるとほぼ同じ見た目になりました。
これでIE用とFirefox用のCSSを設定できることになります。

が、しかしっ!!
CSS2だとこれはエラーになるらしい。。。orz
多用はよろしくないようです。。。

ちょうどW3C CSS 検証サービスというものを見つけたので
早速うちのCSSをチェックしてみました。
確かにアンダースコアがついているものはアウトです。Σ(; ̄□ ̄A アセアセ
警告も108も出た!!(苦笑)
まだ分からないことだらけなのですが、CSSについてももっと勉強していかなければ。
ただ私にとってはブログの見た目も大事なので、
しばらくはこのアンダースコアハックを使っていきたいと思っています。
出来るだけ他の方法で回避できるものはしていきますけどね。

ちなみにIE7.0だとFirefoxと同じ見た目になっておりました。
ということはIE7.0が主流になればアンダースコアハックも無用になるわけですね。
ところが今の段階では、まゆびのブログを見てくださってる方の主流はまだまだIE6.0みたいです。
BlogPetのアクセス解析でもこんな結果が出ていました。
070303access.jpg

やっぱり。ということはやっぱりしばらくはアンダースコアハックのお世話になりそうですわ。
ハックについてはCSSバグ回避 CSS辞典に書かれていますので
興味のある方はぜひどうぞ♪
ハックを使う必要のないデザイン(サイト設計)を心がけることは、どのような環境でも正常に閲覧できるデザインへとつながります。適度に前方・後方互換の両方を備えたデザインを目指してください。
ヽ( ´ ▽ ` )ノ ハーイ 頑張ります~!!

↓ポチっとしてくれると嬉しいです♪d(*⌒▽⌒*)b ニコニコッ
banner_02.gif

スレッドテーマ:カスタマイズ:ブログ

FC2ブログの最近のコメント、トラバ、記事のツリー化

2007年02月26日
コメントやトラックバックのツリー化は私にとって欠かせないものです。
どの記事にコメントやトラックバックが入ったか分かりやすいですし、
過去の記事にコメントが入ってもコメントが入った順番で表示されるので
(なので過去記事にコメントしても気づきますからね♪
過去記事でもどんどんコメントしちゃってくださいね♪)
見落としが少なく、レスを忘れる確率が格段に減ります。

そこでテンプレートを変えた後、着手したのがこちらのカスタマイズでした。
「小粋空間」のyujiroさんの
「コメントリストを記事別にまとめて表示する for FC2 ブログ」
「サイドメニューのツリー化スクリプト for FC2 ブログ」
「yozoの気が向いたと記2.0」yozoさん
右サイドバーのメニューのツリー化する。(1)を参考にさせていただきました。
ちなみに私は「小粋空間」のyujiroさんのテンプレートを使わせてもらっています♪
詳しくは「小粋空間」さまのテンプレに変更いたしました♪をご覧ください。

(1)まずは最近のコメント、最近のトラックバックの部分のタグを以下のタグに変更します。
こちらのソースは「yozoの気が向いたと記2.0」yozoさん
「右サイドバーのメニューのツリー化する。(2)」の記事を参考にさせていただきました。

<!-- 最近のコメント開始 -->から<!-- 最近のコメント終了 -->の間の部分を
次のように書き換えてください。

<div class="sidetitle">
Recent Comments
</div>


<div class="side" id="commentlist">
<!--rcomment-->
<span><%rcomment_etitle></span><ul><li><a href="<%rcomment_link>#c<%rcomment_no>" title="<%rcomment_body>"><%rcomment_title></a> <%rcomment_name> <%rcomment_month>/<%rcomment_day></li></ul>
<!--/rcomment-->
</div>


トラックバックの部分は
<!-- 最近のトラックバック開始 -->から<!-- 最近のトラックバック終了 -->の部分を
以下の記述に変更してください。
<div class="sidetitle">
Recent Trackbacks
</div>
<div class="side" id="trackbacklist">
<!--rtrackback-->
<span><a href="<%rtrackback_link>"><%rtrackback_etitle></a></span><ul><li><a href="<%rtrackback_link>#trackback<%rtrackback_no>" title="<%rtrackback_excerpt>"><%rtrackback_title></a><br /><%rtrackback_blog_name> <%rtrackback_month>/<%rtrackback_day></li></ul>
<!--/rtrackback-->
</div>

070226tree3.jpg

このスクリプトだと左のキャプのように
自分の記事タイトルの下に
トラバをくださった方の記事タイトルとブログ名が出ます。
どの記事にどんなトラバが入ったかが
非常に分かりやすいです。(o^-')b グッ!
そしてトラックバックを入れてくれた方の
記事タイトルを押すと
そのトラックバック部分へ飛ぶように
変更いたしました。


その際、思った通りに動かなかったので
小粋空間様のhtmlの中の
<!-- トラックバック本文 -->
<div class="trackback" id="p<%tb_no>">
の部分のid="p<%tb_no>をid="trackback<%tb_no>に変更しました。
同じページに同じidがある場合は変更する必要があるようです。

(2)次に次のスクリプトをコピペします。

<div id="footer">Copyright c 200x xxxxx by FC2 BLOG All Rights Reserved.</div>


</div><!-- /box -->

の後に入れてくださいね。
<script type="text/javascript">
function deleteTextNode(node) {
if(node.parentNode != undefined){
// node.parentNode.removeChild(node);
}
}
function collateData(id) {
var data = '';
var counter = 0;
var ul = new Array('');
var li = new Array('');
var flag;
var elements = document.getElementById(id).getElementsByTagName('span');
for (i = 0; i < elements.length; i++) {
flag = false;
for (j = 0; j < ul.length; j++) {
if (ul[j] == elements[i].innerHTML) {
flag = true;
deleteTextNode(elements[i].nextSibling);
li[j] += elements[i].nextSibling.innerHTML + '\n';
}
}
if (!flag) {
ul[counter] = elements[i].innerHTML;
deleteTextNode(elements[i].nextSibling);
if(li[counter] == undefined){
li[counter] = elements[i].nextSibling.innerHTML + '\n';
} else {
li[counter] += elements[i].nextSibling.innerHTML + '\n';
}
counter++;
}
}
for (i = 0; i < counter; i++) {
data += '<span>'+ul[i]+'</span>';
data += '<ul>'+li[i]+'</ul>';
}
document.getElementById(id).innerHTML = data;
}
collateData('commentlist');
generateNormalTree("commentlist");

collateData('trackbacklist');
generateNormalTree("trackbacklist");

</script>

最近のコメント部分は赤字部分、
最近のトラックバック部分は青字の部分を追加してください。


(3)「サイドメニューのツリー化スクリプト for FC2 ブログ」の記事より
maketree.jsをダウンロードしてください。

そしてmaketree.jsをFC2ブログのファイルアップロード機能を使ってアップロードです♪

(4)次にhtmlの</head>の手前に下の記述を入れます♪
<script type="text/javascript" src="<%url>file/maketree.js" charset="utf-8"></script>

(5)ツリー化のための線の画像をダウンロードします。
「サイドメニューのツリー化スクリプト for FC2 ブログ」の記事に
実線と点線の画像が用意されています。
私は実線の方を選びました。
そしてこちらもアップロードします。

(6)CSSの変更です。
次の記述をCSSに追加します。
ul.tree {
margin: 0 0 0 3px!important;
padding: 0!important;
font-size: 9px;
list-style: none!important;
}
ul.tree ul {
margin: 0!important;
padding: 0!important;
}
ul.tree li {
margin: 0!important;
padding: 0 0 0 13px!important;
background-image: url(http://~/tree_lst_solid.gif);
background-position: 0 0;
background-repeat: no-repeat!important;
list-style: none!important;
}
ul.tree li.end {
background-image: url(http://~/tree_end_solid.gif);
list-style: none;
}

赤字の部分は画像のアドレスにします。
これで最近のコメントとトラックバックの部分がツリー化されるはず!!


070226tree1.jpg

さてもうひとつ。
最近の記事の部分が気になっていました。
左のキャプのようにただ一覧になっていて、
いつの記事なのかがちょっと分かりづらい。。。
日付の下に記事タイトルが出るように
してみることにしました。


まずは最近の記事のプラグイン部分を以下のように変更します。

<div class="sidetitle">
最近の記事♪
</div>


<div class="side" id="entrylist">
<!--recent-->
<span><%recent_month>月<%recent_day>日</span><ul><li><a href="<%recent_link>" title="<%recent_title>"><%recent_title></a></li></ul>
<!--/recent-->
</div>
<!-- エントリーリスト終了 -->


そしてさきほど上の(2)で追加したスクリプトに下の記述を追加。
collateData('entrylist');
generateNormalTree("entrylist");
赤字、青字で書いた部分の下に入れればいいと思います。

070226tree2.jpg

これで左のキャプのようなツリー化になりますよ♪


yujiroさん、yozoさん、おかげで見やすくなりました。
ありがとうございました♪ペコリ(o_ _)o))


もしもこのカスタマイズに挑戦されるのでしたら、
バックアップはくれぐれも忘れずに!!



↓ポチっとしてくれると嬉しいです♪ペコリ(o_ _)o))
banner_02.gif

スレッドテーマ:テンプレート:ブログ

「小粋空間テンプレユーザー」グループをつくりました!!

2007年02月20日
「小粋空間テンプレユーザー」というグループをBlogPet内で作ってみました♪
名前の通り「小粋空間」のyujiroさんのテンプレートを
使用しているブログのグループです。
小粋空間のyujiroさんに許可はいただいております。
快諾してくださったyujiroさんに感謝します♪(o*。_。)oペコッ

こちらのグループは小粋空間さまのテンプレを使っている
BlogPetオーナーさまなら誰でもご参加いただけます。
ブログサービスはどこでもかまいません。
ただし、小粋空間さまのテンプレを使っていることを
確認させていただくため、承認制とさせていただきます。
参加ボタンを押していただければ、
ブログのほうを確認させていただきますので、
ボタンクリック後、しばらくお待ちくださいませ。
承認に時間がかかることもあるかもしれませんが、
その際はご了承ください。

※風俗関連、営業目的、反社会的、暴力的、個人や団体を誹謗中傷する内容、
その他管理人が不適切と思われる記事のあるブログからの申請は
お断りさせていただくことがございます。
あしからずご了承くださいませ。ペコリ(o_ _)o))

トピックは自由に立てていただいてかまいませんが、
カスタマイズの質問等は、各ブログの該当記事にしていただければと思います。
管理人が不適切だと判断したトピックは警告なく削除することが
ございますのでご了承ください。
トラックバックも同様です。

テンプレートのカスタマイズの情報を
どしどし交換していきたいと思っております♪
皆様どうぞよろしくお願いいたします。ペコリ(o_ _)o))

↓応援よろしくお願いします。(*- -)(*_ _)ペコリ
banner_02.gif


2007/03/17 追記
「小粋空間」のyujiroさんの
BlogPet グループ「小粋空間テンプレユーザー」でグループを
ご紹介いただきました♪yujiroさん、ありがとうございました。(*- -)(*_ _)ペコリ

スレッドテーマ:ブログペット:ブログ

「小粋空間」さまのテンプレに変更いたしました♪

2007年02月05日

先日よりいろいろとテンプレの改造をしておりました。
というもの「小粋空間」のyujiroさんの
「FC2ブログテンプレート」のソースが
非常に分かりやすくて、カスタマイズしやすそうだったから。
今までのテンプレも気に入ってはいたのですが、
これも勉強かと思い、一からカスタマイズを始めてみました。
yujiroさん、とても素敵なテンプレをありがとうございました。ペコリ(o_ _)o))


簡単にですが、備忘録として記事にしてみようと思います。


まずはFC2管理画面のテンプレートの設定ボタンを押します。
その次にいらないテンプレートの編集ボタンを押します。
いらないものがなければ適当にテンプレートをダウンロードするといいかも。
そして「FC2ブログテンプレート」の記事の
htmlとCSSをそれぞれコピーして、貼り付けます。
(htmlは通常カレンダーと横型カレンダーがありますのでお好きなほうをどうぞ。
私はカレンダーは必要ないので削除するつもりだったので、
消しやすそうな縦型カレンダーを選びました♪)
最後にテンプレートの名前を決定して更新ボタンを押します。
プレビューボタンを押して、水色のシンプルなテンプレが出たらOKです♪


さて初めは3カラムレイアウトになっています。
全部で8種類のパターンがありますが、私は2カラム右サイドバーがお気に入り♪
なので2カラムリキッドレイアウト(右サイドバー:左カラム幅可変)に変更することにしました。
実は今までのテンプレは記事幅固定だったので「2カラム(右サイドバー:カラム幅固定)」の方が
いいかな?とも考えたのですが、
ネットサーフィンをするときにお気に入りを表示させている人といない人によって
見た目が違うので、両方のパターンのことを考えたほうがいいかな?と思ったからです。
今回の左カラム可変バージョンだと、画面の大きさにより、
左カラムの幅が変わります。見た目はこちらの方がいいような気がしました。
(ちなみに私はお気に入りを表示させている人です。)


また右サイドバーにしたのは記事だけでも先に表示させるためです。
うちのブログにはBlogPetなどのパーツが付いています。
基本的にブログは左サイドから表示されるため、
BlogPetなどの表示が重い場合でも、記事だけは表示されるので
お客様に記事は読んでいただけるわけです。
出来るだけ来ていただくかたに気持ちよく見てもらえるようにしたいですからね♪


では2カラムリキッドレイアウト(右サイドバー:左カラム幅可変)に変更する方法です。
こちらは同じく小粋空間さまのテンプレを使っておられます先輩の
「yozoの気が向いたと記2.0」yozoさん
「小粋空間様のテンプレート使用しました。」の記事も
参考にさせていただきました♪yozoさん、ありがとうございました♪ペコリ(o_ _)o))


まずはhtmlの<body class="layout-three-column">を
<body class="layout-two-column-liquid-right">に変更します。


その次に左サイドにあるものを右サイドに持ってくる作業を行います。
私の場合は、この左サイドの中身はプラグインの中にあるものでしたので
(カレンダーはもともと削除予定でしたし。)
<!-- 左カラム開始 -->
から
<!-- 左カラム終了 -->
までをすべて削除いたしました。


もしもプラグインの中にカレンダー、エントリーリスト(最近の記事)、
最近のコメント、最近のトラックバックがあるようでしたら、
すべて削除してかまいません。
プラグインを使わず、HTMLにて管理したい場合は
yujiroさん、yozoさんの記事を参考に移動させてくださいね。


これでとりあえず2カラムに変更できました♪
この時点でうちのブログはこんな感じでした。
070205koikinauser.jpg


この後、いろんな記事を参考にカスタマイズし、今のテンプレになりました。
まだまだカスタマイズ途中ですのでお見苦しいところもあるかと思いますが
ご容赦くださいませ。ペコリ(o_ _)o))


壁紙やアイコンの変更方法はまた記事にしますが、
今日はお借りした素材の紹介だけ先にさせていただきます。
壁紙と記事タイトル頭のチョコ、右サイドバーのタイトル頭のハート、星のチョコは
「風と樹と空とフリー素材」さまよりお借りしました。
まゆびお気に入りの「柚莉湖♪風と樹と空と♪」さまがお引越しされたのです。
とっても優しい色の素材をありがとうございました。ペコリ(o_ _)o))
そしてリンクなどの頭についておりますピンクのハートアイコンは
「犬の素材*今日もわんパグ」さまよりお借りしました。
可愛らしいアイコンをありがとうございました。ペコリ(o_ _)o))


小粋空間さまのテンプレのカスタマイズは少しずつですが、
記事にさせていただくつもりです。


↓応援よろしくお願いします♪(*- -)(*_ _)ペコリ
banner_02.gif

スレッドテーマ:カスタマイズ:ブログ

メイン

|

Copyright c 200x xxxxx. All Rights Reserved.

/for one column -->