WordPressにおいて、特定のファイルをアップロードした時や、特定のリンクURLの時に、自動的に指定のアイコン画像を付ける方法
こんにちは。スタッフ＆スピーカー＆スポンサーとして関わっていましたWordCamp Tokyo 2012が終わり、徐々に日常業務に戻していっている、株式会社コミュニティコムの星野邦敏です。 さて、今日は、WordPressにおいて、特定のファイルをアップロードした時や、特定のリンクURLの時に、自動的に指定のアイコン画像を付ける方法について、以下で説明します。 例えば、PDFファイルを、WordPressでは、初期の状態でアップロードしてリンクを貼ることができます。ただ、通常であればそれは、ただのテキストリンクとなってしまうことでしょう。また、クリックすると、いきなりPDFファイルが開く形になり、閲覧者はビックリしてしまうかもしれません。 このような感じです。 この点において、PDFファイルをアップロードした際には、自動でPDFであることを示すアイコンが前に付くと、Webサイトの閲覧者は分
[css] フォームのボタンをスタイルシートで画像ボタンに変更する
フォームのボタンについては以前、buttonタグにボタン画像をそのまま入れるという手法を書きましたが、 もう一つ、ボタンの見た目をCSSで変更する手法がございます。 この記事ではCSSでスタイリッシュなフォームボタンを作る方法について解説します。 メリットとしては、ロールオーバーアクションをCSSで制御出来るという点と、 タイプ属性にimageを指定しないので、送信やリセットなどの機能を殺さないという点があります。 ただし、CSSでのロールオーバーはIE6未対応なので、気になる方はJavascriptと併用してください。 （個人的にはスルーしても問題ないと思っています） (X)HTMLソース buttonとinputどっちでもOK <button id="submit" type="submit">Submit</button> <input id="submit" type="submi
![[css] フォームのボタンをスタイルシートで画像ボタンに変更する](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
hail2u.net - Weblog - floatで並べたリストのセンタリング
ページング・ナビゲーションなどでリスト項目をfloat: left;で横に並べるというのは割りと良く使われると思う。並べること自体は特に難しいわけではないが、その並べたリスト全体をセンタリングしようとするとちょっとややこしい。display: inline-block;を使う手法やdisplay: table;を使う手法という黒魔法的(私見)な手法で実現可能だが、position: relative;でもいける。 ややこしい理由は簡単で、センタリングでよく使われるtext-align: center;やmargin: 0 auto;といった手法が通用しないから。検索するとすぐ出てくる比較的メジャーなdisplayで頑張る方法もわかりやすいし悪くはないのだけど、同一セレクタ内で複数のdisplayを駆使する必要があることやzoomマジックなどを併用する必要があることからコードがややこしくなる
[CSS]背景に指定した画像を印刷させる方法
HTML <h1 id="logo">Site Name</h1> CSS h1#logo{ background: url(images/logo.gif); height: 75px; width: 137px; text-indent: -9999px; } HTML <h1 id="logo">Site Name</h1> <img src="images/logo.gif" class="nodisplay" /> Screen CSS h1#logo{ background: url(images/logo.gif); height: 75px; width: 137px; text-indent: -9999px; } img.nodisplay{ display: none; } Print CSS h1#logo{ display: none; } img.no
![[CSS]背景に指定した画像を印刷させる方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/bc54860ba06deaa45382cf2bddc929515def0354/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fshared%2Flogo-2014050501-en.png)
『印刷用CSSで背景画像を印刷する方法』
本を買わずに解決するWeb制作の小技 ホームページ作成でちょっとしたことを参考書を買わずに解決する方法をPHP CSS Webデザイン jQuery Flashを中心に便利な技をまとめていきます！現在、長野県長野市の制作会社でWeb作成中！ Webサイトを印刷対応にしたい場合、印刷用cssを用意して 印刷用に最適化する。 通常背景を印刷する場合はブラウザの設定で背景も印刷する に設定されていないとできない。 なんとかしたいと思って調べた対応策をメモ デモはこちら まず cssのメディアタイプをprintにする。 <link rel="stylesheet" type="text/css" href="css/print.css" media="print"> cssで対象となる箇所を display:list-item; にする。そして list-style-image に印刷したい画像を
Twitter風のUIをcss3で作る
The Twitter new web interface design is live for many more today. The makeover of the new Twitter was really fantastic, In this post I decided to explain how to implement new Twitter user interface design with CSS and JQuery. Use it and enrich your web applications. Take a look at this awesome demo.
とっても使えるoverflowプロパティ。その使い方色々。
光の4戦士を買ったんすが、売り文句通りレトロな感じがしていいですね。 まぁまだ2, 3時間程度しかやってないんで、これからどうなるか分かりませんが時間を見つけてやって行こうかと。 さて、以前からoverflowプロパティは使い勝手が良いというか、使う場面が多いプロパティの一つですが、考えてみると色んな事に使ってるなぁ～と思ったので自分が良く使うのをまとめてみました。 あんまoverflowプロパティを使った事が無い方は、ビックリですよ！ これで、ソコの可愛いアナタもoverflowプロパティの虜になる事間違い無し！！（わかんないけど サンプルとかは以下よりどうぞ。 サンプルサイトを見る サンプルをダウンロード 基本的に、全てoverflow: hidden; の指定を足す事で解決したり実現出来る感じです。 01 clearfixみたいに使う まずは以前の「clearfixを使わないでやるに
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Button Generator
CSSベースのかっこいいボタンがぱっと簡単に作成できるオンラインサービス -Twitter Bootstrap Button Generator
CSS Arrow Please - By Simon Hoejberg - @shojberg