ブログの手引き yozoの気が向いたと記2.0

ブログの手引きの記事一覧

2008/09/08 スポンサーサイト
2006/08/26 画像タグのエラーを回避する。
2006/08/21 画像を左右に並べて間に文を書く
2006/08/17 HTML4.01からXHTMLへ　図形のalign属性によるWin+IEの表示の不具合を直す。
2006/08/09 トラックバック３＜休止ブログを狙う海外スパム＞
2006/08/03 新バナー発表！エキサイトブログ→FC2へ引越し作業報告

2006年08月26日

画像タグのエラーを回避する。

2006/08/25現在、FC2ブログの記事で使用したい画像がある場合は、[ファイルアップロード]で画像をアップロードして、[記事を書く ]生成される<img>タグは、そのまま使用すると、XHTMLではエラーになってしまう部分があります。

<a href="画像URL" target="_blank"><img src="画像URL" alt="画像の代わりの文字" border="0"></a>

記事に使用する部分は<img ～>の部分だけですから、不要な部分を取り除きます。

<img src="画像URL" alt="画像の代わりの文字" border="0">

画像タグ<img>をXHTML準拠させてエラーをなくすには下の３点に注意してください。

alt="画像の代わりの文字" width="幅" height="高さ"を設定します。
border="0"など画像のデザインの設定はCSSで行います。
※CSS編集で.upimg{border-style:none;}を追加して、class="upimg"を<img>の中に
追加するか、style="border-style:none;"を<img>の中に追加しましょう。
<img>は<img />のように、半角スペース＋半角の/を最後につけます。

　FC2の場合はalt="画像の代わりの文字"の部分はありますが、枠線のborder="0"が勝手に入っています。そして最後の半角スペース＋半角の/がありません。これらを修正します。

<img src="画像URL" alt="画像の代わりの文字" width="幅" height="高さ" class="upimg" />

このようにすれば、画像タグ<img />のエラーをなくすことができます。
実際yozoは今のところ、画像を使用するときには、一旦すべてアップロードして、[記事を書く]をすべてクリックして投稿画面に画像タグ<img />を出します。それを切り取ってサクラエディタの新規画面に貼り付けて、[検索]-[置換]を使って一挙に修正しています。参考までに、そのやり方の手順を下に書いておきますね。(*^-^)
フリーソフトサクラエディタのダウンロードページ→サクラエディタ Download

置換前　</a> 
置換後　空白(何も記入しない)
置換前　border="0">
置換後　width="幅" height="高さ" class="upimg" />

↓　ぽちっと応援お願いします♪ m(_ _)m

↓yozoの気が向いたと記2.0の関連記事紹介

【画像タグのエラーを回避する。の続きを開く】

スレッドテーマ:カスタマイズ:ブログ

2006年08月21日

画像を左右に並べて間に文を書く

←
「おしえないー♪」
って教えなさい！
(;｀O´)o!

→
これも秘密？
(/=｀◇´)/≪教えろー

左のこうさぎ：うさも
右のこねこ：うららちゃん

うららちゃんは、さるのこしかけのウッキさんちのこねこです。

　8/18のここの記事BlogPetうさもwithうらら　２匹deﾂｯｺ＠後姿ラブリー同盟で、BlogPetのキャプチャー画像を両サイドにして、その間に文章をセンタリングして記入しました。この方法を今後のために記録しておきます。
この書き方で、Another HTML-lint gatewayでのエラーはありませんでした。m(_ _)m

CSS編集をしない場合

<div style="text-align:center;">
<img src="左の画像URL" style="float:left;" /><img src="右の画像URL" style="float:right;" />
画像の間に書きたい文
 </div>

画像タグでは、alt="画像の代わりの文字" width="幅" height="高さ"を忘れずに指定しましょう。 はこのタグ以降の文字の回りこみを解除するために使用します。
この記事の最初に用意した例の場合、下のように書いています。

