カテゴリー別にCSSを効かせる方法
カテゴリースラッグ名を出力したい…で書いていたカスタマイズ方法が、これでできると思います。 idやclassに振り分けても良いですが、 head間のスタイルシート毎でも可能になります。 条件タグで分岐するよりも手軽なカスタマイズだと思います。 問題点は、記事に複数のカテゴリーが割り当てられていると、 WordPressの方で優先して登録されたカテゴリーになってしまうことです。 WordPressのカスタマイズのノウハウが溜まってきたので、メモとして残しておこうと思います。 カテゴリー別にCSSを効かせる事前作業として、カテゴリースラッグ名を英文字で付けておく必要があります。 その英文字でつけたカテゴリースラッグ名をファイル名にすればOKです。 head間に以下のタグを記入します。 <?php $cat = get_the_category(); $catslug2 = $cat[0
HTML をシンプルに保ちつつ、ブロック要素の段組みを実現する方法 パート2 | バシャログ。
「HTML をシンプルに保ったままブロック要素を段組みする方法」のパート 2 です。 前回の記事では、float と position の合わせ技により、全体の横幅ピッタリに要素を段組みしました。 今回は、position を使わない方法をご紹介します。 ボックスと余白の幅の値は前回と同じく以下です。 HTML ソースも前回と同じくこちら。無駄な ID や class のないシンプルなソースになっています。 <div id="photo"> <ul> <li><img src="hoge1.jpg" alt="サンプル1" width="160" height="120" /></li> <li><img src="hoge2.jpg" alt="サンプル2" width="160" height="120" /></li> <li><img src="hoge3.jpg" alt="サン
はてなスターの画像が自由に変更できるようになりました - はてなダイアリー日記
さきほど、はてなスターの機能拡張を行い、スタイルシートで設定するだけで簡単にはてなスターの画像を変更できるようになりました。この方法を使うと、はてなダイアリーなど、スタイルシートが編集可能な環境ならどこでも簡単に画像を変更できます。 今回の機能により、「Commentボタン」「Addボタン」「☆」のそれぞれの画像を変更することができます。それぞれ以下の項目を編集することで指定が可能です。 /* Commentボタンの画像をurl()の中に指定します */ .hatena-star-comment-button-image { background-image: url(http://exapmle.com/comment.gif); } /* Addボタンの画像をurl()の中に指定します */ .hatena-star-add-button-image { background-imag
12 のレイアウトを切替可能なテンプレート
1つのテンプレートで 12度おいしい XHTML + CSS テンプレートを公開してみたいと思います。といっても、ごく普通のテンプレートに CSS 切り替え機能を付けただけなんですが、Blog や Webサイトを作られる際のベースとして役立てて頂けたらうれしいです。 サンプルはこちらで確認できます 全ファイルのダウンロードはこちら （zip ファイル / 50KB） 8/10 追記 初期に配布したテンプレート内に、結構な量の誤字等がありましたので、現在の最新版を下記からダウンロードしてください。 では使い方などの説明を。 ファイルをダウンロードして解凍すると下記のようなフォルダ構成になっています。 index.html （XHTML テンプレート） css （CSS ファイル格納フォルダ） img （画像ファイル格納フォルダ） js （JavaScript ファイル格納フォルダ） 基本的に
CSSレイアウト情報を瞬時に確認できるブックマークレット「XRAY」: DesignWorks Archive
【フリー壁紙】A CANDLE LOSES NOTHING by モンクレールウンアウトレット (12/20) 【フリー壁紙】A CANDLE LOSES NOTHING by ルイヴィトンコピー (01/04) 【フリー壁紙】A CANDLE LOSES NOTHING by コピーブランド (11/11) 【フリー壁紙】A CANDLE LOSES NOTHING by バーバリー 財布 メンズ (08/17) 無料で使える2010年カレンダーのまとめ by 浅見 晴美 (11/29) 先日からCSSについて「CSSを整理整頓！使われていないセレクタをチェックできる「CSS Redundancy Checker」」や「使わなくなったCSSを見つけてくれるfirefox拡張「Dust-Me Selectors」」でお伝えしてきましたが、今回は不要なCSSセレクタを探すのではなく、気になる
Webデザインと私: 鼻毛スタイルシート
いま会社で、鼻毛にCSS指定をするというのが、ごく一部でにわかに流行しております。 以下、現在考案されている、鼻毛CSS。 はみ出た鼻毛を切る 鼻毛 { overflow:hidden; } 鼻毛を抜く 鼻毛 { position:relative; top:1000px } はみ出た鼻毛を折り返す 鼻毛 { word-wrap:break-word; } 一定の長さ以上鼻毛が伸びないようにする 鼻毛 { max-height:50%; } 鼻毛を白髪にする 鼻毛 { border-color:#ffffff } 鼻毛の先に鼻くそをつける 鼻毛:after { content:"鼻くそ" } 鼻毛の密生 body { background:url(鼻毛); } 毎日伸びるやっかいな鼻毛をCSSで制御できるなら、こんなにありがたいことはありません。 CSSハックにしてライフハック。 P.S.
tech.nitoyon.com@hatena - はてブのCSSをカスタマイズしてみた
hatena毎日使っているのにデフォルトのスタイルのままになっていた「はてなブックマーク」の CSS を変えました。こんな感じです。 b:id:nitoyon「はてブ」の何となく分かりにくい部分を、分かりやすく見せることを目標に作ってみました。以下では、今回のデザインでこだわった「タイトル部分のアイコン」と「コメントのふきだし」について簡単に説明してみたいと思います。 タイトル部分のアイコンまずは、タイトル部分。デフォルトのタイトル部分のアイコンや数字の羅列は意味が分かりにくいですよね。マウスを乗せたらツールチップで説明が表示されるのですが、なんか直感的じゃない。この部分の数字の意味を分からずにはてブを使ってるひとも多いのでは…。 なので、画像を書き換えて分かりやすくしてみました。RSS の青くてかっこ悪いアイコンも、オレンジ色のおしゃれなやつに。いろんな人にお気に入りにいれてほしいので、
スタイルシート生成ページ
サイドメニューの折りたたみ（v4.0） └ test1 07/03 └ test2 08/11 └ test3 09/25 Firefox・Netscapeで連続した半角文字を折り返す └ test1 09/27 └ test2 09/27 └ test3 09/27 このページで公開テンプレートのスタイルシート（styles-site.css）の配色を変更することができます。 下記のフォームのそれぞれの項目について配色（RGB値または色の名前）を設定し、「配色を確認する」をクリックと、このページの配色が指定したスタイルに変わります。 配色が決まったら「CSSを生成する」をクリックしてください。設定が反映されたスタイルシートが下のテキストエリアに生成されます。 「設定を全て戻す」をクリックするとデフォルトの設定状態に戻ります。 カラム横の背景 *固定カラム/1カラムのみ有効 背景 *エント
もうパンツはかない
このサイトは webサイトのデザインをいろいろ考えてみようかななどとでっち上げたサイトです。ようやく7つ目のデザインとなります。 デザインにはカスケーディングスタイルシート(CSS)を使っています。21世紀の今、テーブルレイアウトでもないでしょうから。ですのでデザイン的にはターゲットとなるwebブラウザは、CSSにきちんと対応した新しめのもの、たとえば Firefox(レンダリングエンジン Gecko を使ったもの。N9なども含む)や 、Opera9、Safari などを想定していますが、HTML的には素直なよいHTMLをめざしてますので、まともなWEBブラウザであれば閲覧に支障はないでしょう。デザインが再現できるかはともかく。 デザインノート 今回のポイントは半透明画像の重ねあわせといったところでしょうか。 一番下の背景の上に3枚の半透明画像が重なり、スクロールするとそれぞれ違う速度で動
2005-08-13
2005-08-13 よくある「float で組む」失敗 web css 郵政民営化の話が面白かったので今更ながら bewaad.com を RSS リーダに登録。で、内容とは全然関係ないけど、CSS のレイアウトがおかしいのに気付いたので一言*1。サイドバーと本文のブロック要素を float でレイアウトしてますが、ウィンドウの幅が狭い時… 2005-08-13 新銀行東京マジヤバいっす! 社会 今回は釣りじゃなかった。「常に新しい」新銀行東京は時代に取り残されていた(高木浩光＠自宅の日記)より: 「都民になったことだし、新銀行東京*1 に口座でも作るか」とサイトを訪れてみたところ、なんと、インターネットバンキングのログイン画面は、アドレ…
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
コメント欄のデザインを変更しました - 僕と懐疑の関係
はてなブログ | 無料ブログを作成しよう
CSSとJavaScriptで飾りつけする吹き出し風デザイン*ホームページを作る人のネタ帳
CSS Menus, css menu - high quality website navigation menus | 13styles CSS Menus
紙屋研究所さんのHTMLが滅茶苦茶なのがいつも気になる。 tableレイアウトで..
CSSによる段組（マルチカラム）レイアウト講座