Contact Form 7 よくあるカスタマイズWordBench京都 2013年1月13日 （2015年7月27日 Contact Form 7 の表記を正しく修正しました）
CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 | バシャログ。
Backjoyを買ってみたらほんとに腰が楽なminamiです。 CSSで要素を上下中央寄せする方法は古くから色々と試されてきました。 今回は海外のサイトで知って目から鱗だった方法をご紹介します。 基本的な設定 上下左右中央寄せしたい要素に以下のCSSを設定します。 position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 任意の値 height: 任意の値 これだけ。これだけで親要素に対しての上下左右中央寄せを実現できます。 追記： 親要素にはposition: absolute;かposition: relative; を設定してください。body に対してセンター寄せしたい場合はそのままでOKです！ 今までtop とleft の値を50%にとって、要素の高さと幅の分だけマイナスのmarg
かなり使える！CSSの画像置換 - /dev/null - タバヤシデザイン
CSSの画像置換(Image Replacement)のお話です。 CSSの画像置換には様々な手法がありますが、どれも一長一短です。特に、CSSによる画像置換は一般的に背景画像を利用するので、印刷時に問題になることが多いです。 今回ご紹介する手法は、CSSなのに背景画像ではなく、画像そのものを配置するものです。説明するよりもコードを見てもらったほうが早いと思いますので、まずはコードから。 <p class="IR">画像置換するテキストです！</p> .IR { display: block; overflow: hidden; width: 300px; height: 60px; } .IR:before { display: inline-block; content: url( 'headline.png' ); } 何をしているのかって言うと、クラスIRを指定した要素に画像サイズ
[CSS]アイテム数が不明でもカラム数に合わせてぴったりに配置するスタイルシート
下記のような3カラムのグリッドに複数のアイテムを配置する時、アイテムの数が3の倍数だったらぴったり収まりますが、アイテムが7, 8個の場合は最後に余白を生じます。 もちろん余白のままでも良い場合はありますが、ぴったり収めたいという時に役立つスタイルシートのテクニックを紹介します。 Tetris & The Power Of CSS 基本となるHTMLは、リストでアイテムを配置します。 HTML アイテム数は、適当に変更して構いません。 <ul class="flex-container"> <li class="flex-item">1</li> <li class="flex-item">2</li> <li class="flex-item">3</li> <li class="flex-item">4</li> <li class="flex-item">5</li> <li cla
Mac起動時にNASをマウントする最も安定した方法♪(Lion対応) - matuダイアリー
我が家のNASには、 音楽ファイル(約400GB iTunes経由) iPhone/iPadのアプリなどバックアップ(約40GB iTunes経由) 写真(約60GB) 電子書籍(約15GB) 音楽以外のCD/DVDイメージ(約60GB) などのデータが入っています。 他にもそれほど容量がないデータも多々ありますが、基本的には家族で共有して使えるデータはすべてNASに入れておきたいと考えています。 BUFFALO 76MB/s 高速転送 ネットワーク対応HDD(NAS) 1.0TB LS-V1.0TL バッファロー 2010-09-15 ￥ 15,311 Amazon.co.jp で詳細を見る ちなみに使っているNASはこれ↑。RAID対応ではありませんが、USBディスクを挿せるので、同容量のHDDを指して日次で差分バックアップをかけています バッファロー製品とMacは相性が悪いとよく言わ
ヤフオク出品物などに！ 200円で驚くほどきれいな静物写真が撮れる、和尚式商品写真撮影ボックス - キャズムを超えろ！
※2011年5月、さらに低価格化した新バージョンを公開↓ 費用10円時間10分。コピー紙3枚だけで劇的に綺麗な小物写真を撮る方法 ライティングボックス作成編 小物の撮影するならこれでキマリ。材料は2つだけで、合計300円。 100円ショップ謹製、模造紙(100円で5枚入り。2枚も使わない) 100円ショップ謹製、園芸用トンネル支柱(U字型) こんなやつ 百聞は一見にしかず。まずは撮影した写真をみてほしい。8000円程度で売っているレンズ(EF50mm F1.8 II)に、入門用のデジタル一眼レフEOS Kiss X3で撮影したものだ。明るいレンズじゃないとダメ、なんてことはまったく無い。EXIF見てもらえばわかるが、作例は全てF10等まで絞って撮影しているからだ。*1 作り方は超かんたん10分作業。トンネル型支柱2本を90度重ねて上部を針金か何かで束ねる。自立することを確認したらフレームに
WordPressスニペット | かちびと.net
Code Note Description 画像のURLからその画像のアタッチメントIDを取得するコード。カスタムフィールドに格納した、どこにも紐付いてない画像の他のサイズのパスを取得する際にどうしても必要になった時に...
プログラミングとサイト構築の情報が集まるウェブマガジン "SMART"
フロントエンドのウェブ制作を学ぶ HTML5やCSS３、JavaScriptなどの言語、それにAtomといったツール、 言語を覚えるための勉強方法などを紹介。
Dreamweaverのデザインビューを使い倒すために覚えてきたいこと | Webデザインのタネ
一定期間更新がないため広告を表示しています
wordpressのpやbrの自動挿入を停止する方法 « ヒヨスケの蔵
Wordpressで、投稿本文の改行してあるところにpタグやbr要素が勝手に追加されるのを防ぐ方法。 下記の記事を参考にしました。 WP clean excerpt：WordPressの抜粋に挿入されるpタグを取り除くプラグイン – AZ store 基本的にはwp-includes/default-filters.phpの中にある以下の記述が原因らしい。 add_filter('the_content', 'wpautop'); こいつをコメントアウトすれば済むんだけど、それだとアップデートした時に、再び修正しないとならない。 別の方法として、テーマファイルの中のfunctions.phpに、以下の記述を追加すればOK。 remove_filter('the_content', 'wpautop'); もしくは、同様の記述をしたものをプラグインとして保存しインストールする。 抜粋文を表示
busilab.com is available at DomainMarket.com
What's in your Domain Name? Print This domain name will potentially help you bring in more customers and profits every day, as the domain itself goes up in value. A super premium .Com domain name from DomainMarket.com means instant branding, search engine, and marketing benefits. We make it safe, easy and affordable for you to own busilab.com right away. Click here to purchase busilab.com DomainMa
wordpressでトップページを固定ページに設定して新着記事も表示する
2010年3月14日 wordpressをCMSとして企業サイトを作るときに役立つ、複数ループのやり方を紹介。 少々、前置きが長くなりますけど。 wordpressをCMSとして使用する際のシンプルなページ構成例 企業サイトなどでwordpressをCMSとして使用する場合、サイトの規模にもよりますが、「お知らせ」などの日々更新されるコンテンツを「ブログ記事」として作成し、その他を「固定ページ」として作成するのが、一般的かと思います。 wordpressでは、固定ページをサイトのトップページ（フロントページ）に設定できるため、スマートなサイト設計が可能です。実在するサイトを例に挙げて説明したほうが分かりやすいと思うので、僕が構築した「とんぼ整体院」のサイトを例に、説明を進めていきます。 下記は、とんぼ整体院のページ構成をまとめたものです。 非常に作りやすそうな、シンプルな構成ですね。更新さ
実質SDカードの容量が無限大に！ 不要になったiPodやiPadやiPhoneを活用可能！ Eye-Fi ロケットニュース24（β）
» 実質SDカードの容量が無限大に！ 不要になったiPodやiPadやiPhoneを活用可能！ Eye-Fi 特集 無線LAN機能付きSDカード『Eye-Fi』（アイファイ）。以前から発売されている次世代SDカードなのでご存知の方も多いと思うが、これはSDカード本体に無線LAN機能を搭載したもので、カメラで撮影した瞬間に、パソコンやiPad等に写真を転送してくれるスグレモノなのだ。 『Eye-Fi』は、周囲に無線LANの電波があればそこに接続し、インターネット上に画像をアップロードすることが可能。パソコンを持っていれば、ダイレクト送信でインターネットを介さずに写真を転送することも可能だ。 さらに凄いのは、iPod touchやiPadやiPhoneにもダイレクト送信で写真を転送できる点である。つまり、古くなって不要になったiPod touchやiPadやiPhoneをデータバンクとして写真
CPIにEC-CUBE 2系をインストール | monotone blog
monotone blog 人生は楽しむためにある！素敵な人生は幸せな毎日から♪ 田舎で気ままに暮らすフリーランスSEの日常を綴るブログ。 最近、CPIというレンタルサーバーにEC-CUBEの2系をインストールしました。 EC-CUBE自体はこれまでにも使用したことがあったのですが、CPIはデータベースの文字コードがEUC固定（MySQLもPostgreSQLもどちらも）ということで、そのままでは使用することができませんでした。 （別の案件で、独自のDBシステムをCPIで動かす際にも色々と苦労しました（＾＾；） 1系のインストールについては、公式のページでインストール方法が紹介されているのですが、最新の2系はサポート外のようです。 というわけで、色々と苦労したので、今後のためにもインストールメモを・・・。 －－－－－－－－－－ まず、ダウンロードしたEC-CUBEのパッケージを解凍すると「
「英語だから…」なんて拒否っちゃ駄目なWEB屋が知っておくべき厳選ブログ、WEBマガジン色々 | バンクーバーのうぇぶ屋
最近やたらWEB屋さん達からの留学相談が増えてきましたが、やっぱり多いのは実際にこっちに来て仕事をしたい、移民したい、WEB業界の交流を持ちたい、というようなお話。 もちろん、人によって留学に求める物は違うので、都度色々お話させてもらっていて僕自身刺激になることも本当にすごく多いのですが、たまに聞かれるのが「どんなブログやサイトを見て情報収集しているのか？やっぱり英語なのか？」というお話。僕自身もちろん純日本人なので、英語の本とか読もうとすると未だに発狂しそうになりますが（Steve Jobsも全然進んでないorz）。確かに、日本語のサイトから情報を収集することは少なくなった気がします。 当然、僕が尊敬する人のブログは誰であろうと逐一チェックしますが、デザインや技術面での情報収集は英語記事を読んでいることが多いです。 でも、正直デザインや技術面の記事って英語分かんなくっても、なんとなく分か
cssで縦方向中央に配置する方法（5つのケース＋1） | バシャログ。
iPhone 4Sが発売間近。 買おうか迷って一旦諦めたはずがまた迷い始めました、hakoishiです。 Siriに甘い言葉をささやきたい。英語できないけど。 さて、コーディングで縦中央にオブジェクトを配置したいことって少なくないですよね。 しかしながら、cssはそういうのちょっと苦手。 「ほら、あの時使ったアレだよアレ！」と過去のソースを掘り起こしてみても、状況が違ってて使えないケースも多かったり。 というわけで今回は、cssで縦中央配置するためのtipsを5つのパターンに分けてまとめました。 case1：画像の場合 上下方向中央を始点として画像を配置し、画像の縦サイズの1/2だけネガティブマージンで上に移動。 サンプル html <p class="case01"> <img src="http://dummyimage.com/100x100/000/fff.gif&text=img
保存版！CSS3セレクタの説明書
CSSセレクタについての基礎知識 このブログで何回も説明していますが、念のために説明します。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 セレクタ表の説明には属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 あと親子関係や兄弟関係などもあまり聞きなれないかもしれません。下の階層にある要素との関係が親子関係で、同じ階層にある要素同士の関係が兄弟関係です。 あと、CSS3と聞いて「どうせIE8以下はダメだし使えない」と思う方もいるかもしれませんが、セレクタに関しては簡単に対応できます。 IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」をご参考に。 それ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://coliss.com/articles/build-websites/operation/css/css-vertical-align-anything-by-sebastian.html
Loading...
YUKI HARUYAMA Portfolio Site | 春山 有由希
