検索結果ページをカスタマイズ (2/2)

前回はこちら。検索結果ページをカスタマイズ (1/2) なぜ検索結果ページをカスタマイズする必要があるか知らない方は、まず前回の記事を読んでくださいね。 さて、今日は実際にHTMLに修正を加えていきますよ。 最終目標は上の図です。 落ち着いて考えれば、難しいことではないので大丈夫です。^^

続きを読む

検索結果ページをカスタマイズ (1/2)

これも、ずい分前から直さなくちゃいけないなーと思っていた案件。 検索結果ページのカスタマイズです。 ちょっと事情があったので(苦笑)、ここもテコいれしましたよ。 Seesaaブログをやっていて、検索結果のカスタマイズをしていない人には、ぜひぜひ検索結果がどうなっているかを見ていただきたい!

続きを読む

フッターがサイドバーに行ってしまうのを修正

追記あり お気付きの方もあったと思うのですが、フッター部分(Copyrightと「powerd by Seesaaブログ」がある部分)が右サイドバーに行ってしまってました。カッコ悪ぅと思いながらそのままになってましたが…。 直りました(笑)。 方法は以下の通りです。 1)記事エリアの一番下に、自由形式を追加します。 2)自由入力欄に、    <div style="clear:both"></div> と入力します。 ↓こんな具合ね。 そして、「保存する」ボタンをクリックします。 3)「設定を反映する」ボタンをクリックします。 以上!(^-^)ノ ← 細々と参加中♪ 追記 2011/3/29 「フロート解除はフッターのCSSで設定すればいいんじゃない?」と思い立ち、上記の方法ではなく、CSSで修正しました。ちゃんと表示されていますよね?  ちなみにこのブログでは、フッターのCSSは次のようになっています。デフォルトのままです。 #footer{ clear:left; background-color:#e3f6ff; } 「clear:left」が問題の場所。これを、「clear:both」に修正しました。 「clear:left」になってると、左側にいかない設定なんだけど、右側の要素にはくっついていっちゃう…という理解で合ってるかなぁ? floatについて、もっとも…

続きを読む

お知らせ 2011/1/29

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

続きを読む

「自由形式」を使う (2)

長らくお待たせいたしましたー! そして、読者登録してくださったみなさん、ありがとうございます! すっごく嬉しいです!! それに励まされて、今日記事を書いています。沈黙を破るパワーが沸いてくるくらい励みになっています。 * 今日は、ブログ管理者にとって便利な機能を説明します。 「自由形式」のHTMLをいじります。 HTMLなんて言われたら、初心者の方はたぶんドキドキしちゃいますよね? でも、大丈夫。初期状態戻すのは簡単だから。それに、今回はそんなにたくさん入力するわけじゃありませんから♪ コンテンツ「自由形式」の追加方法については、前回の「自由形式」を使う (1)をご覧くださいね。 今回は、「自由形式」をサイドバーに追加するということで話を進めていきます。 「自由形式」を挿入して、編集画面を開くところまでは、できましたか? わからない方は、復習がてら過去ログに目を通してみてくださいね。 「自由形式」のタイトル欄に、自分でタイトルをつけることができます。 これは、開けばわかることだから、改めて説明するまでもなかったかな? 「自由形式」を挿入しただけの状態では、タイトルがブログの画面には付きません。 でも、カテゴリには「カテゴリ」というタイトルが付くし、最近のコメントには「最近のコメント」というタイトルが自動で付きます。 だったら、「自由形式」の編集画面で自分でタイトルが付けられるのだから、そのタイトルもブログ上に表示させられたら便…

続きを読む

「自由形式」を使う (1)

今日の話は、Seesaaブログのみが対象です。 「さあ、カスタマイズするぞー」ってことでコンテンツを追加するときに、一番使うのが「自由形式」じゃないかと思います。その「自由形式」の話。 コンテンツの追加方法については、下記のSeesaaブログのヘルプページをご覧くださいね。 ブログ ・ヘルプ: コンテンツの追加方法コンテンツ配置の編集方法 さて、本題はここから。 追加しただけでは、「最近の記事」とか「最近のコメント」「カテゴリ」などのコンテンツと設定が違うことがあります。その辺はブログデザインによって違うかな。 このブログのデザインではこんな違いが出ます。 今日使っている画像は、若干縮小してあります。原寸はクリックしてご覧ください。 右が初期状態。左がCSSで指定してあるもの。他のコンテンツはCSS指定のほうのデザインになってますから、これだけ違うと違和感がわいてきて、頭をボリボリかきむしりたくなっちゃいます(笑)。 何が違うかというと。 フォントのサイズや行間だけでなく、いろいろ違うわけですね。 何が違うかわかったところで、CSSで指定する設定にしましょう。 「自由形式」の編集画面で、「コンテンツHTML編集」というところをクリックします。 初期状態は、 <% content.header -%> <% content.free.text %> <% conten…

続きを読む

カレンダーのデザイン(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…

続きを読む

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

カレンダーのデザインはCSSで指定されています。 今日は、そのCSSを読み解いてみます。 私もCSSをきちんと理解してない初心者ですが、頑張って頭を使ってみました。(`・ω・´)っ ページデザインごとに違うので、一例としてテンプレート「light pole」のCSSを見てみます。 これが「light pole」のカレンダーのデザイン。 シンプルで見やすいから、私のお気に入り♪ 私の好みはおいといて(笑)。 カレンダーに関する部分は8項目ありますね。 似たような名前で混乱しそうですが、1つずつ落ち着いて見てみましょう。 (と自分に言い聞かせてます^^;) では、まず、CSSの中のカレンダーに関する部分は次のところ。 #calendar { margin-top:0px; margin-bottom:30px; font-size:12px; padding:5px; border:1px solid #C6C6C6; width:228px; } #calendar table { width:100%; background-color:#F2F2F2; } #calendar th { background-color:#E1E1E1; border-right:2px solid #F2F2F2; font-weight:bold; } .calendarhead { padding:4px 0p…

続きを読む

画像の横にも文章を(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個しかないよ」という方は全然問題ないので、というか一番簡単な方法なので、上記ヘルプで紹介している方法でやってみてください。 というわけで、アップするフォルダが複数あって指定したい方は、これから紹介する方法がありますので、参考にしてくださいね。 まず、記事投稿の画面を開きます。 文字…

続きを読む

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

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

続きを読む