<div style="text-align:center;"><img src="左の画像URL" alt="画像の代わりの文字" width="130" height="200" style="float:left;" /><img src="右の画像URL" alt="画像の代わりの文字" width="130" height="200" style="float:right;" />←
「おしえないー♪」
って教えなさい！(;｀O´)o! 
→
これも秘密？
(/=｀◇´)/≪教えろーｵｵｵ!! </div>

CSS編集をする場合

CSS編集への追加

/*文字の回り込みの設定*/
.imgleft
{
float:left;
}
.imgright
{
float:right;
}
/*テキストの中央揃え*/
.textcenter
{
text-align: center;
}
/*文字の回り込みの解除*/
.clear
{
clear:both;
}

記事の書き方

<div class="textcenter"><img src="左の画像URL" alt="画像の代わりの文字" width="130" height="200" class="imgleft" /><img src="右の画像URL" alt="画像の代わりの文字" width="130" height="200" class="imgright" />←
「おしえないー♪」
って教えなさい！(;｀O´)o! 
→
これも秘密？
(/=｀◇´)/≪教えろーｵｵｵ!! </div>

↓　ぽちっと応援お願いします♪ m(_ _)m

↓関連記事紹介

【画像を左右に並べて間に文を書くの続きを開く】

スレッドテーマ:ブログペット:ブログ

2006年08月17日

HTML4.01からXHTMLへ　図形のalign属性によるWin+IEの表示の不具合を直す。

　yozoの別ブログのうさもの気が向いたと記の2006年8月9日の記事BlogPet俳句を求めて三千里～マルコyozo＆うさみちゃん編～＠後姿ラブリー同盟で、BlogPetの俳句の画像は表示されても、記事本文が表示されたりされなかったりという不具合がありました。記事内のタグの閉じ忘れやら、記述ミスのチェックをしても、これといったミスもなく、どうしようもなくなったので、シーサーサポートにメッセージを送って回答をもらいました。（実は２回メッセージのやりとりをしました。）

　背景画像を使用している箇所に、align属性の入っている画像タグを挿入した際に、Windows IEで連絡した現象が発生しており、下記方法での記事の編集をしてほしいとのこと。
・imgタグにalign属性を挿入しない
・align属性を挿入せず、tableを使用して記事の投稿を行う

BlogPet俳句を求めて三千里～マルコyozo＆うさみちゃん編～＠後姿ラブリー同盟の記事では、下のように記事にしていました。

[記事表示]
　うさみちゃんは、ここうさもの気が向いたと記のyozoんちのこうさぎです。この記事の主人公なので紹介させていただきました。（笑）
「このしたは　選択したり　よろしけれ」
　これは、４回目のクリックで詠んだ俳句でした。
　この俳句のしたにあるのは、お友達の詠んだ俳句です。よろしくお願いしまーすということかな？（笑）

[投稿内容]

<img src="画像URL" width="128" height="168" border="0" alt="usami_575.jpg" align="left"> 
　うさみちゃんは、ここ<a href="http://usamo.seesaa.net/">うさもの気が向いたと記</a>の<a href="http://www.blogpet.net/profile.php?id=efb6110af1f8aec81f5a51b33c3da27e">yozo</a>んちのこうさぎです。この記事の主人公なので紹介させていただきました。（笑） 
<div align="center">「このしたは　選択したり　よろしけれ」</div> 
　これは、４回目のクリックで詠んだ俳句でした。 
　この俳句のしたにあるのは、お友達の詠んだ俳句です。よろしくお願いしまーすということかな？（笑）

おもいっきり、<img>の中にalign="left"が入ってますね。でも、これをなくすと、画像の右に文字が回り込みしてくれないので、tableを組むと重くなるので嫌だし･･･っとそこで、愛用の標準HTML、CSS&JavaScript辞典で調べると、CSSを使って、次のようにするとありましたので、やってみました。

<img src="http://～省略～" style="float:left;">･･･････････画像の右側の文章････

これでこの記事すべての<img>タグ22個を修正して、再投稿すると、見事に表示のエラーは消えてくれました。(*^-ﾟ)vｨｪｨ♪

　お友達のROOM-Mのmioさんの記事HTML4.01から、XHTMLへの記事で紹介されていたAnother HTML-lint gatewayでエラーのチェックをしました。(下は2006/08/17現在の結果です。これでも最初よりもエラーの数は200個は減ってます。┐(￣ヘ￣）┌ ﾔﾚﾔﾚ･･･ )

http://yozoblog2.blog63.fc2.com/ を XHTML1.0 Transitional としてチェックしました。530個のエラーがありました。このHTMLは -50点です。タグが 41種類 1521組使われています。～以下省略～

　このAnother HTML-lint gatewayは、URLを入力するだけで、ブログのエラーのチェックができて、解説もでてくるという優れものです。みなさんも是非トライしてみてくださいね。とてもいい勉強になりますよ。(*ﾟ▽ﾟ)*｡_｡)*ﾟ▽ﾟ)*｡_｡)ｳﾝｳﾝ

　そして昨日(8/16)、これまたお友達の、のんびり前進じたばた生活のまゆびさんの記事HTML4.01とXHTMLによりますと、ブログの世界では、HTML4.01からXHTMLへと移行していて、XHTMLに対応させておかないと、ブラウザによっては上手く表示されない等の不具合を招くことにもなりかねないとのこと。まさしく今回のyozoのケースそのものでした。

　お二人の記事と、Another HTML-lint gatewayのチェック結果の解説により、以下の項目を修正しました。楽しくブログを続けるためにも、エラーのない記事を作成して、どのブラウザでも正しく表示できるようにしたいなぁとあらためて思いましたよ。
　また、以前のyozoの回り込みやセンタリングについての記事センタリング♪についても、全面的に修正させていただきました。m(_ _)m

<img>の中のborderはCSSで設定するので、削除しました。
また、align="left"については、style="float:left;"に書き換えました。
終わりに「半角スペース+/」を挿入しました。<img />
による文字サイズや色などの設定はすべてCSSでするようにして、は使わないようにしました。
<div align="center">はとしました。
不要な は削除しました。必要な分は に変更しました。
は に変更しました。

<img src="画像URL" width="128" height="168" alt="usami_575.jpg" style="float:left;" />　うさみちゃんは、ここ<a href="http://usamo.seesaa.net/">うさもの気が向いたと記</a>の<a href="http://www.blogpet.net/profile.php?id=efb6110af1f8aec81f5a51b33c3da27e">yozo</a>んちのこうさぎです。この記事の主人公なので紹介させていただきました。（笑） 
「このしたは　選択したり　よろしけれ」 
　これは、４回目のクリックで詠んだ俳句でした。
　この俳句のしたにあるのは、お友達の詠んだ俳句です。よろしくお願いしまーすということかな？（笑）

お友達のXHTML関連記事の案内
記事名をクリックすると設定記事が別窓で開きます。
参考にしてくださいね。m(_ _)m

ROOM-Mのmioさんの記事HTML4.01から、XHTMLへ
のんびり前進じたばた生活のまゆびさんの記事HTML4.01とXHTML
KOROPPYの本棚のKOROPPYさんの記事ブログの文法をチェックしてみました
徒然冩眞館のmaRkさんの記事 HTML4.01からXHTMLへについて

↓　ぽちっと応援お願いします♪ m(_ _)m

↓yozoの気が向いたと記2.0の関連記事紹介

【HTML4.01からXHTMLへ　図形のalign属性によるWin+IEの表示の不具合を直す。の続きを開く】

スレッドテーマ:カスタマイズ:ブログ

2006年08月09日

トラックバック３＜休止ブログを狙う海外スパム＞

　久しぶりにトラックバックについて書きます。8/2にメインブログを引越ししました。そして旧ブログのyozoの気が向いたと記には、突然ですがブログを移転しました♪という記事を最後の記事として残してきました。

