ブログFC2ブログ
日本で一番使われているFC2ブログで あなたもブログをはじめよう!
FC2動画 FC2動画
自分で撮った動画を公開!共有!携帯でも利用できる!!
FC2プロフFC2プロフ
自己紹介ページをすぐに公開できるサービス。 今すぐプロフを作ってみんなに見てもらおう!
FC2アフィリエイト
FC2ブログを紹介してお金がもらえる
FC2アフィリエイトに登録しよう!

TOP > スポンサー広告 > title - 画像と文字の間隔をあけたい!TOP > カスタマイズをしよう! > title - 画像と文字の間隔をあけたい!

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

★アフィリエイト人気ランキング★  [アフィリエイトとは?]
リンクシェア
の詳細はこちら
エーハチネット
の詳細はこちら
バリューコマース
の詳細はこちら
アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ

画像と文字の間隔をあけたい!

画像と文字の間隔をあけた見本

画像の横に文字を書くことができる事を知って、実際に自分がやってみたけど、画像と文字があまりにもピタッとくっついてしまっていてかっこ悪いなぁと悩んでいる人っていませんか?

これを解決する方法を紹介します。

たま 何の事だかわからない人の為に見本を作りました。
これは画像と、文字が離れてますよね。見本の為にわざとたくさん離してみました。
これがピタッとくっついてしまう人がいます。 それで悩んでいる人がいれば、簡単に離せるのでぜひともやってみましょう!

個々の画像で離したい

画像の横に持ってくにはで説明したので、画像の右側に文字を書くのはalign="left"を入れればいいということは知っていると思います。

さらにその後ろにHspace="30" Vspace="10"を入れれば、それだけで間隔が空きます。

具体的に説明するとHspace="30"は画像と文字の「横」の間隔を空ける時に使うタグで、数字が大きければ大きいほど間隔があきます。

Vspace="15"は画像と文字の「縦」の間隔をあける時に使うタグで、数字が大きければ大きいほど間隔が空きます。

いつもはくっついてていいけど、たまに離したい時がある人に向いています。とても簡単ですよね。

すべての画像と文字を離したい

まず管理画面のテンプレートの設定から「スタイルシートの編集」を開いて下さい。

開きましたら、一番下までスクロールさせて最後に書かれているものから一行開けて・・・

img { margin: 5px 5px 5px 5px; }

と、記入して下さい。これだけで間隔が空くと思います。

具体的に説明すると、imgというのは画像の事です。
margin:は間隔を空けますよ、というタグです。
その後の5px 5px 5px 5px;は順番に上・右・下・左の間隔の広さを意味します。もちろん数字が大きければ大きいほど間隔が空きます。指定の単位はpx以外でもいいです。

自分の好きな間隔の広さを色々試してみて下さい。

次回は文字と文字の間隔の空け方を紹介したいと思います。
<文字の行間を広げたい!へつづく>

関連ページ)
・画像と文字の間隔をあけたい!
文字の行間を広げたい!
文字の間の広げたい!


◆FC2ブログの事でどうしても疑問が解決しない人はFC2ブログ ユーザーフォーラムへ。
★アフィリエイト人気ランキング★  [アフィリエイトとは?]
リンクシェア
の詳細はこちら
エーハチネット
の詳細はこちら
バリューコマース
の詳細はこちら
アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ
コメント
またまたです。
るんぱぱさま、先日はまたまた丁寧におしえてくださりありがとうございます!

コチラで画像と文字の間隔をあけるというのは理解できましたが、文字を画像の真ん中に持っていきバランスよくみせたくて、改行しながら打ち込んでしまったのですが、そうすると記事の枠がところどころ、ブチンと切れてしまって。
なんか、おかしいですよねぇ。

ちゃんとした方法があるのでしょうかね??毎度すみません、、、
yumiさんへ
記事の部分の枠がところどころ切れてますねぇ。
FC2ブログ ユーザーフォーラムで調べてみたらyumiさんと同様のケースの質問があったので、このフォーラムと同じ様にすれば解決すると思いますよ!
「画像を貼ると記事の枠が切れてしまいます」
http://blog.fc2.com/forum/viewtopic.php?t=7271
一度試してみて下さいね!!
ありがとうございます。
るんぱぱさま、この二日、悪戦苦闘してます。
スタイルシートをあけてみたものの、何処に何を入れたらいいのかサッパリです。
教えていただいた質問と同じみたいな状況なので参考になるとは思うのですが
同じ数値を入れればいいのでしょうか?
私の場合何処に入れたらいいのでしょう。
教えてちゃんで、自分でもいやになります(涙
たしかにね!
ユーザーフォーラムがyumiさんと全く同じ状態で困っている質問だったのでわかるかな?と思いましたが、ちょっと難しかったみたいですね。
たしかに最初の頃は自分と寸分の違いもなく(テンプレートや入力する数値など)一緒じゃないとなかなか理解できないですもんね。

ユーザーフォーラムをわかりやすく説明すると、
何で記事の枠が切れるのかというと、画像を使って[align="left"]のタグを使うとIEのブラウザ+テンプレートによってバグが起こって記事の枠が切れるみたいなんです。
だからちょうどその部分の枠だけが切れていますよね。

それで直すには、記事の枠の部分の横幅を指定すれば良いみたいなんです。
なのでyumiさんのテンプレートのHTMLを見ると、
<!--エントリー-->
<h3><a id="12" name="12">
<%topentry_title></a></h3>・・・・・・・これがタイトルのタグ
<div class="content">
<%topentry_body>・・・・・・・・これが本文を表示するタグ
と、こんな風になっていますよね?
http://blog.fc2.com/template.html・・・・ここにFC2のタグが紹介されていますよ。

なので本文のスタイルは「content」で指定されているという事がわかります。
それがわかったのでスタイルシートの「content」を探します。
/* 記事表示部分/コメントなどを囲うブロック要素の属性 */
.content {
margin: 0 0 10px 0;
padding: 15px 15px 0 15px;
line-height: 1.4;
border-top-width: 0;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
}
するとこの部分を見つけられると思います。
この中に横幅を指定する width : 数値px; を入れれば解決です。
でも数値は何を入れればよいのか迷いますよね?
全体の幅からサイドの幅や隙間の空間の幅をスタイルシートから探してきて計算すればよいのですがちょっとめんどくさいし、探す自信がないと思います。
なのでここは最初は勘で数値を入れてみます。とりあえず最初は400pxを入れてみて「プレビュー」で確認してみました。そしたら幅が短かったみたいです。
だから次はもう少し長めにして450pxにしてみました。と、この様に数度繰り返すとピッタリの数値が見つかります。ちなみに453pxが良さそうでした。

数値もわかったので、
border-bottom: 1px solid #000000;
width : 453px;
}
ここに書き込んで更新をすれば記事の枠の途切れは解決!!すると思います。
こんな感じで考えているんですよ!
できたみたいです!
るんぱぱさま、こんな私のためにいろいろと本当に時間を費やしてくださり
ありがとうございます。

