カテゴリー「カスタマイズ」の55件の記事

2007/04/21

デザイン変更

左サイドバーをfloat:rightを使って一番右に持ってきてサイドバーを右2列に、更にその2列のmargin-topにマイナス値を設定して表示位置を上に上げる、というかなり強引なレイアウトにしてみました^^;
こういうのってCSS的にアリなんでしょうか?ちょっと不安…。
それ以外の色の設定などは前回のデザインと同じ。
背景も写真を右下に置いただけであとは白メインなのでパッと見はシンプルなデザインかも。

 

背景のフランス菊の写真は「ミントblue」さんからお借りしました。
いつもありがとうございます(^^)

| | コメント (4) | トラックバック (0)

2007/04/12

記事下部に表示される「同一カテゴリー内タイトル」部分をカスタマイズ

4月10日からココログで、固定リンクページの記事下に同一カテゴリーの過去記事5件が表示されるようになった。

記事下部に同じカテゴリの記事タイトルが表示可能に

早速設定してみたら、やけに昔の記事が載ってくる。
もう一度説明を読んでみたところ、過去記事は「作成日」ではなく、「更新日」が新しい順に掲載される、とのこと。
つまりずっと昔の記事でも何らかの理由があって更新(再保存)をすることで掲載されるわけだ。
補足したり、修正した記事を目立たせることが出来るし、読んで貰いたい記事は定期的に再保存すれば常に上位に表示できるので使い方を工夫すればアクセスアップを期待できるかも。

ただ、記事本文が短いものだとどちらが本編か判らなくなりそうだし(例えばこの前の記事とか)、たくさんカテゴリーを設定している場合表示がすごく長くなってしまってちょっと邪魔かも。
(私の場合、通常1~2個、最大でも3つくらい。この程度なら許容範囲かな?)

デフォルトのままだと表示があまり目立たないので、KOROPPYさんのカスタマイズを参考にさせて頂いて私もCSSで調整してみた。

設定したCSSは次の通り。

.entry-recent-posts{
height:190px;/*全体の高さ*/
background-color:#ffffff;/*背景色*/
border:1px solid #768f10;/*枠線*/
padding: 5px; /*枠線の内側余白*/
}

.date-header
{
font-weight:bold;/*タイトル文字の太さ*/
padding-left:30px;/*タイトル文字の位置*/
}

.entry-recent-posts li{
background-image:url(画像のアドレス);/*リスト行頭の画像*/
background-position: left;/*画像の位置*/
background-repeat:no-repeat;/*画像の繰り返し*/
padding-left:15px;/*リスト開始位置*/
text-align:middle;/*画像に対する文字の位置*/
}

こうやって書くとパパパッと出来たみたいに見えるけど、実はちゃんと書いてるはずなのに思ったように反映してくれなくてかなり長い時間「う~ん…?」と悩みつつ設定→確認を繰り返していた。
(特にリストマークのところ)
セレクタの「.entry-recent-posts」の最後の『s』が抜けていたことに気が付いたのは1時間以上経ってからでした…(泣)
そりゃあ、反映しないわけだ^^;

KOROPPYさんの該当記事にトラックバックさせて頂きました。

| | コメント (4) | トラックバック (1)

2007/04/07

デザイン変更:菜の花

気に入っていた桜のデザインですが、季節もそろそろ終わりなので「菜の花」に変更しました。
(この時期だと菜の花でもちょっと遅いかな?^^;)

菜の花

背景の菜の花の写真は「||| 空色地図 |||」さんからお借りしました。
柔らかな光を浴びた緑と黄色のコントラストが春らしくて爽やかです。

この菜の花もそうですが、春の花は黄色が多いですよね。
これはみんなが感じることみたい。
多分、自然の中で植物が生きるための進化の結果なのでしょうけど、それが人間の脳にもインプットされて「緑+黄色=春」という図式が出来上がっているような気がします。
それから、やはりこの菜の花を始め、春の野菜はちょっと苦みがあるものが多くて、しかもそれこそが「美味しい」と感じる部分だというのも興味深いです。
「苦み」って普通は「身体に悪いもの」という判断基準だと思うけど、この春野菜の微かな「苦み」「えぐみ」は逆に「身体を浄化してくれる」というイメージがあるのも不思議です。

デザインで工夫したのは下記の2点。
1.左サイドバーと記事部分に画像が掛かったときに文字が読みにくくならないように、背景に疑似半透明用の画像を敷いた
※エントリー部分は、この後「半透明」から「背景色:白」に変更しました。
2.左サイドバーはトップの位置を少し下げた

CSSはこんな感じです↓。参考まで。

/*記事表示欄の設定*/
.entry-body{
background-image:url(画像のアドレス);/*背景画像の指定*/
background-repeat : repeat ;/*背景画像繰り返し*/
border:1px solid #768f10;/*枠線*/
padding: 5px;/*枠線から本文までの余白*/
}

/*左サイドバーの設定*/
#left{
background-image:url(画像のアドレス);/*背景画像の指定*/
background-repeat : repeat ;/*背景画像繰り返し*/
margin-top:60px;/*表示開始位置下げ*/
}

| | コメント (1) | トラックバック (0)

2007/03/25

デザイン変更:桜

使える期間が限定されてしまうのでどうしようか迷ったのですが、今年も業務多忙でお花見が出来そうにないので、ブログだけでも…と思い桜のデザインにしてみました。

