画像の横にも文章を(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を効かせます。 んー、…

続きを読む

文字の設定(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】スタイルシートの適用  生成されたスタイルシートをコピー&ペーストすれば…

続きを読む

見出しのデザイン

前回の引用の書式を書いたときに、「これは見出しの書式にも共通することだな」と思いました。 ブログでも、ホームページでも使えると思うので、参考にしてみてくださいね。勉強中の身なので、絶対正しくシンプルなタグかって言われると、自信はありませんけど…。 見出し…という言葉は今まで使ってませんでした。 タイトルというと、ブログのタイトルとか、記事のタイトルみたいなので、あえて違う言葉を使いました。 デザインによっては記事のタイトルみたいになりますし、記事タイトルの下層…小見出しにもなると思います。 文章の長さがある程度になったら、小見出しが付いているほうが読みやすいです。このブログでは付けたことがまだありませんが。(^_^)ゞ 小見出しとして使うときは、自分のブログで使っている見出しがどのタグを指定されているか見てみてください。 Seesaaのテンプレートは、  <h1> … ブログタイトル  <h2> … 日付  <h3> … 記事タイトル となっていますから、<h4>にでもしたらいいんじゃないでしょうか。SEOの観点からは…どうかなぁ? Seesaaのテンプレートの場合、<h2>が日付っていう時点で適切じゃないような気もするので、まぁ気にしないでいきますか…。 私にはまだよくわからないので、判断は各人に任せます。 以下は、とりあえず<h4>ということで書いておきます。 (スタイルシ…

続きを読む

引用(blockquote)の書式

引用の書式は、スタイルシートで設定しています。  マイ・ブログ > デザイン > デザイン一覧 と進んで、タイトルから現在使用しているスタイルシートを選びます。 スタイルシートを開いたら、blockquoteを探します。ここが引用の書式を指定しているところです。 次の例を見てください。 ▼例1 blockquote{ margin:10px; padding:5px; border:1px solid #c0eaff; } 囲み罫(border)の太さ1px、線の色は#c0eaff、罫の外側の余白(margin)10px、罫の内側の余白(padding)5pxという指定です。 Seesaaのテンプレート「ベビー」で使われている書式です。 ▼例2 blockquote{ margin: 20px; padding: 5px; background: #eed;/*背景色*/ } 罫線の指定はなしで、背景色だけ指定した事例です。 背景色を薄い色にするといいですね。 ▼例3 blockquote{ margin: 20px; padding: 5px; color: #630;/*文字色*/ background: #e5e5e5;/*背景色*/ border: 2px solid #ff0032;/*線*/ } このように、文字色、背景色を指定することもできます。 わざと目立つ色にしたけど、…

続きを読む

文字の設定(6)リンク下の下線を消す

[修正あり(2007/2/17)]下線の引いてある文字を見ると、リンクだと思っちゃうクセがついてます、私。 下線が付いてるのにリンクじゃないと、「あれ?」と思っちゃうくらい。 これはもう習慣というのかな。 みなさんはどうですか。 でも、このブログでは、リンクには本文と違う色が付くようにはしていますが、下線が付くようにしていません。 というのは、リンクの箇所が多いページだと、いちいちリンクに下線が付くと、読みにくくなってしまうからなんです。 でないと、左サイドバーなんて、ほとんど下線付きになっちゃいます。 前置きがちょっと長かったかな。 必要に応じて、リンクの下線を取る設定に変えてみましょう。   マイ・ブログ > デザイン と進むと、「おすすめデザイン」の下に、自分が使用または登録しているデザインのリストがあります。 現在使用しているデザインのタイトルをクリックして、スタイルシートを開きます。 ※2007年2月6日のリニューアルでスタイルシートの場所が変更になりました。 スタイルシートによって、内容はいろいろだと思うんですが、「a」という箇所を探します。 このブログでは、下のようになっています。 a { color: #369; text-decoration: none; } colorがリンク部分の文字色です。3桁になってますが、#336699のことです。 本文とはパッと見て違いのわかる色がいいですね。 色につ…

続きを読む

文字の設定(4) 文字の種類

[修正あり(2007/2/22)] 今回は、フォトの種類のお話です。 まず、スタイルシートの設定を見てみましょう。     マイ・ブログ > デザイン と進むと、「おすすめデザイン」の下に、自分が使用または登録しているデザインのリストがあります。 現在使用しているデザインのタイトルをクリックして、スタイルシートを開きます。 ※2007年2月6日のリニューアルでスタイルシートの場所が変更になりました。 スタイルシートの「#container」のなかの「font:」という部分を探します。 以下は、このブログの設定なので、みなさん設定が違うはずです。 ※「#container」はページ全体の設定です。 #container { margin: 0 auto; padding: 1px 0 0 0; width: 800px; color: #5D5D5D; font: 12px Verdana, sans-serif; border-left: 1px solid #999; border-right: 1px solid #999; background: #fff; }つまり、このブログのフォントは「Verdanaまたはsans-serif」に設定されているわけです。 他のフォントでは、表示がどのように変わるか見てみましょう。 ■monospaceの場合 The quick brown fox jumps ov…

続きを読む

文字の設定(2) 色

[修正あり(2007/2/22)]今日は、文字の色について考えてみます。 ブログのデザインは実に豊富で、一概には言えないんですよね。 背景色もまちまち。背景に色を敷かないで画像にしてある場合もあるんだし。 だから、ここでは、このテンプレートのように背景の色が白の場合ってことで捉えてください。 色のコントラスト(強弱)は、読みやすさを大きく左右すると思うんですよ。 もっともコントラストが強いのが白×黒。 紙の媒体、つまり本とか雑誌とかは、白×黒が基本だと思うんですね。 誰にでも読みやすいから。 ところが、パソコンのモニタを見ているときは、白×黒だと目がみょ~に疲れてくるんですよ。意外なことに。 コントラストをちょっと弱くすると、目が疲れにくくなります。多少はね。 コントラストが弱すぎると、凝視することになって目が疲れます。 文字が小さくてコントラストが弱いと、読む気になれない人が続出するでしょうね、おそらく。でも、そういうブログも見かけるんですけどね~。 以下に黒からグレーの色見本を並べてみます。

続きを読む

文字の設定(1) 本文のサイズ

[修正あり(2007/2/22)]ブログの文字のサイズって、いろいろですね。 私の印象では、デザイン系のサイトや雑貨系のブログは「おいおい、文章を読ませる気があんるんですか~?」とツッ込みたくなるほど文字が小さいものが結構ありますね。 不思議なもので、その手の系統のものって、Webコンテンツに限らず雑誌でも文字が小さいんですよね。 しかし、文章を読んでほしかったら、あまりに小さいのは良くないと思いますよ~。 新聞を見てごらんなさいな。ン十年の歳月をかけて次第に活字が大きくなっていっているじゃあありませんか。 文字がたくさんあるコンテンツほど、文字が小さすぎてはいけないってことです。 ですから、文章がメインのブログはなおさら、文字が小さくなりすぎないようにしましょう。 では、設定の仕方です。

続きを読む

カテゴリの一覧表示

[修正あり(2007/2/22)]カテゴリ(左上の欄)をクリックすると、該当するカテゴリの記事が表示される。 初期状態では、ただ、ずら~っと記事が並ぶだけ。 「このカテゴリの記事はどんなものがあるんだろう?」と思ってクリックしてくれた人に、最後まで見ないとどんなタイトルがあるのかさえわからないのは不親切だと思うんだよね。 そこまで付き合って見てくれない可能性のほうが大きいと思うし。 本だって、まず目次のタイトルをパラパラと見てから中身を読むかどうか決めたりする。 人によるのかもしれないけれど、自分がそういうたちだから、目次がないのってなんかヘンだと思っちゃうのだ。 さてさて。ここからは、じゃあ、どうするの?って話です。 たひたびお世話になっているブログ? カスタマイズ? アフィリエイト?というブログでは、まずタイトルの一覧が表示されるようになっているんですよ。 初めて見たときは「なんてユーザーに親切なっ!」と感激したね~。 はい。さっそく導入しますよ。 詳細はブログ? カスタマイズ? アフィリエイト?の「カテゴリの記事一覧を表示」を読んでくださいね。 該当するHTMLの部分をコピー&ペーストするだけでできちゃうので、とっても簡単。 Seesaa機能強化後の最新のHTMLは記事の一番下にあるのでご注意を。  

続きを読む