はてなダイアリーを書いていて、画像を挿入してその横に空白をつくらずに文章を回したいのですが、それを簡単にできないものでしょうか。はてな記法などでなんとかならないでしょうか。htmlで記述するしかないなら、それを簡単に解説したサイトなどあったら教えて下さい。よろしくお願い致します。

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2007/01/21 18:40:34
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:kumonoyouni No.1

回答回数612ベストアンサー獲得回数131

ポイント30pt

はてな記法は調べてみましたが、私はよく分かりませんでした。


HTMLの書き方でしたら、初めてのホームページ講座より、逆引きHTML-8.イメージの「8-2. イメージと文字の並び」がご参考になるかと思います。

(例)

あ
<img src="画像の参照先URI指定" alt="XXXの画像" align="left">
1
2
<br clear="left">
3

グループダイアリで試してみたら、1と2が画像の右側に回りこんでましたので使えるんじゃないかと思います。

途中で回り込みを解除したい場合は、上記 br 部分で clear属性を指定すれば途中で回り込みをやめることができるようなので、3は画像の下に表示されました。


画像の左側にテキスト回りこみさせたい場合はimg のalign 属性を "right" にしてください。

あわせてbr の clear属性を"right"にすれば回り込みを解除できます。


最後に著作権絡みで注意すべき点については

人力検索はてな - [100pt以上]自分で撮った写真を公開する時に、法的に注意が必要なケースについて教えてください。 blogに自分で撮った写真を投稿するとき、著作権や肖像権、意匠権などの問..

をご参照ください。


ご参考になれば幸いです。

id:fuku33

ありがとうございます。参考にさせて頂きます。

もう少し回答を募ってみたいと思います。

2007/01/20 17:21:16

その他の回答4件)

id:kumonoyouni No.1

回答回数612ベストアンサー獲得回数131ここでベストアンサー

ポイント30pt

はてな記法は調べてみましたが、私はよく分かりませんでした。


HTMLの書き方でしたら、初めてのホームページ講座より、逆引きHTML-8.イメージの「8-2. イメージと文字の並び」がご参考になるかと思います。

(例)

あ
<img src="画像の参照先URI指定" alt="XXXの画像" align="left">
1
2
<br clear="left">
3

グループダイアリで試してみたら、1と2が画像の右側に回りこんでましたので使えるんじゃないかと思います。

途中で回り込みを解除したい場合は、上記 br 部分で clear属性を指定すれば途中で回り込みをやめることができるようなので、3は画像の下に表示されました。


画像の左側にテキスト回りこみさせたい場合はimg のalign 属性を "right" にしてください。

あわせてbr の clear属性を"right"にすれば回り込みを解除できます。


最後に著作権絡みで注意すべき点については

人力検索はてな - [100pt以上]自分で撮った写真を公開する時に、法的に注意が必要なケースについて教えてください。 blogに自分で撮った写真を投稿するとき、著作権や肖像権、意匠権などの問..

をご参照ください。


ご参考になれば幸いです。

id:fuku33

ありがとうございます。参考にさせて頂きます。

もう少し回答を募ってみたいと思います。

2007/01/20 17:21:16
id:kumonoyouni No.2

回答回数612ベストアンサー獲得回数131

ポイント30pt

私も興味あったので、もう少し調べてみました。


もう一つの方法としては、先のサイトCSS1-プロパティ 4-4.その他を参考に、ダイアリのスタイルシートで

IMG{
   float : left;
}

を指定します。


そして、

あ
<img src="画像の参照先URI指定" alt="XXXの画像">
1
2
<br clear="all">
3

とすると、ダイアリ内のテキストは全て画像の右側に回り込みます。

もし回り込みを解除したい場合は、上記のように好きな位置でbrの属性 clear を指定します。(allにすれば全解除となるようです)


例では画像表示はhtmlで書いてますが、はてな記法

はてなダイアリーのヘルプ - はてなフォトライフに登録した写真を表示する(fotolife記法)を使っても、回り込みしてました。


ご参考になれば幸いです。

id:fuku33

有難うございます。参考になります。

2007/01/20 21:43:28
id:hamster009 No.3

回答回数3431ベストアンサー獲得回数50

ポイント20pt

rssで定義しておいたらいいと思います。

管理画面のデザイン->スタイルシートに

たとえば、左寄せの場合、

div.leftimg {
        float: left;
        margin-top:5px;
        margin-right:8px;
}

と書いておき、

ダイアリーの本文で、

<div class="leftimg">
(はてな記法でイメージ指定)
</div>

と指定するだけです。

id:fuku33

有難うございます。いろいろやりかたがありますね。もうちょっと考えて見極めたいので、まだ回答を募りたいと思います。

2007/01/20 21:48:39
id:hamster009 No.4

回答回数3431ベストアンサー獲得回数50

ポイント5pt

はてなダイアリーでは3のようにやらないとスタイルシートは追加できません。

id:fuku33

そうですか。どうも。

2007/01/21 13:43:55
id:blanccasse No.5

回答回数142ベストアンサー獲得回数15

ポイント15pt

(質問の意図を読み違えていたらごめんなさい。その場合は、もちろんポイントは要りません。)

おっしゃっているのは、回り込みの仕方ではなく、写真と文字をぴったりくっつけたいということでしょうか。その場合は、管理→デザイン→詳細を開いて、スタイルシートの追加をすれば可能です。

まず、ご自分の日記のソースをブラウザに表示させ、スタイルシートのURLを探して下さい。

<link rel="stylesheet" href="http://d.hatena.ne.jp/theme/○○○.css" type="text/css" media="all">

というのが、それです。このURLをコピーしてURL先に移動すると、スタイルシートがブラウザに表示されますので、全文をWordなどにコピペします。その後、文字検索機能を使って、投稿画像が「今日の一枚」ならば『img.photo』、フォトライフを使っているなら『img.hatena-fotolife』と『.pframe』という箇所を探して下さい。使用しているデザインテーマによって内容は異なるかと思いますが、

img.photo {
	float: left;
	margin: 15px;
	border: 0;
}
img.hatena-fotolife {
	margin: none;
	border: none;
}
.pframe {
	float: left;
	margin: 0 2% 1% 0;
	padding: 0 5px 5px 0;
	border: none;
}

こんな部分がありませんでしょうか?これが、はてなダイアリーで写真の体裁を整えるために使っているCSSです。

この中の『margin』が写真などの要素の外側に空白を作るためのもの。『padding』は内側に空白を作るためのものです。なので、ここの数値を『0』または『none』に変更し、変更を加えた部分を塊ごとコピーし、管理→デザイン→詳細を開いて、一番下にあるスタイルシートという欄にペーストします。

例えば

img.photo {
	float: left;
	margin: 0;
	border: 0;
}

をペーストするということです。これで大丈夫なはずですが、確定する(『この内容に変更』ボタンを押す)前に、直っているかどうかプレビューで確認してみてくださいね。

上手くいくことをお祈りしています!(・・・って、その前に質問の意図を誤解していませんように・汗)

id:fuku33

どうもありがとうございます。質問の意図とは少し違うのですが、応用編としていずれ使わせて頂きます。

ではこの辺で終了させていただきます。

2007/01/21 18:39:08
  • id:hamster009
    不良質問者ですね。
  • id:Marco11
    どのへんが不良ですかね?初心者なもので勝手がわかりません。
    配当ポイントの基準が不明で、しかも回答内容を見てみるとちょっと不当ではありますね配当がw。
    個人的にはhamster009さんがダントツいるか賞ですよ、ありがとうございました。

この質問への反応(ブックマークコメント)

トラックバック

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません