Ｇｏｈａｎのモラタメ日記

サイドバーにいろいろ盛り込むと、ぐぐ〜んと長くなってしまいますね。
好みにもよりますが、スクロールさせることによって、サイドバーをすっきりさせることもできます。
残念ながら、ファンブログで管理？されているカテゴリー、最新の記事、コメント、トラックバック、バックナンバーなどをスクロールさせる方法はＧｏｈａｎには解らないんですが、自分で追加編集した表示項目なら、スクロールさせることができます。

デザインの変更⇒項目の追加編集⇒スクロールさせたい項目名⇒HTMLに下記を記入すればＯＫです。

<div style="height:550px; 


width:200px; 


overflow-y:scroll; 


scrollbar-base-color:#a18b74; 


scrollbar-arrow-color:#bbe1e8;">


表示させたい文字やテキスト


</div>

赤字の部分は、自分のサイトに合わせて変更してくださいね。
変更箇所は、スクロールさせる長さ、サイドバーの表示幅、スクロールバーの色です。

表示させたい文字のところに、下記のようにサイドバーのシステム名？を書けば、サイドバーまるごと全部がスクロールされますよ。

<div style="height:550px; 


width:200px; 


overflow-y:scroll; 


scrollbar-base-color:#a18b74; 


scrollbar-arrow-color:#bbe1e8;">


{$BlogSidebarRight$}


</div>

このブログでは、左サイドバーの真中あたりの「モラえるサイトの情報」のところがそうです。
右サイドバーを使っていない時には、ブログを長年書いていると長くなってくるバックナンバーだけを右サイドバーに移動し、スクロールさせるのがいいかもと思うんですが、どうでしょうか。

このブログ「Ｇｏｈａｎのモラタメ日記」は、２カラムのスキンを選択し、いろいろな素人カスタマイズをしています。
最近になって、サイドバーに盛り込みたい情報が増え、左右にサイドバーがある３カラムにしておけばよかったと後悔し始めました。
何もカスタマイズしていなければ、サッとスキンの変更をすればいいんですが、ちょこちょこいじっているだけに、かなり難しいのでした。

なので、サイドバーの表示の仕方を少し細工してみました。

ファンブログの２カラムのスキンでは、一見ひとつのサイドバーしか表示していないように見えますが、２つのサイドバーを縦に２つつなげて表示してくれるようになっています。
全部のスキンを知っているわけではありませんが、たぶん、ほとんどがそうなのではないかと思います。

なので、メイン・アーカイブ・１記事エリアには、左サイドバーの情報だけを表示するようにし、右サイドバーの情報は、プロフィール・ポータルエリアに表示するように変更しました。

変更の仕方は、スタイルの編集⇒フリースキンの編集の各項目（メイン・ポータルなど）⇒テンプレートのサイドバー設定の部分を編集する　です。


このブログの場合は、左サイドバーには、カレンダーやカテゴリ・コメントなどの記事に関係する情報を、右サイドバーには、お世話になっているお小遣いサイトの情報や今までの換金額を表示するようにしました。
そして、メイン・１記事・アーカイブなどの記事を表示する時には左サイドバーだけを、プロフィール・ポータルページを表示する時には右サイドバーだけを表示するようにしました。

ファンブログのサイドバーの小細工カスタマイズでした。

久しぶりにブログのカスタマイズです。
今まで使っていなかったプロフィールのページを使って、「お小遣い帳」をつけることに。＾＾
６月からコツコツ貯めたポイントが、最近になってやっと換金できるようになってきたので、記録してみたいと思います。
まだまだ小額ですが、１ヶ月１万円を目指して頑張るぞ。

プロフィールページなので、投稿者「Ｇｏｈａｎ」のリンクからも見れます♪

カスタマイズの方法は、フリースキンの編集画面からプロフィールテンプレートを変更します。
テンプレートによっても違うと思いますが、

<div class="entry">


この間に書きたいことを書く


</div>

という感じで変更すればできると思います。
変更する時は、元のテンプレートを保存しておいてからやってみてください。
必要なものを消しちゃったりすると、なかなか大変なので。

サイドバー項目などに小さな絵文字を使いたい時は、背景画像を変えた時にように使いたい画像をＵＰすればできます。
でも、ぴったりのワンポイント画像を見つけるのが面倒なら、ファンブログで使える絵文字を使うのが簡単です。

絵文字を入れたいところに、下記のコードを書けば表示されます。

<img 
src="http://fanblogs.jp/image/emoji/絵文字番号.gif" 
border="0">

絵文字の番号は、 が”0”、 が”1”というように順番になってます。
は、”219”です。