透き通った青空に映えるきれいな桜の写真はいつもお世話になっている「・・・NOION・・・」さんからお借りしました。
他の装飾は殆どありません。
写真の美しさを楽しんで下さい。

| | コメント (2) | トラックバック (0)

2007/03/24

ココログ:記事タイトルに付加されたリンク下線の消し方

3月22日、ココログの有料版(ベーシック/プラス/プロ)のバージョンアップが実施された。
有料版ユーザーにとって、このバージョンアップによって一番大きく変わったのは、

メインページ、日付ベースのバックナンバー、カテゴリー別のバックナンバーに表示される記事のタイトルに固定リンクを追加しました。

「ココログベーシック/プラス/プロ アクセス解析メンテナンスのお知らせ」より

という部分だったと思う。

つまり、今までは記事のタイトルを表示していただけの部分が、上記で指定されている表示場所に限っては個別ページへのリンク(「固定リンク」)としての働きも持つようになった、ということ。
この仕様について私は以前から「そうなってたほうがいいなあ」という希望があったので、個人的には導入を歓迎している。
ただ、テキストがリンクになると表示のされ方が変化する、ということをもっとココログは意識するべきだったと思う。
単純にテキストにリンクが付加されるだけならまだしも、今まで何も表示されていなかった部分に急に意図しない下線が表示されるようになるのって見てる方にとってはけっこう違和感大きい。
(私も含め)「自分のブログの見え方」に拘っている管理人さんはすごく多いはず。
それなのにこうした変更についてただ「リンクが追加されました」だけで、デザイン的な部分に言及がないのはかなり不親切だなあ、という印象。
この仕様を導入して更にデザイン画面も変更するのだったら、ついでに「タイトル部分のリンク設定」もカスタム・テーマから簡単に設定できるような項目を追加すればいいのに…。

ということで、夕べやはりこの件で困惑していらしゃった涼さんのブログにもコメントを残してきたのだけれど、タイトル部分のリンク下線の消し方について。
(以下はカスタム・テンプレートを利用している場合の方法です)

管理画面にある「デザインの編集」から「カスタムCSSを編集」を開き、中のテキストボックスに

.content h3 a{
text-decoration: none;
}

と入力して保存→反映でOK。
これで下線が消えます。
下線が付いて困っている方は試してみて下さい。

ちなみにここは他の部分に設定してあるリンクのCSSが反映しているので、文字の下に点線が表示されるようにしてあります。
同じようにしたい場合は、

.content h3 a{
text-decoration: none;
border-bottom: 1px dashed #cccccc;
padding-bottom: 2px;
}
といった感じでどうぞ。
「border-bottom: 1px dashed #cccccc;」は線の太さ・種類・色、「padding-bottom: 2px;」は文字と線の間隔の設定です。
お好きなように変えて設定して下さい。

【'07/03/26 追記】
本日付けの「お知らせココログ」にこの件について機能追加予定である旨の報告が掲載された。

この機能変更により、現在のところ、デザインのカスタムテーマで記事タイトル色の変更はできませんが、近日中に色の指定ができるようにすることを検討しています。また、オリジナルテーマにつきましても、以前と同様の見た目になるような対応を行います。

「記事タイトルへの固定リンク追加につきまして」より

ココログにしては対応が早かったのはまあ評価するけど、導入は「いつ」と具体的な期日が書いてないのがちょっと気になる。
お知らせだけ出しておいて、延々待たせるということのないようにしてもらいたい。
ところでコレ、単純に「機能追加のお知らせ」であって「お詫び」ではないのね。
「別に悪いことしたわけじゃないし」ってスタンスなわけね、ふ~ん…。
(と、つい斜めから見てしまう^^;)

| | コメント (19) | トラックバック (1)

2007/02/24

「最近の記事」を日付別にツリー化してみた

『風柳亭-別館:書庫のある庵』さんで、サイドバーの「最近の記事」を日付別にツリー化するスクリプトが公開されていたので、早速試してみました。

【ココログ】『最近の記事』を日付別ツリー表示するスクリプト

設定方法は、風柳さんのブログにあるスクリプトをコピーしてサイドバーに貼り付けるだけ。簡単です(^^)
(但し、これは事前に「コメントのツリー化」をしてあることが前提。コメントがツリーになっていない場合は、あといくつか手順が追加されます。この手順も風柳さんの記事でちゃんとフォローされてます)

風柳さん、便利なスクリプト提供ありがとうございました♪

ついでに新着記事に「new」のマークが付くようにしてみました。
3日(72時間)以内に投稿した記事のトップに表示されます。
(このカスタマイズについても風柳さんのページに書いてあります)
ここの画像は「IMAGE」さんからお借りしました。
ありがとうございました(^^)

【追記】
下記の件について、風柳さんがスクリプトを修正して下さいました。
現在公開されているスクリプトでは、表示順(日付の降順/昇順、同じ日付に複数記事がある場合の降順/昇順)が任意で選択できます。
また、サイドバーのどの位置に置いても希望通りの表示になります。

※以下、もしかしたら私のブログだけの症状かもしれませんが、念のため。
最初、「最近の記事」より後ろにスクリプトを置いたら日付の表示が「古いものが上」になってしまったので、設置場所を「最近の記事」よりも前に変更してみたところ無事に「新しいものが上」(今の形)になりました。
表示順が思ったようにならなかったら、設置場所を少し変更してみるといいかもしれません。

