|   | 

文字化け対策

WEBページの文字化け対策[MUGENの便覧]に移動しました。

IEでコメントリスト開閉をクリック時の不具合

一部のブログさんで使われているコメントリスト開閉ですが、
最近IEではコメントリスト開閉をクリックするとページの一番上に移動してしまうようになったようです。
下に自分の使っていたものを貼ってみました。
強調している部分が原因だと思われる部分です。

<!--▼コメントリスト-->
<!--not_permanent_area-->
<div class="c-list_body">
<p class="entry-more">
<a href="#" onclick="i=this.parentNode.parentNode.lastChild;i.style.display=['none',''][(i.flag=!i.flag)+0];return false" onkeypress="this.onclick" title="コメントリストを開閉する">コメントリストを開閉する</a>
</p>
<div class="c-list_text" id="c-list<%topentry_no>" style="display: none;">
<dl class="comment-list">
<!--comment_list-->
<dt>  <!--[<%topentry_comment_list_title>] by -->【<%topentry_comment_list_name>】</dt>
<dd><%topentry_comment_list_brbody></dd>
<!--/comment_list-->
</dl>
</div>
</div>
<!--/not_permanent_area-->
<!--▲コメントリスト-->

以前はIEもhref="#"だった場合はページ移動をしなかった記憶ですが、
最近移動してしまうようになったようです。
そこでhrefがあるとページ移動しようとしてしまうのでこれを取り除きました。
そして、そのままだとカーソルを合わせてもカーソルの形が変化しない事と文字色が通常の文章と同じため、
開閉できることが分かりにくくなってしまうので以下のようにしました。
【簡易版】
<!--▼コメントリスト-->
<!--not_permanent_area-->
<div class="c-list_body">
<p class="entry-more">
<a style="cursor:pointer;color:gray;border-bottom:1px solid gray;" onclick="i=this.parentNode.parentNode.lastChild;i.style.display=['none',''][(i.flag=!i.flag)+0];return false" onkeypress="this.onclick" title="コメントリストを開閉する">コメントリストを開閉する</a>
</p>
<div class="c-list_text" id="c-list<%topentry_no>" style="display: none;">
<dl class="comment-list">
<!--comment_list-->
<dt>  <!--[<%topentry_comment_list_title>] by -->【<%topentry_comment_list_name>】</dt>
<dd><%topentry_comment_list_brbody></dd>
<!--/comment_list-->
</dl>
</div>
</div>
<!--/not_permanent_area-->
<!--▲コメントリスト-->

style="cursor:pointer;color:gray;border-bottom:1px solid gray;"
cursor:pointer;でカーソルの形を変え、color:gray;で文字色を灰色にし、border-bottom:1px solid gray;で1ピクセルの単線の灰色の下線を引いています。


もう少しCSSの知識が要りますが、
マウスカーソルを文字列に合わせた時(マウスーオーバー時)に文字色が変更することも再現する場合は
【CSS版】
<!--▼コメントリスト-->
<!--not_permanent_area-->
<div class="c-list_body">
<p class="entry-more">
<a class="comment_list_hover" onclick="i=this.parentNode.parentNode.lastChild;i.style.display=['none',''][(i.flag=!i.flag)+0];return false" onkeypress="this.onclick" title="コメントリストを開閉する">コメントリストを開閉する</a>
</p>
<div class="c-list_text" id="c-list<%topentry_no>" style="display: none;">
<dl class="comment-list">
<!--comment_list-->
<dt>  <!--[<%topentry_comment_list_title>] by -->【<%topentry_comment_list_name>】</dt>
<dd><%topentry_comment_list_brbody></dd>
<!--/comment_list-->
</dl>
</div>
</div>
<!--/not_permanent_area-->
<!--▲コメントリスト-->

とし、外部スタイルシートに

a.comment_list_hover{
cursor:pointer;
color:#AAAAAA;
border-bottom:1px solid #AAAAAA;
}
a:hover.comment_list_hover{
color:black;
border-bottom:1px solid black;
}

を書き加えるとできます。(倉庫の設定ではgrayではなく#AAAAAAだった)
comment_list_hoverは他のクラス名とかぶらなければ何でもいいです。
他の汎用的なa:hoverとの頭を避けるため、スタイルシートの一番下に書き加えるのがいいかもしれません。
試した範囲ではa:hover.comment_list_hoverでもa.comment_list_hover:hoverでも良いようでした。
正しいほうがあり、それを知っている方がいらっしゃればお知らせください。

おかしな点を見つけた方やより良い方法を知っておられる方は是非報告してください。

FC2ブログの保存機能

パソコンでブログの記事を書いている最中に誤ってウインドウを消したりしてしまい、書きかけの記事を消してしまう事があります。
しかし、FC2ブログの場合設定を変えていなければ、定期的に自動保存されるようになっています。
そのため、万が一途中でウインドウを消してしまったりした場合でも、自動保存されている事が多いので、過去の記事の管理から見つかることが多いです。
記事は下書き状態になっていると思われるので、記事数が多く発見できないという方は「状態」から「下書き」に絞ってみるといいでしょう。
注意点としてその記事は下書き状態になっているため、公開する際に下書き状態から公開にすることを忘れないでください。

注1)携帯から更新する際はこの機能がありません。
注2)過去の記事を修正する時、この機能は働きません。