コメント送信ボタンの色を、スクロールバーとお揃いに変更しました。

スクロールバーの色を変更すると、コメント入力欄のスクロールバーも同じ色に変身しますので、それに合わせて、送信ボタンの色も変更しちゃいましょう♪

やり方は、デザインの変更⇒フリースキンの編集（１記事）⇒コメント送信ボタンのデザインのコードを下記に変更する⇒保存です。

<div><input 


style="font-weight: bold; 


border: 0;


padding: 3px 0px 0px 0px;


color: #bbe1e8; 


background-color: #a18b74" 


type="submit" 


name="post" 


value="送信する" 


class="btn" />


</div>

色やボタン内の文字は、自由に変更できます。

サイドバーの一番下と各記事のフッターに、メインページや見ているページの先頭へ戻る機能をつけました。

サイドバーに付ける時は、デザイン変更⇒項目の追加編集⇒項目を追加して下記のコード（太字部分は自分のブログに合わせて変更）をコピー⇒保存⇒機能選択/並び替え⇒追加した項目を「使用する機能」の一番下に移動⇒保存です。

<div style="margin-top:-5px; 

margin-left:20px; 

margin-bottom:0px">

<a href="ブログのアドレス">ＨＯＭＥ ↑</a>

<br/>

<a href="#container">ＰＡＧＥ ＴＯＰ ↑</a>

</div>

フッターへ追加する時は、デザインの変更⇒フリースキンの編集（メイン・アーカイブ・１記事）⇒フッター部分のコード（＜div class="entryInfo"＞・・・＜/div＞の部分） に下記コードの太字部分を追加する⇒保存です。
こちらも、「Ｈｏｍｅ↑」などの部分は、好みで変更してください。

<div class="entryInfo">

　　　　・

　　　　・

　　　　・

｜<a href="ブログのアドレス">Ｈｏｍｅ↑</a>

｜<a href="#container">Ｐａｇｅ Ｔｏｐ↑</a>

</div>

これで、少しはスクロールの手間が省けるでしょうか？(^_^;)

同じスキンを利用した人が居ても、背景を変えれば雰囲気が変わりオリジナルっぽくなりますよね。＾＾

方法は、
１．画像をアップするための専用の記事を１つ作ります。タイトルを「画像」とかにしておくと解りやすいと思います。
２．画像アップ専用記事に、背景の画像（壁紙）を挿入して記事を「下書き保存」します。
記事の保存は、公開しないように気をつけましょう。
３．下書き保存したあと、画像記事の編集にもう一度戻り、画面左の「挿入されているファイル」欄に表示されている背景の画像を右クリックします。
４．プロパティをクリックします。
５．アドレス（ＵＲＬ）をコピーします。（→プロパティを閉じます。）
６．スタイルの編集→スタイルシート→背景の画像アドレスをコピーしたアドレスに変更→保存
です。

コードは、下記です。/＊背景＊/というコメントを目印に探しましょう。一番上のほうですので、すぐに見つかります。

/* 背景 */


html { 


background:url(背景画像のアドレス) left top repeat; 


}

まだまだ訪問してくれる方はほとんど無いんですが、カウンターを付けてみました。
付けたのは、 「FC2カウンター 」のカウンターです。
ものすごく種類があって、一応セットはしたもののまだ迷い中です。
今現在ブログを見てくれる方の人数（まあ、ほとんど１ですが(^_^;)）も表示する事もできるし、やっぱり広告が無いのがいいですね。＾＾

★節約ごはん★では、あっちこっち、自己満足のカスタマイズをしてるんです。
でもこのブログは、かわいいイラストの入ったものを選んだので何もしなくていいかな？と思ってたのですが、やっぱり病気が出てきました（笑）。
イラストのスキンでも、スタイルシートがいじれるし、やるしか無いでしょう？（笑）
といっても、まだ記事のＵＰがやっとこな感じなので、とりあえず、スクロールバーをかわいい色にしてみました♪

やり方は、デザインの変更⇒スタイルシート⇒スタイルシートの最後に下記のコードをコピーして追加する⇒保存です。

/* スクロールバー変更 */


html {


scrollbar-face-color: #a18b74; /*本体色*/ 


scrollbar-highlight-color: #a18b74; /*左上影*/ 


scrollbar-shadow-color: #a18b74; /*右上影*/ 


scrollbar-3dlight-color: #a18b74; /*左下影*/ 


scrollbar-arrow-color: #bbe1e8; /*矢印色*/ 


scrollbar-track-color: #ffffff; /*背面色*/ 


scrollbar-darkshadow-color: #ffffff; /*右下影*/ 


}

色のコードは、好みで変更してくださいね。