web

height:0;で画像置換(背景置換)するっス

画像置換用画像

前置き(おもひで)

なんでもかんでもcssでやりたがる時代の終わり頃に、text-indentに負の値を指定してテキストを画面外に飛ばし背景画像のみを表示させる画像置換(Image Replacement)が流行りました
(FirefoxのアドオンWeb Developerでcssを外したりして、文字だけのシンプル(質素)な表示になるコーディングに喜びを感じてた人も居たはず)。

その方法のメリットはうろ覚えだけどjavascriptを使わずにロールオーバーを作れて、音声ブラウザにも読み上げられて、”画像にalt”より”生のテキスト”の方がSEOに有利なんじゃないかとかそんな感じでしたっけ?

デメリットは、印刷設定で”背景を印刷しない”になっている(印刷用cssも用意されてない)場合に置換した部分が印刷されなかったり、画像無効css有効なブラウザブラウザだと画面外に飛ばしたテキストも背景も表示されないなど、これで不具合でるのって特殊な環境だからたいしたデメリットでもないよね?仕方ないよね?みたいな扱いだったような。

その後SEO界隈のtext-indentに負の値てスパムになるんじゃない?みたいな話題が絡んで、altをちゃんと入れておけばわざわざ画像置換しなくてもいいらしいですぜとか、jQuery便利!javascriptを自分でoffにしてる人の事なんてしったこっちゃないよ(最低限の情報が表示されれば問題ない)的な風潮になってcssで画像置換する機会が減ったり減らなかったりの毎日で、今の主流はどんな感じなんでしょうか。

とりあえずtext-indentさせずに画像置換するメモ

appleのサイトで使ってる感じのheight:0;overflow:hidden;paddingでやるやつ。

[html classname=”html-sh”]
<p id="irsample1">乱雑モックアップ</p>
[/html]
[css classname=”css-sh”]
#irsample1{
width:480px;/*画像の横幅;*/
height:0;
padding-top:100px;/*画像の高さ;*/
overflow:hidden;
background:url(画像url) no-repeat;
}
[/css]

背景画像で置換した表示結果

乱雑モックアップ

上記使用font / セプテンバー-教漢(無料お試し版)

(関係ないけどURLはURIの一部だから今までのURLはURIと書くのが正しいような事を聞いた気がするけどbackground:urlなんですよね、これはなぜだろう、うちの勘違いなだけでしょうか?)

続きを読む

段落って難しい。

お恥ずかしい話なんですけど、段落というものがよくわからんです。

わからんといっても、段落には形式段落意味段落の2種類があることや、それぞれの概念も一応知ってるつもり。
しかしそれでもイマイチ段落というものがどうしたら適切になるのかよくわからんのですよ。

意味段落をフィーリングでしか片付けられない。

わからんわからん言っても少なからず文章は書いてきたわけで、じゃあ今までどうやってきたのか?と過去を振り返ってみるとやっぱりフィーリング。
それと嗜好。

例えばその昔、次のような出来事がありました。

「あんたの書く手紙の文章が誰かに似ていると思っていたんだけどわかった、原田宗典っていう最近はエッセイばっかり書いてるけど小説家の文章に似てるんだ、読んだ事ある?」とたずねられた事があって、「読んだこと無いし誰だかしらん、どこが似ているのか?」と答えたら「大雑把に言うと文章に句読点というか読点があまりないところ」とのこと。

当時はなぜか読点(、)が嫌いだったのと、文章によくわからん勢いを持たせたくて区切りのわからない文章を書いていたので、たしかに上で言われたような書き方をしてた。

不思議な事に、そんな書き方をしていても(日本語で?)紙に書く手紙だと普通に読めてとくに読みづらくなりもしないみたい、言い回しが関係してくるのかもしれないし内容がないからなのかもしれないけど。

けどそのノリでメールを書いたり、フォーラムで質問したり回答したり、blogに文章を書くとこれがうまいこといかない(というか、うまいこといってない手応えを感じる)。
自分でも見づらいし。

