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

続きを読む

画像の横にも文章を(3) 崩れた?!

[追記] 2013.02.05  全面改稿 * * * 「画像の横にも文章を」シリーズも今回で3回目になりました。 いきなりここからご覧になると「何のこっちゃっ?」ってコトになるかと思いますので、ぜひ前の回から読んでみてくださいね。 画像の横にも文章を(1) 画像の横にも文章を(2) 余白を調整 前回の記事で、画像を右に寄せたり左に寄せたり、本文との間に余白を入れる方法を説明しました。 レイアウトの自由度が上がったでしょ? やってみると楽しかったでしょ? ちょっと技が光るページに見えるようになったでしょ? 「うん!」という答えが聞こえたこととして…(笑)。 なのに、まだ続くには理由があるんです。 次のサンプルを見てください。 (スマホからだと崩れて表示されていないので、サンプルはこちらを見てね) バレンタインは元々キリスト教に由来する祝日で、世界的には男女問わず贈り物やカードを贈る日となっています。日本では女性から男性へチョコレートを贈る行事として独自の発展を遂げました。形はいろいろあれど、バレンタインは大切な人へ気持ちを伝える大切な行事の1つですね♪ 日本でも女友達に贈る「友チョコ」は以前からありましたが、言葉ができたことで市民権を得た気がします。カラフルでかわいいチョコレシピもたくさんの人が紹介されています。今日はそんなオススメの友チョコレシピをご紹介します♪ レイアウトが崩れてる! 思い通りにいってない! ということが…

続きを読む

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

続きを読む

もっと見る