検索ボックスのカスタマイズ

Seesaaブログでは現在、旧テンプレートと新テンプレートがあります。 もちろんいろんな点で違うんですけど、検索ボックスも違うんですね。今回取り上げるのは、旧テンプレートの検索ボックスを新タイプの検索ボックスのような見た目になるよう、カスタマイズする方法です。 まず、旧タイプのテンプレートを確認しておきましょう。 検索ボックスはラジオボタンでウェブと記事を選択するシステムになっています。 これ、ユーザビリティからいくと不親切な気がするんですよ。記事内検索ができる形にしておくのが良いし、他社のいろいろなブログを見ると、現在はそうなっているのが主流だと思います。 次に、新タイプのテンプレートの仕様と比べてみると… こんな具合に変更しようというわけ。 実はこのブログでもすでに、カスタマイズ済みです。 ほとんどコピペだけで完成するので安心してね。

続きを読む

コメント受付の設定でスパム対策 (2)

前回はこちら。↓ コメント受信の設定でスパム対策 (1) 前回やったことは… 半角英数のみのコメントを受け付けない コメント入力時に認証コードを入力する設定にする この2つの設定をしました。 今回は、 コメントは承認後に表示する その他の禁止設定をする について説明します。

続きを読む

コメント受付の設定でスパム対策 (1)

今日は、基本に戻って、Seesaaブログのコメント受信の設定の仕方を説明します。 最近スパムが来るので設定を変更しようと思ったら、しばらく設定を変更していなかったので、どこで設定するのかすっかり忘れていました。 忘れてしまうなら、ブログに書いておいたほうがいいかなと思いました。 Seesaaブログの新規ユーザーのみなさんにも、役に立つと嬉しいです。 しばらく設定を見直していない方も、この機会に設定がどうなっているか確認してみるといいかもしれませんよ~。

続きを読む

お知らせ 2011/1/29

Seesaaの仕様変更に伴い、「管理人からのコメントを区別」のカスタマイズは正常に動作しなくなっています。 コメントのメールアドレス欄はメールアドレスしか受け付けなくなりました。つまり、メールアドレスではない文字を入力すると、コメントが入らないんです。 となると、管理人を区別できるようにしたアイコンや背景色などのカスタマイズが反映されないことになります。 管理人のコメントにアイコンや背景を設定するのはお気に入りのカスタマイズだったので、すごく残念です…。 今のところ、管理画面(コメント一覧)から入ると、今までのパスワードを入力はできます。 ただ、このブログの場合、指定した桃アイコンは表示されるものの、背景は反映されません。 私が持っている他のシーサーブログでは、アイコンも背景も表示されるんですけどね…。 管理画面ではいじれるのは、とりあえず放置しているだけなのかなぁ…。いずれ使用できない方向で統一しちゃうんだろうなぁ…。 でも、まぁ、完全に使えなくなるまでは、桃アイコンを表示させますので、よろしく♪

続きを読む

カレンダーのデザイン(2)

カレンダーのデザイン(1) の続きです。 カレンダーの日付エリアの背景は画像にすることもできます。 というわけで、今日は、テンプレート「突撃!合戦スタジアム」のカレンダーを改造してみます。 ↑こんなデザインです ↑背景画像 この画像、何なんでしょう? 血のり?(-_-;) き…気分を取り直して、CSSのカレンダーに関わるの次の部分いきましょう。 #calendar { font-size:12px; width:190px; margin:0px; padding-bottom:10px; } #calendar table { background-image:url(http://blog.seesaa.jp/img/bg/battle_stadium/cal_bg.jpg); background-repeat:no-repeat; background-position:0px 0; width:100%; padding:0px 0; margin:0 auto; } #calendar th { padding:3px; font-weight:normal; text-align:center; } .calendarday a { font-weight:normal; color:#F27045; } .calendarhead{ background-image:url(http://blo…

続きを読む

画像の横にも文章を(4) CSSで指定

