画像の横にも文章を(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のことです。 本文とはパッと見て違いのわかる色がいいですね。 色につ…

続きを読む

もっと見る