【blogger】シンプルテンプレートで、タイトル背景を透過にする方法。sunaboxで、コメントで頂いた内容を紹介してみました。今回は、頂いたコメントの2件目について。なんとかなったので記載してみようと思います。二点目は,フッターとヘッダ部分の画像のみ画面幅にしたい場合です。例:WEBクリエイターボックスさん。どちらともblogger以外の解説はあったのですが、いまいち要領がつかめません。前回の設定画面をスタートとして、タイトル部分を画像からテキストに戻したものが冒頭貼ってありますので、そこからスタートします。CSSを書くことになりますが、CSSのタイトル部分は、あくまで標準テンプレートの「シンプル」を基準にしています。他のテンプレートを使っている場合、この部分のタイトルは変わると思いますので、ご注意下さい。初めに・・・カスタムCSSからの設定だけですが、元々のテンプレート「シンプル」のデフォルト状態で、「デフォルト」が設定されてないものを設定していたりしますので、「テンプレートをデフォルトに戻す」を押しても、完全には元に戻らない状態になるようです。・・・多分ですが、テンプレート内でデフォルトを探しても設定がないため。お試しになる時には、どこを変更して、元がどういう状態だったのか、十分にメモを取るようにして下さい。バックアップを取るのは当然ですが、バックアップを復元しても戻りきらないことがあるようです。このあたりが、なかなか探しても方法が書いてるサイトが見つからない理由じゃないでしょうか?責任取りきれない感じがしますので。ご注意を!Webクリエイターボックスさん、すごく綺麗なサイトですよね。細かいところまで動きがあったり、見やすかったり、プロの人は違うんだなと、自分のページに戻ってきて、ちょっと泣きそうになります。もって、コメントの「フッターとヘッダ部分の画像を画面幅に」の部分で、Webクリエイターボックスさんのページ要素を見てみると、上下とも背景画像として設定してあるようです。全体の背景は白で、上下の画像を重ねてあるって感じなんでしょうか?ともあれ、そのイメージでいく事にしました。シンプル、ナチュラル、かわいい壁紙や背景素材こちらのサイトから、テスト用に素材をお借りすることにしました。設定するにあたっては、カスタムCSSの追加で全部済みましたが、設定後にテンプレートHTMLの編集から、CSS部分を編集すると、カスタムCSSの追加画面での表示がなくなってしまうので、追加したコードなどが分からなくならないようにして下さい。■まず、前もって使いたい画像を用意して、アップロードしておきます。bloggerのダミー用ブログを作ってそこに貼り付ければ自動的にPicasaにアップロードされますし、直接Picasaに貼ってもいいです。Googleアカウントがあればサイトサービスを利用できますので、サイトを作ってそこにアップロードしてもいいと思います。画面下の背景を設定する。画面上の背景を設定する。標準のグラデーション効果を打ち消す。こんな感じでいきたいと思います。画面下の背景を設定するまずは、画面下の背景を設定します。bottom;}このように打ち込みます。【url(】以後のurlは、私がアップロードした画像のurlです。前もってアップロードしておいた画像のurlに置き換えて下さい。結果、画面下にライン状に背景が追加されました。色が薄く表示されるのは、標準のグラデーションがオーバーレイされてるからですね、多分。{】でどこのCSSを書くか。url{】で、背景画像の設定。【background-repeat:】で、画像の繰り返しを設定・・・【repreat-x;】で、x.y軸のx方向のみ繰り返すという事を指定しています。繰り返すをなくす場合は【no-repeat;】です。【background-position:】で、画面のどの位置に追加するか。bottom】など指定出来ます。いう順に余白を指定して下さい。数値はこのテンプレートのデフォルトの数値です。画面上の背景を設定する次に画面上です。top;}と追加します。urlはさっきと同様、用意した画像のものを。これで、このようになりました。画像用のurlが長いのは、私が横着してファイル名を思いっきり日本語のままにしたからです、きっとwこの状態で、もちろんテンプレートデザイナーで、背景を変えたりは可能です。.cap-top】として指定されている場所全体に画像が繰り返されます。400px;}という風に、【height】を加えて、pxで数値を調整してください。400pxというのは、このテンプレートのデフォルトです。テスト用の画像は透過処理してませんから、透過すればもっと境界線はなじむと思います。画像によってはこれでいいって人もいるでしょうから、次のはお好みで。私は、画面下の画像の色が薄いのが気になるので、次もいきます。標準のグラデーション効果を打ち消すさらにコードを足します。none;】となっていて「_」アンダーバーが入っているので、それを上書きする形です。以上の結果でこうなりました。テンプレートデザイナーから設定した背景のグラデーションがなくなり、画面下の画像は、ぼやけていたものがくっきりと!あとは、お好みの画像、お好みの背景をお試し下さい。これをすると何故かテンプレートデザイナーで、シンプルでも背景を画像から選べるようになります・・・ちょっと怖いです。none;}こういう一覧になります。いうことなのですが、Webクリエイターボックスさんが、どうやらこんな感じの設定で、メイン背景(?)は真っ白で設定しておられたので、中央部分の背景は特に変えない状態で設定していきました。グラデーションは消してますけど・・・。最後ですが、どうも、したいことに対してお手軽とは言えない部分が出てきました。私は、テスト用ブログで試したので、どうなっても・・って気持ちでしたけど、ある程度HTMLの構造がわからないと、ちょっと怖い気がします。何がなんだか分からなくなったよ!ってなった時に、説明しきれる知識があるか微妙なので、扱いに気を付けてくださると嬉しいです。書くかどうか途中で悩みましたので・・・この記事。参考になった方はシェアしてくださると嬉しいです!https://www.sunabox.net/2012/05/blogger_116.html[blogger]シンプルテンプレート!ページの上下にライン状に背景を設定する!Twitterのフォローはこちらから!■Twitterによる更新情報などのつぶやきもおこなっております。18:21:00昨日コメントした者です。昨日の今日で解決するなんて思ってもみませんでした。CSSサイトなどを見て命令語?はだいたい覚えたのですが、他人のソースコードを見ても場所の名前?が違うとさっぱりでして・・・とても分かりやすいbloggerブログ(sunabox)を発見してニンマリしています。21:01:00お役に立てたのなら幸せです!記事にも書きましたが、自分の事をただ書くのと、調べながら書くのでは、こんなに怖さが違うのかと・・・、これみてうまくいかなかったら、責任とれるのか?みたいな気持ちでしたので、早速コメント頂けてよかったです。21:03:00あ、あと、ソースコードとプラスして、chromeだったら元々機能ついてるんですけど、右クリックで要素を検証するやつ。あれ見ながらWebクリエイターボックスさんのサイトとか確認してました。HomeSocialProfileすなふここは、GoogleChromeの事やbloggerの事等を軸としながら、気になった事を、何も気にせずに書いていこう、そんなブログです。Twitterアカウントのフォロー、ブログについてのコメント、メール等いつでも待ってます。30days)綿向山登山!すっかり登山者気分に浸れる雰囲気と、歩きやすい道が気持ちよかった![Windows7]ゴミ箱をタスクバーに移動する方法!デスクトップにアイコンを置きたくない人に最適です。Tweetbotや他のアプリの通知が表示されない!そんな時の対処法の1つをご紹介。【ほぼ滋賀県】去年の秋から登山を始めた私がご紹介したい7つの山。miniも新しく!2011モデルとの比較表。[blogger]下から上まで一気に飛ぼう!「ページトップに戻る」ボタンを付ける。