　8/4に記事修正に旧ブログを開くと、あるはある、海外スパム14件がびっしり入っていてビックリしましたよ。ご丁寧にトップ記事のタイトルのリンクを入れてのご来訪のようでした。┐( -"-)┌ﾔﾚﾔﾚ...
　それですべてのスパムトラバの削除をして、新規コメント及びトラバを禁止にしました。ここのブログへのリンクをはっておきましたよ。ヾ(￣o￣;)ｵｲｵｲ

　引越ししたあとのことを、ほったらかすと、荒らされるって聞いていましたが、まさかローカルなyozoのブログまでがこんなに早く荒らされかかっていたとはビックリしました。ちゃんと終わりも管理しなきゃいけませんね。いい勉強になりましたよ。(ﾟｰﾟ;Aｱｾｱｾ

　それ以降、海外スパムがここのブログにやってくるというのはないですね。営業トラバはめっちゃ多いですけどね。なにしろ、ここのブログは生まれたてですから、えっちらおっちら、禁止URL＆ワード登録＋削除をやってます。(*´ο`*)=3 はふぅん

↓　ぽちっと応援お願いします♪ m(_ _)m

スレッドテーマ:伝えたいこと:ブログ

2006年08月03日

新バナー発表！エキサイトブログ→FC2へ引越し作業報告

8/2

　FC2へ過去ログすべてをバックアップし、インポートしました。
　BlogPetの[設定]-[ブログ]で、「ブログのURL」のみ入力して、一番下の[設定]をクリックしてから、下のように入力します。
- 「BlogID」→0
- 「ブログのユーザーID」→FC2登録時のメールアドレス
- 「パスワード」→FC2のログインパスワード
再度、一番下の一番下の[設定]をクリックしました。
　次に、[機能一覧]をクリックして、下のように設定します。
- 「ペットの投稿頻度」→「一週間に一度」
- 「Blogへの投稿」→「許可する」にチェック
[ブログへの投稿テスト]をクリックしてテストしましょう。
成功すれば、BlogPetが投稿するようになります。
また、「ブログへのコメント」→「許可する」にチェックすると、BlogPetがコメントするようになります。
　BlogPeopleの[各種申請]-[変更サイトURLの変更・追加申請]で『引越し』で申請しました。

8/3

人気ブログランキングの[登録修正]でブログ名、URLを変更しました。
ブログペット・リング(BlogPetRING) の登録変更しました。
http://www.multiburst.net/cgi-bin/blogpet-ring/ering.cgi
上のURLのページを開いて、一番下の「登録内容変更/削除」の「登録No」と「パスワード」欄に入力して、[認証]をクリックすると登録内容変更の画面が開きます。この画面で変更しました。
新バナー設置しました。
　今日8/3は、またまたとってもハッピーな日でした。以前に、エキサイトブログのバナーも作成してくださった、お友達の【猫のお凸（でこ）】の凸ねこさんから、ここの新ブログ用のバナーをプレゼントしていただきました。わぁいヽ(ﾟｰﾟ*ヽ)(ﾉ*ﾟｰﾟ)ﾉわぁい
凸ねこさんとっても素敵なバナーをありがとうございまっす♪ここのブログのバナーはずっとこれを使わせていただきます。本当にありがとーございまっす♪m(_ _)m
なお、このバナーの設置のしかたはコチラ→BlogPetうさもの背景紹介～バナー紹介SP～ yozoの気が向いたと記2.0

Copyright ©2005-2006
【猫のお凸(でこ)】・素材の蔵出し
by凸ねこAll RightsReserved.
エキサイトブログのトップを編集して、うさもをはずして、新ブログへの案内を加えました。
リンク先に「移転のお知らせ」のメッセージ送信し、ブログ巡回をしながら、気付いたことをやっていくつもりです。みなさんもお気づきの点がありましたら、遠慮なくドシドシ指摘してくださいね。よろしくお願いします。m(_ _)m