March 31'2025
×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
November 12'2006
画像の回り込みについて。
回り込みと言うのは下の画像のように画像の横に文字などがある状態です。
方法はスタイルシートであったりHTMLであったり様々ですが、今回は記事内の話にしぼるのでHTMLのほうを。
(文字だけでなく他にも色々置けますし、画像以外にも指定できます)

回り込み自体は記事の投稿をHTMLエディタで行っていればかなり簡単にできるものです。(そういうボタンがついてますので)
で、じゃあ問題ないじゃないと思われがちなんですけども、実はこの回り込みと言う物は
解除する必要があるのです。
回り込みは簡単にできるのに、解除を簡単に行うボタンがついていなかったので少々ご説明を。
まずは回り込みを解除しなかった場合に起こりえる問題を。
HTMLエディタの「雛形」を利用して「回り込み解除のタグを追加しなかった場合」です。

記事内の文字の量が少ないとこうなります。画像の下にまで文字があふれ出る状態であれば記事枠からはみ出すといった状況にはなりませんが、画像とちょっとした言葉を…なんて場合にはこうなります。
で、これに回り込みの解除タグを追加するとどうなるか。

解除タグを追加するかしないかで、他が同じでも見た目にこれだけの差がでてくる事になります。
<br clear="all">はHTML4.01では非推奨要素とされていますが、使えるものは使っていったほうが良いとわたくしは思っております。
また、これ以外にもスタイルシートで回り込みを解除する方法なども色々ありますので、非推奨要素が気になる方はそっちのほうも調べてみるといいかもしれません。
記事に画像を多く扱われる方で記事のレイアウトにもこってみたいと言う方はこの「回り込みの解除」も覚えておくと思い通りのレイアウトに近づけるのではないかと思います('-'*
回り込みと言うのは下の画像のように画像の横に文字などがある状態です。
方法はスタイルシートであったりHTMLであったり様々ですが、今回は記事内の話にしぼるのでHTMLのほうを。
(文字だけでなく他にも色々置けますし、画像以外にも指定できます)
回り込み自体は記事の投稿をHTMLエディタで行っていればかなり簡単にできるものです。(そういうボタンがついてますので)
で、じゃあ問題ないじゃないと思われがちなんですけども、実はこの回り込みと言う物は
解除する必要があるのです。
回り込みは簡単にできるのに、解除を簡単に行うボタンがついていなかったので少々ご説明を。
まずは回り込みを解除しなかった場合に起こりえる問題を。
HTMLエディタの「雛形」を利用して「回り込み解除のタグを追加しなかった場合」です。
普通に使用するとソースはこうなっています。実際の表示はこんなかんじ。
オレンジ色が回り込みの指定です。
<img width="100" height="100" align="left" alt="" style="margin-right: 10px;" />
<h3>Type the title here</h3>
Type the text here
記事内の文字の量が少ないとこうなります。画像の下にまで文字があふれ出る状態であれば記事枠からはみ出すといった状況にはなりませんが、画像とちょっとした言葉を…なんて場合にはこうなります。
で、これに回り込みの解除タグを追加するとどうなるか。
赤文字が回り込みを解除するための部分です。スッキリ枠に収まります。
<img width="100" height="100" align="left" alt="" style="margin-right: 10px;" />
<h3>Type the title here</h3>
Type the text here<br clear="all">
解除タグを追加するかしないかで、他が同じでも見た目にこれだけの差がでてくる事になります。
<br clear="all">はHTML4.01では非推奨要素とされていますが、使えるものは使っていったほうが良いとわたくしは思っております。
また、これ以外にもスタイルシートで回り込みを解除する方法なども色々ありますので、非推奨要素が気になる方はそっちのほうも調べてみるといいかもしれません。
記事に画像を多く扱われる方で記事のレイアウトにもこってみたいと言う方はこの「回り込みの解除」も覚えておくと思い通りのレイアウトに近づけるのではないかと思います('-'*
November 11'2006
忍者式メールフォームのテンプレートですが、忍者さんの広告タグ部分に直書きのスタイルシートがついているものとついていないものがありして…。
これはメールフォームのタグを発行した時期によって変わるようです。また、広告の内容(文字内容)も時期によって多少違いがあるようです。
で、この広告部分のタグがどうなっているかによって当方のテンプレートを使用した際、FireFox等で閲覧したときにウチの著作権表示と忍者さんの広告表示が重なってしまう場合があります。
IEでは問題ないので気づかれない方も多いやも知れませんが、フォックスだと少々見栄えが宜しくないように思えました…orz
直書きスタイルシートで広告の「高さ」が設定してあり、それが15pxなのです。
で、横幅も設定してあるので広告の内容(これは時期でかわっているようです)によっては広告が二行になります。
で、文字の大きさも設定してあり文字の大きさは10pxです。広告が二行になる場合、どんなに小さくしても高さ20pxないと足りない訳です…orz
本日発行しなおしたタグだと広告が二行になってしまいました…orz
IEははみ出したら高さの設定をシカトこいて表示してくれるのですが…(いえ本来それが間違ってるんですけどね…)フォックスちゃんは高さを指定するとその高さを忠実に再現いたします。
なのでその下のものと重なります。
で、配布テンプレートには以下のようなスタイルシートがついていまして、これで忍者さんの広告の位置を多少整形してたんですが、この3pxの部分を10pxに変更すれば何とか重ならずに表示が可能になります。
/*忍者メール広告*/
#shinobi_jp_text{
margin: 0 10px 3px 10px;
}
ただこの修正を行うと、今度はIEで見た時に妙な幅が開く事になります…orz
既存のハックはIE7の登場で今後なるべく使いたくないなぁと思ったりもするので…
どうしてもと言う方は、この症状の回避の為でしたら今後、メールフォームテンプレートについては著作権表示の削除をして下さってもOKということにしようと思います。
見栄え悪いんじゃ本末転倒だ…(・ω・`
その場合は使っているブログでもHPでもどこか片隅にでもリンクでも貼っといてやって頂けると嬉しく思います(強制ではありませんのでそのあたりはそれぞれおまかせで)
やはり直書きスタイルシートには対抗しきれませんでした…orz
今後作るメールフォームテンプレートはもうちょいそのあたり頭ヒネってみようかと思ってます。
これはメールフォームのタグを発行した時期によって変わるようです。また、広告の内容(文字内容)も時期によって多少違いがあるようです。
で、この広告部分のタグがどうなっているかによって当方のテンプレートを使用した際、FireFox等で閲覧したときにウチの著作権表示と忍者さんの広告表示が重なってしまう場合があります。
IEでは問題ないので気づかれない方も多いやも知れませんが、フォックスだと少々見栄えが宜しくないように思えました…orz
直書きスタイルシートで広告の「高さ」が設定してあり、それが15pxなのです。
で、横幅も設定してあるので広告の内容(これは時期でかわっているようです)によっては広告が二行になります。
で、文字の大きさも設定してあり文字の大きさは10pxです。広告が二行になる場合、どんなに小さくしても高さ20pxないと足りない訳です…orz
本日発行しなおしたタグだと広告が二行になってしまいました…orz
IEははみ出したら高さの設定をシカトこいて表示してくれるのですが…(いえ本来それが間違ってるんですけどね…)フォックスちゃんは高さを指定するとその高さを忠実に再現いたします。
なのでその下のものと重なります。
で、配布テンプレートには以下のようなスタイルシートがついていまして、これで忍者さんの広告の位置を多少整形してたんですが、この3pxの部分を10pxに変更すれば何とか重ならずに表示が可能になります。
/*忍者メール広告*/
#shinobi_jp_text{
margin: 0 10px 3px 10px;
}
ただこの修正を行うと、今度はIEで見た時に妙な幅が開く事になります…orz
既存のハックはIE7の登場で今後なるべく使いたくないなぁと思ったりもするので…
どうしてもと言う方は、この症状の回避の為でしたら今後、メールフォームテンプレートについては著作権表示の削除をして下さってもOKということにしようと思います。
見栄え悪いんじゃ本末転倒だ…(・ω・`
その場合は使っているブログでもHPでもどこか片隅にでもリンクでも貼っといてやって頂けると嬉しく思います(強制ではありませんのでそのあたりはそれぞれおまかせで)
やはり直書きスタイルシートには対抗しきれませんでした…orz
今後作るメールフォームテンプレートはもうちょいそのあたり頭ヒネってみようかと思ってます。
November 10'2006
忍者ブログ用共有テンプレート・6
【tmp_Can wait until spring】
春を待つことができます(春を待つ間に書く手紙)
1カラム風・ナチュラル系?
2006.11.10配布開始
一見1カラム風ですが、最下部にプラグインエリアを2列で作りました。
プラグインは左が1,2。右が3,4,5です。
プラグインエリアは不要なら削除も可能で、削除してただ日記のように使う事もできます。
(削除する部分は配布テンプレートのHTML内に記載してあります)
忍者式メールフォームを「自作CSS使用」でプラグインフリーエリアに設置した場合の整形用CSSが入れてあります。普通に忍者式メールフォームを設置するだけで行間やフォーム幅がデフォルトよりは見栄えよくなるはずです。
サンプルプレビューでは表示されませんが、記事日付の「月」部分は英語表記でちゃんと入ります。
(プレビューでは英語表記の月は見れないようです、このブログの月表記の仕方と同じです)
珍しくコメントやトラックバックの表示名部分を画像にしてみました。
てんとう虫つきのトップ画像もあったりします。
記事タイトルにも使用したので、てんとう虫ダラケになってしまうので登録したのはてんとうむし無しのトップですが、お好みでお取替えも可能です。
こちらはお持ち帰りでアップロードしてご利用下さいませ。
(リンク先の画像を保存してください)
トップ画像を差し替える場合はスタイルシートの以下の赤文字部分をアップロードした画像のアドレスに変更してください。トップをてんとう虫つきにして記事タイトルを他のものに変えても結構いいかもです
#TopTitle {
margin: 0 1px;
padding: 10px;
text-align: left;
background-image: url(http://blog.cnobi.jp/v1/blog/user/f120fdc7823cb38f0c6103dc0fbbfd3e/1163114454);
background-repeat : no-repeat;
background-position : left top;
}

November 10'2006
1カラムは結局てんとうむしのワンポイントになりました。
いろいろいじっている間にテーマが出てきたのでそのままゴーでてんとうむしです。
あーでもないこーでもないと、大したことのない素材のわりに二日もかかってしまったという…。
久しぶりにペインター様にもお世話になりました。(どこに使ってるんだかサッパリ謎な仕上がりっぷりですけども)
そしてスッキリシンプルの予定が、出来上がってみたら今までで一番沢山画像を使っているテンプレートになりました。
コメント表示のとことかどーしてもハンコ押したみたいにしたくて…恐らく使う人にはほんとどうでもいいとこなんですが(笑)作る側のつまらないこだわりで少々カスタマイズ性が落ちました。
タイトルに春っぽい名前がついていますが、春を待っている間に使ってもらいたい感じです。
初の1カラムなんでもしかしたらどっかポカとかしてるやもです…orz
とりあえず登録をお願いしてきましたので、ポカをしていなければ近日登録されているのではないかと思われます。
いろいろいじっている間にテーマが出てきたのでそのままゴーでてんとうむしです。
あーでもないこーでもないと、大したことのない素材のわりに二日もかかってしまったという…。
久しぶりにペインター様にもお世話になりました。(どこに使ってるんだかサッパリ謎な仕上がりっぷりですけども)
そしてスッキリシンプルの予定が、出来上がってみたら今までで一番沢山画像を使っているテンプレートになりました。
コメント表示のとことかどーしてもハンコ押したみたいにしたくて…恐らく使う人にはほんとどうでもいいとこなんですが(笑)作る側のつまらないこだわりで少々カスタマイズ性が落ちました。
タイトルに春っぽい名前がついていますが、春を待っている間に使ってもらいたい感じです。
初の1カラムなんでもしかしたらどっかポカとかしてるやもです…orz
とりあえず登録をお願いしてきましたので、ポカをしていなければ近日登録されているのではないかと思われます。
November 08'2006
郵便局のサービスでフレーム切手と言うものがあるんです。
切手一枚あたりの価格が少々高くなりますが、自分で用意した写真やイラストを組み込んで切手を作って貰えるんですよ。
去年は喪中で戌年に愛犬の年賀状が出せなかったので…今年はこれで愛犬の切手を作って年賀状を出そうと思っているのです(笑)
他にもこれでオリジナル切手とか作ってみたら楽しそう!とかかなり思っていたりします。
こんなデザインどうかしら?とか楽しい
手紙はそんなに出すほうではないですが…作ってたまには手紙でも出してみようか、あの人にこの人にとか。
写真プリントのプリンターが購入されて居間に置いてあったので、どうも家族は猪シカトで図柄も愛犬にするツモリっぽいですが…
犬用おせちとか犬用クリスマスケーキとか犬用クリスマスディナーの注文確認メールも楽天から来ていました。ちょっと吹き出しました。
(うちの両親はメールチェックできない人なのでわたくしがかわりにやっております…メーラーの立ち上げ方すら何度教えても覚えません)
年末もやはり我が家は犬中心で回っていくようです。おそらく来年も(´-`)
切手一枚あたりの価格が少々高くなりますが、自分で用意した写真やイラストを組み込んで切手を作って貰えるんですよ。
去年は喪中で戌年に愛犬の年賀状が出せなかったので…今年はこれで愛犬の切手を作って年賀状を出そうと思っているのです(笑)
他にもこれでオリジナル切手とか作ってみたら楽しそう!とかかなり思っていたりします。
こんなデザインどうかしら?とか楽しい

手紙はそんなに出すほうではないですが…作ってたまには手紙でも出してみようか、あの人にこの人にとか。
写真プリントのプリンターが購入されて居間に置いてあったので、どうも家族は猪シカトで図柄も愛犬にするツモリっぽいですが…

犬用おせちとか犬用クリスマスケーキとか犬用クリスマスディナーの注文確認メールも楽天から来ていました。ちょっと吹き出しました。
(うちの両親はメールチェックできない人なのでわたくしがかわりにやっております…メーラーの立ち上げ方すら何度教えても覚えません)
年末もやはり我が家は犬中心で回っていくようです。おそらく来年も(´-`)
November 08'2006
今まで1カラムのは一回も作った事がなかったので、1カラムの日記みたいなメモ帖みたいなテンプレートを作ってみようかと思っています。
自分のとこはサイドがごちゃごちゃしてたり、配布物の説明が必要だったりカテゴリーがないと面倒な事になりそうだって状況なので1カラム無理そうなのですが…orz
憧れなんですよね1カラム。
色々設置したかったり内容が多岐に渡る人にとっては使いやすいのかどうかは微妙なところなのですが(実際どんな内容が書かれているのかカテゴリーみないとよくわからない部分でもあったりするので)ストイック(?)な雰囲気に憧れるのです、一列。
あとはHPを運営していてブログもやってる人向けとか。
スッキリ目で微妙にかわいい?みたいな紙っぽいやつを目指そうと思います。
悩んでいるのが、ワンポイントいれようと思ってるんですが、鳥にするかてんとう虫にするか。
鳥は前に作ったしてんとう虫かなぁ…。かたつむりもいいんだけど季節はずれすぎですね
(てんとう虫も十分ハズレですが)
先日の牛とろを食べつくしたので再度注文しようと思ったら、何かで紹介されたようで注文殺到で注文受付一時停止になってました…orz
悔しいのでフンパツしてステーキ頼みましたヨ…
自分のとこはサイドがごちゃごちゃしてたり、配布物の説明が必要だったりカテゴリーがないと面倒な事になりそうだって状況なので1カラム無理そうなのですが…orz
憧れなんですよね1カラム。
色々設置したかったり内容が多岐に渡る人にとっては使いやすいのかどうかは微妙なところなのですが(実際どんな内容が書かれているのかカテゴリーみないとよくわからない部分でもあったりするので)ストイック(?)な雰囲気に憧れるのです、一列。
あとはHPを運営していてブログもやってる人向けとか。
スッキリ目で微妙にかわいい?みたいな紙っぽいやつを目指そうと思います。
悩んでいるのが、ワンポイントいれようと思ってるんですが、鳥にするかてんとう虫にするか。
鳥は前に作ったしてんとう虫かなぁ…。かたつむりもいいんだけど季節はずれすぎですね

先日の牛とろを食べつくしたので再度注文しようと思ったら、何かで紹介されたようで注文殺到で注文受付一時停止になってました…orz
悔しいのでフンパツしてステーキ頼みましたヨ…

About this site
- 「忍者ブログ」と「忍者式メールフォーム」のテンプレートを作成配布しています。
search this site
Categories
Recent entries
- ああああ (11/11)
- ぬぬ (04/11)
- 多忙極めり (03/04)
- いつものことですが (01/10)
- 新年もよろしくおねがいします (01/01)
- 年の終わりにバックアップ (12/30)
PR
Comments list
Archives
Trackbacks
Recommend
- 忍者ブログで使えるドメインサービス
- VALUE-DOMAIN
- WEB Free Service
- RSSリーダー機能搭載ブラウザ「Lunascape」
- FC2カウンター
- WEB Service
- ★可愛いレンタルサーバーLOLIPOP!
- ムームードメイン
- Free BLOG Service
- FC2ブログ
- ウェブリブログ
- FC2ミニブログPIYO
- I use it
- 日本最大級ショッピングサイト!お買い物なら楽天市場