タイトルロゴを使う

 前項の「ヘッダにオリジナル画像を使う」でヘッダの背景画像の設定方法と、背景にタイトルロゴを描いた場合のブログ名を表示させない手順を紹介しました。そして、その欠点はタイトルロゴがリンクボタンとして使えないことと説明しました。

 ですが、Seesaaブログのコンテンツにある「ブログロゴ画像」を利用すれば簡単にリンクボタン機能付きのタイトルロゴを設定できます。

準備:スタイルシート
 SeeSaaブログの 「マイ・ブログ」タグからサインイン(ログイン)して → 「デザイン」 → 「スタイルシート」 → 「使用しているテンプレートのタイトル」 でスタイルシートを変更、書き足しができるページを開きます。

下の画像のようなページが表れます。このページでスタイルシートを変更していきます。

CSSnyuuryoku.gif

1.タイトルロゴを用意する

 タイトルロゴ画像の作成はブログで行うことはできません。フォトレタッチソフトや画像作成ソフトなどであらかじめ作成しておく必要があります。

 記事などで使用する通常の画像はファイルマネージャからアップロードしますが、タイトルロゴは「コンテンツ」→「ブログロゴ画像」からアップロードします。以下で説明していきます。

2.コンテンツに「ブログロゴ画像」を追加して画像をアップロードする

コンテンツ「ブログロゴ画像」を追加する
「ブログ名」を削除する


 「デザイン」タグ→「コンテンツ」タグでコンテンツ一覧ページを開きます。

contentshensyuu.gif

 コンテンツ一覧のヘッダ部分に「ブログロゴ画像」を追加し、「ブログ名」削除します。

 「ブログ名」と「ブログロゴ画像」は両方とも<h1>(見出し1タグ)を書き出すコンテンツなので、どちらか一つだけを使用します。

 コンテンツの追加・削除の方法は「サイドバーの不要なコンテンツを削除する」で紹介しました。


ブログロゴ画像をアップロードする

 追加した「ブログロゴ画像」のリンクをクリックすると下の画像のようなページに移動します。

titlelogo-hensyuu01.gif

【画像アルバム】と書かれたボタンを押すと下の画像のようなページに移動します。

titlelogo-hensyuu02.gif

 画像をアップロードする手順は、前項の「ヘッダにオリジナル画像を使う」で紹介したファイルマネージャでアップロードする方法と同じです。

 アップロードが終了したら、コンテンツ一覧ページ下部にある【設定を反映する】ボタンを押し、さらに再構築する範囲を指定して【再構築を実行】ボタンを押して完了します。

右端にある「サイトの確認」リンクから確認してください。

3.スタイルシートで表示位置を設定する

 サイトを確認した結果、ロゴを表示させたい位置と実際に表示されている位置がずれている可能性があります。

 このページの場合、背景画像は以下のような画像です。(クリックすると拡大画像が表示されます。)

header-banner02.jpg

 タイトルロゴ画像に使用している画像は以下のような画像です。(クリックすると拡大画像が表示されます。)背景画像の一部を切り抜いたものです。

logo01.gif

 この場合、上と左側の余白を完全に消して表示させなければならないのでスタイルを変更していきます。

 準備:画像スタイルシートのところで書いたようにスタイルシートを設定するページでスタイルを変更します。



ブログロゴ画像の表示位置をずらす。

ブログロゴ画像のスタイルは『h1』で設定されています。また、ヘッダ部分全体指定するセレクタ「#banner」の枠内余白(padding)も設定しなおす必要があります。

変更前

#banner{  ←ヘッダのスタイルを指定するセレクタ
font-family:arial, Helvetica;
height:251px;
margin:0px;
padding:0px 0px 0px 20px;  ←枠内余白:上0px 右0px 下0px 左20px
text-align:left;
background-image:url(http://blog.seesaa.jp/img/bg/wakaba/header.gif);
background-repeat:no-repeat;
}


h1 {  ←見出し1のスタイルを指定するセレクタ
margin:0px;
padding: 30px 10px 10px 0px;
font-size:18px;
font-weight:bolder;
}
h1 a{  ←見出し1内のアンカー(リンク)のスタイルを指定するセレクタ
color:#597903;
font-family:arial, Helvetica;
text-decoration: none;
font-weight:bolder;
}
変更後
#banner{
font-family:arial, Helvetica;
height:120px;
margin:0px;
padding:0px;  ←枠内余白:0px (四方向すべて)
text-align:left;
background-image:url(http://背景画像URL);
background-repeat:no-repeat;
}


h1 {
margin:0px;
padding:0px;  ←枠内余白:0px (四方向すべて)
}

h1 a img{  ←見出し1内の画像リンクのスタイルを指定するセレクタ
border-style:none;  ←枠線(4方向)のスタイル:なし
}

 前項「ヘッダにオリジナル画像を使う」ではh1{ }内にtext-indent:-9999px;と書きましたが、ここではその書き込みは消してください。そのままだと画像が表示されません。

h1 a{ }のスタイルは必要ないので削除しました。消さないままにしておいても問題ありません。

h1 a img{ border-style:none; }を書き込まないと画像の周りに2pxの枠線が表示されてしまいます。表示しても構わない場合はこの項目を書き加える必要はありません。



ブログ説明の表示位置を修正する。

 前項の「ブログ説明の表示位置をずらす」で説明したの同じ説明になりますが、ブログロゴ画像を挿入した結果、ブログ説明の位置がずれてしまいます。ですので、セレクタ「.description」で表示位置を修正します。

変更前

.description {  ←「ブログ説明」のスタイルを指定するセレクタ
color:#597903;
margin:0px 10px 10px 0px;  ←余白(枠の外側):上0px 右10px 下10px 左0px
font-size:12px;
font-family:sans-serif;
font-weight:bolder;
}
変更後
.description {
display:block;  ←表示形式:ブロックレベル要素として表示する
color:#ff9900;
margin:-100px 60px 10px 350px;  ←余白(枠の外側):上-100px 右60px 下10px 左350px
font-size:12px;
font-family:sans-serif;
font-weight:bolder;
}
  marginの数値を変更することで文字の表示位置をずらします。ブラウザで確認しながら表示位置を調整してください。
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。