徐々にメールは短文になり、質問などは細かく説明するようになって(気力と時間がある時は)文節が長くなって、blogの時はいまだにどうしたらいいのかわからないまま。

でもってWebサイト作成時の話

時代やhtmlの習熟具合によって変化してきた。
なぜなら最初は<p>(paragraph)の存在すら知らなかったので例に漏れず<br>の連続だったような気がするけど、詳しい事は覚えてない。

Web制作とは直接関係ない仕事でWebサイトを編集するようになってから(文章のルールが決められていない場合)は、句点(。)で改行が入ると個人的に見やすいような気がしたので句点ごとに<br>、これが形式段落。
1行分のスペースが開いたら意味段落だと思って<br>の連続で意味段落としてた、多分まだ<p>タグを知らない酷い話。

Web制作の会社に就職して、独学でHTMLを勉強してWeb標準っちゅー流れがある事を知ったり、lintで文法をチェックするようになったり、アメブロによくある改行を多用してるブログに嫌悪感を持つようになったり、観覧者のブラウザサイズは一定じゃないのに何かに合わせて改行をコントロールするのはどうなんだろう?と考えたりしてるうちに<br>を使う事に抵抗を感じるようになって句点(。)ごとに<p>を使うようになる。
しばらくそんな状態でやってきて今も基本は全部<p>だけど、<br>で形式段落、<p>で意味段落か形式段落に落ち着いた感じ。
結局、意味段落はここは意味の繋がりがあるよねってフィーリングのまま。

段落とかパラグラフとか

段落について調べて(検索)していくと、日本語には元々段落というものは存在しなかった的な話があったり面白い(Ted’s Coffeehouse 2: 日本語文章においての段落概念の欠如 (The Lack of the Paragraph Structure in Japanese Writing))

例えば『源氏物語』にはパラグラフ構造がなく、始めから最後までのっぺらぼうに続いており、日本の古典はすべてそうである、といっている。現在印刷されている古典にパラグラフの形が見られるのは、後の編集によるものであろう。

パラグラフって何だろう?

文章の節または段落。みたいな説明をよくみる。
または、トピックであったり、ひとつのテーマだったり、論点だったり主張だったり。

なるほどなぁと思った説明があったので引用させてもらうと。
パラグラフについて書いた外山滋比古。パラダイムのシゲルちゃんじゃないからね。(日本人と西欧人の思考形式の違いかぁ、一応なるほどだけど・・・) – Comments by Dr Marks

確かに「パラグラフとは段落のこと」である。そして、その段落とは文章の区切りであり、字下げ(indentation)や行を空けることによって区切られた文(sentence)のまとまりである。また、それぞれの文のまとまりは、一つ一つの段落の中で意味やアイディアが完結している。したがって、この最後の点が日本語の段落とは様相を異にする。

日本語の段落は、国語学者によって形式段落と意味段落という区別が試みられたように、普通は一つの(外形的・形式的)段落が意味やアイディアを完結することがない。一般的には日本語の段落はすべて形式的な(つまり字下げや行空けがあるだけで)段落に過ぎず、意味やアイディアが完結していない。意味やアイディアが完結するためにはいくつかの形式段落を繋ぎ合わせなければならない。そして、意味としてあるいはアイディアとして一まとまりになった(完結した)段落を無理に意味段落と呼んでいる。

したがって、日本語の見かけ上の段落(形式段落)は短く切れ切れであるが、英語のパラグラフであれば、見かけ上の段落(形式段落)と意味のまとまりの段落(意味段落)が合致するため、日本語の段落よりはるかに長くなる。(英語のパラグラフはすべて意味段落。)どうして日本語の段落が形式的で短いかということについては諸説ある。どうやら、英語の段落のように長い日本語は読みにくくなるらしい。これは確かにそうで、余も日本語のブログの段落は短い形式段落を採用している。

最初の「紙に書いた文章の読みやすさが変わらないようだ」云々は、句読点はないけど見かけ上のまとまりがあったからとか、読んでる人達が段落にこだわりがなかったからとか、短い文章だったからとか、社交辞令だったとかの理由が考えられるのかな?