| | コメント (4) | トラックバック (0)

2007/01/14

別館ブログ(FC2)のデザインを変更

本の感想の過去ログだけを置いている別館「*untitled message* annexe」のテンプレートを変更してみた。

前回「テンプレートを変更したよ」と書いたのは'05年の10月16日のこと。
シンプルなデザインだった前のテンプレートはかなり気に入っていて特に変える必要がなかったのでそのまま使っていたけどさすがにちょっと飽きてきていた。
更には、せっかくあれだけの数の共有テンプレートがあって、私も管理画面には気に入ったのをたくさんストックしてあるので「そろそろ変えてみるか」ということに。

新しいテンプレートはlovehelmさん作の「13th_lovely」。
もう随分前にダウンロードしたテンプレートなので、またしてもプラグイン非対応^^;
でもこのブログにはそんなにいろんな機能を付ける予定もないし、何よりこのテンプレの雰囲気がとてもステキなのでこれに決定。

今回変えるに当たって、カスタマイズも少々。

タイトル下に作家別インデックスヘのリンクを設定
前のテンプレートでは、記事の一番上に設置されたフリースペースに置いていたんだけど今回はそういうスペースがなかったのでタイトル部分にメニュー的にリンクを設置。
(フリースペースは自分で作れば出来そうだったけど、そこまで調べる気力はなかった^^;)

アーカイブ(月別、カテゴリー)をプルダウン化
月別のアーカイブは前のテンプレでもプルダウンにしていたので、今回はカテゴリーも同様にしてみた。
設置方法は「はじめてのFC2ブログカスタマイズ」からスクリプトコードを拝借。

「最近のトラックバック」表示方法の変更
サイドバーへの表示方法が、トラックバック送信元のブログ名だけだったので相手の記事タイトルも表示出来るように変更。
これは前のテンプレートがそういう表示方法だったので、その部分のHTMLをそのままコピーして置き換え。

前/次エントリーへのナビリンクの設置
これが一番面倒臭かったかな。
FC2ではテンプレートの中で「ブロック変数」というのを使うことで、いろんな項目を設定できるんだけどココログにはないものなのでどうにも使い方がよく判らなくて出来上がるまでにかなり悩んだ。
でも「FC2ブログユーザーフォーラム」のトピックなどを検索して何とか無事設置。
出来てみれば「ああ、なるほど。こういうことなのね~」と理解できるから、やはり「自力でやる」というのはけっこう重要である。

ブログ内検索の追加
これも前のテンプレートのソースをコピペで設置。

以上がHTML部分。
CSSは「リンクの装飾」「引用」「行間の設定」「フォントの種類」など細かいところをいくつか。

前回のときはまだココログのカスタマイズでCSSがすこ~しだけ判ってきた程度の頃だったのであまりにも自由すぎるFC2のカスタマイズは敷居が高すぎて付いていけなかったけど、今回はそのときよりはちょっと理解度が深まって「こうしたい」という希望と自分の出来ることがリンクしてきた感じ。
ここ1年ほどカスタマイズのブログ開設などを通してCSSの記述を試したり、確認したりしているうちに少しは知識が付いてきたと見える(笑)
(最近「FC2ブログフォーラム」もほぼ毎日覗いて自習してるし)
判ってくれば、HTMLを書き換えることでデザインや表示内容、方法を大きく変更できるFC2はやはり魅力的。
特にナビゲーション(「前」または「次」のページやエントリーへの誘導とか、エントリーの表示方法とか)部分が自分が好きなように変更できるのはすごく便利。
さすがに1から自分でデザインしようとは思わないけど、カスタマイズ用のテンプレートを拾ってきてそれを基に自分の思い通りに作ってみるのもいいかな~なんて大きな夢を見たりして(笑)

これからはもうちょっとこっちのブログのデザインも触ってみるようにしよう。
次はプラグイン対応のテンプレートにしてみようっと。

| | コメント (0) | トラックバック (0)

2006/12/03

デザイン変更<クリスマス>

…と言っても見てお判りの通り、去年作ったデザインの使い回しです^^;

この間、PC内の画像の整理をしていたらこのタイトル画像を久々に見つけて、「けっこうよく出来てる(自画自賛^^;)から今年もこれでいっか~」ということに。
壁紙やラインも新しく選ぶのは大変なので、もう全面使い回しで行こう、と決めました。

但し、引用と個々のエントリーにちょっとだけ追加。
一番下の部分に別の背景画像を「横リピート」で敷いてます。
白い切り絵のような森のシルエット画像なので、その下(body)の壁紙と合わせると森に雪が降ってるみたいになりました。

タイトル画像は「A.SLASH」さん、その他の素材(壁紙、ライン)は「季節素材 雲水亭」さんの作品です。
(追加した壁紙も「雲水亭」さんからです)
ありがとうございました。

そういえば、「ココログデザイン」にもクリスマス仕様のテンプレートがいくつかありますね。
ココログのリッチテンプレートってあまりピンと来るものがないのですが、最近追加された『クリスマスリース』のテンプレートは、ココログにしては珍しく^^;シンプルで、文字が読みやすくて、しかも季節感がちゃんと取り入れられたいいテンプレートだな~と思います。
季節限定ものなのでお手軽に雰囲気を変えるにはちょうどいいのではないかと思います。
『雪の楽団』たんじあきこさんのイラストはすごく可愛いけどクリスマスとは微妙に違う感じ…。
その分、もうちょっと長く「冬用」として使えるかも。