私なりにフムフムと考えながら、やってみました。
昨日やってみたときはなぜか切れが直らなかったのですが(汗
さっきやったらちゃんと綺麗になってます。ホッ。

タグって難しいんですね。。。
初心者なのにいろいろいじるからいけないんでしょうねー

それから、今回スタイルシートを変更しましたが
あとあと、このままでも大丈夫なんでしょうか。

それにしても、テンプレを考える方、とっても尊敬します。
るんぱぱさまは作ったりはしないのですか?

では、どうもありがとうございました^^


直りましたね!
ちゃんと直りましたね!良かった。良かった。
なんとなく考え方が伝わったかな?スタイルシートはそのままでも大丈夫ですよ!
タグを使っていじりだすと途端に難しくなるんですよ。ブログはそれまでが結構簡単だから落差が激しいので余計にできないんですよね。
僕はやれば何とかテンプレをつくれるかもしれないけど、ものすごく時間がかかってかなり大変だろうからこのブログだけでで満足です。だからほんとにテンプレ職人さんには感謝の気持ちでいっぱいです。
では楽しいブログライフを続けてくださいね!!
お世話になりました!
Hspace="" Vspace=""を使用しても画像との間隔がうまくいかず…ず~と悩んでスペースなどで空けてました。

…がスタイルシート変更により解決しました!
本当に助かりました!
ありがとうございます!
あれ…?
すみません。
解決したと思いきやしてませんでした…。
スタイルシートプレビューでうまく出来たので更新したのですが、
ブログ確認 で開いてみたら画像と文字間隔が全く空いていない状態でした。

mushroom_liquid というテンプレートを使用しているんですが、

Hspace="" Vspace=""もスタイルシートもダメという事はテンプレを変更してしまった方が良いのでしょうか?

自分では解決策が見あたらないのでお力添えをいただければと思います。
よろしくお願いいたします。
神楽月。さんへ
mushroom_liquidをダウンロードしてHspace="" Vspace=""を試してみたのですが、何故かあっさり、ちゃんと間隔があいてしまいました。
なのでたぶんですが、テンプレは関係ないのではないかなぁと思います。
ご自分で今までにカスタマイズした所はないでしょうか?
どうしてもできない場合は、 style="margin: 5px 5px 5px 5px;" を一度試してみてください。
ありがとうございます!
大変お手数お掛け致しました。

バナーを設置・文字の大きさ変更をしています。
もしかしたら知らず知らずのうちに何かをイジってしまた可能性がある為に再度ダウンロードをしてHspace="" Vspace=""を試しましたがやはり反映せず。
CSSは反映しました。

とりあえず明日やり直そうと思い、昨日は現状のまま終了。
先ほど他のブラウザでも確認しようといつも使用しているブラウザにて開きましたらキレイに間隔が空いておりました(*^_^*)

これからは少し時間を空けてなお反映しなかったら焦る事にします。
本当にありがとうございました!!
とっても助かりました♪

これで、ブログの見栄えがググ~っとアップするので嬉しいです!
CSSが反映されてました!

すぐに反映するものだとばかり思っていたので、これからは少し時間を空けてそれでも解決しないようでしたら

神楽月。さんへ
何とか両方の方法で間隔をあけられた様で良かったですね。
たしかに時間を空けるとなぜかできているってことってあるんですよね。
ぴったりくっついているとちょっとかっこ悪いのでブログの見栄えが良くなって、これからもますますブログライフをエンジョイしてくださいね!
この記事のトラックバックURL

http://rgrg.blog61.fc2.com/tb.php/117-60e0f1e9   

次が問題!(/_;)
ここまでできたんだけど、問題は次なんです!!!すべての画像と文字の間隔をあけるという所ですが、ここで使う「スタイルシート」ってのが、初め何のことだかわからなかった^^;んで、とりあえずのところなん

Template Designed by DW99

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。