ちなみに、テキストエディタなどに書いてからコピペで書き込むほうが、消えにくくなるとは思います。

ブログ、サイトでの半角スペース

行頭を空白で空けようとしても空かない事があります。
例:下の二つの「a」は編集上では、ほぼ縦に並んでいます。
a
                 a
上側の「a」は半角のスペースで、下側の「a」は全角のスペースで、空白を取っています。
しかし行頭の半角のスペースは表示には反映されないため、このように表示されています。
このためAAを貼ってみたら実際はずれる、という事がおこります。

また、
例: b
このbは編集上では、例:とbの間に上のaと同じだけの空白を半角スペースで作っています。
ですが実際は見て分かるように、半角スペース1つ分しか間があいていません。
これもAAがずれる原因となっています。

以上の様に、デザイン目的での
行頭に半角スペースの使用、
連続した二つ以上の半角スペースの使用、
はできません。

FC2ブログのリンクで リンク先のサイト名にタグを使う

例:右のリンク欄ののサイト名と管理人名の間の改行
FC2ブログのリンク追加は管理画面からサイト名とアドレスを入力すればいいだけなのですが、
サイト名を改行しようと<br>とタグを入れても改行されません。
これは登録の際にタグの部分が削除されてしまうからです。

しかし、登録した後にリンク管理からサイト名にタグを入れた場合はタグを削除されません。
なので、サイト名にタグを使いたい場合は一度登録してから修正すると使えます。

半角記号を正しく表示する(文字参照)

例:<abc
実際にやってみると分かると思いますが、<の直後に半角英字または一部の半角記号を入力すると表示されません。
これはHTMLタグと見なされるからのようです。

このような記号を表記するためには文字参照(character references)と言われる表記をする必要があります。
今回の例のように表示するには「<」をそのまま入力するのではなく「&lt;」と入力します。
こうすることでタグにとして扱われず、「<」を正しく表示できます。

他の文字の例としては「>」は「&gt;」、「&」は「&amp;」と入力すると表示されます。

他の記号にもありますので気になった方や疑問点がある方は「文字参照」で調べてみてください。
(誤っている点があれば教えてもらえれば助かります)


ちなみに、FC2ブログのコメントは通常のタグが使用できないため「<」と入力するとそのまま表示されます。

「半角記号を正しく表示する(文字参照)」の続きを読む »

 |   | 

 検索フォーム


 全記事表示リンク

 全記事表示(500件ずつ)


 プロフィール

vesper

Author:vesper

IRCチャンネルの
#凶悪MUGEN
#凶悪MUGEN_雑談
のログからMUGENに関するものを編集・公開しています。
修正した方が良い箇所があった場合は知らせてもらえると助かります。
MUGEN界隈からはリンクフリーです。
その他からのリンクはご遠慮ください。
このブログをリンクに追加

IRCへの入り方などは
IRCに関する記事
をご覧ください。

簡易凶悪MUGEN IRC情報
・ホスト名
 [irc.friend-chat.jp]
・ポート番号
 [6664]
・チャンネル名
 [#凶悪MUGEN]
 [#凶悪MUGEN_雑談]
 (以下はお好みで)
 [#凶悪MUGEN_艦これ]
 [#凶悪MUGEN_スマブラ]
 [#凶悪MUGEN_麻雀]
 [#凶悪MUGEN_緋想天]
 [#凶悪MUGEN_アカツキ]
 [#凶悪MUGEN_小説]
 [#凶悪MUGEN_絵チャ]

・推奨IRCクライアント
 LimeChat2


 カテゴリ

記述の子カテゴリは目安程度に考えてください。

 最新コメント


 最新記事


 カウンター

累計の閲覧者数:

現在の閲覧者数:

 RSSリンクの表示


他ブログ更新情報(最新70件)

仕様上、下記のリンク一覧でサイトリンクにあるサイトはこの一覧に出ません。

Twitter


基礎リンク集


リンク

サイトに断り書きがない限りリンクさせてもらっています。
リンクしてほしくない場合はお気軽におっしゃってください。