サイドバーのタイトルを好きな画像に変更する。
■アメブロちょい足しCSS-Indexへ戻る-
□フリープラグイン、フリースペース用ちょい足しCSS-Indexに戻る-
この記事はAmebaさんの用意している『woodydesk』の3カラムを基礎に使用しています。
今回はSTEP3として、下の画面まで進めます。
今回使用するサンプル画像も蝶々さんです。
右クリックから画像を保存しておいてください。
※ココではタイトル画像を並べて1つにまとめた例しか扱いません。
オリジナルのタイトル画像を個別の画像ファイルにした場合の記述例はこちらを参考にしてみてください。『サイドバーのタイトルを画像にする。』
【サンプル画像】
[170px] x [480px]
再配布禁止、非営利・非商用に限りそのまま使用してもOKです。
この画像は[横170px]x[縦480px]ですが、中身は[横170px]x[縦40px]の画像を縦に12個並べた画像だと言う事を一応書いておきます。
オレンジ色の部分が今回追加した分です。
別のサイズでサイドバーのタイトル画像を作った時は、各background-positionの数値と、h4.menu_title内のwidth,heightの数値の変更が必要になります。
段々落ち着いてきたような気がします。
次は記事部分の調整を行います。
『記事部分の背景を調整する。』
※使い方が分からない方はこちらの記事を参考にしてみてください。
『フリープラグイン、フリースペースを利用したカスタマイズ。編集前の準備。』
『フリープラグイン、フリースペースを利用したカスタマイズ。編集方法と注意点。』
■アメブロちょい足しCSS-Indexへ戻る-
□フリープラグイン、フリースペース用ちょい足しCSS-Indexに戻る-
□フリープラグイン、フリースペース用ちょい足しCSS-Indexに戻る-
この記事内容については注意が必要です。
もし好きな画像を使いたいだけならば、CSS編集可能なベーシックスキンを使った方が簡単です。
理由は…
さらに、もしヘッダーの画像を変更するとしたら、背景画像や背景色の変更も必要ですし、記事部分の幅などの再調整が必要になるケースもあります。
こうなってしまうと、ほぼ全ての部分に手をつけなくてはならなくなってくるので、CSSファイルの編集が出来るベーシックデザインを使った方が、様々な指定も簡単なんです。
デザインの自由度も高いですし。
ただし、Amebaさんの用意しているブログデザインの中には、PR広告が挿入されないものもまだあるようです。難易度は少々上がりますが、そういったブログデザインを利用したい方を対象にこの記事を書いてみます。
ある日突然PR広告が挿入されても泣かない事。これ大事です。
もし好きな画像を使いたいだけならば、CSS編集可能なベーシックスキンを使った方が簡単です。
理由は…
- ブログデザインによって、縦横のサイズが異なるから。
- ブログデザインによっては、特有の広告が入る場合があるから。
- 画像フォルダ(記事に使う写真などをアップロードするフォルダ)には縦横800pxの制限があるから。
さらに、もしヘッダーの画像を変更するとしたら、背景画像や背景色の変更も必要ですし、記事部分の幅などの再調整が必要になるケースもあります。
こうなってしまうと、ほぼ全ての部分に手をつけなくてはならなくなってくるので、CSSファイルの編集が出来るベーシックデザインを使った方が、様々な指定も簡単なんです。
デザインの自由度も高いですし。
ただし、Amebaさんの用意しているブログデザインの中には、PR広告が挿入されないものもまだあるようです。難易度は少々上がりますが、そういったブログデザインを利用したい方を対象にこの記事を書いてみます。
ある日突然PR広告が挿入されても泣かない事。これ大事です。
この記事はAmebaさんの用意している『woodydesk』の3カラムを基礎に使用しています。
今回はSTEP3として、下の画面まで進めます。
今回使用するサンプル画像も蝶々さんです。
右クリックから画像を保存しておいてください。
※ココではタイトル画像を並べて1つにまとめた例しか扱いません。
オリジナルのタイトル画像を個別の画像ファイルにした場合の記述例はこちらを参考にしてみてください。『サイドバーのタイトルを画像にする。』
【サンプル画像】
[170px] x [480px]
再配布禁止、非営利・非商用に限りそのまま使用してもOKです。
この画像は[横170px]x[縦480px]ですが、中身は[横170px]x[縦40px]の画像を縦に12個並べた画像だと言う事を一応書いておきます。
<style type="text/css">#frame,#wrap{width:780px;}#sub_a,#sub_b{padding:0 5px;}#main{padding:0 9px;}body{background:#dddddd url(背景画像URL) repeat-y 50% 0%;}div#overHeader{width:780px;height:150px;background:#ffffff url(ヘッダー画像URL) no-repeat;}h4.menu_title{margin:0 0 5px 0;padding:0;width:170px;height:40px;background:#ffffff url(サイドバータイトル画像URL) no-repeat;text-indent:-9999px;}#profile .menu_title{background-position:0px 0px;}#recent_entries .menu_title{background-position:0px -40px;}#theme_list .menu_title{background-position:0px -80px;}#calendar .menu_title{background-position:0px -120px;}#archives .menu_title{background-position:0px -160px;}#search .menu_title{background-position:0px -200px;}#reader .menu_title{background-position:0px -240px;}#favorite .menu_title{background-position:0px -280px;}#ranking .menu_title{background-position:0px -320px;}#bookmark .menu_title{background-position:0px -360px;}#recent_comment .menu_title{background-position:0px -400px;}#defaultAd .menu_title{background-position:0px -440px;}</style>
オレンジ色の部分が今回追加した分です。
別のサイズでサイドバーのタイトル画像を作った時は、各background-positionの数値と、h4.menu_title内のwidth,heightの数値の変更が必要になります。
段々落ち着いてきたような気がします。
次は記事部分の調整を行います。
『記事部分の背景を調整する。』
※使い方が分からない方はこちらの記事を参考にしてみてください。
『フリープラグイン、フリースペースを利用したカスタマイズ。編集前の準備。』
『フリープラグイン、フリースペースを利用したカスタマイズ。編集方法と注意点。』
■アメブロちょい足しCSS-Indexへ戻る-
□フリープラグイン、フリースペース用ちょい足しCSS-Indexに戻る-