2017年03月01日

黄金のトカゲ

背景画像とプロフィール画像を変えてみた。
10年以上前、ここによし無き事など投稿していたころにカスタマイズしたテンプレの画像を変えたのだ。
あの頃はテンプレ改造するの面白くて知識がないなりに、夜中まで作業していたけど、今はもうそんな情熱がなくなって、昔のものの画像入れ替えただけで満足してしまった。
懐かしいなあ。

この画像に写っているのは、この間見つけたトカゲのブローチ。
キラキラしていて可愛いので手に入れちゃった。
コインは50年前に鋳造されたオーストラリアのコインである。
seesaa_profile_icon243.png

2010年05月25日

カテゴリーのツリー化

ネット上でいろいろ検索をしていたところ、記事カテゴリーをツリー化する方法について書いてる人がいらっしゃった。
ツリー化は見た目が良いので早速取り入れてみちゃおうかな、などと支度にかかる。

参考にしたのはこちらのサイトさん。
Lc-Factory@Seesaaブログ:Lc.ツリーカテゴリー(for Seesaa)を配布です。

遣り方はリンク先記事にもあるとおり、デザイン>コンテンツを開いてカテゴリの数を100にセットして保存してから、同じくコンテンツHTML編集を開いて、そこに書いてあるソースを全部削除し、記事内にあるソースを貼り付けるだけ。
記事カテゴリを追加するときには、まずメインカテゴリー名、全角スペースでひとつ空けてからサブカテゴリー名を書くという風にしておく。
JavaScriptで最初アクセスしたときにはツリーが開いた状態で表示される。

これで少しずつカテゴリを整理してゆかなくては。
それにしても、本当のところ一番欲しいのがマルチカテゴリにする方法である。少し検索してみたが、該当する記事は見当たらない。
できないのかなあ。もう少し根気よく探してみるか。

2010年05月18日

Seesaaカスタマイズをまたぼちぼちと

前回までのカスタマイズ記事
久々にブログをカスタマイズ(CSS)
ブログカスタマイズ(html)

まあほぼいいかな、と思っていたカスタマイズだがネットを歩き回っているうちに、あ、これもやりたいなと思うカスタマイズを見つけた。
えのさんのブログとアフィリエイトとSEOの基礎知識:Seesaaブログでこのページのトップへをいれる
要するにページの一番下へいったときに、頭のほうへ戻るリンクをつくること。
リンク先の参考記事ではメインに自由形式コンテンツを挿入して書いたタグを入れるようにしているが、私はフッターに入れた。
<Div Class="tlink"><A Href="#">このページのトップへ ▲</A></Div>

あとはスタイルシートで自分のお好みにレイアウトするだけ。
私の書いたもの
/*ページトップへもどる*/
.tlink{
text-align:right;
font-size:12px;
padding:5px 5px 5px 10px;
}

いまだにきちんとした仕組みがわからないままの記述なのでわかるひとが見るとすごくおかしいかもしれないが、自分の覚書ということで。
ほほ、言い訳がおおいですな。

2010年05月08日

ブログカスタマイズ(html)

デザインのことは昨日の記事の通り。デザインも変えたついでに中身もカスタマイズしてやろうと検索して見つけたサイトを参考に、以下6点についての変更を行なった。
  • タイトル表示を最適化する
  • METAタグdescriptionの最適化
  • 記事の個別編集を可能にする
  • カテゴリー内の新着記事をリストアップ表示
  • 見出しタグの最適化
  • トピックパス(ぱんくずリスト)の作成

以下、参考記事のリンクをそれぞれはっておくので、詳しいカスタマイズ方法はそちらを参照に。

タイトル表示を最適化する

参考記事 Designworks:seesaa カスタマイズ-タイトル表示を最適化する方法
seesaaではどんな記事でも"ブログタイトル:記事タイトル"の形になってるので、この順番を"記事タイトル:ブログタイトル"とした。

METAタグdescriptionの最適化

参考記事 Designworks:Seesaa カスタマイズ-METAタグ「description」の最適化
descriptionとは検索の際、サイトの説明文とされる部分だがseesaaではどんな記事でも「ブログ設定のブログ説明欄」に入れた文章になってしまうそうなので、これを「記事のタイトル(カテゴリページではカテゴリタイトル)+ブログ説明+ブログタイトル」に直す。

記事の個別編集を可能にする

参考記事 Designworks:seesaa カスタマイズ-記事個別編集を可能にする。
seesaaではブログ記事から直接編集画面へ飛ぶことができないので、これを追加。記事一番下の投稿者やコメントなどの情報がある行に表示させている。

