« 第3回:カスタムテンプレートを作ってみよう | トップページ | 第5回:背景の色を変えてみよう »

2006/02/15

第4回:タイトルにオリジナルの画像を設定してみよう

自分で作った「カスタムテンプレート」のタイトル部分にオリジナルの画像を適用する方法です。

手順

事前準備:タイトル用の画像を準備する

タイトル用の画像を準備します。

※画像の大きさについては下の 「point」のところで説明しています。

ご自分で作った(撮った)画像でもいいですし、素材サイトからお借りする方法もあります。
但し、素材サイトから素材を借りる場合はそのサイトの利用規約をよく読んでその範囲内で利用するようにしましょう

※特に「切り取り」、「サイズ変更」、「文字入れ」など加工を考えている場合は加工を許可しているかどうか充分確認して下さい。

「自作で!」と思っていらっしゃる方ははっさくさんの下記の記事が参考になると思います。
『はっさくノート』 様内 「タイトルバナーをオリジナルの画像で  カスタマイズ・2方法」

準備した画像はPC内の判りやすい場所に保存しておきます。

画像をバナーに適用する

  1. 「管理ページトップ」→「ブログ」タブ→「デザインの編集」→「テーマを変更」
    ※現在使っているテンプレートとは別のテンプレートを使う場合は、「テンプレートの管理」画面で該当のテンプレートを選択、 適用してから 「テーマを変更」に進んで下さい。 
  2. 「タイトルバナー」の「編集」ボタンを押し、編集画面を開く。 
  3. 「オプション設定」の「タイトルバナーに画像を使用する」と「アップロードした画像は、タイトルの背景として使用する」 にチェックを入れて、「参照」ボタンを押す。
    準備した画像を選択し、「開く」ボタンを押す。 
  4. 「変更を保存」ボタンを押す。 
  5. 一つ前の編集画面に戻るので、もう一度「変更を保存」ボタンを押す。 
  6. 「デザイン」画面に戻るので画面下方の「反映」ボタンを押す。 
  7. 「反映」画面が別窓で開くので、反映するファイルの範囲を選択して「反映」ボタンを押す 
  8. 「すべてのファイルを反映しました。」の画面に切り替わったら終了。 
  9. イメージ通りに出来ているかどうか確認する。

以上です。
うまく出来ましたか?

ここがポイント

  • 画像の大きさは、
    幅が「カスタムデザイン」の「ページ全般の設定」 で指定した 「記事部分」+「サイドバー」 の幅を足した長さ
    (例えばここの場合、「記事部分:500px」+「サイドバー:200px」×2で計「900px」となります)
    高さはお好みで大丈夫ですが、あまり大きくするとその分記事部分が下に下がって記事が見えにくくなります。 
  • 「アップロードした画像は、タイトルの背景として使用する」について
    準備した画像に既にブログ名が画像として入力されている場合は、この項目のチェックを外して下さい。
    ※入れたままだとテキストのブログ名も表示されてしまいます。 
  • この部分の設定については設定後反映する前に「デザイン(テーマ)」画面の「確認」ボタンで確認した場合、 画像が表示されない場合があるようです。
    「反映」してブログ画面を確認すればタイトル画像が表示されますので、事前に確認したい場合は「メインページ」のみに反映して確認する、 などの手段で確認してみて下さい。

タイトルの文字位置が上がりすぎてしまう場合の対応

上記の処理をしたところ、タイトル文字の位置が上がりすぎて上3分の1くらい切れてしまったので、下記の方法で調整しました。

「デザイン」→「カスタムCSSの編集」
CSSの入力欄に

#banner{padding-top: ●px;}
●部分に任意の数値を入力。(私は10に設定しました)

「変更を保存」→前の画面に戻るのでここで「バックナンバーに反映」
反映するファイルの範囲を選択して「反映」ボタンを押す。
「すべてのファイルを反映しました。」の画面に切り替わったら終了。
イメージ通りに出来ているかどうか確認する。

これでタイトルの文字位置が下に下がります。

「#banner」はタイトルバナー部分を指定するセレクタ、「padding」 はボックスの中の余白を指定するためのプロパティです。
つまり「バナー部分」の「上(top)の余白」を「●px」に設定する、というタグになります。

paddingの詳細な説明はこちらのページなど参考にして下さい。
「TAG index」さん「ボックスのパディング(内側の余白)を指定する」
※HTMLやCSSのタグが設定サンプル付きで説明されていて判りやすいサイトです。


 

■タイトル画像は素材サイト「ミントblue」さんから頂きました。

■記事中の「how to」、「point」のボタンは素材サイト「PRISM」さんから頂きました。


*この記事にコメントを書く*


|

« 第3回:カスタムテンプレートを作ってみよう | トップページ | 第5回:背景の色を変えてみよう »

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

タイトル(バナー)」カテゴリの記事

ウェブログ・ココログ関連」カテゴリの記事

