「松本ホームページをもっとかっこよく」を英文にすると[Matsumoto website creation More cool]となります。Gデザインもウェブデザインも英文を使うとかっこよくなるのです。でもビジネスで利用するならやっぱり日本語のコピーライトが必要でしょう。英文を使わずCoolなホームページ制作をするウェブデザインーは凄いのです。
また、コーディングでCSSを使ってテキストを縦書きにするコーダーは凄い！
クリエータボックスさんの技術も凄い
昨夜、長野市の帰りに高速は雪が降っていました。そんな激しい雪ではありませんが、クリスマスまで、松本ホームページに雪を降らせてみました。こんなのは、「美しい日本語」のクリエータビックスさんに比べれば、赤ちゃんでも出来るような技術です。それでもウェブで縦書きの内生は画像で処理をしてしまいます。でもこれからのウェブでは、文字などを画像にするとモバイルで見えにくくなります。松本のホームページをもっとかっこよくしたのですが・・・・？
和的なサイトのデザインでは、今までは、画像として表現していた縦文字をテキストで表現できるCSSがあるようです。今までの和的なビジネスでは、横文字のテキストを使うしかありませんでした。それは、CSS3 Writing Modesというモジュールを使うのだが、詳しくは専門的になるので、興味のある人は以下のサイトを参照してください。
クライアントのためになる新しい技術や新しいGoogleなどの要望に常に対応するのがウェブ屋の使命だと私は考えます。この気持がなければ、WEB屋をやる資格さえないと考えています。そんなことから、直ぐにこの縦書きのテキストを試してもたいと思っています。
WEB制作をする上で画像やテキストを含ませたボックスを並ばせるレイアウトを作ることが多くある思う。
例えば下のようなデザイン。よく見かけるおなじみのレイアウトだ。
大抵は複数のボックス共通のCSSを定義し横に並べて、幅いっぱいに到達したらカラム落ちしてキレイに並ぶといった仕組みだろう。
当然ボックスとボックスの間にはマージンを付けたいのだが、一番端にくるボックスが上手く並ばないことがよくあると思う。
そうした時に、従来ならJavascriptでキレイに並べられるライブラリを使う方法などがあったが、WEB制作者ならそんなところにJavascriptの手を借りたくないというのが本音だろう。
現在ではCSS3のnth-child()という、要素が何番目の子要素かによって該当するものにだけCSSをかけることができる疑似クラスがあるようだが、今のところまだレイアウトに関わる部分はCSS3を使うことは気が進まない。今日も同僚のデザイナーとそんな話をした（IEユーザがまだまだ多いため）。
そんなときに使えるのが親ボックス（親要素）にネガティブマージンを付けてあげる方法。横並びするボックス（子要素）に右マージンを付けているのなら、その親ボックスにマイナスの右マージンを付けてあげればいい。この方法ならIE6にも対応させることができるはずだ。
昔から多用してきたにも関わらずネガティブマージンという名前は知らなかったが、是非ためしていただきたい。サンプルコードは書きませんので。悪しからず。
WordPressのビジュアルエディタは実際の表示をプレビューしながら投稿や固定ページを作成できるわけですが、スタイルシートも編集に反映されたらより便利です。
特にクライアントに納品するWordPressサイトであれば、使える機能かもしれませんね。
今日はその方法を紹介します。
functions.phpに以下のコードを記述をします。（※＜＞は全角で書いています。実際は半角にします。）
＜?php
add_editor_style(‘editor-style.css’);
?＞
上記コード内の「editor-style.css」がビジュアルエディタに適用させるスタイルシートです。
テーマディレクトリ直下に「editor-style.css」を作成するとビジュアルエディタに反映されるというわけです。
作成した「editor-style.css」に、通常どおりスタイルを記述するとビジュアルエディタに反映されます。
ビジュアルエディタ用に独立したCSSなので好きに記述して構いませんが、実際の表示に合わせる目的であれば…
＜?php
php the_content();
?＞
…に適用させているスタイルに近い記述が必要になります。
是非お試しください。
これまで様々なサイトに携わってきたが、CSSファイルの細分化には気を使ってきた。
なぜなら、圧倒的に管理が楽だからだ。
制作中もさることながら、再び改修する際も自分が見て分かるようにマークアップし、IDやクラスのネーミングも統一化させ自分の中で定義付けを行うことで、久しぶりに覗く自らが書いたコードにもすんなり順応できる。
その際に多用してきたのが「@import」。
CSSを細分化し（要するにブロックごとに分けたり、用途によって分けたり…）読み込ませることで、加筆や削除を容易にさせておくことができる。全体的には変えないが、ちょっと大がかりに変えるなどという場合に、他の部分に影響なすることなくスムーズな改修ができる。
しかし、@importはレンダリングが遅いのも事実だ。おそらくPHPやCGIを使ったサイトだと軽く不愉快なほど遅く、昔のWordPressやXoopsではかなり体感できるほど読み込みスピードが遅い。
最近では「Object Oriented CSS」という手法が採用されているとのことだが、調べてみると既に自分も少し導入していた手法であった。
IDにスタイルを定義付ける手法が一般的だ。つまりロケーション（ヘッダやフッタ…）ごとにスタイルを作る。しかし、Object Oriented CSSとはサイト全体クラスを付けて、必要なプロパティを「パーツ」のように付けていく。
簡単に言うと、よく使うプロパティは色々なところで再利用できるということだ。サイト全体をObject Oriented CSSで作ったことはないが、パフォーマンスも向上するのだろうか？
初動制作時の工数はかかりそうだが、これも自分の中のスタンダードを徐々に構築しておくことで、再び改修する時に手間がかからなそうだ。
CSSの擬似セレクタである「:before」と「:after」はcontentプロパティというものが使える。
これがまたWEBを彩る要素として非常に便利で、最近多用する。
最初は、IE7以下が未対応ということもありリストにちょっとしたアイコンを付けたくても避けてきた手法だが、数々のモダンブラウザの台頭により、そろそろ使っても問題ないだろうと思い、今では躊躇なく使っている。
contentプロパティで挿入出来るものは画像やテキスト。よく使うのは「»」や「«」。リストやボタンに使うことが多い。テキストは2バイト文字でも表示されるようだが、16進数値文字が推奨されている。
ただし、以下の様な一定の規則がある。
使いようによっては非常に便利で、テキストにオススメアイコンやNew!アイコンをつけたり、ダウンロードリンクにexcelやPDFのアイコンをつけたり、印刷リンクにプリンターのアイコンをつけたり…。用途は様々。
ただし冒頭で話したとおりIE7以下は無視されるので、無くても意味は通じる程度の使い方が今の段階では無難である。