カテゴリー内の新着記事をリストアップ表示

参考記事 Designworks:seesaa カスタマイズ カテゴリー内の新着記事をリストアップ
各カテゴリーのページの先頭に、カテゴリー新着記事一覧リンクを表示させる。タイトルが一目でわかるので見やすい。

見出しタグの最適化

参考記事 Designworks:適切な見出しタグをつけてSEO対策
seesaaではなぜか記事日付がh2、記事タイトルがh3に設定されてる。日付のhタグをはずし、記事タイトルをh2になるように変更。
これは変更したあとCSSも変更を加えておかないと表示がおかしくなるので注意。本来h2{}内だった内容をdata{}内へ移動、「h3」のタグを「h2」に変更すること。

トピックパス(ぱんくずリスト)の作成

参考記事 ブログカスタマイズ:トピックパス(パンくずリスト)の作成2
TOP>カテゴリー(過去ログ)>記事名 という表示をさせるのだが、先ほどカテゴリ新着一覧のリストアップ表示を行なった際に、そのページではカテゴリ名が頭に表示されてるので、この表示は個別記事と過去ログページだけにつけることにした。
従って、参考記事にあるように一括で行なうのではなく、
<% if:page_name eq 'article' -%>(記事設定部分)
         ▼
(<% /if -%>の一つ上にタグ記入)
<% /if -%>

<% if:archive_page_name eq 'month' -%>(過去ログ設定部分)
         ▼
(<% /if -%>の一つ上にタグ記入)
<% /if -%>

というように別々に設定した。

2010年05月07日

久々にブログをカスタマイズ(CSS)

ここしばらくはあまり情熱もなくて、seesaaのテンプレをそのまま使っていたりしたが、3カラムを使い出してからどうもすっきりしないので、久々にカスタマイズをした。
覚書として記事にしておく。今回はスタイルシート。
seesaa規定のテンプレに好ましいのが見つからなかったので、ネット上で探してきた。

小粋空間:Seesaaブログテンプレート

こちらのテンプレートは1つだけだが、htmlの一行を書き換えるだけでカラムの変更ができる。
私はそのままデフォルトの3カラムを利用した。
ここのテンプレートはhtmlとスタイルシートの2種類。これをコピペして、htmlは デザイン>HTMLへいって、新しい項目を追加、そこに貼り付ける。スタイルシートは デザイン>デザイン一覧から3カラムのテンプレを適当に一つ追加して、そのCSSを消して、コピペしてきたものを貼り付ける。
あとは自分の好きなように変更をするだけ。
picture.jpg
変えた所はヘッダーの高さを広げて画像を入れたことと、ブログタイトルのフォントを変えたこと、記事の見出しにボタン画像を入れたことくらいしかやってないので、たいして手を加えてはいない。
ヘッダーについては赤い部分を挿入しただけ。
/* タイトルバナー */
#banner {
Height:120px;
padding: 15px;
border-bottom: 1px solid #666699;
color: #999999;
background: #8fabbe;
background-position: right top;
background-repeat: no-repeat;
background-image: url("画像のurl");
text-align: left;

}

#banner a,
#banner a:link,
#banner a:visited {
color: #ffffff;
font-size: 28px;
font-family:HGP創英角ポップ体,fantasy;
text-decoration: none;
}
#banner a:hover {}
#banner a:active {}


エントリータイトルについてはタイトル文字の指定部分にボタン画像のurlを背景として指定し、あと文字が重ならないようにpaddingを決めた。

デザインが決まったところで、内容の細かいカスタマイズも行なったのだが、それは次回に。
タグ:CSS Seesaa

2008年03月29日

CSSカスタマイズ

他の自サイトでやってたCSSのカスタマイズがなぜか面白くて夢中になってしまった。そのサイトは濃い緑を背景色にしてるのだが、そちらを見てこのブログにくると白っぽい背景が目につきささるような心地になってきた。そこでついでなのでここもカスタマイズしてしまおうと決心。とはいえ、1から作るのは難しいので、テンプレを利用し、色を変えただけなのだが。
seesaagaikoku.JPG
(↑以前photolibraryでツールを使い作成したテンプレだが、これを土台にした)

そして、出来上がったのが下の画像のものである。
picture.jpg
自分としては極力色味を緑系統にして統一感をだそうという試みではあったが、人に見てもらったら、リンク色が背景と似たような色でみずらいといわれてしまった。
なかなかデザインというのは難しいものだね。

あー、こんなことばっかりやってて本読むのが進まない。

タグ:CSS Seesaa

2007年10月08日

テンプレ変えてみた

秋もたけなわ。今までシャークな画像のテンプレを使っていたのだが、
kakure0706.jpg
これは夏っぽいので少し無難なデザインへ変えることにした。

今回はこんな感じ
seesaagaikoku.JPG
これもフォトライブラリーのテンプレ作成機能で作ったもの。

フォトライブラリーBlogテンプレート
タグ:Seesaa CSS

2007年06月22日

写真素材[フォトライブラリー]でつくれるCSS

Seesaaからのお知らせブログで今日こういう記事がアップされていた。
無料写真素材からブログデザインを作成しよう!

これは写真素材[フォトライブラリー]というサイトとSeesaaが提携して、提供された写真素材を使ってCSSの自動生成をしてくれるというサービスである。
http://www.photolibrary.jp/service/blog_template.html
こういってはなんだがSeesaaのテンプレというのはあまり素敵だと思うようなものがいまひとつ見つからない(失礼)
そこで試しに作成してみた。
意外と気に入ったのでこれをしばらく使ってみることにする。
またテンプレを変えたときに備えてキャプチャ画像をアップしておくか。
kakure0706.jpg
タグ:CSS Seesaa

2006年12月20日

テンプレを変える

このブログ、以前は左サイドバーのデザインにしていたのだが、chobiの掲示板やらメールフォームの読み込みがあまり早くないため、肝心の記事がそれまでロードされないという難点があった。
そうは思っていても変えるのが面倒でそのまま使っていたのだが、今日、思い切って変えてみた。
今度のテンプレは右サイドバーの「大航海」
http://blog.seesaa.jp/pages/sample/index?id=98
もう、カスタマイズする気力がなくてそのまま使うつもりで変更。
それでコンテンツも全部配置を直してから、まずトップページだけ再構築をかけて様子をみたら、あれ?サイドバーが下に落ちてしまい、途方にくれてしまった。
しばらく画面をみて気がついたのはchobiメールフォームのテキストエリアが異様なほど横に伸びてることだ。
あ、これが原因か。
CSSをみると、comments formの指定の下に、単純にtextareaとだけ書かれて指定されてる。
幅が300pxになってるのだが、それがメールフォームにまで適応されてしまってたのが原因。
そこで、comments textareaとその部分を書き直して解決。
改めて全部再構築をかけた。
それにしても、2年以上やってると記事の数が膨大になり、再構築にもえらく時間がかかるようになった。記事ページが33もあるのだ。
よくもまあ、書き散らしたものだと自分でも苦笑。
タグ:Seesaa

2006年02月25日

favicon(ファビコン)設置

ブラウザのアドレスバーの先頭やブックマーク、タブの頭にアイコンがついているが、このアイコンのことを「フェイバリットアイコン」通称「ファビコン」というのだそうである。
私はついこの間その名前を知った。このアイコンがオリジナルのものを使ってるサイトを見かけるのだが、実はどうやったらオリジナルのものを表示できるのか非常に気になっていたのだ。でもそれまで名前がわからなかったので調べようがなく諦めていたのを、今回名前を知ることができたので早速調べてこのブログに設置してみた。
私自身のメモとしてSeesaaブログにどう設置したのか書いておく。
長くなったので続きはこちらをどうぞ

2005年06月04日

へっぽこCSS改造

以前、このブログについて記事が下に落ちていることがある、という指摘をいただいたことがあった。現在使ってるテンプレは今はもう無き、花(黄)の画像を変えただけのものである。これはシンプルホワイトなどの古いテンプレと同じようなつくりになっていて、ウインドウの大きさに合わせて伸び縮みするタイプなのだが、ウインドウが小さくなると右側にあるメインや右サイドが下に落ちてしまうというデメリットがあった。
そこで、思い切って固定幅にしてしまった。
なに、簡単なことだ。
最近のテンプレはほとんど固定幅になってるのでそれのCSSからコピーして貼り付けただけ。
シンプルホワイト系にはcontainerというセレクタがない。それをcontent の前に追加したのである。

追加した定義
#container{
margin: 10px auto 0px auto;
padding:0px;
width:800px;
}


それからcontent(メイン)に定義されてた幅を73%という可変なものでなく550pxと固定した。
同様にlinks-left(左サイドバー)の幅を200pxと固定。

