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

続きを読む

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

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

続きを読む

「お気に入りに追加」ボタン(2)

「お気に入りに追加」ボタンに関する補足です。 ボタンの周りにはスペースが開いてしまうんです。 このブログの場合は、下のほうに設置したので、そのスペースが目立たないと思いますけど…。 ブラウザが自動的に<FORM>タグの前後に空白行を挿入するのが原因だそうです。 あなたのせいじゃないの。ブラウザのせいなんです。 (最初、自分が余計なタグやスペースを入れたんじゃないかと悩んだ経験がありますよ、私…^_^;) 前回とは違う、シンプルなHTMLで説明しますね。 お気に入りボタンのHTMLタグは、こんな感じ↓でできています。 【初期状態】 <form> <input type="button" onclick="window.external.AddFavorite ('http://testomomo.seesaa.net/','カスタマイズ実験室')" value="お気に入りに追加"> </form> 【余白なし指定】 formタグに、余白なしの指定をしましょう。 赤字の部分を追加します。 <form style="margin:0px"> <input type="button" onclick="window.external.AddFavorite ('http://testomomo.seesaa.net/','カスタマイズ実験室')" value="お気に入りに追加"&g…

続きを読む

「お気に入りに追加」ボタン(1)

補足:「お気に入りに追加」ボタン (2)を追記しました。 ⇒記事はこちら 前から付けたいと思っていた、お気に入りに追加ボタンを付けてみました。 左サイドに新設したプロフィールの下にあります。 (とりあえず今はここですが、移動させるかもしれません) これがあると、「後で読もうかな」と思った人がまた読みに来てくれるかな~と期待しているのですが…。 そうだといいな~。 自力ではスクリプト書けません。(^_^)ゞ なので今回も、スクリプトをお借りしました。 提供してくださったのは、たびたび登場していただいているPERSONA@BLOG(ペルソナさん)です。 お気に入りに追加ボタンを表示する方法は、たくさんの方が書いていらっしゃるので、お好きな方法でいいと思います。 いろいろ探して比較検討するのも面白いんじゃないでしょうか。

続きを読む

もっと見る