人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

●質問者: fuku33
●カテゴリ:はてなの使い方 ウェブ制作
✍キーワード:HTML いもの はてなダイアリー はてな記法 サイト
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● kumonoyouni
●30ポイント ベストアンサー

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


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に自分で撮った写真を投稿するとき、著作権や肖像権、意匠権などの問..

をご参照ください。


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

◎質問者からの返答

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

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


2 ● kumonoyouni
●30ポイント

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


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

IMG{
 float : left;
}

を指定します。


そして、

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

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

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


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

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


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

◎質問者からの返答

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


3 ● hamster009
●20ポイント

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

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

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

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

と書いておき、

ダイアリーの本文で、

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

と指定するだけです。

◎質問者からの返答

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


4 ● hamster009
●5ポイント

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

◎質問者からの返答

そうですか。どうも。


5 ● blanccasse
●15ポイント

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

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

まず、ご自分の日記のソースをブラウザに表示させ、スタイルシートの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;
}

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

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

◎質問者からの返答

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