これでウインドウの幅を変えて試して見たところ下に落ちることはなくなった。ただし、固定されてるので幅を狭めると横スクロールが出てしまうのは仕方ないのであるが。
こんなもんでどうでしょ。
知識がないのでかなりへっぽこな解説になってしまった。
他の人から笑われるかも

2005年05月21日

クッキー四苦八苦

ここSeesaaBLOGではクッキーがついてないのでコメントつけるときにはいちいち名前など入力しなくてはならない。なんでSeesaaさんはクッキーをつけないのかよくわからないが、でもHTMLをいじれるのでもしかしたら
「好きにカスタマイズしてねw」
ということなのかもしれない。
実際、クッキーを機能させるタグを作った方を発見したので早速自分もカスタマイズしてみることにした。
つくった方はペルソナさんという方で
【Seesaaユーザー必見】コメントにクッキー(cookie)をという記事に載っている。

さて、昨日の夜、記事を見ながらコピペしてHTMLへ貼り付けてみたのだが、テストしてみるとなんだか機能しない。
むむむ、なぜだ?
おかしいぞ、と思いながらチェックしたんだがどこも不都合なところは見当たらない。
しばらく頭をひねってたのだがどうにもわからず、その日は寝ることにした。
で、今日。
もう一度記事を読み返してみると・・・・あった、間違いが。
タグを貼るところが間違ってたのだ。ばかだなあ、もう。
苦笑しながら直していざテスト。

・・・・あれ?まだ機能しないぞ?

もう一度調べてみたら間違って貼ってたタグを削除してなかったたらーっ(汗)
あー、どこまでうつけなんだかな。
直してまた書き込みテスト。

やっとうまくいった。

2004年10月05日

CSSカスタマイズその2

seesaaで2つ目のブログを作成してみた。
表サイトのコンテンツに使用する分。
またカスタマイズしてみた。

まずえらんだテンプレはノート。
両端を空けて真ん中に記事がくるようにしたかったので
その形になってるテンプレをえらんだわけだ。
どうなってるのか最初よくわからなかったが
いじくってるうちにどうやら固定幅にしてうえから背景画像を載せてるらしいことに気がついた。
そこでためしにその幅の壁紙を貼ってみたらばっちり変わったよ。
でもここに固定背景用タグを貼ってみたが固定されてないな。
どうしようかなー
じゃ、最初のbodyに固定幅と同じ大きさの真ん中に固定したらどうだろう
やってみたらばっちりだ。

そしてまた文字の色などとちょこちょこと変えた
できたのが
↓↓コレですよ↓↓
http://riana.seesaa.net

ほんとはもっと文字を大きくしたかったのだが
下手に大きくすると文字が重なる恐れがあり断念。

ところで話は変わるけどここ「隠れメタル」では半角文字が太字になってしまう。
CSS見てもどこ変えたら直るのかわからん
できれば直したいのだが・・・遊園地

2004年10月02日

CSSのカスタマイズ

こういう既製品のところを借りるとだいたいテンプレートが幾つか用意されている。
まあ、でも出来合いのものなので、いまいちお気に入りのものがないことのほうが多い。
HP作成に関してタグなどの知識があるほうとはいえないが
せっかくカスタマイズできるのだから、と、ここも解る範囲で少し手直ししてみた。
その様子を少し書きたい。
決して書くネタがもう尽きたわけではない。

まず、選んだのは黄(花)のテンプレート。
文字の色とか並べ方がまずまずだったのでこれを選んだ。
これでいまいちだったのは背景の花。
これさえ変えたらまあまあすきなデザインなので素材やさんへ行って背景ゲット。
そこにあった固定背景用のタグをいただいてCSSに貼り付けた。
一番うえのbodyでくくってあるbackgroundの所を変えたわけだね。

次はタイトル。
もともとのテンプレの文字だとなんかタイトルが目立たない感じがするのでもっと大きくしたかったのだがやり方がよくわからなかった。
で、「ブログの設定」でのタイトル欄にタグを直接打ち込んだ。
確かに変わった。
しかし、これではブラウザのタイトル欄にタグが載ってしまうじゃないかちっ(怒った顔)
どうしたものか・・・
改めてCSSを見てみる・・・・お、ひょっとしてこのh1というのがタイトルか?
ためしにfont-sizeを変えてみたらやっぱりそうだ。
ちゅーことでついでに字体も変えてみた。
font-familyという所がそうだ。

あとコメント欄が白背景で透過してなかったので色指定を解除して背景の「足元注意」が見えるようにした。

・・・以上、カスタマイズ報告。
あまり改造してないけどね。
だって、それ以外の所は正直いうと
わからないっす台風