今宵も話半分で…

seesaaのタイトルをロゴ画像に変更する

   

Photo:Sihanoukville - William Turner Sky By:Drriss & <div class=Marrionn” style=”padding:2px”>

Photo:Sihanoukville – William Turner Sky By Drriss & Marrionn

どうも。らいぱちです。
ブログの顔と言えば、トップページ。
さらに言えば、ヘッダーのデザインですよね。
seesaaブログのカスタマイズを始めたときに
最初に手をつけたくなるところでもあります。
ブログのタイトルをただの打ち文字から、タイトルのわかるロゴ画像に
変更します。
htmlを修正していかなければならないので、
多少ハードルが高いのですが、とにかくやってみます。
そのやり方は違うよとか、説明がおかしいとかあると思いますが、
なんせど素人なもので優しく指摘してもらえると助かります。


スポンサード リンク





どんな風に変えられる?

結果的にこんな感じが…
01blogtitle_before.png
こんな感じに変わりました。
02blogtitle_after.png
文字の部分も含めたロゴの画像に差し替わっています。
見た目の印象ですけど、だいぶ変わった感じがします。
いや、印象よくなったと思いたい。

主な手順

とりあえず行った手順としては
①ブログロゴを作る。
②ファイルマネージャーでseesaaブログにアップロード。
③seesaaブログのコンテンツHTML編集で、読み込ませる。
では早速詳しく見ていきましょう

ブログロゴを作る

photoshopやillustratorなど使い慣れたソフトで自由に作りましょう。
納得いくまで作り込んでください。
とはいっても、変更もできるのでほどほどに。
最終的にアップロードする際のデータ容量には気をつけます。
あまり重いと読み込みに時間がかかってしまったりしてしまいますから。
ぼくはjpegで作ったものをImageOptimというソフトで軽量化しています。
ロゴを無料で作成できるこんなオンラインサービスもあります。

seesaaブログにアップロード

まず「デザイン」>「コンテンツ」から「ブログタイトル」>「コンテンツHTML編集」と進みましょう。
そのウィンドウの下部から「ファイルのアップロード」が行えるので、
作っておいたロゴ画像をアップします。
ロゴ画像をアップしたら、そのurlをコピーしておきましょう。
ちなみに立て続けに文字をコピーしたいときってありますよね。
そんなとき毎回コピーしたい場所に戻って、⌘+Cを繰り返すのも大変なので、
コピーの履歴を覚えておいてくれるアプリがとても便利です。
macだとCopyClipやKopyPasta、画像も履歴に残せるClipMenuあたりがメジャーでしょうか。
コピペアプリを使うとコピペ作業が劇的に変わりますよ。
さて、話しを戻して、ロゴ画像はおなじみのファイルマネージャーを使ってもアップロードできます。
ここはさくさく行きます。

HTMLを編集する

はい、最難関。HTMLの編集です。
「コンテンツHTML編集」にはデフォルトで以下のコードが記入されていると思います。


<% content.header -%>

<% blog.title %>

<% content.footer -%>

今回変更すべきは<% blog.title %>の部分です。
これがブログタイトルを打ち文字で表示しているコードです。
ちなみにこの<%〜%>と%で前後をくくられたタグは
seesaaブログの独自タグになるようです。<% content.header -%>とか<% content.footer -%>とかも同様に、独自タグです。
seesaaブログのHTMLを見ると、他にもいろいろありますね。
この独自タグを理解してるとカスタマイズが楽になります。
というか独自タグであることを知らないでHTMLを見ると、なんじゃこりゃという自体になります。
とりあえずこのブログタイトルを表示している部分をロゴ画像を表示するタグに
変更します。
たとえばこんな感じです。


<% content.header -%>

<% content.footer -%>

<% blog.title %>を消して、代わりに<img>タグを挿入しています。
このタグにはclassを指定してあげてCSSでデザインがいじれるようにしておきます。
また、altをつけて代替テキストが出るようにもしておきます。
これで、ブログタイトルが作成したロゴ画像になったと思います。
あとはCSSをいじって、paddingやmarginを使って位置の調整をします。
ブログタイトル下にあるブログ説明文は、デザイン的にはなくてもよいかもしれません。
なくてもよい場合は、「コンテンツ」のヘッダーから「ブログ説明」のパーツをなしにしてしまいましょう。
説明があった方がなんのブログかわかりやすいし、親切だなと思う場合は、
ブログ説明のCSSも調整しましょう。
seesaaブログのデフォルトではスタイルシートの.descriptionを調整すれば、
ブログ説明のレイアウトを調整することができます。

まとめ

ブログの顔とも言えるブログタイトルの変更でした。
やっぱりHTMLを編集し出すと、作業の時間がかかってしまいます。
CSSでの調整も必要ですし。
とはいえヘッダー画像の変更同様、ブログタイトルを変えると
よりいっそう自分らしいブログになる気がします。
いや…なってほしい。
そう願いつつ、きょうのところは試合終了。

この記事が気に入ったら
いいね!しよう

Twitter で

 - 世界は学びで変わってゆく , , , , ,