Drupalのテーマについてなんですが、なかなか気に入ったものが見つからない。

僕が求めているのは、次のようなもの。

• ゴテゴテしすぎない。
  • でかい画像は使用しない。
    • 特にヘッダ部分にでかい画像とかないでしょ。
    • 別にテーマを見せたい訳じゃないし。
  • リストマーカに画像とか不要だし、画像使った角丸も要らない。
• できれば1カラム。
  • 2カラムでもいいんだけど、サイドバーにあたる部分はメインのコンテンツ(ブログだったらエントリ本文)より後ろに記述されて欲しい。
    • CSS切ったときに(あるいはCSSの無効な環境。例えばGoogleのモバイルゲートウェイ通したとき)ページの頭の方にサイドバーとかあっても邪魔だと思うから。
• 非幅固定。max-widthはあり。
• 読みやすい(行間とか)/分かり易い(リンク要素とか)。
• 配色が僕好みであること。

今使っているこまでのテーマは、上記に照らし合わせるとかなりダメ(幅固定、サイドバー要素がコンテンツより先に記述、大して 必要性のない背景画像やリストマーカ画像)なんですが、配色だけがお気に入りなんですね。

でもそろそろ嫌になってきたので、テーマ捜索中。

自作？やだ。めんどくさい。

追記

テーマ変えてみたけど、イマイチだなぁ。table使用ってのがねぇ。しばらくころころ変わると思います。

なんかもう面倒なので素っ裸にしてやった。どうにでもなーれー。

自分で作るとこうなるんだよ。ホントセンスないよね。

「やる夫ブログ UserCSS」というキーワードで検索してきた人がいたので作った。細部はかなり適当。適当な場所に保存して、拡張子をcssに変更したら、やる夫ブログを開いて、F12を押して、サイトごとの設定を編集... ってのを選んで

表示設定タブを選んで、

ユーザースタイルシートってところの右側の[選択...]ボタンを押してさっき保存したCSSをファイルを選んで、[OK]で完了。スクリーン ショットはこんな感じ。

左右のマージンとか詰める余地ありだけどこれ以上時間かけるのはアホくさいのでしない。余計な横スクロールバーが出なけりゃいいん だ、こんなのは。あ、他のエントリへのリンクとかは全然考慮してないので、どっちかというとRSSリーダで購読してる人向け。

僕自身がどういう時にUserCSSを書くのかってのは以前書いたことがあるので、どんな風に作るのかを 簡単に書いてみようかと思う。

Dragonfly起動！

消したい要素のID/Class名を調べるのに使う。なんかそういう目的のuser.jsもあった気がするのでそれでも可。"表示メニュー→スタイル→クラスとID"でもいい。ただ、Dragonflyだったら、あとで細かい調整はしやすい。

秀丸起動！

別にテキストエディタは何でもいいです。


@charset "utf-8";


と記入。まとめブログ系だと、AA対策でフォントをMSなんとかゴシック、みたいなフォントにしたいときがあるので、文字コードの指定は必須。どんな時でも書く ように癖つけるといい。

あとは消したい要素のIDやclass名、どちらもなければ、親要素とか調べて、


#left,
#right,
#footer,
#header,
.comment
{display:none !important;}


とかやるだけ。

消したくはないけど、幅広すぎるんだよね、っていう要素があるような場合には、その要素に対して、


#box1{width:auto !important;}


これくらい書けたらCSSファイルを保存して、さっきの要領でそのサイトのユーザCSSとして設定してやって表示してみる。うまくいってない箇所があったら、CSSファイルを編集して開いたまま上書き保存してOperaをリロード。納得いくまで「CSSファイルを編集して」以下を繰り返し。細かいCSSの書き方については説明する気もないので、どっかよそで勉強してきて。

とにかく、そんなに難しい話でもないので、CSSの勉強兼ねてやるとかいうのはありだと思う。そういう気もないなら諦めるか、検索してみるか、作ってくれそうな人をうまいこと誘導して作らせる(もちろん素直にお願いするのも可)とかしましょう。

となってしまうってのは僕の環境が何かおかしいのだろうか？IE以外は対応してますよね？

追記

もう少し調べてみたら、現時点でのWindows用ブラウザとしてはアルファだのベータだのを除くと対応しているのはOperaとSafari(今はインストールしてないの で未確認)だけだった模様。

momizineみたいに「汎用的に使えるUserCSS」は書かない(自分の環境で気持ちよければいいし、そもそも汎用的なものは書けない)ので、滅多に公開したりしま せんが、自分用のUserCSSは結構書いてます。どういうサイトに当たったときにUserCSSを書きたくなるか、という話。