Webの場合、日本語の段落として扱うより英語のパラグラフとして扱った方が自然ぽい。

パラグラフ・ライティングとトピック・センテンス

そうすると(うちはよく知らないんだけど)英文の定番らしいパラグラフ・ライティングとトピック・センテンスを使えば論理的な文章を自然なマークアップで記述できるようになるのかな?

パラグラフライティングの参考

第3回プロから学ぶ「わかりやすい文章の書き方」
実践!作文研究~メールマガジン・第190号
パラグラフライティングとトピックセンテンス | SEO 検索エンジン最適化 ソーシャルニュース

トピックセンテンスの参考

「トピック・センテンス」とは何か
トピックセンテンス(小論文の書き方)
実践!作文研究~メールマガジン・第194号

問題は

すでにある変更できない(そしてパラグラフ・ライティングとトピック・センテンスを踏まえていない)文章は、どのようにマークアップしたら適切になるのか?
なんだけど、やっぱりフィーリングなの?

【WordPress3.0】予定に基づいたメンテナンスを行っているためしばらくの間ご利用できません。少し間をおいてサイド確認してください。から抜けるには。

[image]終わらないメンテナンス

プラグインの自動アップデートが完了する前にダッシュボードへ戻ったら(せっかちなので)
予定に基づいたメンテナンスを行っているためしばらくの間ご利用できません。少し間をおいてサイド確認してください。』のメッセージが消えなくなった。
こんな時間にレンタルサーバーのメンテナンス?とか一瞬思ったけど、いやいやいやそれはないなとすぐその考えを打ち消す。
自身の直前の操作が怪しすぎたもの。

検索してみると、WordPressのルートフォルダにある.maintenanceを削除すればメンテナンスモードから抜けられるとの事。
削除してみたら見事にメンテナンスが解除されました。良かった。
今度からアップデートが終わるまでちゃんと待とう。

簡単に Another HTML-lint gatewayで html のチェックが出来るブックマークレット。

[追記]現在は使えなくなっちゃいました><;;;

うおおおおおおおおおおおおおおおお 突然ですがこれは『気合いの雄叫び』ですッ!

昔は Web developer ( Firefoxのアドオン ) から簡単に、現在見ているページをAnother HTML-lint gatewayでチェック出来ていたのですが、ある日気がつけば以下の文言が表示されるようになって慌てた人も多いのではないでしょうか?

[image]このメソッドは禁止しています。 フォームページ から利用して下さい。とブラウザに表示されている画面

自分がそうだったからって、他の人もそうなんじゃないですかとか決めつけちゃって失礼ですよね、ごめんなさい。
とりあえず、ひとしきり騒いだ後、“外部からのGETリクエスト停止” になった事を知り肩を落としそして少し泣きました。

それ以来 ( 2009年4月30日以降) html の検証をするには、Another HTML-lint gatewayにアクセスして
チェックしたいHTMLのURLを指定するか、HTMLを下のテキスト領域に直接記述して、[チェック] ボタンを押して使う事になりました。

当時はもう文法チェックする頻度も下がってはいたけど、Web developerからチェックする事に慣れきっちゃっていたので
いざ普通に使おうとしたらウオオオオオ ウダラァーーーッとまでは行かないまでも、面倒くさい事面倒くさい事。

あれから一年余、なんと現在も有効なAnother HTML-lintのブックマークレットがありましたッ!
Another HTML-lintのブックマークレット | 沖縄のWebデザイナーChopstickBrunch
また、簡単にlintにかけられるなんて日が来るなんて、感無量。

続きを読む

Google Analytics 非同期トラッキングコードが、標準のトラッキングコードとしてご利用いただけるようになりました。とのこと。

よくわかっていないで書き込んでます。今更でしたらごめんあそばせ。

どうも非同期トラッキングコードが正式版になったみたい。
Analytics 日本版 公式ブログ: 成長し続ける Google Analytics のエコシステム