| | コメント (2) | トラックバック (0)

2006/08/27

壁紙を変更しました<コスモス>

昨日、今日と涼しかったのでなんとなく気分は「秋モード」。
思わずデザイン(壁紙)を変えてみました。
(明日からまた暑くなったりして…^^;)

コスモスの写真素材はいつもお世話になっている「NOION」さんからお借りしました。
大胆な構図と透けるような繊細な色合いが美しいです(^^)

エントリー欄に透過っぽい(笑)壁紙を敷いておくと、下に画像を入れても文字がちゃんと読めるので使い易いです。
その代わりサイドバー部分はちょっと読みにくいかな~^^;
※この部分のカスタマイズについては下記のページで解説しています。
※興味があったら読んでみて下さい。
第29回:半透明フィルター(CSS)を使わずに、画像を半透明っぽくみせてみよう(「初めてのココログ・カスタマイズ」より)

その他、壁紙の色味に合わせてタイトル文字(画像)と、記事タイトルや日付の文字色や枠線あたりをちょっと変更しました。

| | コメント (0) | トラックバック (0)

2006/05/09

デザイン変更しました<Fly away…>

どこまでも遠くまで続いていきそうな草原と空、そしてそこを横切る一羽の燕が印象的な写真です。

flyaway

いつもお世話になっている写真素材サイト「NOION」さんで去年の秋くらい (もっと前だったかな?)に見つけて、ずぅっと「いつか使うぞ!」とキープして置いたお気に入りの一枚です。
今の季節に合うかな~と思って、満を持して(笑)使ってみました。
(残念ながら現在は配布されていないようです)

今回のデザインで工夫したのは、 ちょうど文字が載る部分に燕がいたり画面下の緑の部分がけっこう濃い色だったりするので読みにくくなるのをどうしたら回避できるか、 というところ。
CSSで背景を半透明にする「filter: alpha(***);」とかっていうワザがあるのは知っていたのですが、いかんせんこれはIE専用。
それ以外のブラウザでは機能しないのはちょっとね~と思って、画像そのものの色を調整したりしていたのですが、先日ふと他のブラウザでも (多分)大丈夫な方法に気が付いたのでやってみたらなんとかいけそうだったので公開してみました。
(昨日「browsershots」 でチェックしてみたところ、Mac+safariではOKでした)
この方法についてはカスタマイズのほうのブログで近いうちに説明記事を書く予定です。
(と、出し惜しみするほどのことでもないんですけどね。実は(笑))

背景以外はほとんど画像を使っていないのでシンプルに見えるかもしれませんが(そんなことない?^^;)、 今回もかなりCSSを足したり引いたりしています。
あまりにもいじりすぎているので自分でも「どこをどうしたらココがこうなったのか判らない…」という部分があったりして(笑)
使っているうちに不具合が出るかも知れませんので何かありましたらご連絡下さいませ。

背景画像以外の素材(サイドバーのアイコン)は「IMAGE」さんからお借りしました。

| | コメント (4) | トラックバック (0)

2006/04/09

デザイン変更しました<手帳>

Notebook_4

前回のデザインがページ全体に画像があるタイプだったので、反動なのか(笑)かなりシンプルなデザインに変更。
(といっても、CSSはかなりあちこちいじっていて自分でもわけが判らなくなっていたり^^;)
イメージとしては「新しい年度を迎えて気分一新頑張るぞ」って感じかな。
(実際のところはともかく「気分」だけでも(笑))

最初、背景画像をスクロール有りにしたら、下の方に来るとホントに何もない寂しい画面になってしまったので固定に変更してみた。
右サイドバーにかかるとちょっと邪魔かな~?

<'06/04/10 追記>
この後また調整して、結局body部分にはチェック柄の壁紙(「web*citron」さんからお借りしました♪)を置いて、手帳の写真はcontainer部分に移動、スクロールに設定し直した。
これだったら、右サイドバーが写真で隠れることがないので見易いかと。
また、サイドバーのタイトルを、記事タイトルと同じような付箋紙風に変更。
更に手帳っぽさアップです(笑)

「カスタムCSS」が編集出来るようになったので、変更はもっと楽かと思ったらやっぱりけっこう時間がかかった。
でも、デザインのコピー(マイリストの表示項目も含めて)が出来るのはありがたい。
基本形が決まれば、あとはそれを元に画像を差し替えるだけで済みそう。
といっても、その画像を探すのがまた一苦労なんだけどね。

今回の素材は

  • 背景、引用部分、コメント部分の写真
    「ミントblue」さん
  • サイドバーのアイコン、記事の区切り用のラインなど
    「IMAGE」さん

からお借りしました。
ありがとうございました。

| | コメント (0) | トラックバック (0)

2006/03/21

CGI設置に惨敗…(泣)

フリーの方のブログにゲストブックみたいなのがあったらいいかなあと思って、 それ用のCGIを設置してみようとチャレンジしていたんだけど… 2時間くらい格闘してもまともに設置出来ず結局諦めてしまった^^;
設置しようと思ったスペースは、放置中(笑)の@homepageのCGIスペースなので間違いなければアップできるはずだったんだけど…。

もう最初のところからよく判らない。
CGIファイルの中身を自分のサーバーに合わせて書き換えろ、 というのだけれどその書き換え方が合っているのかどうか不安なまま取りあえずそれらしい感じに書き換え。

