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

続きを読む

イメージツールバーを表示させない

Internet Explorer 6では、画像の上にカーソルを乗せると、こんな↓イメージツールバーが表示されます。 画像にカーソルを乗せると、イメージツールバーと、imgタグのalt=""で指定している言葉が表示されます。こんな感じですね。↓ 大きくない画像がいくつも並ぶサイト・ブログの場合、うっとおしいこともありますね。 これを非表示にする方法があります。 今回は、ホームページ素材@ImageLifeのお世話になりました。 <meta http-equiv="Imagetoolbar" content="no"> このメタタグ↑を、HTMLに挿入します。 手順は次の通り。 1.マイブログ>デザイン>HTML と進み、編集するHTMLの画面を開きます。 2.hedderタグの部分に上記メタタグをコピー&ペーストします。   よくわからない場合は、<hedder>の下の行に入れればOK。 3.再構築して終了。 このブログでは、イメージツールバーが表示されないようにしました。 上の画像にカーソルを乗せて、イメージツールバーが表示されないことを確認してみてください。 これは、他社のブログでも、ホームページでも有効な技です。 ※おまけの解説 写真のバラについてブルーバユー(Blue Bajou) 1993年 ドイツKordes社 作出 系統:フロリバンダ 藤色ともシルバーブルーとも受け取れ…

続きを読む

画像の配置(1)

文章中に画像を配置すると、思うように配置されないことがあります。 例えば。<img src="http://*****" >の後に、改行しないで文字を続けた場合。 (*****には、画像のアドレスが入ります。)  iPod nanoケース ホワイト (OZIO) このように、文字の下のラインと画像の下のラインが揃います。 画像がメインで、文字がおまけなら、これでも構わないかもしれませんね。 文章中に画像を入れたい場合は、文字列の中央ラインと画像の中央ラインが揃っているほうがきれいに見えます。 例えばこんな感じ。  Merry Christmas  という具合に、下揃えの場合と、  Merry Christmas  という具合に、中央揃えの場合と、どちらが収まりよく感じますか? 画像と文字列を中央のラインで揃えるには、imgタグの中に赤字を追加します。 <img src="http://***" style="vertical-align:middle;"> これを使うと、行頭記号がうまく収まります。    小見出し1    小見出し2 という具合です。 最初の画像でやると、中央揃えはこんな感じになります。  iPod nanoケース ホワイト (OZIO) ここまでは、画像と文字列を中央で揃える話でしたが、画像の上のラインに文字列を揃えることもできます。  iP…

続きを読む

もっと見る