ブログのタイトルバック、背景を自分らしい画像にしたいなぁ。
文字と背景が重なって、見苦しいから何とかしたいなぁ。
そんな時は、ちょっと背伸びして
スタイルシートを弄ってみよう。
ただし、→スタイルシート - Google 検索
こちらのリンク先をチラっと目を通しといた方が無難ですぞ。
私もまだ不勉強だから、けっこうドキドキなんだわさ。
とはいえ
タイトルの画像を変えるのは意外と簡単。
今、表示されてる元々の画像と同じサイズで
テンプレートの雰囲気に合う、自分で用意した画像を
ファイルマネージャーでアップロードして
差し替えればいいだけ。
ファイルマネージャ使って画像をアップロードする方法は
マスターしてるものとして話を進めるよん。
記事投稿画面でも、ツール画面からでもいいので
ファイルマネージャを表示させ
まずは、画像のタイトルをクリックして
バーンと原寸サイズで表示させよう。
その画像の上で右クリックしてプロパティを表示させ
画像のアドレスをドラッグしてコピーしておきます。
あ、ここまでの説明でわからない単語のある方は“嶺南中心 外食記録: ブログはうつー雑記”の過去記事……は、あんまり役に立たないかもしれませんが、まぁ、そのあたりからコツコツと読んでってくださいませ。
では、いよいよスタイルシートに手をつけます。
デザインのタブをクリック→上にあるスタイルシートのタブをクリック→今使っているテンプレートのタイトル名をクリック。
スタイルシートを表示させます。
つまり↓ね。これは幣ブログのスタイルシート画面。
文字サイズを指定するコマンド削除した近くに
background-image:url
バックグランドイメージURLというのがあったので
それが気球の画像かどうか、別窓で開いたブラウザのURL欄に貼り付けて確かめた後、用意した食べ物の画像“題1”のURL(さっきコピーしたヤツ)に入れ換えちゃって、最後に『スタイルシートを変更する』をクリック。これで完了。
画像の用意の仕方ですが、これはもう、自分で写真撮るなり絵を描くなりで素材を集めて、画像ソフトで合成して加工するしかありません。
参考記事→Top画像の加工の手順
文字と背景が重なって、見苦しいから何とかしたいなぁ。
そんな時は、ちょっと背伸びして
スタイルシートを弄ってみよう。
ただし、→スタイルシート - Google 検索
こちらのリンク先をチラっと目を通しといた方が無難ですぞ。
私もまだ不勉強だから、けっこうドキドキなんだわさ。
とはいえ
タイトルの画像を変えるのは意外と簡単。
今、表示されてる元々の画像と同じサイズで
テンプレートの雰囲気に合う、自分で用意した画像を
ファイルマネージャーでアップロードして
差し替えればいいだけ。
ファイルマネージャ使って画像をアップロードする方法は
マスターしてるものとして話を進めるよん。
記事投稿画面でも、ツール画面からでもいいので
ファイルマネージャを表示させ
まずは、画像のタイトルをクリックして
バーンと原寸サイズで表示させよう。
その画像の上で右クリックしてプロパティを表示させ
画像のアドレスをドラッグしてコピーしておきます。
あ、ここまでの説明でわからない単語のある方は“嶺南中心 外食記録: ブログはうつー雑記”の過去記事……は、あんまり役に立たないかもしれませんが、まぁ、そのあたりからコツコツと読んでってくださいませ。
では、いよいよスタイルシートに手をつけます。
デザインのタブをクリック→上にあるスタイルシートのタブをクリック→今使っているテンプレートのタイトル名をクリック。
スタイルシートを表示させます。
つまり↓ね。これは幣ブログのスタイルシート画面。
文字サイズを指定するコマンド削除した近くに
background-image:url
バックグランドイメージURLというのがあったので
それが気球の画像かどうか、別窓で開いたブラウザのURL欄に貼り付けて確かめた後、用意した食べ物の画像“題1”のURL(さっきコピーしたヤツ)に入れ換えちゃって、最後に『スタイルシートを変更する』をクリック。これで完了。
画像の用意の仕方ですが、これはもう、自分で写真撮るなり絵を描くなりで素材を集めて、画像ソフトで合成して加工するしかありません。
参考記事→Top画像の加工の手順
記事部分の背景については↓こちらへ
ブログの雰囲気を微改造(ボディとフッター部分の画像交換)
ブログの雰囲気を微改造(ボディとフッター部分の画像交換)
レイヤーが使えるペイント機能もある画像処理ソフトがあると便利です。
今現在のブログのTopページをプリントスクリーン - Google 検索してそれをレイヤーに取り込んで、参考にするっちゅーわけ。ブログタイトルや説明文の下に、ゴチャついた部分が来ないように調整したり、画像の下部の色をブログの地色に合わせて馴染ませたり出来ちゃうもんね。
では、それぞれのテンプレートのバックグラウンドイメージの場所(URLそのものとスタイルシート上の在り処)と、ピクセルサイズと参考バイト数、書き出してみます。
width と margin padding の海で溺れてしまいました。
写真の幅・何ピクセルまでならテンプレートのレイアウトが崩れないのか、色々やってみましたが、よーわかりません。
コンテンツの位置調整で両サイドバーを片サイドバーにした場合、テンプレートによっては、かなり本文の幅が変わります。いやぁ、水玉の広さはわかってたけど手毬も意外と広いんでベックリ。こりゃ、CSSに強い人が、みぶろぐテンプレート検証専用の実験ブログを立ち上げてくれるのを、待つしかないかな？
サイドバーがズレない画像の最大幅
一応↑作ってみました……不完全かも知れませんが。
花(両サイドバー)タイトル画像サイズ 856×120ピクセル 153432バイト
本文の幅 440px …両サイドバーの中では広め。
スタイルシートでの変更場所
body {
font-family:Verdana;
margin:0px;
padding:0px;
text-align:center;
background-image:url(http://meblog.jp/img/bg/flower/header.jpg);
background-repeat:no-repeat;
background-position:top center;
background-color:#B1C3B4;
紅葉(両サイドバー)タイトル画像のサイズ 770×291 39521バイト
本文の幅 355px …狭さでは指折り
スタイルシートでの変更場所
#container{
margin:0px auto 0px auto;
width:770px;
color:#300;
background-image:url(http://meblog.jp/img/bg/autumn_tint/header.gif);
background-repeat:no-repeat;
background-position:top center;
background-color:#FFF;
桜(両サイドバー)タイトル画像サイズ 853×285ピクセル 213173バイト
本文幅 450px 両サイドバーの中では広め
スタイルシートでの変更場所
#container{
margin:0px auto 0px auto;
width:853px;
color:#7E002B;
background-image:url(http://meblog.jp/img/bg/cherry_blossoms/header.jpg);
background-repeat:no-repeat;
background-position:top center;
}
カブトムシ(両サイドバー)タイトル画像サイズ 855×124ピクセル 63242バイト
本文の幅 435px ……両サイドバーとしてはそこそこ
スタイルシートでの変更場所
#container{
margin:0px auto 0px auto;
width:855px;
color:#0075ED;
background-image:url(http://meblog.jp/img/bg/beetle/header.jpg);
background-repeat:no-repeat;
background-position:top center;
小春日和(両サイドバー)タイトル画像サイズ 769×242 75893バイト
…重い上に説明文が読めなひ、ある意味、入れ換えは必須かも。
本文の幅 355px …こちらも屈指の狭さ
スタイルシートでの変更場所
#container{
margin:0px auto 0px auto;
width:792px;
color:#300;
background-image:url(http://meblog.jp/img/bg/koharu/header.jpg);
background-repeat:no-repeat;
background-position:top center;
だけどむしろ……
.description {
color:#FFF;←この三文字をイジるべきかな 668あたりに。
font-size:12px;
font-family:Verdana;
font-weight:bold;
line-height:1.4em;
padding:0px;
margin:0px;
}
アルバム(右サイドバー)タイトル画像サイズ 854×254ピクセル 29795バイト
本文の幅 500px 片バーとしては少し狭い？
スタイルシートでの変更場所
body {
margin:0px;
padding:0px;
text-align:center;
font-family:Verdana;
background-image:url(http://meblog.jp/img/bg/album/header.jpg);
background-repeat:no-repeat;
background-position:top center;
background-color:#FFF;
ショッピング(右サイドバー)タイトル画像サイズ 854×256ピクセル 31877バイト
本文の幅 550px かなり広いほう
スタイルシートの変更場所
#container{
margin:0px auto 0px auto;
width:854px;
color:#000;
font-size:12px;
font-family:Verdana;
background-image:url(http://meblog.jp/img/bg/shopping/header.gif);
background-repeat:no-repeat;
background-position:top;
text-align:left;
ノート(右サイドバー)…ブログ説明文がはみ出しやすいタイトル画像サイズ 813×210ピクセル 19693バイト
本文の幅 565px 広さでは第三位
スタイルシートの変更場所
#banner{
color:#000;
margin:0px;
padding-left:95px;
text-align:left;
height:200px;
background-image:url(http://meblog.jp/img/bg/note/header.gif);
background-repeat:no-repeat;
background-position:top center;
}
水玉(右サイドバー)タイトル画像サイズ 854×223ピクセル 15572バイト
本文の幅 570px テンプレートの中で一番広いものの1つ
スタイルシートの変更場所
#container{
margin:0px auto 0px auto;
width:853px;
color:#000;
font-size:12px;
font-family:Verdana;
background-image:url(http://meblog.jp/img/bg/drop_water/header.gif);
background-repeat:no-repeat;
background-position:top center;
夕日のアドバルーン(右サイドバー)タイトル画像サイズ 853×197 45767バイト
本文の幅 570px テンプレートの中では一番広いものの1つ
ちなみに片サイドバー状態での最大写真幅は508ピクセル
#container{
margin:0px auto 0px auto;
width:853px;
color:#482C18;
font-size:12px;
font-family:Verdana;
background-image:url(http://meblog.jp/img/bg/evening_sun/header.jpg);
background-repeat:no-repeat;
background-position:top center;
ポッドキャスティング(左サイドバー)タイトル画像のサイズ 853×127 118302バイト
でも、特徴的なのは左側のシルエット…それは頑張って探してちょうだい。
本文の幅 550px そこそこの幅
スタイルシートの変更場所
#container{
padding:0px;
margin:0px auto 0px auto;
width:853px;
color:#000;
font-size:12px;
font-family:Verdana;
background-image:url(http://meblog.jp/img/bg/podcast/header.jpg);
background-repeat:no-repeat;
background-position:top center;
アクアブルー(両サイドバー)タイトル画像サイズ 853×277 40468バイト
本文の幅 450px 両サイドバーの中では広め
スタイルシートの変更場所
#container{
margin:0px auto 0px auto;
width:835px;
color:#000;
background-image:url(http://meblog.jp/img/bg/aquablue/header.jpg);
background-repeat:no-repeat;
background-position:top center;
background-color:#F4F8FF;
手鞠(両サイドバー)タイトル画像サイズ 855×124 83636バイト
本文の幅 400px 両サイドバーではそこそこ
スタイルシートの変更場所
body {
font-family:Verdana;
margin:0px;
padding:0px;
text-align:center;
background-image:url(http://meblog.jp/img/bg/temari/header.jpg);
background-repeat:no-repeat;
background-position:top center;
background-color:#FFF;
ブルーレクト(両サイドバー)タイトル画像のサイズ 855×127 38105バイト
本文の幅 453px 両サイドバーの中では一番広い
スタイルシートの変更場所
body {
font-family:Verdana;
margin:0px;
padding:0px;
text-align:center;
background-color:#FFF;
background-image:url(http://meblog.jp/img/bg/blurect/header.jpg);
background-repeat:no-repeat;
赤レンガ倉庫(右サイドバー)タイトル画像のサイズ 854×184 40776バイト
本文の幅 550px 片サイドバーでは広め
むしろ、コンテンツでブログ解説の表示場所を変えるのが先決かな
スタイルシート変更点(上はブロック背景 下はタイトルの背景)
body {
margin:0px;
padding:0px;
text-align:center;
font-family:Verdana;
background-image:url(http://meblog.jp/img/bg/brick/bg.gif);
}
#container{
margin:0px auto 0px auto;
width:854px;
color:#FFF;
font-size:12px;
font-family:Verdana;
background-image:url(http://meblog.jp/img/bg/brick/header.gif);
background-repeat:no-repeat;
background-position:top;
text-align:left;
background-position:top center;
親子ペンギン(左サイドバー)タイトル画像のサイズ 796×148 26172バイト
本文の幅 477px 片サイドバーとしては狭い
スタイルシートの変更場所
#container{
padding:0px;
margin:0px auto 0px auto;
width:796px;
color:#000;
font-size:12px;
font-family:Verdana;
background-image:url(http://meblog.jp/img/bg/penguin/header.gif);
background-repeat:no-repeat;
background-position:top center;
ジグゾーパズル(右サイドバー)タイトル画像サイズ 854×255 29531バイト
本文の幅 550px 一応広い方
スタイルシートの変更場所
#container{
margin:0px auto 0px auto;
width:854px;
color:#000;
font-size:12px;
font-family:Verdana;
background-image:url(http://meblog.jp/img/bg/puzzle/header.gif);
background-repeat:no-repeat;
background-position:top;
text-align:left;
月と星(左サイドバー)タイトル画像サイズ 796×252 69534バイト
本文の幅 470px 片サイドバーとしては狭め
スタイルシート変更場所
#container{
padding:0px;
margin:0px auto 0px auto;
width:796px;
color:#FFF;
font-size:12px;
font-family:Verdana;
background-image:url(http://meblog.jp/img/bg/moon/header.jpg);
background-repeat:no-repeat;
background-position:top center;
小鳥とリス(右サイドバー)タイトル画像サイズ 854×1101ピクセル 16907バイト(ちょっと特殊)
本文の幅 550px 片サイドバーとしては広いほう
スタイルシートの変更場所
#container{
margin:0px auto 0px auto;
width:854px;
color:#000;
font-size:12px;
font-family:Verdana;
background-image:url(http://meblog.jp/img/bg/bird_squirrel/header.gif);
background-repeat:no-repeat;
background-position:top;
text-align:left;
野菜(左サイドバー)タイトル画像サイズ 854×143ピクセル 13181バイト
本文の幅 540px 片サイドバーとしてはそこそこ
スタイルシートの変更場所
#container{
margin:0px auto 0px auto;
width:853px;
color:#676767;
font-size:12px;
font-family:Verdana;
background-image:url(http://meblog.jp/img/bg/vegetable/header.gif);
background-repeat:no-repeat;
以上なんですが……
『Open ブログ』さんへ行かれて、
関連サイト『同じ作者によるサイト』の中の
『ブログ・テンプレート Seesaa』から、素敵なのを選んでカスタマイズされた方が話が早いような気がしてきました。
とりあえず、背景画像の変更くらいは害が少ないですが
幅や文字サイズの変更は間違えるとすんごい事になりますので
プレビューしていてヤバイと思ったら、
スタイルシートは初期値に戻すのが無難です。
トラックバック先
ちょっと触れそうな気がしてきました！
いつか・・
こうなるんだ！って納得だけして..それで満足。
テンプレートって数多く載せられているのですね〜
面白いって思いました。
秘密主義様、ええ、いつかの為にちょっとずつ学んでいきましょう。出来る事が増えるのは楽しいハズ。もっとも私も、プレビューしてみたり、一瞬だけいじってみたりの繰り返しで、あんまり前には進んでないですが。
テンプレートは、無料配布してるサイトさんもあって面白いですよね。
テンプレの変更の仕方教えてくれてどうもありがとうございます(^^)
という訳で早速変更♪わーいうまくいったー！
大好きな東尋坊の画像にできました。
教えてくれてどうもです☆
って、福井弁以外の言葉で書いておられる〜。いや、福井弁でドーンと勝負しはる『福井弁で福井を語るブログ』さんだからちょっと意外というか。
ともかくも、東尋坊の画像にバーンと変わってて、
ブログから海の香りと風を感じました！
スー様、お役に立てて何よりです☆