追記用のタグinsとdel
先日ちょっと考えてみたcssの:beforeと:afterという擬似要素の使い方アイディア
caramel*vanilla » 訪問済リンクを視覚的にわかりやすくする工夫
今回は勝手にパート2ということで追記部分をわかりやすくしてみます。
この擬似要素IEはノンサポートなのですがしったこっちゃありませんあしからず :P
その前にWPの投稿画面を見てすごく不思議だったinsとdelというボタンについて…
なんだこりゃ…
押してみると現在時刻が挿入されます。
きっと追記かなにかに関係してるんじゃないかと踏んで調べてみました。
<INS>はInsertの略で、<INS>～</INS>で囲まれた部分が後から追加された部分であることを示します。追加の理由やコメントの文書がある場合には、そのURIをcite属性で指定しますが、内容が簡単な場合にはtitle属性で記述する方法もあります。追加された日時を指定する場合はdatetime属性で指定してください。
<DEL>～</DEL>で囲まれた部分が削除されたことを示します。 例えば、すでに新しい内容のテキストがあって、その違いを示したい場合などに用います。
なるほどなるほどー
追記用のタグなんてあったんですねー
知らないタグがまだまだいっぱいあるんだと思い知らされました。
んでinsの場合はデフォで下線、delの場合はデフォで打消し線が表示されるみたい。
人によって追記を書いたり書かなかったり
追加で書き加えても追加部分を明確にしなかったり人それぞれのスタイルがあるかとは思いますがせっかくこういうタグがあり、ご丁寧にもWPにはそれようのボタンまであるんでせっかくだし今後は使ってみようかと思います。
追記、あるいは削除部分をそれぞれ<INS>～</INS>か<DEL>～</DEL>で囲ってあげることでhtml的には追記・削除部分という事が明確になります。
でもブラウザで見た時には下線や打消し線が表示されるだけなのでよくわからないといえばわからない。
ここでcssで見た目をいじってみようということで:beforeと:afterに話が戻ります。
追記をcssでおめかし
共通スタイル
とりあえず追記部分全体の共通スタイルは以下のようなcssにしてみました。
-
ins,del{
-
text-decoration: none;
-
border: 1px solid #ccc;
-
background-color:#F5F5F5;
-
padding: 3px;
-
margin: 20px;
-
color: #333;
-
display: block;
-
}
追記のスタイル
追記(ins)はins:beforeでブロックの最初に- 追記 -という文字列を入れるようにしてみました。
書いても苦じゃないんですがw
CSS
-
ins:before{
-
content: “- 追記 -”;
-
color: #000;
-
font-weight: bolder;
-
}
HTML
-
<ins>追記(ins)のサンプル</ins>
追記(ins)のサンプル
削除のスタイル
削除(del)はdel:beforeでブロックの最初に- 下記に修正記事あり -という文字列を赤字で目立つように入れるようにしてみました。
CSS
-
del:before{
-
content: “- 下記に修正記事あり -”;
-
color: #F08080;
-
font-weight: bolder;
-
}
HTML
-
<del>削除(del)のサンプル</del>
削除(del)のサンプル
IEの方のために意図した表示画像をご用意しました :P↓
追記を明確にする必要性がないことの方が多いかもしれませんが内容によっては後から再度訪れた人のためにはっきりとわかるようにした方が親切な場合もあるかと思います。
その辺はうまいこと使い分けていこうかと思います。
(誤字脱字程度はよくあるんでそのへんはコッソリ直すと思います :P)
この変更部分も含めて、可視性が低いですよねここ……
月間のアーカイブが付いた(今までもあったのを見落としてましたか？)のだけが嬉しいです。
日常のこと、Webのことなど色々見に来たいんですけど……
失礼な言葉で表現すると「Webオタ臭い」です。
＞ち印さん
勘違いだったら申し訳ないのですがもしかしたら以前ワタシがネット上での人間関係のゴタゴタについてエントリーを書いたときTBくださいませんでしたか??
(確か月別アーカイブをつけていないことについて書いてました)
そのときはTBの意図がわからなくて首をかしげたのですが今回はもっともなご意見だと思います。
コントラストがはっきりしていないことは自分でも理解しているつもりでその点やや自虐的に書いたりもしました。
ただここは個人的なblogだし自分の望むようにやろうと思っています。
OSやブラウザによる表示の違いに頭を悩ませ時間を費やし同じように表示する義務もなければ、全ての人にわかりやすく読みやすく、そして好まれるようなデザイン・内容を書く必要もないと思っています。
だからといって全てを放棄しているつもりはないです。
できれば1人だけのつぶやきの場所にしたくはないですしちょっとはいろんな人に見てもらえたらとは思っています。
ただそのために最大公約数を選択するということをしなかったまでです。
でも今回の可視性についてはフォントのカラーコードを変えるだけでもずいぶん違うと思うので以前から変えた方がいいのかな?とは思ってました。
実際自分自身もblogの固定観念に縛られているのですがblogだから月別アーカイブ必須とは思ってません。
(自分でもあまり利用してません)
カレンダー・コメント・TBさえ必須ではないでしょう?
時系列で遡れなくてもカテゴリーアーカイブや検索があればいいのではと考えています。
もちろんいろんな方法で記事を探せるのは便利ではありますが…
WordPressにはLive Archivesという素晴らしいプラグインがあるのでその内サイドバーの月別アーカイブのリンクは消すかもしれません。
*Webオタの指摘間違ってないと思いますよ。
どっちかって言うと『訪問者さんに媚びた』タイプのblog書きを目指しているもんでちょっとコメント。
読みやすいとか、サイト内を見て回りやすいデザインやレイアウトってなかなか難しいよなぁって。
自分のblogだと過去記事の探し方とかは当たり前のようにわかってるけど、初めて訪れるblogでサイドバーに月間アーカイブとかが無いと過去記事検索に戸惑ってしまう事もあるかも。
サイドバーが長くなりすぎるのは嫌だし、Archivesページを用意しているにもかかわらずサイドバーにカレンダーや月間アーカイブを用意する必要があるのかは悩むところだけど、トップページに月間アーカイブがあると見て回りやすいのもまた事実かと。
でも、昔のc*vは過去記事が探しづらいとは思ったけど今のc*vはLiveArchivesのおかげでだいぶ探しやすいと思う。
う～ん、難しいね。
いろいろ考えてみたけど、こうじゃなきゃいけないって事はない気がするなぁ。
なんの解決にもならないコメントでごめんなさい。
＞なお
解決できなくて当然というか答えなんてないもんねぇ…
立場やコンテンツやターゲットなんかによってBestな方法はそれぞれだろうし
みんなBestを目指してよりBetterな方法を探してるんだよねー
なんだかblogに限らずWebサイトは誰のものかっていう大きなテーマにぶちあたってしまう気がするー
媚びることとユーザビリティは違うだろうし…
それと見やすいから面白いかとかまた来ようと思うかとかいうと決してそうでもないと思う。
よく読めば面白いことが書いてあったとしても一見ダサダサなトコとか見る気も起きないし…
今回使わせてもらってるテーマを見たときに淡い色だけでまとめたいって思って見にくいの承知でこんな感じにしてしまった。
サイドバーのVoteみると可視性の問題は無視できないかなって思ってる。
その反面「無理に見にこなくてもいいですよ?」とも思ったり
せっかく来てくれる人に対してなるべくストレスなく見やすくしたいっていう気持ちも当然ある。
デザイン性と見やすさのバランスを両立させつつ自分のやりたいことができたら最高なんだけどね:P
あたしには無理っぽいですわー
コメントありがとねーー:-)