Seesaaブログのちょっとしたカスタマイズ titleタグ編

その筋では、もっともカスタマイズ性が高いとうわさのSeesaaブログですが、そのシーサーブログでのちょっとしたカスタマイズを紹介。

通常、シーサーブログの<title>タグの表記は

サイト名: サイト記事のタイトル

のように、まず最初にサイトのタイトルが来て、その後に各記事のタイトルが入る仕様になっています。このタイトルをたとえば

サイト記事のタイトル: サイト名

このような形にする場合のカスタマイズの方法をご紹介します。タイトルよりも先に、各記事の名前を表示させたい、という場合に有効な改造です。

手順としては

1、管理画面に入ります。

2、デザイン→HTMLを選択します。

3、標準ではデフォルトHTMLが適応されているので、その項目の右上のあたりにある「HTMLの追加」のリンクを押します。

4、すると、ブログの大まかな形を制御しているHTMLが現れます。

こんなかんじ。ここで注意!この作業をやる前に、上記のソース部分を全てバックアップしておいてください。間違って更新してしまうと、ブログが正しく動かなくなる可能性があります。

5、「HTML名」はなんでもいいです。カスタマイズ とでもしておきましょう。ソースを見ると、

<title><% blog.title %><% if:extra_title %>: <% extra_title %><% /if %></title>

と書かれている部分が、上から10行目のあたりにあると思います。この部分が<title>タグの出力を制御している部分になります。この記述を

<title><% if:extra_title %><% extra_title %>: <% /if %><% blog.title %></title>

このように書き換えて保存します(絶対にバックアップは撮っておいて下さい)。

6、デザイン→HTMLを再び選択して、現在、「デフォルトHTML」となっているチェックボックスを、先ほど保存した「カスタマイズ」を適応して保存します。

この画像の場所をクリックです。これで変更が完了です!ブログのエントリー記事を見て見てください。サイトのタイトルとエントリーのタイトルが入れ替わっていれば成功です。

他にも、Seesaaブログは色々なカスタマイズが可能です。広告もほぼ全てのものを非表示にすることも可能ですので、壊さない範囲で色々といじくってみてください(笑)

タグ


2009 年 11 月 13 日 | コメント/トラックバック(0)|

カテゴリー:Tips てるよし メモ 未分類

どこが読まれているかが読める便利ツール User Heat(ヒートマップ・ツール)

http://userheat.com/

Webサイトの記事がどう読まれているのか?このツールは、訪問者が、Webのページのどこの段落を注目して読んでいるのか」と「どの場所がクリックされているかを調べて、その調査結果を共有するシステムです。

基本的に人間の目線は、「F字型」に動くと言われていますが、全てのサイトで本当にそうなっているのか?また、そうだとしてもサイトごとに個性もあり、それぞれが多少違う動きをしているはずです。そんな疑問を一発解消!超便利ツールをご紹介いたします。

このツールを使えば、どの部分がクリックされているのかやマウスカーソルの動き、よく読まれている場所を一発網羅。Webサイトの運営に必ず役に立つツールと言えるでしょう。ホームページへJavascriptによるタグを貼るだけで実装できる仕組みとなりますので、この機会に是非!TOPページだけでなく、タグを貼ったページ分、解析が出来るようです。

http://userheat.com/
User Heat : どこが読まれているか見える!無料ヒートマップ・ツール

タグ

IE6で透過PNGを背景にした場合にリンクが効かなくなる不都合

IE6でie7.jsを使った際、透過PNGを背景にするとリンクが効かなくなるという問題がありまして、その解決方法をご紹介いたします。方法はいたって簡単!透過PNGを背景にしている要素のa(アンカー)タグに、position:relativeを追加すると解決します。微妙に困る仕様ですが、それを差し引いても便利なie7は偉大です。!

タグ


IE6で透過PNGを表示する方法

すでに激しく既出ですが、現在最も簡単でお手軽である、ie7-jsを使用する方法をご紹介いたします。

1、まずは透過PNGを作成します。Fireworksで作成する場合、背景を何も無い状態(透明)にし、保存形式をPNG32として画像を保存します。

2、ここが肝心。Google コードのie7-jsをサイトに読み込みます。これは直接Googleから読み込んでくることになります。DLしてサーバに置くことも可能。下記ソースを<head></head>内に記述します。現在のバージョンは2.0(beta)なので、そのURLを。こちらはこまめに本サイトをみてバージョンアップのチェックが必要ですね。

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE7.js" type="text/javascript"></script>
<![endif]-->

3、利用したい透過pngに xxx-trans.png という風に、名前の後ろに-trans.png をつけることで、その透過pngをIE6で使うようにすることができます。画像の名前がsample.pngであれば、sample-trans.pngといった感じの命名ルールとなります。

以上です。設置も非常にカンタンなので、今のところの一番のオススメでございます。

タグ


画像もHTMLもOKな軽量Lightboxライブラリ Floatbox

http://randomous.com/floatbox/home

よく見かける、画像やリンクをクリックでぐにょーんとなって、ばーんと出るあの仕組み。LightBoxのライブラリである「Floatbox」を忘れちゃいけません。今回はこのスクリプトを使ってHTMLやURL先を表示させる方法をご紹介します。

使い方はカンタン。まずは上記サイトよりスクリプトをダウンロードしてきます。

http://randomous.com/floatbox/download

ダウンロード後、解凍した中身から

floatbox.cssとfloatbox.jsを組み込みたいHTMLと同じディレクトリに持ってきます。(パスは適当に変更)。

<head></head>タグの間に下記のスクリプトを入れます。

<link type="text/css" rel="stylesheet" href="floatbox.css" />
<script type="text/javascript" src="floatbox.js"></script>

リンクさせたいテキスト(または画像)に下記のようにリンクを設定します。

<a href="text.html" rel="iframe" rev="width: 640px; height: 480px">サンプルリンク</a>

以上です。簡単な仕組みでちょっと一工夫。サイトにスパイスを加えましょう。

参考:http://herrkf.com/webtech/static/080701-floatbox/
Web技術 Input/Output

タグ


2009 年 10 月 16 日 | コメント/トラックバック(0)|

カテゴリー:Tips Web全般 てるよし

このページの先頭へ

イメージ画像