2008年01月27日
ブログ改造計画Ⅴ「サイドバーをオリジナルに」
今回は・・・
サイドバーの背景を好みの写真＆文字にする方法！！
(1)スタイルシートを調べる。
管理画面から、テンプレート＞カスタマイズ＞スタイルシートで、かなり下のほうに、こんな文字列があります。
.sidetitle{
border-top : 1px none #CCC0CC;
border-left : 1px none #CCC0CC;
border-right : 1px none #CCC0CC;
border-bottom : 1px none #FF6666;
background: url(http://admin.naturum.ne.jp/_img/logo_05/rogotop02said.jpg);
background-repeat: no-repeat;
background-position:right center;
color : #012452;
font-size :12px;
font-weight :normal;
letter-spacing :2px;
padding:20px 0px 10px 70px;
ピンクの部分が、文字の色を決めている所です。
ここをたとえば #00ff00 と変更すれば、ライトグリーンになります。文字の色コードについては、記事の投稿での文字に色をつける個所のコードと同じ番号です。
サイドバーの背景を好みの写真＆文字にする方法！！
(1)スタイルシートを調べる。
管理画面から、テンプレート＞カスタマイズ＞スタイルシートで、かなり下のほうに、こんな文字列があります。
.sidetitle{
border-top : 1px none #CCC0CC;
border-left : 1px none #CCC0CC;
border-right : 1px none #CCC0CC;
border-bottom : 1px none #FF6666;
background: url(http://admin.naturum.ne.jp/_img/logo_05/rogotop02said.jpg);
background-repeat: no-repeat;
background-position:right center;
color : #012452;
font-size :12px;
font-weight :normal;
letter-spacing :2px;
padding:20px 0px 10px 70px;
ピンクの部分が、文字の色を決めている所です。
ここをたとえば #00ff00 と変更すれば、ライトグリーンになります。文字の色コードについては、記事の投稿での文字に色をつける個所のコードと同じ番号です。
ブルーの部分が、文字の大きさを決めている所です。単に数字を大きくすれば文字が大きくなります。
この二つは、プレビューで確認することができますよ！！
オレンジ色の部分が、背景の画像URLです。
変更した場合更新内容の保存を忘れずに（＾＾）ｂ
(2)写真の大きさを調べる
写真の大きさを調べるために、このURLをそのままHPアドレスに打ち込んで写真を出します。
「名前を付けて画像を保存」としてから、そのファイルを開く。
画像のサイズ変更や、トリミングなどの機能で、写真の大きさを調べることができます。
ちなみに私のブログの場合、185×50でした。
(3)写真の加工
上で調べたサイズに写真を加工します。
良い感じに切り取るのが、難しいです・・・・
(4)写真のアップ
これは、いつもの記事のアップをする時と同じです。
アップしたあと、写真の一覧から写真のURLを調べておきます。
ちなみに私の場合は
//img01.naturum.ne.jp/usr/kawatombo/DSCN2011.JPG
です。
(5)背景写真の更新
再びスタイルシートを開き、オレンジの部分と、自分の写真のURLを入れ替えます。
これでOK！！
background: url(//img01.naturum.ne.jp/usr/kawatombo/DSCN2011.JPG);
background-repeat: no-repeat;
こんな感じにね！！
この更新も、プレビューで確認できますよ♪
Kawatombo Ken
この記事が役に立ったと思ったら・・・
ぜひご協力くださいm(__)m
にほんブログ村のランキングに参加中です！
一日一回ワンクリックお願いします♪
この二つは、プレビューで確認することができますよ！！
オレンジ色の部分が、背景の画像URLです。
変更した場合更新内容の保存を忘れずに（＾＾）ｂ
(2)写真の大きさを調べる
写真の大きさを調べるために、このURLをそのままHPアドレスに打ち込んで写真を出します。
「名前を付けて画像を保存」としてから、そのファイルを開く。
画像のサイズ変更や、トリミングなどの機能で、写真の大きさを調べることができます。
ちなみに私のブログの場合、185×50でした。
(3)写真の加工
上で調べたサイズに写真を加工します。
良い感じに切り取るのが、難しいです・・・・
(4)写真のアップ
これは、いつもの記事のアップをする時と同じです。
アップしたあと、写真の一覧から写真のURLを調べておきます。
ちなみに私の場合は
//img01.naturum.ne.jp/usr/kawatombo/DSCN2011.JPG
です。
(5)背景写真の更新
再びスタイルシートを開き、オレンジの部分と、自分の写真のURLを入れ替えます。
これでOK！！
background: url(//img01.naturum.ne.jp/usr/kawatombo/DSCN2011.JPG);
background-repeat: no-repeat;
こんな感じにね！！
この更新も、プレビューで確認できますよ♪
Kawatombo Ken
この記事が役に立ったと思ったら・・・
ぜひご協力くださいm(__)m
にほんブログ村のランキングに参加中です！
一日一回ワンクリックお願いします♪
Posted by Kawatombo Ken at 00:40│Comments(5)
│カスタマイズ基本編
この記事へのコメント
おはようございます
うむむー・・なんとついに・・こういう事を公開してくれる人を
まってましたよー。
早速参考にさせていただきます、今まではトップの写真を・・hajihaduさんに教わって・・変えただけでしたが、コレでもう少しオリジナルな雰囲気を出せます
ありがとうございます。
明日も宜しくおねがいしますね。
では 又。
うむむー・・なんとついに・・こういう事を公開してくれる人を
まってましたよー。
早速参考にさせていただきます、今まではトップの写真を・・hajihaduさんに教わって・・変えただけでしたが、コレでもう少しオリジナルな雰囲気を出せます
ありがとうございます。
明日も宜しくおねがいしますね。
では 又。
Posted by type r tata at 2007年12月29日 07:34
おはようございます
htmlソースというのでしょうか？
非常に苦手・・・とういうか、面倒なことが嫌いなだけ。（汗）
でも、自分が釣ったヤマメをTop画面に入れたい・・・。
参考にしていじくってみます！（笑）
それでは明日お会いしましょう！
htmlソースというのでしょうか？
非常に苦手・・・とういうか、面倒なことが嫌いなだけ。（汗）
でも、自分が釣ったヤマメをTop画面に入れたい・・・。
参考にしていじくってみます！（笑）
それでは明日お会いしましょう！
Posted by tobitani at 2007年12月29日 08:01
おはようございます！
なるほど！
これはよさそうですね＾＾
でも不精者の私は改造に取り組めるかどうか不安だす＾＾；
なるほど！
これはよさそうですね＾＾
でも不精者の私は改造に取り組めるかどうか不安だす＾＾；
Posted by まつやん at 2007年12月29日 09:32
凄いですネ(笑) 結構 手を入れた様ですなぁ～（羨；
タグとＣＳＳの使い方を 覚えれば 更に パワーＵＰし鱒よん（煽；
頑張れぇ～♪ オイラも・・・（大爆；
タグとＣＳＳの使い方を 覚えれば 更に パワーＵＰし鱒よん（煽；
頑張れぇ～♪ オイラも・・・（大爆；
Posted by きょん^^;
at 2007年12月29日 15:28
at 2007年12月29日 15:28type r tataさん、こんばんは！
改造の方法は判ったんですが、いい雰囲気に作り上げていくのは難しいですね・・・
正直、改造前の方が統一感のあるデザインでよかったかなぁ～なんて思ってたりします（；＾＾Ａ
後は、センスの問題ですね！！
明日、楽しみですね！どうかよろしく！！
tobitaniさん、どうもです！
Top画像の変更方法は、後日詳しくアップするつもりですが
何せ、意味を理解しているわけでは無いので、どこまで説明できるかは「？」ですが・・・（；＾＾Ａ
明日、いい天気になると良いですね♪
まつやんさん、こんばんは！
結構、185×50の写真を作るのは難しいですよ。
以前、「トリミングは凄く難しい」と誰かから聞いたことがあったんですが、まさにその通り！！
コレばっかりは、センスなんでしょうね（；＾＾Ａ
でも、写真さえ作っちゃえば、後は簡単ですよ（＾＾）ｂ
ぜひお試しを！
きょんさん、どうもです！
ハハハ・・・でも、まだ気に入らないんで、まだまだ改造は続きますよ(・∀・)
タグ？ＣＳＳ？・・・・・
・・・・・
・・・・・
う～ん、まだまだ奥は深いですね・・・（；＾＾Ａ
勉強します！（笑）
改造の方法は判ったんですが、いい雰囲気に作り上げていくのは難しいですね・・・
正直、改造前の方が統一感のあるデザインでよかったかなぁ～なんて思ってたりします（；＾＾Ａ
後は、センスの問題ですね！！
明日、楽しみですね！どうかよろしく！！
tobitaniさん、どうもです！
Top画像の変更方法は、後日詳しくアップするつもりですが
何せ、意味を理解しているわけでは無いので、どこまで説明できるかは「？」ですが・・・（；＾＾Ａ
明日、いい天気になると良いですね♪
まつやんさん、こんばんは！
結構、185×50の写真を作るのは難しいですよ。
以前、「トリミングは凄く難しい」と誰かから聞いたことがあったんですが、まさにその通り！！
コレばっかりは、センスなんでしょうね（；＾＾Ａ
でも、写真さえ作っちゃえば、後は簡単ですよ（＾＾）ｂ
ぜひお試しを！
きょんさん、どうもです！
ハハハ・・・でも、まだ気に入らないんで、まだまだ改造は続きますよ(・∀・)
タグ？ＣＳＳ？・・・・・
・・・・・
・・・・・
う～ん、まだまだ奥は深いですね・・・（；＾＾Ａ
勉強します！（笑）
Posted by Kawatombo Ken at 2007年12月29日 21:43
at 2007年12月29日 21:43※このブログではブログの持ち主が承認した後、コメントが反映される設定です。
画像一覧 