コメント

 こんにちは~!
 偶然なんですが、ココフラッシュで見つけましたよ。
さすがtakoさん!かゆいところに手が届くblogですね。
そっかぁ、padding-topを変えればいいんですよね。
私は、padding-bottomを様子見ながらチマチマ変えてましたよ、隙間が出来たりして、面倒でした。結果的には調整できたのですが、今となってはどうやったのか、記憶が薄いです…。

 ところで、コメントを記入中なんですが、なぜか改行を
せずに書き込んでいると、左右が切れますね。
最近、ココログのテンプレは不具合だらけの気がします。
 ユーザーが増えて、重くなっているという話も
チラッと耳にしました。対応しきれなくなってきたんでしょうかね~。
 ご新規さんには、ぜひ見て欲しいblogになりそうで、
楽しみです。週一、私には充分ですよ。

投稿: はっさく | 2006/02/16 02:22

■はっさくさん
こんにちは。コメント第一号です!
見つけてくれてありがとうございます(^^)

「~広場」で回答しているうちに「こんなに知りたいと思っている人がいるなら、いっそ自分で解説ブログ作っちゃおうかな」と思い立って作ってみたのはよかったものの…これがなかなか手が掛かる!^^;

何しろ、一つ一つの作業を手順を確認しながら書かなくちゃならないし、しかも内容(特にタグなど)にミスがあったらいけないし…で、1回分書き上げるのにかなり時間が掛かってます。
その分、終わると「やったぜ!」って感じですけどね(笑)

記事が少なかったので宣伝とかまだ何もしていないのですが、今週末に記事をもう1~2本(多分「背景の設定」になる予定)アップしたらちょっと、宣伝活動も始めてみようかなと思ってます。

今後もチェックして頂いて、「ここ間違ってるよ」とか「こんな方法もあるよ」とか「こんなのも取り上げたら?」とかアドバイス頂ければ嬉しいです。
どうぞ宜しくお願いします♪

※コメント欄の件、お見苦しくてごめんなさい。
※でも私は何もしていないので修正しようもないんですよね~…。
※テンプレの影響かなあ…。

投稿: tako | 2006/02/16 21:43

 takoさん、こんにちは!シナモンです。
最近、takoさんが紹介してくださる技をどれもやってみたくて、
只今カスタムテンプレート作成に悪戦苦闘しています。
 それで、タイトルに画像を設定して、文字が切れたので
教えていただいた通りに設定をして、文字はきちんと表示されたのですが、画像が大きすぎるのか、記事が下がってしまいました。
 takoさんのように、画像を透かす事は出来るのでしょうか?画像を変えないと、記事を上に上げることは出来ないのでしょうか?
 いつもすみませんが、教えていただけませんか? 

投稿: シナモン | 2006/03/12 18:39

■シナモンさん
こんにちは。コメントありがとうございます。

>画像を透かす

ごめんなさい、今私がやっている方法はこのページに書いてある「タイトル部分に画像を入れる」のとはまた別の方法なのです。
記事にしようと思いつつ、なかなか書くのが難しくて…。
早い機会に記事を書いてアップするつもりですが、(本来の仕事が忙しい時期でもあり)「いつ」とお約束することは出来ません。
もう少々お待ち下さい。

それまでは、記事が下がってしまうのが気になるのでしたら、画像の高さを150pxくらいに調整するなどして対応してください。
宜しくお願いします。

投稿: tako→シナモンさん | 2006/03/12 18:53

 お忙しい中、コメントいただきありがとうございました。
同じで画像で、高さが150のものを作ってくださっていたので、それをお借りしました。
 それから、「second massage」で記事にされていた[サイドバー・記事タイトルへの画像挿入用タグ]をお借りしました。
 おかげさまで、ある程度形になったので、しばらく使ってみようと思います。
ありがとうございましたm(*__*)mペコ

投稿: シナモン | 2006/03/13 02:00

 今回カスタマイズしたことを書いた記事で、takoさんのところを紹介させていただいたので、トラックバックさせていただきました。
 

投稿: シナモン | 2006/03/13 13:49

 たびたび失礼します。
 今気が付いてのですが、タイトル部に設定していたカウンターが表示されなくなりました。タイトルに画像を設定した場合は、タイトル部に設置出来ないのでしょうか?
 どうしようかな?と思っていたら、「カウンターをつけてみよう」で、サイドバーに設置する方法を、分かりやすく解説してくださっていたので、そちらに設置することが出来ました。ありがとございましたm(*__*)mペコ

投稿: シナモン | 2006/03/13 15:07

■シナモンさん
コメントとTB、ありがとうございました。

オリジナルのテンプレートにして随分雰囲気が変わりましたね。
ピンクの壁紙が可愛らしいです♪

これからもいろいろ工夫して楽しんで下さいね(^^)

投稿: tako→シナモンさん | 2006/03/13 22:21