で、それをCGIスペースにアップロードするんだけど…これがまた、何をどこに入れるのか散々迷う。
お借りしたCGIファイルにはちゃんと「read me」ファイルが入っていて、ディレクトリの並び方もちゃんと書いてあるんだけど… それを見ても合っているのかどうか判らない状態^^;

そして次のパーミッションの変更とかいうのも判ったような判らないような…???

一旦(不安ながらも)全部設定が終わったので、ページにアクセスしようと思ったら「ページが存在しません」…。
ガガ~ン…。
このあと何度か各段階をやり直してみて「ページが表示されました」までは行くようになったんだけど、 そこには何もない真っ白なページがあるばかり。

結局、その後2時間くらいやってもダメだったので諦めてしまった(T_T)

もうちょっと集中して基礎知識のサイトを読んだりすれば違うんだろうけど…今日はそこまで集中力がないのでパス。
それにどうしても今すぐ必要なものでもないし。
また時間と気持ちに余裕があるときに再チャレンジしよう。

それにしても、インターネット周りにはいろんな技術があるんだなあ…。

| | コメント (6) | トラックバック (0)

2006/03/18

デザイン変更しました<れんげ>

やっぱり春は「ピンク」のイメージ。
時期的に「桜」も考えたのですが当たり前すぎるかな~と思って他のを探した結果、あまり使っている人がいない「れんげ(蓮華)」 を選んでみました。
この間までが(寒いのに何故か(笑))寒色だったので、一気に雰囲気が変わりました。
(ちょっと可愛らし過ぎるかも?^^;)

蓮華

↑クリックで拡大します。

今回は久々に背景一面の大きな写真素材を使いました。
お借りしたのはいつもの「NOION」 さんから。
手前の方だけしか映っていないのにふんわりと焦点をぼかしたことで、どこまでも続くピンクのじゅうたんを想像させてくれます。
蓮華はやっぱり少し咲いているよりも一面にブワ~ッとピンクの花が広がっているのが素敵ですよね。
最近は見る機会もなくなりましたが、 小さい頃母の実家に行くと近所に畑一面に蓮華が咲いている場所があってそこを走ったり寝っ転がったりするのが大好きでした。
重なる文字色との調整のため、元の画像から若干色を飛ばしています。

タイトルバナーと記事の区切り線の画像は「雲水亭」さんから。
「れんげ」にしようと決めたのは、この画像があったからです。
とてもグラフィックとは思えない精密さ。
蓮華草の可憐で、でも力強い感じがよく出ていますよね。

サイドバーのタイトル横に付けたピンクのテントウムシは 「webcitron」さんから。
何かもう一つポイントになるものを…と探していて発見。
ピンクの色味もちょうど合っていたのでお借りしてきました。
小さいのに存在感がある素材ですね。

素材をお借りしたサイト様、ありがとうございました。

| | コメント (4) | トラックバック (0)

2006/03/04

カレンダーを過去の日付に遷移出来るようにするスクリプトを発見!

ココログのカレンダーは何故か当月分しか表示してくれなくて、 殆どナビゲーションとしての役割を果たしてくれてないくせに場所ばっかり取ってハッキリ言って邪魔だった。
なのでここしばらくカレンダーはサイドバーから外していたんだけど…先日、「LONGER THAN FOREVER」さんでカレンダーを過去に遷移させることが出来るスクリプトを発見!

ココログのカスタマイズ 【カレンダー編(導入)】

実は見つけた後すぐに一度試してみたんだけどどうも上手く行かなくて、ちょうど忙しい時期だったのでその時は一旦諦めてしまっていた。
それからそのまましばらくクリップだけしておいたんだけど、さっきふと思い立って記事を読みつつ再度挑戦してみたのだ。

今回やり直したところ、どうやらスクリプトをアップロードする場所を勘違いしていたらしいことに気が付いた。
「LONGER THAN FOREVER」さんの解説にはちゃんと

