Home趣味雑学・備忘録 >Seesaaブログのナビゲーションとタイトルロゴのカスタマイズ!
2014年06月08日

Seesaaブログのナビゲーションとタイトルロゴのカスタマイズ!

abstract-21004_640.jpg以前からLivedoorニュースの清涼感あふれるフラットなイメージが気に入っていました。それと同時にseesaaブログのテンプレートの野暮ったさを何とかしたいとも思っていたのです。

そして最近、「とある秘密ブログの更新うぇぶろぐ」さんのこちらの記事、"Seesaa ブログの navi を Livedoor ニュース風にカスタマイズ(完)"と出会う事が出来ました^^


Livedoorニュース風 ナビゲーションがいい!

Livedoorニュース風 ナビゲーション.jpg
Livedoorニュースのカテゴリ別の記事一覧ページの下にあるナビゲーションに近い形のものを「おせっかいワールド」にも組み込んでいます。

「とある秘密ブログの更新うぇぶろぐ」さんの解説記事に従って記事HTMLとCSSにコードをコピペしただけですw

※私にこれを自作出来るだけのスキルはないので、本当に嬉しかった^^

特に記事HTMLのカスタマイズはソースのバックアップを取りながら慎重に進めました。従来の矢印と数字だけのリンクナビと違ってデザイン面とユーザビリティともに優れていると感じます。

せっかく素敵なナビを実装したついでに、ブログタイトルのロゴも工事中です。現在は仮ロゴを設定しています。(※もう少し手を加える予定です。)


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

seesaaブログは初期設定では、ブログタイトル(h1)はテキストリンクです。ブログの体裁次第ではこのままでも問題ないのですが、お好みでロゴなどを設定する事も出来ます。

※味のある日本語フォントなどを画像として設定するなど。


意外と簡単、seesaaのブログタイトルカスタマイズ

事前にタイトルロゴ(画像)をご用意下さい。私の場合ですが、仮タイトルとしてこのような簡単なログを準備しました。

titlerogo1.jpg

ブログタイトルをロゴに置き換える.jpg
管理画面>デザイン>コンテンツ、と進みます。赤枠の「ブログ画像」と「ブログタイトル」を入れ替えます。

seesaaブログ ロゴ画像の設定.jpg
「ブログ画像」のコンテンツを開き、中程にある"ファイルマネージャ"を選択します。

ブログロゴ設定に戻る.jpg
左上にある参照タブにロゴにしたい画像をドラッグして、アップロードを選択します。こちらの画像はアップロード完了後のものです。

ロゴ設定完了.jpg
アップロードが完了したら、ブログロゴ設定画面に戻り"保存"します。

※ファイルマネージャの選択ボタンの下に、アップした画像ファイルが表示されています。

これでブログタイトルのロゴ(画像)化が完了しました。

今回ナビとロゴ以外にも、サイドタイトルに設定していた背景画像などもカットしました。それとサイドバーの"最近の記事"の区切り線をGIMPを使って制作しました。

html(水平線)で書き込めるのですが、1pxラインにグラデーションをつけたかったので、あえてPNG画像を採用しています。(※一昔前は、WEBサイトにPNGはリスキーだと言われていたようですが今は問題ないようです。)

h2(記事タイトル)に設定していた画像も無くしましたが、非常にさっぱりして見栄えが良くなった気すらします。
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック
×

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