非同期トラッキングコード
昨年 12 月に公開した非同期トラッキングコードが、標準のトラッキングコードとしてご利用いただけるようになりました。新たにプロファイルを作成した際、標準のトラッキングコードとして、トラッキングコード設定ウィザードに表示されます。

違いは何?何かいいことあるの?

いままで</body>の直前だったトラッキングコードの挿入場所が</head>の直前に変更されたみたい。
それによってより正確に計測できる、と。

Analytics 日本版 公式ブログ: Google Analytics のトラッキングコードが新しくなりました

新しい非同期トラッキングコードは、ga.js トラッキングコードで計測可能なデータセットと同様のものを得ることができます。

両者の唯一の違いは、計測対象ページへの挿入場所です。従来のga.js トラッキングコードの場合、body セクションの最後に挿入することをご推奨しておりました。一方、新しい非同期トラッキングコードは、他のJavaScript コードの読み込みが完了しなくても正常にロードできるため、HTMLファイル内の head セクション内に記述することが可能です。

ページ末尾に入れる ga.js の場合、ページの読み込みに時間がかかると、り離脱したセッションを正確に計測できないという不都合がありましたが、新しいトラッキングコードではそのような懸念がなくより正確なデータを計測できるため、ぜひ多くのユーザーの皆さまにご利用頂ければと思います。

「り離脱したセッション」は原文ママです。

続きを読む

更新したページと投稿を表示するウィジェット

WordPressに最初からついてる「最近の投稿」ウィジェットは、文字通り最近の投稿しか拾ってくれない。

乱雑モックアップは、勉強したり試したりしながらその過程やメモを書いてたりするので、投稿に「続編」がしばしば発生する。
続編の扱いをどうしたらいいのかなーというのはずっと考えていて、いまだ結論がでない。

今のところ続きがある場合は、別エントリーとしてポストしてきた。
古い記事を更新しても「最近の投稿」に表示されないから。

といった流れの中、WordPressで再更新(アップデート)した過去記事も最新記事に含ませるカスタマイズ法 – かちびと.netを読んだ。
そしてウィジェットを探してみたら見つけたのが更新した投稿とページのウィジェット→Recently Updated Pages — 病的溺愛シンドローム

これはディ・モールト、ディ・モールト。
さっそくWordPress › Recently Updated Pages « WordPress PluginsWordPress › Recently Updated Posts « WordPress Pluginsをダウンロードしてみた。

(ページの更新情報を上げる必要もないから)先にRecently Updated Postsの方を有効にしてみると、んーこれはまだ微妙かも、日付の扱いが。

次にRecently Updated Pagesを有効にしてみる、設定はこんな感じ。
[image]ウィジェットの設定項目

投稿日が表示されるのではなく、最終更新日が表示されるようだから日付は非表示でもいいかなぁ。
[image]表示結果
問題は誤字脱字を見つけて内容以外を修正した投稿も上がってしまう事かな、と。
age/sage機能があればいいのに。

[追記 / 20100610]
Include blog Posts in the list:(投稿もリストアップする)にチェックを入れると、htmlが酷い事になってた。
ナニが原因なのかわからないけどリンクを < /a> で閉じたり、ちゃんと閉じてるとこもあるのに、なんでだろ?
チェックを外せばおかしなhtmlを吐き出さないけど、ページしか拾ってくれないし意味がない。
弱った。

続きを分ける事の良い部分

注)うちの所感です。

  • 1つのエントリーが長くならない(分割してても無駄に長くなってるけど)
  • どこが更新した部分か判りやすい
  • 更新分が最新の投稿になる

関係ない所まで読み込む必要がない。

反対に悪いところは

  • 前後のエントリーを参照しないと判らない事がある
  • 検索でやってきて、古い方の投稿を最初に見た人は何回かリンクをクリックしなきゃならない

関係する部分が点在しちゃうと面倒。

Recently Updated Pagesがあれば
(要点をちゃんとまとめられていたらば)追加の情報は別エントリーに分けずとも同じエントリー内に足していった方が良いのではなかろうか?と思うんだけど
あーでもこれやっぱりモノによるんだろうなぁ。ん~。