« 「みんなで解決!広場」 あれだけの資料が消えて行く? | トップページ | ダ・ヴィンチ・コード/ダン・ブラウン著 »

2006年4月18日 (火)

タイトルバナーをオリジナルの画像で
カスタマイズ・2方法

  タイトルバナーに画像を貼りつける際の不思議に、
確認画面にバナーが表示されない、というものがある。

  私のように飽きっぽく、時々バナーを替えたい人間には、いちいち「反映」→「ブログを表示」をしないと、きちんと納まっているか分からないというのは不便である。
  縦幅調節のコメントも頂いたので、その辺も含め図解してみた。

 あっ、その前に、自分のCSSファイルを調べて、保存しておくと、失敗した時などに照らし合わせる事が出来るので、メモ帳などにコピペしておくといいと思う。
 (私は、そっくりカスタムcss編集のボックスにコピペして、要らない部分・重複している分だけを削除していった。例えばカレンダーは使わないので削除した)

Enpitu20 自分のCSSファイルを調べる。
 「自分のブログのURL」のお尻に、「styes.css」 をくっつけて
ブラウザのアドレス欄に入力する。すると、わけの分からん英数字がズラッと並んでいるので、画面上で、右クリック→すべて選択→
コピーする。
 Windowsなら→すべてのプログラム→アクセサリ→メモ帳
で、貼り付けて、保存しておく。
 私のようにカスタムCSS編集ボックスに貼り付けても可。

 「はっさくのカスタマイズ・メモ」は横幅が900pxだが、今回は800px(片側サイドバーなら600px)で説明していく。縦幅は200px。(自分の作品に合わせて任意で。標準は150~170pxぐらい)
 まず下図のようなバナーを用意した。

Banner2

この際、アップロードの方法には、2通りある。
  文字も含めて画像を作り、貼りつける場合。
      (確認画面にバナーは無い)

  画像を背景として、タイトル文字は生かす場合。
      (確認画面にバナー有り)

  の場合。
 テーマを変更→タイトルバナー→“タイトルバナーに画像を使用する
にチェックを入れてアップロード。
  ウェブログ・デザインによると、ココログの新規作成時に、生成されるスタイルシートのタイトル部分には、縦横15pxの余白が設定されている、ということなので、下図のように、余白部分は「テーマの設定」で指定した色になる。
Banner1

 フリー・ベーッシク・プラスでは、カスタムCSS編集画面での作業になるので、ボックスの中に

#banner-img {background -image: url(アップロードした画像のurl)no-repeat ;
                    height : ▲▲px; }

と追加します。▲▲はアップロードした画像の縦幅を。
 このバナーなら200pxを入れる。 
 下図のようになったかな?

Banner3

 ココログプロなら、「テンプレートの内容」のボックスに表示されているスタイルシートで「#banner-img」の記述を変えるだけである。(いいなぁ、さすが有料)赤文字の所のpaddingを削除して、heightを好きな高さに指定する。このように↓

#banner-img {background -image: url(アップロードした画像のurl)no-repeat 15px 15px ; padding : 15px;
                 height : ▲▲px;}

 の場合。
 “タイトルバナーに画像を使用する”にチェックを入れた後、“アップロードした画像はタイトルの背景として使用する”にもチェックを入れて、アップロードする
 
 この場合は「#banner」の背景として設定されるので、
「#banner-img」には「display:none」の指定がされている。
 自分のCSSを確認してみると、アップロードした画像のurlは、「#banner」内に追加されているはず。

このアップの仕方をすると時々、タイトル文字が上で切れる事があるらしい。
 (実は「はっさくのカスタマイズ・メモ」も、このアップの仕方を応用している。でも、タイトルは自前である。やり方は後ほど)

 らしいというのは、そういう事態に遭遇した事が無いからで、takoさんの初めてのココログフリー・カスタマイズ「第4回:タイトルにオリジナルの画像を設定してみよう」にある、タイトル文字が切れるとの記述を参考に(ほとんどパクリ?)して、
タイトル文字を生かす場合は下図のように padding-top を追記する。

#banner { padding-top : ●●px; }

Banner5_1

 背景画像の下が切れた場合は、