画像回り込みシリーズも今回が4回目となりました。 画像の横にも文章を(1) 画像の横にも文章を(2) 余白を調整 画像の横にも文章を(3) 崩れた?! 一応、前回で完結しているんですけど、今回は他の方法を紹介します。 CSS(スタイルシート)で指定する方法です。 CSSの設定するページは、「文字の設定(7)ちょっと動くリンク」などで説明しているので参考にしてください。 開きました? それでは、いきましょう。(^-^)ノ 場所はどこでもいいんじゃないかと思うので(根拠はありません…^^;)、一番下のところに次のタグを入れましょう。 そのままコピー&ペーストすればOKです。 画像の横の余白を10pxにしてあります。ご自分の好みで調節してください。 /* 画像右寄せ */ img.right { float: right; margin-left: 10px } /* 画像左寄せ */ img.left { float: left; margin-right: 10px} [スタイルシートを変更する]ボタンを押します。画面の上部に、オレンジ色で「設定を変更し、CSSをビルドしました。」という文字が出ましたね。 CSSの設定はこれで終わりです。 次は、本文を書きます。 画像のアップロードの仕方は、「画像の横にも文章を(2) 余白を調整」を見てくださいね。 で、画像を本文中に挿入したところで、さっき書いたCSSを効かせます。 んー、…

続きを読む

画像の横にも文章を(2) 余白を調整

前回、画像の横に文章を回しこむ方法を紹介しました。 画像の横にも文章を(1) 今回は、もうちょっと自分でいじれる部分が増やせるように配置する方法です。 もっとスマートな方法があるかもしれないけど、私がやってる方法を紹介します。 まず、ファイルマネージャーを使って、自分のブログのスペースに画像をアップします。方法は前回のページを見てくださいね。 一覧が表示されているウインドウで、「元画」ボタンをクリックします。 それでは、文章を画像の周りに流し込む呪文をいれましょう♪ イメージタグの中に回し込みを指定するfloatタグを入れます。 画像左寄せなら、 style="float:left" 画像右寄せなら、 style="float:right" です。 <img src="http://☆" style="float:left" > という感じですね。☆のところは自分の画像のURLを入れてください。 imgタグの中身は、srcの後ろにalt="◎"やwidht="◎"、height="◎"、border="0"が来てます。◎はそれぞれ違う値が入ります。 Seesaaブログではこうなってますが、使ってるブログによって多少違うかもしれません。 最後の>の前にでもstyle="float:left"を入れてください。 それじゃ、左寄せのタグを入れた見本を挙げます。 加湿器Ver3 アロマポット付 オレンジ (±0)…

続きを読む

画像の横にも文章を(1)

「画像に文章が回り込む」って言い方が正確なのかな。 でも、初心者だと「回り込むって何?」と思うのではないかと…。私がそうだったし。 ここは初心者によるブログカスタマイズ初心者のためのブログですから、専門用語(?)を使わずに平易な言葉を使うように心掛けてますので~。 画像と文章を混在させるコンテンツ(ブログでもサイトでもね)の場合、画像の横にも文章を配置したいことありますよね。 私がブログを始めたての頃、これがしたいのに方法がわからなくて困ってました。 他のブログ、例えばJUGEMなんかは機能が付いてて、HTMLタグがわからなくてもできたんですよ。 その頃Seesaaブログには機能がなかったけれど、今ではできるようになりました。 今日は、「横に文章を配置できるように画像を入れる方法-その1-」を紹介します。 Seesaaヘルプでも解説してはあるんですよ。 それをご覧になりたい方は、「ブログ・ヘルプ:画像のアップロード方法について」をご覧くださいね。 実は私はこの方法↑が好きでなくて~。 理由は、アップロードするフォルダを選べないからなんです。 「フォルダは1個しかないよ」という方は全然問題ないので、というか一番簡単な方法なので、上記ヘルプで紹介している方法でやってみてください。 というわけで、アップするフォルダが複数あって指定したい方は、これから紹介する方法がありますので、参考にしてくださいね。 まず、記事投稿の画面を開きます。 文字…

続きを読む

文字の設定(7)ちょっと動くリンク

