WordPress ヘッダータイトル文字を画像に変える(レスポンシブ対応)
WordPressのデフォルトテーマは タイトル部分（ホームページの最上部、会社名等を入れている部分）には文字しか置けないようになっています。 テーマ内ファイル (header.php) をじかに触ればいいのですが、テーマをバージョンアップすると元に戻ってしまいます。 今回は、そのタイトル部分をテーマのファイルを変更せずに アクションフックとCSS で画像に置き換える方法をご紹介します。そしてさらにレスポンシブ対応にします。 タイトル文字を画像に変える方法 タイトル画像アップロード まず、画像を用意します。今回使用する画像はこちらです↑ この画像を管理画面の左メニュー「メディア」＞「新規追加」よりアップロードします アップロード後、画像の「編集」リンクをクリックします。 その画面で右側に表示される ・ファイルの URL（アップロードされたファイルの場所） ・サイズ（例では320×60 ）
[CSS]画像置換「-9999px」のパフォーマンスを改善した新しいテクニック
テキストで実装した見出しなどを画像に置換するテクニックで「-9999px」が有名ですが、そのパフォーマンスを改善するテクニックを紹介します。 Replacing the -9999px hack (new image replacement) [ad#ad-2] 画像置換：-9999px 改善したテクニック 画像置換：-9999px -9999pxを使った画像置換のテクニックは、下記のようになります。 HTMLは見出し要素で実装します。 HTML <h3 id="sample06">見出しのテキスト</h3> 「text-indent:-9999px;」でテキストを見えない位置にし、見出しとなる画像を背景画像として表示します。 #sample06{ width:300px; height:50px; background:url('bg-01.gif') no-repeat 0 -250p
CSS Browser Selector
Clever technique to help you on CSS hacks. Last updated: November 02, 2010 (v0.4.0) CSS Browser Selector is a very small javascript with just one line which empower CSS selectors. It gives you the ability to write specific CSS code for each operating system and each browser. EXAMPLE The JavaScript support is disabled on your browser. Please, enable JavaScript and refresh this page. The color of th
YUIのCSSライブラリとは
リセットCSSを使ってみる JavaScriptライブラリと聞くと、デザイナーやマークアップエンジニアの方には無縁のものと思われるかも知れません。しかし、Yahoo! UI Library（YUI）にはもう一つ「CSSライブラリ」というものがあります。今回は、CSSライブラリの使い方を紹介します。 まずは、CSSや装飾用のタグを一切使わず、次のようなシンプルなHTMLをWebブラウザで表示してみます。サンプルソースをこちらからダウンロードできますので、ご覧ください（813_1.zip/1.96 KB）。 sample1.htmlをWebブラウザでプレビューしてみると、見出しが非常に大きな文字で表示され、リストには黒丸が表示されています（図1-1）。これは、Webブラウザが文書を見るための最低限のスタイルを標準で持っているためで、デザインを施すためにはこのスタイルを一度無効にしてから、スタイ
ProCSSor - Advanced CSS Prettifier
First Place For The Best Virginia Events! When it comes to events there is no where better to get your updated info. You will see a list of the current and upcoming events below. From county fair to music festivals to petting zoos, there is an amazing list of events for all ages around Virginia.' Focusing on amazing fun for the entire family! The County Fair features great events and games for all
[CSS]IEのhasLayout関連のバグと解決方法をまとめたサイト -hasLayout.net
IE6/7/8のhasLayoutが原因でおきるスタイルシートのバグとその解決方法をまとめたサイトを紹介します。 hasLayoutについては、以前のエントリで紹介しているので参照ください。 IEでのCSSのバグを回避するhasLayout hasLayout.net バグは現在、IE6(44個)、IE7(28個)、IE8(19個)登録されており、各ページにバグの解説、バグが生じるデモページ、バグの解決方法とそのデモページなどが掲載されています。 IEのCSS Bugs一覧表の一部 また、CSSのチュートリアルでは、IEの便利なトリックも掲載されています。 CSS Tutorial 例えば、下記のようにIEでクリックした際に生じる点線は、他の箇所をクリックしないと消えないため、クリック後しばらくして消したり、元から表示させない方法などが紹介されています。 クリック時に生じる点線の処理方法
たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE
IE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプトを紹介します。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSの知識をもっと深める30+2の小技テクニック集｜Webpark
W3C CSS 検証サービス
https://quarter4.info/create/css-reference.html