利用しているブログのURL直下(http://*****.cocolog-nifty.com/*****/) にファイルをアップロードして下さい。

と書いてあるのに、私はhttp://*****.cocolog-nifty.com/ の下に設置してしまっていたのだ。
ここをもう一回やり直してみたら…出来た!
左サイドバーに設置したカレンダー(折り畳んであります)を見ると、年月表示の横に「≪」が付いているのが判るはず。
この「≪」を押すと、カレンダーが前月に変わる!
そうそう、こういうカレンダーが欲しかったんだよね~♪
しかもこれ、月が動くと記事自体もその月の記事に差し替わるみたい。
ということは月別バックナンバー的な役割もしてくれている、ということね。

難点は一度当月として表示されたカレンダーがスクリプトを読み込んでから表示が変わるので、ちょっとタイムラグがあることかな。
でも「LONGER THAN FOREVER」さんではそれについての回避策も合わせて提案して下さっていて、 私もこの方法で設置しなおしたら殆ど気にならなくなった。
しかも、この方法だとカレンダーが他のリストと同じに扱えるのでむしろ管理しやすいかも。
※スクリプトの設置場所は「サブタイトル」欄となっているけど、「マイリスト」への設置でも問題なく動くようです。

やっぱり出来る人は何でも自分で工夫出来ちゃうんだな~。
素晴らしいです♪

「LONGER THAN FOREVER」さん、ありがとうございました。
ありがたく使わせて頂きます。

| | コメント (9) | トラックバック (0)

2006/02/25

デザイン変更しました<blue cloth>

 素材サイト「ミントblue」 さんで配布されているタイトル用素材をお借りして、 それに合わせて背景とサイドバー及びエントリーのタイトル部分の画像を薄いブルーに変更しました。

blue_cloth
背景画像は 前の<梅>で使っていたのと同じタイプの色違いバージョン。
(提供元は「Simple Life」 さんです)
この壁紙素材はシンプルで使い易いけど、使うと全体がキュッと締まる感じでお気に入り♪
「何か他の素材を…」と思っていろいろ探してみたけど、結局この素材に戻って来てしまったという感じ。

全体的に一気に寒色になってしまったので少々寒い感じがするけど…デザイン的には気に入ったのでしばらくはこれで行きます。

「ミントblue」様、「Simple Life」様、 ありがとうございました♪

| | コメント (2) | トラックバック (0)

2006/02/14

掲示板&コメント欄の注意書きを設置

またカスタマイズ魂に火が点いております(笑)
昨日のメールフォームに引き続き、本日はサイドバーに掲示板を設置してみました。

掲示板の提供はメールフォームと同じ「Team Chobies」 さん。
こっちはデザインを選んで作成ボタンを押せばすぐに掲示板用のタグを発行してくれるのでメールフォームより更に簡単に借りられました。
ただ、デザインをカスタマイズするのはちょっと面倒…。
CSSで設定出来るらしいのですが、 どこが何と対応しているのかがなかなか見えてこないのでちょっと手を付けてすぐに挫折してしまいました^^;
で、ちょっと探しに行ったところ 「ブログパーツを探せ」の管理人satokotoさんがご自分でカスタマイズしたCSSファイルを公開して下さっていたので、 それをお借りして壁紙と文字色だけブログ本体に合わせてちょろっと変更してアップしてみました。

お気軽にお試し下さい。
こちらもメアドとURLは任意ですが、お名前だけは書いて下さいね。

<使い方>
「よむ/かく」ボタンをクリックすると別画面で書き込みフォームが開きますので、そこに入力してください。
(「アイコン」も使えますが…ちと微妙なセレクションかも^^;)
「送信」ボタンを押すとコメント内容が、入力フォームの下に表示されます。
また、ブログを再読込するとサイドバーにも表示されます。

このメールフォームと掲示板の設置に伴って、コメント欄への注意書き用のスクリプトを「facet-divers」 さんからお借りして表示してみました。
facetさん、いつも「痒いところに手が届く」スクリプト、ありがとうございます♪

コメント欄の設定を明示する (「facet-divers」)

サイドバーのスクリプトがすごく増えてしまったので、最近あまりチェックしてないし「track word」と内容がかぶっていた「Serch Word Cloud」を外したものの代わりに上記2つを追加してしまったので結局1つ増加してしまいました^^;
重くなりそうなのはなるべく後ろの方に置くようにしているのですが…動作に問題があるようでしたらご連絡下さい。

| | コメント (2) | トラックバック (0)

2006/02/13

サイドバーにメールフォームを設置

サイドバーにメールフォームを設置してみた。

ブログって記事ごとにコメントを頂けるのでWebサイトの掲示板より初めての方とでも交流し易いと私は思っていてそこが気に入っている反面、 記事に関係ない話題について書き込むところがないとちょっと不便…と感じるときも時々あった。
で、そんなときのために掲示板かメールフォームみたいなものを付けた方がいいのかな~とボンヤリ思っていた。

と言ってもそんなに差し迫っていたわけでもないのでしばらく放って置いたんだけど、 今日何となく気になったので探してみたらちょうどサイドバーに収まるメールフォームを発見。
設置も簡単そうだったので試しに借りてみた。

お借りしたのは「Team Chobies」 さんの「chobi(ちょび)メール」
登録画面にメールアドレスを入力して送信するとメールの返信が来て、 そこに書かれたURLにアクセスすると自分用のスクリプトのタグが入手出来る、という仕組み。
ココログの場合だったらそれをマイリストのメモ欄に貼り付けてサイドバーに設置すればOK。

基本のタグのままだと本文入力欄がちょっと狭かったので、マニュアルの説明に従って大きさを調整。
うちはサイドバーは幅200pxで設定してるんだけど、その場合"width(幅) =30"くらいでちょうどサイドバーの幅いっぱいになる感じ。
"height(高さ)"はお好みで。(私の場合は"10"にしてあります)

これで「ちょっと用があるんだけど、どこに書き込めばいいか判らない」とか「伝言があるんだけど、コメント欄には書きたくない」 とかいう要求に応えられたらいいんだけど。

ブログのご意見、ご感想などお待ちしています。
尚、ご利用の際はメールアドレス、URLは任意ですが、お名前だけは必ずお書き下さい。
(ブログ、またはWebサイトをお持ちの方は出来ればURLを書いていただきたいです。遊びに行きます♪)

※書き込み内容の確認画面はありませんのでご注意下さい。
※使ってみて不具合があるようだったら取り外す可能性もあります。

chobimail

ちなみに、メッセージが投稿されると最初に登録したメールアドレスにこんな件名のメールが送信されてきます。

| | コメント (4) | トラックバック (2)

2006/02/06

引用部分の背景に画像を入れてみる

デザインにあわせて引用部分にもちょっと一工夫。

タイトルで使ったのと同じ梅の花の写真を背景にしてみました。
タグはこんな感じです。

/*引用部分*/
blockquote {
background-image:url(画像のurl);
border:1px solid #990033;
margin:10px 15px;
padding: 10px; }

画像は元の写真を不透明度70%くらいの白のマスクで覆ってます。
画像だけ見るとかなり白いかなと思ったのですが、これでも上に文字を載せると「もしかしたらちょっと邪魔かも?」と心配になりますね。
元々全体的に白っぽい写真でもこんな感じなので、色つきの写真の場合はもっと色を飛ばさないとダメかも。
背景を使わなくても、線(border:の部分)の太さ、種類、色を変えるだけで随分雰囲気が変わりますので試してみて下さい。

| | コメント (0) | トラックバック (0)

2006/02/05

コメント欄で絵文字が使えるようにしてみた

KOROPPYさんが 「テンプレートをいじらずにコメント欄で絵文字を使う方法」で紹介しているスクリプトを、私も設置してみた。

殆どの部分をKOROPPYさんが記述して下さっているので、 私は画像をアップしてそのファイル名とurlを追加した後サイドバーに設置するだけ…なのに巧くいかないっ!
HTMLやCSSならなんとなく「ここが間違ってるかな」ってのが判るけど、スクリプトになるとまるで意味不明。
でもKOROPPYさんはもちろん他の方も成功しているので、違っているとしたら自分が修正したところだよね、やっぱり…(←当然です) と思いつつ一つ一つ当たって行ったところ…発見!
画像名を指定するところの「'」(シングルコーテーション)が一箇所だけ「"」(ダブルコーテーション)になってしまっていた。
こういうところにガサツさが出るのよね~^^;
ここを修正して再度読み込んだところ、無事設置完了。
テストもうまく行きました。

KOROPPYさん、スクリプトお借りします。
いつもありがとうございます(^^)

画像もKOROPPYさんと同じ「PEPPER」 さんの吹き出しシリーズを拝借。
これは私も大好きで、以前Webサイトに付けていた掲示板でも使っていた素材。
あの大きさなのにちゃんと存在感と意味があるのがスゴイと思う。
作成者さんのセンスに敬服します。

というわけでここのコメント欄でも絵文字が使えるようになりました。
使い方は入れたい場所で入れたい絵文字をクリックして頂けばOKです。
コメント欄、及び確認欄では、絵文字に付けた名前が文字で(「ハート」とか「汗」とか)表示されますが、 投稿していただくと画像に変換されるようになってます。
もし気に入りましたらご利用下さい。

| | コメント (5) | トラックバック (0)

2006/02/04

デザイン変更しました<梅>

     ume東京は今日も寒い一日でしたが、暦の上では「立春」 だというのでデザインをちょっと春っぽくしてみました。

タイトルの梅の花の写真は「Four seasons」 さんから。
本当は右下固定の背景として使えるもっと大きな写真だったのですが、何となくページの上に持ってきたいな~と思ったので「加工はご自由に」 という管理人さんのお言葉に甘えて上下を大きく切り取らせて頂いてタイトル画像にしてみました。

背景用には 「+++Simple Life+++」 さんで柔らかい色味のタイル柄画像をお借りしました。
通常の背景とともに、サイドバー、記事のタイトル部分にも設定してみました。

「Four seasons」さん、「+++Simple Life+++」さん、ありがとうございました。

サイドバー、記事のタイトルへの(背景)画像の挿入用タグは以下の通り。

/*エントリータイトルの画像*/
.content h3{
background-image:url(画像のurl);
padding:5px;
}

/*サイドバータイトルの画像*/
.sidebar h2{
background-image:url(画像のurl);
}

| | コメント (6) | トラックバック (0)

2006/01/20

デザイン変更しました<ニット>

前回替えたときに「多少長めに使える…云々」なんて書いたのに、 冬用に作ったデザインがまだ残っていたのでまた替えてしまいました^^;

nit白(アイボリー)の毛糸と木製の編み針だけという、 あまり色の変化のない写真なのに何故か暖かみを感じるのが不思議です。
こんな糸でケーブル編みのざっくりしたセーターなんか編むとよさそうですね。

久々に「NOION」 さんの写真素材を使わせて頂きました。
ありがとうございます♪
相変わらずシンプルだけどクッキリした印象の綺麗な写真が満載です。
春の新作がアップされるのが楽しみ(^^)

| | コメント (4) | トラックバック (0)

2005/12/25

タイトル画像変更しました<snowman>

クリスマスの次なのでお正月っぽくしようかと思っていたのですが、 またすぐに変えるのも大変なので^^;多少長めに使える冬素材を選んでみました。
(ちょっとだけ新年用のメッセージも入れたのでお正月“風”ということで(笑))

snowman

今回の画像もクリスマスのときと同じ「A.SLASH」 さんからお借りしました。
ありがとうございます(^^)
「BG IMAGE」のところにある幅650(または700)*高さ180の大きさの画像がタイトル用には使い易いです。

それ以外の背景とかタイトルのラインは前のままでも違和感なかったので、使い回ししてしまいました^^;
「雲水亭」さんの素材です。 ありがとうございます(^^)

| | コメント (0) | トラックバック (0)

2005/12/24

アクセス解析を「Acsess Analyzer」に変更

ここしばらく「忍者ツールズ」 を使っていたアクセス解析を、「Acsess Analyzer」 に変えてみた。
理由は「ページごとの訪問件数が判るから」。

「忍者ツールズ」も軽くてよかったんだけど、アクセス数は全ての合計になってしまって各ページごとの訪問件数が見られなかった。
(各ページごとに別々のページのタグを入れれば出来たけど…ブログの場合、それはちょっと面倒くさい。しかもページ数は100までだったし)
それが「Acsess Analyzer」だと、Bodyダグの中に一つだけタグを追加すれば全ページ分のページごと解析をしてくれるのだ。
しかも、アドレスでの表示だけでなく、タイトルを自動的に読みとってタイトルごとに表示されるので非常に判りやすい。

ちなみにこのブログの本日午前中のページごとアクセスはこんな感じ。↓(クリックすると別画面で表示されます)

pageaccess

それ以外にも、いろいろ便利な機能満載。
例えば、

  • 複数のサイトを一括管理出来る(しかも登録数の制限なし)
  • ログの保存は1年間
  • 生ログの細かい絞り込みが可能(時間、ホスト名、IPアドレス、参照元ページ…などなど。複数指定も可。)
  • 期間をfrom~toで指定して、累積表示も可

などなど。
もちろん、リンク元や検索語句の参照も出来る。
そして何より、この機能で「無料」なのが偉い!

実は以前(ブログを始める前)Webページの管理がメインだった時に、 ページごとアクセスを知りたいがために某サービスの有料版を利用していたことがあった。
年間で確か3000円くらいだったかな。つまり月にすると250円。
まあ、毎日眺めてはそれなりに楽しんでいたのでそんなに高い金額でもない(雑誌だってこのくらいするでしょう)かなと思えるけど、 こうやって無料でも高機能なサービスがあるのが判ってくるとやっぱり「知ってる」と「知らない」 ではいろんなところで差が出てくるものなんだなあ、と思う。
(ちなみにその有料サービスよりも、この「Acsess Analyzer」の方が機能が上、だと思う(笑))

無料版だとページを開いた直後に数秒画面の上部にサイトロゴが表示されるけど、そんなに大きくないしすぐに消える (5~10秒くらいかな?)からデザインを損なうほどのことではない。
有料版もあるけど、現在はこの広告があるかないかだけの違いで機能的には同等とのこと。
(今後はログ保存期間の延長など機能の付加を検討中らしい)

登録もメールアドレスだけで出来るので、アクセス解析サービスをお探しの方は候補の一つに入れてみてはいかがでしょう。
ちなみにココログへの設置方法は解析タグをサブタイトル欄に放り込んで保存すればOKです。

アクセス解析話ついでに、 「Google Analytics」について。
あんなに大騒ぎをして導入したのに、最近はあまりチェックしてないのが現状^^;
やっぱり私のような楽しみのためだけに記事を書いている単なる一ブロガーには高機能過ぎる感じ。
どこが自分が見たい項目なのかを見つけるだけで大変なのだ。
こういうのはサイトの全体を管理して、ある地点(ページ)に上手く導く方法を常に考えているような管理人さんに適したサービスなんだろうな。
でもそういう、ちゃんと管理しようとしている人より私のように遊びでネットをフラフラしているようなタイプのほうが、 こういう情報を見つけてくるの早かったりするのかも。
で、「そんなに必要なじゃないけど、目新しいから導入しちゃおう」みたいな人が多いから、 アクセス過剰でレスポンスが遅くなったり登録できない状況になったりしてるのかな。
そう考えると、こういう本当の意味で高機能なものは多少でも有料にした方が本当に使いたい人が使える環境を維持できるのかもしれない、 と思ってみたり。
(一番初期にダッシュで入れたお前が言うな、ですね^^;)
まあ、これを無料で「ポン」と提供できてしまう底力をGoogleは示したかったのかも知れないけど。
最近は導入当初に比べれば表示のスピードも速くなっていて内部の改善、容量拡大も進んでいる印象。
新規の登録が再開されて必要な人が一日も早く使える日が来るのを祈っております。


<関連記事>
「ココログ(プラス)で『Google Analytics』は使えるか」('05.Nov.17)
「『Google Analytics』、ようやくデータ取得開始」('05.Nov.23)

| | コメント (4) | トラックバック (1)

2005/12/10

トラックバック欄にスクロールバーを表示

トラックバックをたくさん頂くとトラックバック表示欄がどんどん長くなってしまいその下にあるコメント欄にたどり着くのが大変だな~というのは以前からボンヤリ感じていた。
そんな私のハッキリ形にもなっていない不満を解消してくれる技をKOROPPYさんのブログにて発見!

トラックバック欄にスクロールバー

早速お借りしてCSSに追加してみた。
トラックバック欄の長さが固定されて、トラックバック数が増えてその長さからはみ出ると自動的にスクロールバーが表示される設定。
これだとどんなにトラックバック数が増えてもコメント欄が下がりすぎてしまうことがなくてとても見易い♪
(例えば こことか ここで確認してみて下さい)

そっか~、CSSに何行か書き加えるだけでこんなことも可能なんだ。
何となく働き方はわかるものの、こんなふうに組み合わせて自分のやりたいことを実現するアイディアを考え出すまでには至ってないんだな。
まだまだ修行が必要だ^^;

KOROPPYさん、便利なCSSありがとうございました♪

| | コメント (2)