ホームページでもブログでも、リンクスタイルの初期設定は下線付きです。 これを消す方法は以前にこちら↓でご紹介しました。   文字の設定(6)リンク下の下線を消す 今回は、マウスを乗せるとちょっと動く設定をご紹介します。 では、CSSを設定するページを開きます。   マイ・ブログ > デザイン > デザイン一覧 ページの真ん中より下の表に現在登録しているCSSの一覧が表示されています。 例えば、「light pole(右サイドバー)」というデザインでは、 a{ color:#36C; text-decoration:none; } となっています。 これを、マウスを乗せたときに   ・1px下に動く   ・色が変わる   ・下線が付く という設定に変えてみます。 a{ color:#36C; text-decoration:none; } という箇所を下記に書き換えます。 a { text-decoration: none } a:link { color: #36c } a:hover { color: #cc0000; text-decoration: underline; position: relative; top: 1px;} hoverというのが、リンクにマウスを乗せたときの設定を書いている部分です。 一つひとつ解説しますね。 color: #cc0000   …> 濃い目の…

続きを読む

無料写真素材から簡単にテンプレート作成!

本日、2007年6月22日、Seesaaブログに素敵な機能が追加されました! 写真素材フォトライブラリーの素敵な写真をヘッダーに使って、簡単にテンプレートを作成することができるようになったんです。   Seesaaからのお知らせ:   無料写真素材からブログデザインを作成しよう! これは良さそうです。しかも、簡単そう。o(^-^o)(o^-^)o 美しい写真をヘッダーに持ってくるだけで、オシャレ度がググっと増しますし、オリジナル感も季節感も簡単に表現できますよね♪ さっそく試しに触ってみました! 【手順1】写真を選ぶ  このURL↓からスタート!   http://www.photolibrary.jp/service/blog_template.html  使う画像を選びます。  いろいろあるから、選ぶのも楽しいですね♪ 【手順2】写真を切り抜く  切り抜きたいところでクリックするだけ。  ※枠の拡大縮小はできません。  「送信」ボタンをクリック。 【手順3】デザインを選択  ・コンテンツのデザイン(左サイドバー/両サイドバー/右サイドバー)  ・タイトルの位置  ・タイトルの文字色  ・ブログの説明文の文字色  画面下にプレビューが出ているのでわかりやすいです。(^-^)ノ  「この内容で決定」ボタンをクリック。 【手順4】スタイルシートの適用  生成されたスタイルシートをコピー&ペーストすれば…

続きを読む

アバターを作った

前回の記事の後もいろいろこねくり回していたんですが、ようやく自分のアバターを決めました。 悩んだ過程はいろいろあったけれど、無難なところで落ち着いたつもりです。 下記のサイトで作らせていただいたものをベースに、ちょっと手を入れました。 アバターメーカー http://www.avatar-maker.info/index.html 久しぶりの更新がアバターだけというのも寂しい話なので、2007年4月の「月間アクセス数TOP5」をアップしました。 4月に書いた「見出しのデザイン」がランクインしました。意外と興味を持っていただけたみたいですね。良かった良かった。 画像の周りに文章を流し込む方法について記事を書こうと、ずーっと(実はブログ開設当初から^^;)思っています。まだ書けてないんですけどね。 こんな予告めいた文章を書くことで、自分を追い立てようかな…と。 躊躇していた理由の一つは、Seesaaの機能改定のときにその機能が導入されたってこと。もうわざわざ書く必要ないかなと思ったりもしました。 でも、画像の周りに余白が入るようになっていないし、見栄えの点では適切な余白を入れたほうがいいと思うので、やっぱり書いてみようと思います。 いずれ、近いうちに…。 ↓参考になったら、クリックで応援してね!↓

続きを読む

アバターを作ってみる

この話、大っぴらに書いちゃってもいいのかなー。 以前、有名な元雑誌編集長さんから聞いたことがあるんです。 「誌面には、必ず顔を出しなさい」って。 人の顔が出ているほうが、記事に共感を呼びやすいっていうんですね。 これだけの話だけど、読む人が読んだら、「あー、あの人でしょ!」ってわかっちゃうだろうなー。 このブログを作り始めた頃から、「顔」のことは頭に引っ掛かってはいたんです。おそらくブログにも、同じことが言えるんじゃないかと。どこの誰が書いたかわからない状態で読んでもらうわけですけど、「顔」があったほうが印象に残りやすいかもしれないなとは思っていました。 ブログのカスタマイズをテーマにしているから、文章がメインになって、味気ない画面になるなーと気にしていましたしね。 それでとりあえず、左上に可愛いクマさんに登場してもらったんです。これだけでも、多少雰囲気が和むかなーと思いまして。実際、これがないと、えらく殺風景なんですよ。(^_^)ゞ 最近も時々、「顔ねぇ、でも自分の顔出すわけにはいかないしね~」なんて思っていたんです。 ところが、ふと気が付いた。アバターを使えばいいのか。 アバターって若いコのものだという感覚がありまして(うわー、すっかり年寄りくさいわー)、あまり興味を持っていませんでした。 でも、たとえアバターでも、顔があったほうが親しみをもってもらえるかな…と。 アバターのキャラによって、読み手の受け取り方も違うのかな? ぜひ聞いてみたいとろこですね。もし…

続きを読む