#banner { height : ▲▲px; }

 ▲▲pxで背景画像の高さを調節する。

 画像ではなく、下に隙間が欲しい時は、こっちの記述を↓

#banner {padding-bottom : ●●px; }

Banner4_1

 さて、「はっさくのカスタマイズ・メモ」のタイトルバナーは、の方法でアップロードしている。でも、タイトル文字もサブタイトル(キャッチフレーズ)も全~部画像と一緒にフォトショップで作って、アップしただけである。

 だからタイトルもちゃんと映っている。
 何処に?
 バナーの左上に、ちっちゃ~く、こっそりとあります。ハハハ。

 「テーマの設定」→「タイトルバナー」→「文字の配色」を背景と同じかなじむ色に→「文字の配置」を左揃えにする→「フォントとサイズ」を極小 にすると、こんな感じに!
 はっさくノートでは出来ないけど、単色なら消える。もとい見えなくなるという仕掛け。
 こちらの方法なら、確認画面で表示されるオマケ付きである!

Cap1 他にも、タイトルの背景は単色で、タイトルとサブタイトルだけ自前でフォントを作り、アップロードする、なんて事も可能だ。

|

« 「みんなで解決!広場」 あれだけの資料が消えて行く? | トップページ | ダ・ヴィンチ・コード/ダン・ブラウン著 »

◆カスタマイズ全般」カテゴリの記事

コメント

何時も参考書代わりに読んでいます。
試行錯誤の結果できました。
デザインどうですか?評価を頂ければ幸いです。
私のブログにLINKしたいぐらいです。
よければのはなし・・・・交互LINK

投稿: COO→はっさく さん | 2006年4月18日 (火) 22時01分

はっさく→COOさん
 お役に立てて幸いです!
タイトルバナー、渋くていいですね~。
 (はっさくノートは、基本的にリンクフリーです)

投稿: はっさく | 2006年4月18日 (火) 22時30分

はっさくさん、こんにちは。
先日はTBありがとうございました。

相変わらず視覚的で分かり易い記事ですね(^^)
私は設定の方法は載せましたけど、バナーの作り方は各自ご自由にって感じにしてしまったので参考にされる方、多いと思います。
今度記事中にもリンクを張らせて頂きますね。

確認画面の画像の有無は何なんでしょうね~。
そういう方法が(裏技じゃなく)基本の設定で出来るなら、ちゃんと確認も出来るようにして欲しいですよね。
(私くらいになると「え~い!ダメならあとで直せばいいや」とばかりに反映しちゃえるけど、最初はみんな心配だと思う…)

それにタイトルのリンク文字が切れちゃうのも謎です。
CSSを追加すれば調整できるけど、それが普通っていうのも変ですよね。

でも「何か変」と思っても、もういちいち取り上げるのも面倒で「ああ、そういうことなのね、ハイハイ」って何とかしてしまってるこっちもダメなのかも?^^;

投稿: tako | 2006年4月23日 (日) 21時59分

 はっさく→takoさん
こんにちは、コメントありがとうございます。
 >バナーの作り方は各自ご自由にって感じにしてしまったので参考にされる方、多いと思います。
 …なるといいんですけどねぇ。
実際に自分でバナーを作ると、高さはどの位でイイのかなって、もうそこからつまづいちゃうんです。
 難しいですよね、広場で回答しようにも、
つき詰めれば画像編集ソフトの話で、広場はココログの話に限るよなぁと思ってみたり。
 >確認画面の画像の有無は何なんでしょうね~。
 私がココログフリーを始めた時からそうでした。どんな違いがあると言うんでしょうね、
ホントに!ココログのデフォルトって他に比べてどうなんでしょう?他のブログサイト知らないんですが、MACの文字化けといい、不具合や使い勝手の悪さに対しての、対応が遅い気がしますね。
 かくいう私も、ダメならイイや~そのウチに
…の口です。(^ ^;)

投稿: はっさく | 2006年4月24日 (月) 00時41分

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/6973/1457373

この記事へのトラックバック一覧です: タイトルバナーをオリジナルの画像で
カスタマイズ・2方法
:

« 「みんなで解決!広場」 あれだけの資料が消えて行く? | トップページ | ダ・ヴィンチ・コード/ダン・ブラウン著 »