再訪の可能性

当たり前っちゃ当たり前ですが、またここのコンテンツを読みたいと思わないと、書かない。全文配信してるブログの場合は、ブログ自体がどんなにみづらい スタイルでも、RSSリーダで読めばいいので、一々UserCSSなんて書かない。

横スクロールバー

僕にとって読みづらいページスタイルの1等賞が横スクロールバーの出るページ。隠れてる場所に何が書いてあるか、あるいはないかは全く関係がない。横スクロールバーが表示されること自体が気持ち悪くて仕方ないので。広告やアフェリエイトがたくさん表示されていても、横スクロールバーが出ないようなら、大体の 場合はそのまま読む。

アニメーション

横スクロールバーが出ない場合でも、アニメーションする広告やブログパーツの類が気になる場合。もちろん、まずはコンテンツブロックを試すのですが、ブ ロックしきれない場合は仕方がないのでCSSで消すことを考えます。

アニメーションじゃなければいいのかって言うと、いいです。とにかく視界の端でチラチラ動かれるのがイヤ。動かない広告なら表示したままでも大して気に なりません。

どこが本文なの？

本文領域よりサイドバー的なものの領域が広いとかあるいは幅的に同じくらいの場合も気になります。広告を見てもらうのは大事でしょうけどね。

まとめると、広告まで見てほしかったらまず本文を目立たせて読みやすくして下さい。広告がでしゃばればでしゃばるほど広告が目に入らな く、というか意図的に遮断するようになります。

今さらだけど理由を追加

アダルトなアフィリエイト

昼休みに職場で開いたりもするもので。

momizineがいつまでたっても書いてくれないので書いた。リクエストはしていない。

#sub,#footer,#secondary,#header{
        display: none !important;
}
#wrapper,#primary,#main{
        width: 100% !important;
}
#content{
        margin:0 auto !important;
        width:80%;
}

ヘッダもフッタも右側のメニューも全部要らないのでばっさりとdisplay: none !important;。あと適当に幅調整して1カラム化。スクリーンショ ットとか載せるといいんだろうけど面倒くさいので省略。

今時のブラウザでしたらbr+br{display:contents;}とかがいいかもしれません。

このuser CSSを適用すると、ページによってはOperaがCPUを占有してしまって、強制終了する以外になくなってしまう場合があります。ご利用 は計画的に。僕が普段利用する範囲内では平気なんですけどね。

芸能人のブログにありがちな<br>の連打。あれをどうにかuser CSSで無効化できないものかと、ずーっと悩んでた。

br+br{display:none;}

とかやると、どういう訳か<br>が全部非表示になってしまう。

隣接兄弟 選択子は，E1 + E2という構文をもつ。ここで，E2を選択子の主体とする。E1及びE2が文書ツリーにおいて同じ親を共有し，E1の直後にE2がくる場合に，こ の選択子は一致する。

なんだから<br>に続く<br>だけが非表示になって一個目の<br>は有効なはずだろうとか思うのだが、理屈はともかくうまくいかない 。「9 視覚フォーマットモデル」を読みながら色々試してたら、どうやらうまくいった。

br{display:run-in;}
br+br{display:run-in;}

理屈はよく分からないが、とにかく<br>がいくつ続こうが一回だけ改行されて表示されるようになった。懸案一個解決(？)。

追記

Gmail2で適用させると表示がひどいことになりますので、お気をつけ下さい。

さらに追記と修正

「Opera9.50を困らせるCSS発見」を受けて修正。Yahoo地図は確認してないけど、amazon.co.jpは平気だった。

またまた追記

br+br{display:run-in;}にしても駄目なところはありますね。僕が普段行くところでは問題ないですけど、このブログへのrefferrerにあ った、http://www.artisopensource.net/hacks/deliciouspoetry_web_biennial.php?d… っていうURLを開いたらなっちゃいました。ここもまたなんだかよくわからないものすごいページですが。開かない方がいいですよ。リンクもさせません。

またまたまた追記

このCSSのせいじゃないのかもしれない。よくわかんなくなってきた。

2009/12/25追記

このエントリはあくまで、UserCSSとしてOperaなどのユーザさんが自分用にWebページの見た目を調整するための方法として書いたもので す。

○○ブログは勝手に<br />を挿入しちゃうから僕のブログにも採用してみたよ、とか言ってる人を時々見かけますけど、この方法は現時点で もっともユーザ数が多いと思われるInternet Explorerでは無効ですし、そんな小細工に頼るより、そういう余計なことをしないブログシステムに乗り換え たらどうですかね？大きなお世話かもしれませんけど。