ブログのタイトルがあがりすぎて困ってました。
ここの記事のおかげで解決しました^^
ありがとうございました。

投稿: | 2006/04/01 20:49

■鞠さん
こんにちは。コメントありがとうございます。

自分で上手く出来なかったことだったので「もしかしたらまたどこかで使うかも?」と思って覚え書きとして書いておいたものでしたが、思いがけずお役に立ててなによりでした(^^)

投稿: tako→鞠さん | 2006/04/01 22:50

 こんばんは~!
リンクして頂きまして、ありがとうございます。
>ここでやってみたらタイトル文字が上3分の1くらい切れてしまったので、下記の方法で調整しました。
 この件の、邪推ですが…、最初からmediumに固定されていたりしませんかね。(どういうプログラムかは、分かりませんが)
 で、largeやx-largeにすると、mediumの定位置からドーンと
上へ…と言う具合に。んなわけないか、と妄想してみました。(^ ^;)

投稿: はっさく | 2006/04/25 22:33

■はっさくさん
こんにちは。

>最初からmediumに固定されていたりしませんかね

ああ、なるほど。
文字の大きさで「動いたように見えてしまう」ってことですね。
ちょっとそれは思いつきませんでした。今度チェックしてみますね。
ただ実際にそうであったとしたら、ちょっとどうかと思いますよね。
どんな大きさでもある程度の位置に納まるようにしておくべきでしょう。

でもまだこういうカスタムテンプレートは全然マシで、ときどきリッチテンプレートのソースとか見ると、あまりの細かい指定に思わず目眩がしそうになります^^;
伊藤園のテンプレもエントリー欄が可愛かったので「どんなふうに作ってるのかな~」と思って見てみたのですが「ここまでしないと出来ないなら、やらなくてイイヤ」と諦めました^^;
(それが狙い?(笑))

投稿: tako→はっさくさん | 2006/04/30 01:39

こちらの記事を参考にタイトルバナーを作成させていただきました(^-^)
おかげさまで何とかそれなりのものが出来たと満足しております。
色々苦労した点などをブログネタにいたしましたので、
参考になればとトラバックさせて頂きました。

takoさんの説明は、本当に丁寧で、何にも知らない
私でも何とかブログをいじることが出来ています。
本当にありがとうございます(^-^)

投稿: れおる | 2006/10/25 21:19

■れおるさん
こんにちは。コメントありがとうございます。

リンクとトラックバックをありがとうございました。
最近は月に1度でも更新すれば上出来というくらい放置状態のこのブログですが^^;、過去ログが少しでもどなたかのお役に立っていると判るのはとても嬉しいことです。
少しずつでも記事を増やしていきたいと思ってはいますので、今後も時々覗いて頂ければ幸いです。

れおるさんもこれからも楽しんでブログを続けて下さいね。

※返信が大変遅くなってしまい申し訳ございませんでした。

投稿: tako→れおるさん | 2006/11/02 23:02

コメントを書く



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


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



トラックバック

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

この記事へのトラックバック一覧です: 第4回:タイトルにオリジナルの画像を設定してみよう:

» 画像を縮小してからアップする話 [はっさくノート]
 「みんなで解決!広場」への質問で「画像を記事のサイズそのままに載せたい」「大きい画像を、縮小させたい。でも、ポップアップにはしたくない」というのが良くある。 私はイラストしか載せたことが無いが、写真... [続きを読む]

受信: 2006/02/23 17:21

» 模様替え(*⌒ー⌒*)v [おやつの時間]
悪戦苦闘の末、ようやく形になったので 模様替えしてみましたが、いかがですか? [続きを読む]

受信: 2006/03/13 13:50

» タイトルバナーをオリジナルの画像でカスタマイズ・2方法 [はっさくノート]
タイトルバナーに画像を貼りつける際の不思議に、確認画面にバナーが表示されない、というものがある。 私のように飽きっぽく、時々バナーを替えたい人間には、いちいち「反映」→「ブログを表示」をしないと、きちんと納まっているか分からないというのは不便である。 縦幅調節のコメントも頂いたので、その辺も含め図解してみた。  あっ、その前に、自分のCSSファイルを調べて、保存しておくと、失敗した時などに照らし... [続きを読む]

受信: 2006/04/18 19:13

» ココログいじくり倒してます [へそのごま。]
ここ2日で、またまたブログのデザインを変更してしまいました。うっとおしいなー、と [続きを読む]

受信: 2006/05/06 17:38

» ブログのカスタマイズ [ 40のひとりごと]
 このブログのテンプレートを何度か変えている。一番最近に変えたときには、タイトル [続きを読む]

受信: 2006/08/11 23:45

» タイトルバナー作成 [小さな水の箱]
何とか復活を果し、アクセス数が4000いったので、タイトルバナーを作成いたしまし [続きを読む]

受信: 2006/10/25 21:20

« 第3回:カスタムテンプレートを作ってみよう | トップページ | 第5回:背景の色を変えてみよう »