第10回：サイドバーのタイトルにワンポイント画像をつけてみよう
サイドバータイトルの行頭にワンポイントになる画像を設置してみましょう。
←こんな感じになります。
【'07/01/28】
【応用編】として「記事のタイトルへワンポイントを付けてみよう」を追記しました。
画像を入手する
ワンポイント用の画像を準備します。
ご自分で作った画像でもいいですし、素材サイトからお借りする方法もあります。
但し、素材サイトから素材を借りる場合はそのサイトの利用規約をよく読んでその範囲内で利用するようにしましょう。
大きさは縦横とも20px以内くらいのものがちょうどいいと思います。
私は「Simple Life」 さんでお借りした素材（18px * 18px）を使いました。
ファイルをココログにアップロードする
- 管理画面にログインし、「コントロールパネル」タブ→「ファイル」タブを開く
- 「新規ファイルのアップロード」の「参照」ボタンを押す
- 「ファイルの選択」ウィンドウが表示されるので、上記で保存したファイル（画像）を選択し「開く」ボタンを押す
- 「アップロード」ボタンを押す
- 左側の「現在のフォルダ」の「ファイル名」に、 4.でアップロードしたファイル名がリンクとして表示されていることを確認する。
※ここまででファイルのアップロードは完了です。
CSSを編集する
- 上記の5.で表示されている画像のリンクを開く。
- ブラウザのアドレスバーにそのファイルの保存先のurl（http://～）が表示されるので、これをコピーして「メモ帳」 などに貼り付けておく。
※別窓が開いているので、閉じずにそのままにしておけばコピーはしなくてOKです。 - 「管理トップページ」→「ブログ」タブ→（便利メニューから）「デザインの編集」→「カスタムCSSを編集」
※「カスタムCSSを編集」は、 リッチテンプレート適用時には利用できません。
※CSSを編集するためには、まず「カスタム・テンプレート」 を作成してください。
※カスタムテンプレートの作り方はこちらを参照して下さい。 - 「編集」画面のCSS記述欄に
.sidebar h2
{
background-image:url(●●●);
background-repeat:no-repeat;
height:■px;
padding-left:▲px;
}
を全て半角英数で記述する。
※●●●には上記で保存した画像のURL、■、 ▲には画像の大きさに合わせて数値を入力して下さい。（■は高さ、▲は幅） - 「変更を保存」ボタンを押す。
※事前に出来上がりを確認したい場合は「確認」ボタンを押してください。 - 一つ前の画面に戻るので、ここに表示されている「バックナンバーを反映」ボタンを押す。
- 別画面が開くので反映する範囲を選択して「反映」ボタンを押す。
- 「すべてのファイルを反映しました」の画面に切り替わったら終了。
- イメージ通りに出来ているかどうか確認する。
と、ここまででもいいのですが、カレンダーを表示している人はもうひと手間頑張ってみましょう。
上記で指定した「.sidebar h2」は「サイドバーのタイトル」を指定する要素なのですが、カレンダーのタイトルはこれとは別の要素を持っているためこれだけではカレンダーだけワンポイントが付きません。
そこでカレンダーのタイトルを指定する「#calendar caption」 にも上記と同じプロパティと値を記述します。
#calendar caption
{
background-image:url(●●●);
background-repeat:no-repeat;
height:■px;
padding-left:▲px;
}
これを「CSS記述欄」に同じように入力して、保存すればカレンダータイトルにも同じワンポイントが表示されます。
※保存については上記の5.以降と同様に処理してください。
以上です。
うまく出来ましたか？
【'06/10/01追記】
ココログのユーザー助け合い掲示板『みんなで解決！広場』にて、サイドバーのタイトルに別々の画像を表示する方法が回答として投稿されました。
更にカズタマイズしたい！という場合は下記を参考にチャレンジしてみて下さい。
■1789． サイドバーの項目に別々の画像をつけたい
私もそのうちやってみるかも。（未定ですが^^;）
【'07/02/19追記】
フリープランの場合、「マイリスト」タイトルにHTMLタグを入力してもタグとして認識されないため上記のカスタマイズは出来ないようです。
確認もせずに掲載してしまい申し訳ありませんでした。
（ベーシック以上の有料プランなら設定可能です）
応用編：記事のタイトルにワンポイントを付けてみよう
記事のタイトル欄にワンポイントを付けたい場合は、上記の【CSSを編集する】の4.で記述したCSSのセレクタを変更して
.content h3
{
background-image:url(●●●);
background-repeat:no-repeat;
height:■px;
padding-left:▲px;
}
としてみて下さい。
【今回お世話になったサイト様、ブログ様です。ありがとうございました。】
■ワンポイント画像は素材サイト「Simple Life」 様からいただきました。
■記事中のボタン素材は素材サイト 「PRISM」様 から頂きました。
| 固定リンク
トラックバック
この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/2654/799214
この記事へのトラックバック一覧です： 第10回：サイドバーのタイトルにワンポイント画像をつけてみよう:
» ココログデザインを変えてみた-第1弾 [Bugsなうさぎの憂鬱]
カスタムテンプレートで自分で作るのも、面白そうだと思ってやってみました。 ・本文が一日分ずつはっきり分かれて区別しやすいこと。・サイドバーの文字が見やすいこと。・デザインが素敵ならいいけど、これはデザイン能力に依存するので妥協。ようするにひたすら見やすいことが目標です。 デザインに凝るのは難しそうなので、テーマの変更で何とかするつもりが、案外自由度は低く、本文のみの枠囲みや色づけもできませんでした... [続きを読む]
受信： 2006/04/24 03:02
» ココログ初心者改造【カスタマイズ】 [山オンナ α]
ココ最近、試行錯誤しながらずっとこのブログのカスタマイズに励んでおりました。なんとかイメージしていたデザインが出来上がってきたので、しばらくはコレでいこうかと。 今まではずっとココログ既存のリッチテンプレートを使用していたのですが、今回は自... [続きを読む]
受信： 2007/05/19 13:13
コメント
takoさん、連載記事の執筆ご苦労さまです！
さすがといった感じで、分かりやすい解説でしたよ。
既に記事構成のテンプレートも固まったようですね。
「初心者にも優しいカスタマイズガイド」ということで、
うちの初心者向けコーナー「よくある質問」にて、
こちらのblogをリンク掲載させていただきたく思います。
このまま地道に頑張ってくださいね！
投稿 ads（あず） | 2006/02/22 23:44
■あずさん
こんにちは。コメントありがとうございます(^^)
＞既に記事構成のテンプレートも固まったようですね。
そうですね。
こういう内容ですので、ある程度決まったフォーマットのほうが読みやすいと思いますし、私も書きやすいのです。
これから記事が増えてきたらナビゲーションをどうすれば目的の記事に辿り着き易いのかを考えていきたいと思っています。
（しばらく先の話だと思いますが^^;）
リンクの件、ありがとうございます！励みになります(^^)
今後も少しずつ記事を増やしていきたいと思います。
「これも取り上げたら？」などご意見ありましたらご連絡下さいね。
宜しくお願いします。
投稿 tako→あずさん | 2006/02/23 23:20
はじめまして。
参考にさせていただいております。
まったくの初心者で、お恥ずかしいのですが、こちらを参考にして、背景に画像を入れるのはできたんです。ですが、このワンポイントや、ライン、などはなぜか反映されないんです。
CSSの編集画面に、書いてある通りに入れたのですが。。。
編集画面の１行目に、
body{background-image : url(●●●) }
２行目に、
.sidebar h2
{
background-image:url(●●●);
background-repeat:no-repeat;
height:■px;
padding-left:▲px;
}
としたんですが、間違っていますか？１行あけたりしてみましたが、何の変化もなく・・・・
CSSの知識が乏しいのがいけないのですが、もしよろしければ教えていただけないでしょうか。
すみません、現時点ではリッチテンプレートを利用しています。
投稿 るる | 2006/03/07 15:20
■るるさん
こんにちは。コメントありがとうございます。
ご質問の件、CSSの記述の仕方自体は問題ないと思います。
あと、考えられるのは、指定する画像のurlの記述ミスかなあ、と思うのですが…。
あと念のため確認なのですが、上記のCSSで
●●●＝画像のurl
■、▲＝画像の数値
に置き換えはされてますよね？
もし、この●とか■のまま記述されているのだとすれば反映されませんので、るるさんがアップロードした画像のurlと大きさに合わせた数値を代入して下さい。
例えば、このブログの場合、実際には
body{background-image:url(http://tea-for-me.cocolog-nifty.com/image/k_mizudb-08.gif)}
.sidebar h2
{
background-image:url(http://tea-for-me.cocolog-nifty.com/miniflower-i2-green.gif);
background-repeat:no-repeat;
height:20px;
padding-left:20px;
}
という記述になってます。
もしこの部分が抜けているようであれば、もう一度該当記事を最初から読んでやり直してみてください。
尚、こういったご質問の場合、該当のブログのurlを教えて頂ければ直接確認しますので差し支えがなければコメントのURL欄に記入しておいて下さい。
宜しくお願いします。
投稿 tako→るるさん | 2006/03/07 18:43
丁寧なお返事、ありがとうございました。
ＵＲＬも問題なく置き換えてます。コピーして貼り付けているので大丈夫です。サイズも数字を入れています。もう一度確認してやりなおしましたが、やはり、表示されませんでした。
今はリッチテンプレートでブログは公開していて、確認で状態を見ているので、ブログのＵＲＬがないんです。すみません。
もう少しいろいろやってみます。
背景画像は表示されるのに不思議な現象です。。。
投稿 るる | 2006/03/09 20:45
■るるさん
コメントありがとうございます。
urlと数字の置き換えの件、了解しました。
大変失礼しました。
となると、何故反映しないのか不思議ですね…。
ただ、一部の画像について「確認」画面ではきちんと表示されないのに、そのままページに反映させて確認するとちゃんと表示されているということも時々あります。
なので、もしかしたらそういうケースなのかもしれません。
（それが「こういう場合」と特定出来ないので曖昧な情報でしかなくて申し訳ないのですが…^^;）
また何かありましたらご連絡下さい。
投稿 tako→るるさん | 2006/03/09 20:56
はじめまして。
いろいろ参考にさせていただいて、「初めてのカスタマイズ」をしました。
まだまだ小技はまねできませんが、徐々に勉強させていただきます。
ありがとうございます。
また勝手で申し訳ありませんが、トラックバックとブログの記事内にリンクを張らせていただきました。どうぞよろしくお願いいたします。
投稿 バッグス | 2006/04/24 03:03
■バッグスさん
こんにちは。コメント＆記事でのご紹介ありがとうございました。
ブログ拝見しましたが、タイトル部分が印象的ですね(^^)
全体的なデザインもスッキリしていて見易いし、すごくきれいにまとまっている印象。
「CSS初心者」とのことですが「ホントに？」と思ってしまいました。
基本もちゃんと判っていないのに見栄えの派手な小技ばっかり出来るようになってしまった（笑）私よりも、ずっときちんと出来ていると思いますよ。
これからも少しずつでいいので工夫されたことを記事にしておいて頂けると助かる人がたくさんいると思います。
私も含めて(^^)
今後とも宜しくお願いいたします。
投稿 tako→バッグスさん | 2006/04/25 23:05
tako様、お返事ありがとうございます。お褒めいただいて恐縮です。
本当にCSS初体験です。だから基本どころかわからないことだらけで、思わずタイトル画像に、頭の中の渦巻きを足してしまったくらいです。
実際、罫線と余白の調整がほとんどですが、その調整もまだ、細かいところはどこをいじればいいのかわかりません。でも、わずかなことでも反映されると本当に面白いですね！
こちらのページをこれからも何度も見させていただくと思いますが、どうぞよろしくお願いいたします。
投稿 バッグス | 2006/04/26 12:06
■バッグスさん
こんにちは。
＞わずかなことでも反映されると本当に面白いですね！
そうなんですよ。
何しろ何も判らないところからスタートすることが多いのでそこに辿り着くまでは時間がかかるのですが、あちこちで教えていただいたCSSを自分なりに組み合わせて書いたものが思った通りに反映してくれると本当に嬉しいですよね(^^)
私もまだまだ「初心者」の域を出られませんが、そういう「ちょっとした嬉しいこと」を実感してくれる方が一人でも増えるのを願いつつ続けていきたいと思います。
こちらこそ宜しくお願いします。
投稿 tako→バッグスさん | 2006/04/30 01:10
はじめまして。
ご質問させていただいてよろしいでしょうか？
サイドバーのタイトルにワンポイント画像（動く画像）を上記手順にてつけたのですがタイトルの先頭部分の文字と画像がかぶってしまうという状態になってしまいました。。。。
対処方法としてタイトルの文字を中央に揃える設定をしてみたのですが、その設定さえも反映されませんでした・・・。ココログの不具合？
もし原因等推測がつきましたら教えていただけないでしょうか？
いきなりですみません。
投稿 mitsu | 2006/08/02 15:45
■mitsuさん
こんにちは。コメントありがとうございます。
ご質問の件ですが、記事中のサンプルCSSの中の
padding-left:▲px;
の部分でタイトル文字の先頭位置を調整しています。
例えば横幅20pxの画像だったら、
padding-left:20px;
と指定すれば、20px分タイトルの文字の前にスペースが出来て画像と重ならなくなる、ということです。
画像と文字が重なってしまうとしたら多分ここの数値が画像の幅よりも少ないのが原因ではないかと思いますので、この数値を画像幅よりも大きくすれば回避できると思われます。
試してみて下さい。
※実際にどんなCSSを記述していらっしゃるのかが判らないので、あくまでも推測です。
もしかしたら他に原因があるのかも判りませんが、ご質問の文章だけではこれ以上は回答出来ませんので悪しからずご了承下さい。
投稿 tako→mitsuさん | 2006/08/02 20:50
takoさん
さっそくのアドバイスありがとうございました。
ただ、padding-left:▲px;の▲部分をいくら増やしてもスペースが入りません。■部分はたしかに増やすとその分縦にスペースができるのですが・・・。
以下が記述部分です。
.sidebar h2
{
background-image:url(http://●●●.gif);
background-repeat:no-repeat;
height:30px;
padding-left:30px;
}
投稿 mitsu | 2006/08/02 23:24
■mitsuさん
こんにちは。
書いていただいたCSSを私も試してみたのですが、特に問題なく表示できました。
なので、その部分の記述は（単体としては）間違っていないと思います。
では何故適用されないのか、ということについてはCSS全体を検証しないと（少なくとも私には）判断できません。
前後のCSSに記述ミスがあったり、不要なスペースが入ったりしていても時にはそれ以外の指定に影響が出る場合もあります。
また、お使いになっているブラウザによっても見え方が変わってくるかもしれません。
対策としては、CSSを記述していないテスト用のテンプレートを作って、現在作成しているCSSをセレクター一つごとに記述して確認するを繰り返してみて下さい。
どこかのセレクターでCSSが適用されない、または表示が崩れるなどの症状が出る部分があったら、そこを見直して修正すれば改善されると思います。
ハッキリしない回答で申し訳ありません。
頑張って下さい。
投稿 tako→mitsuさん | 2006/08/02 23:55
こんばんは。
こちらを参考にさせていただき、クリスマスデコレーションが出来ました。(^^♪
それと、追記の『サイドバーの項目に別々の画像をつけたい』のお陰で、別々の画像を付けられました。
【'07/02/19追記】の件ですが、フリープランの私でも、タイトルをdivではさんで成功しました。
予想外でした。(^^♪
投稿 OBOCCO | 2007/12/02 01:48
■OBOCCOさん
こんにちは。コメントありがとうございます。
あちこちにデコレーションが散らばっていて楽しいテンプレートになってますね(^^)
お役に立ててなによりです。
＞フリープランの私でも、タイトルをdivではさんで成功
あ、そうでしたか！
その後のバージョンアップで何かの設定が変わったのかも知れませんね。
私も後で試してみます。ご報告ありがとうございました。
投稿 tako→OBOCCOさん | 2007/12/09 12:11
現在ココログのブログのビギナーです。２月から始めました。なんとか毎回公開しています。今回のエントリーは大変役立ちましたが、本来私が探していたのは、次の通りです。
どこかのサイトに動く画像（ワンポイント画像.gif）が在りまして、それをコピーして私のブログの本文の中に貼り付けたいのです。
最初はその動く画像を「名前を付けて保存」やコピーで挑みましたが、静止画像になってしまいました。このエントリーの上記ご指導によりマイフォトに保存、ＣＳＳに挑みましたが、本文に貼り付ける場合についてどうしたらよいか分からなくなってしまいました。
マイフォトでそれをクリックすると、ピクピク動いて元気なのですが。
いろいろ検索してみたのですが、私の能力の問題で実現が出来ません。まことに申し訳ありませんが、教えていただけないでしょうか。
投稿 watanabe | 2008/02/19 15:35
■watanabeさん
こんにちは。コメントありがとうございます。
ご質問の件ですが、以前「みんなで解決！広場」で同じ質問に回答したことがあります。
そちらへのリンクを貼っておきますので、参照してみて下さい。
多分、今でも有効なはずです。
191．GIF 画像
http://message2.nifty.com/tb/board/cocolog/reslist?service_id=expert&board_id=bbs1&mainthread_id=00000191&gubun_key=mthreadc
4）の回答です。
投稿 tako→watanabeさん | 2008/02/19 20:12
ご回答ありがとうございました。
しかし１９１画像のサイトは健在でしたが、その中の
http://support.cocolog-nifty.com/howto/2005/11/iii_7e57.html
は閉鎖されていました。
画像ファイルのカスタム設定というのも、どこにあるのか探したのですが。どうもわかりません。
もう一度ご指導宜しくお願いいたします。
投稿 watanabe | 2008/02/20 07:42
わかりました。動く画像をどこかにｺﾋﾟｰ。それで画像の挿入→画像の選択→画像オプション→カスタム設定→上３つのチェックを外す→画像の挿入なのですね。完璧に本文に挿入することができました。助かりました。ありがとうございます。
投稿 watanabe | 2008/02/20 15:37
■watanabeさん
こんにちは。
判りにくい回答だったかと心配しましたが、無事挿入出来たようでよかったです。
ご報告ありがとうございました。
投稿 tako→watanabeさん | 2008/02/21 21:51