Seesaa Seesaaカスタマイズ

Seesaaブログのタイトルをロゴ画像に変更する方法

Seesaaブログのタイトルを画像に変更して、クリックしたらブログトップページに移動するようにする方法です。
まずは、inkscapeなどのフリーソフトや無料ロゴジェネレーターを使ってタイトルロゴ作成します。

タイトルを画像に変更

画像の準備ができたら、デザイン＞PC＞コンテンツからブログタイトルを選択します。

文字の上でクリックしないと移動してしまいます。

ファイルのアップロードで、使いたいタイトル画像をドロップするか、ファイルから選択してアップロードします。

画像をドロップすると、アップロードした画像が上に追加されるので、これをクリックすると挿入テキスト部分にソースが挿入されます。

画像を削除したい場合は、下のゴミ箱マークをクリックします。

また、追加（クリック）するときには、「サムネイルで表示」と「別ウィンドウで原寸大表示」のチェックをはずしておきます。

クリックすると下の画像のようにソースが挿入されます。

トップページに移動するリンクを追加

このままだとタイトル画像をクリックしても、トップページに移動できないためソースを追加します。

<a href="ブログトップページのURL">
自動で挿入されたソース</a>

このように、上で自動挿入した画像のソースをaタグで挟みます。

追加後のソースは、下の画像のようになります。

ここまでできたら一度保存をしてブログを確認します。

タイトルテキストとブログの説明を消す

ブログを見ると、タイトルが画像になり、元のタイトルテキストとブログの説明が下にずれているはずです。

そこで、タイトルと説明をそれぞれ消していきます。

消す方法は、CSSでdisplay:noneとするか、text-indent:-9999pxとするのが一般的なようです。が、SEOにも関係するとかしないとか、様々な憶測がありますのでご注意ください。

タイトルテキストを消す

まずは、タイトルテキストから消します。

トップページリンク追加後のソースをコピーして、コンテンツHTML編集をクリックします。

初期値が下記のようになっています。

<% content.header -%>
<h1><a href="<% blog.page_url %>" accesskey="1"><% blog.title %></a></h1>
<% content.footer -%>

このh1タグの中に貼り付けして、altをブログタイトルに変更します。aitの文字は作成したロゴ画像のタイトルや保存形式によって変わります。

保存をしてブログを見てみると、今度は画像が2つ表示されるので、ブログタイトルの設定に戻って最初に追加したソースをすべて消します。

ブログの説明を消す

次に、ブログの説明を消します。

デザイン＞PC＞デザイン設定から使用中のテンプレートを選択して、CSSを編集します。

スタイルシート編集画面になるので、Ctrl+Fを押してdescriptionを検索します。超シンプルテンプレートの場合は2つあるので、2つ目にdisplay:noneを追加したら完了です。

追加後は、

#banner .description{
 color:#888;
 font-weight:normal;
 padding-left:0px;
 display:none          ←ここに追加
}

のようになります。

あとは、タイトルロゴの位置をCSSで修正したら完成です。

スポンサーリンク