Border「現場のプロが教えるHTML+CSSコーディングの最新常識」を共著で執筆しました 2015年3月25日に株式会社エムディエヌコーポレーションより発売の、「現場のプロが教えるHTML+CSSコーディングの最新常識」を共著で執筆させていただきました。
レスポンシブだけじゃいられない？時と場合によるユーザーエージェント判別の方法
レスポンシブだけじゃいられない？時と場合によるユーザーエージェント判別の方法 2013.06.14 | 初心者向け | 覚えておきたい 先週、某iPhoneアプリをリリースした際に公式サイトを担当したネイビーです。 iPhoneアプリだから公式サイトはiPhoneで見れればいい！というわけではないんですね。知りませんでした。だったらレスポンシブで！と行きたいものの、ニョーンと伸び縮みするスタイルが万人受けするものでもありません。 iPhone向けとPC向けのページを作ってユーザーエージェントで振り分ける方針が決まりつつ、いつどこで判別したらよいものか？リリース前日まで悩んでしまいました。 PHPによる判別 スマホ向けとPC向けのコンテンツを振り分ける際にまず思いつくのは、サーバ側のプログラムでユーザーエージェントを判別して処理を分岐する方法です。端末によってコンテンツの種類や量を調節したり
CSS内の画像埋込で高速化(Data URI) - Qiita
スタイルシートの中で画像を多数呼出していると、HTTPリクエストが大量発生してページの読み込みが遅くなります。このような場合、CSS Spriteを使って回避することが一般的ですが、Data URIを使うと運用はもっと簡単です。 CSSファイルへの埋込 例えばOSSCafeの場合、サイトのCSS内で16ほどの画像ファイルを読込んでいます。 body { background-image:url(images/body.png) } body>header { background-image: url(images/header.png) } body>header div.center>h1 { background-image:url(images/logo.png) } ...(略) body { background-image:url(data:image/png;base64,
Webサイトをマルチデバイス化しよう - Web Training
今回、WordPressのテンプレを作るときに気にしたのが「スマートフォン対応はどうするの？」ということでした。 結局ブログの構造が単純なものだったので、CSS3 の Media Queries（メディアクエリ）というものを採用しています。 Media Queriesだけではなく完全にスマートフォンサイトを作成してしまう方法もあるので、一概にコレだ！とは言い切れません。どの方法もメリット・デメリットがありますので、どの方法がいいかはサイトに合わせて選んでください。 以下、まとめです。 1.PC用とは別にスマートフォンサイトを作成する PCサイトにアクセスしたときにユーザーエージェントを判定してスマートフォンサイトにリダイレクトさせる方法をとります。※.htaccessで振り分けます 例）iPod/iPhone/iPad、Androidの場合は /sp にジャンプ！ RewriteEngi
スマホからのアクセスを判別して動作を切り替えるCSS、PHP、Javascript、.htaccess - WeBridge｜WeBridge
スマホからのアクセスを判別して動作を切り替えるCSS、PHP、Javascript、.htaccess CSSで切り替える デバイスの幅によって動作をきりかえます。下記だと最大幅480pxの場合は「sp.css」を参照します。 <link rel="stylesheet" type="text/css" media="only screen and (max-device-width:480px)" href="./layout/sp.css"/> <link rel="stylesheet" type="text/css" media="screen and (min-device-width:481px)" href="./layout/pc.css" /> PHPで切り替える ユーザーエージェントを判別してPHPで条件分岐します。 <?php $ua=$_SERVER['HTTP_U
デザイナーがwebサービスを10週間で作れるようになる方法。または私は如何にしてPHPを愛するようになったか。 - ウェブ狂の詩 - @takejune
2010年02月04日 21:30 カテゴリ デザイナーがwebサービスを10週間で作れるようになる方法。または私は如何にしてPHPを愛するようになったか。 Posted by takejune No Trackbacks ■はじめに ▼このエントリーを読んで欲しい人・web系の企業に勤めている人・プログラミングに興味があるけど、勉強する方法がわからないor機会がない！というwebデザイナーの人・社内のデザイナーとのやりとりを円滑化したいプログラマの人▼このエントリーで言いたいこと・デザイナーはphpを覚えると楽しいよ！・プログラマはphp教えるといいことあるよ！ ■デザイナーはphpを覚えると楽しいよ！ ▼はじめてのphp昨日、はじめて一人で作ったwebサービス「warotter」をリリースしました。とんでもなく単純な造りながらも、プログラミングからデザインまで一人で行いました。動的な
諦めないで…！WordPressでページ送りがうまく行かない時の3つの対処法+究極奥義
WordPress独自テーマを作る際に私がハマりがちなのが、ページ送り。 記事一覧の取得にquery_postsを利用しているとページ数や条件をうまく取得できず、2ページ以降の記事が表示されない事が多々あります・・。 今回はその「ページ送り機能」がうまくいかないときに使える、 私の知るすべての対処法をメモしておこうと思います。 query_postsとは 記事一覧を表示する際、特定のカテゴリだけ表示させたかったり、作成日順ではなく更新日順に並べたかったり。 そんな要望を叶えてくれるのが query_posts ですね。 たとえばカテゴリIDが3の記事を4つずつ表示したい時はこう。 <?php if (have_posts()) : query_posts('posts_per_page=4&cat=3'); ?> <?php while (have_posts()) : the_post(
記事の投稿日を取得して好きな日数だけnewアイコンを表示しておく方法
ブログを訪れた方に、新しくアップした記事・もしくは更新した記事をどのようにしてアピールするかを考えた時、「new!アイコンをつける」という結論に達する方も少なくないと思います。 そんな時、ループ内に数行コードを加えるだけで、カンタンに実装することが出来ました。 ※追記あり 記述例 わたしの場合は（他サイトですが）更新日順に記事を並べているので newをつけるのも更新日を取得していましたが、 普通のブログの場合は作成日順に並んでいると思うので二種類掲載しておきます。 ※追記 WordPress界の神様@jim0912さまから、時差の件で以下のリプライを頂いたのと、 自分で試してみて$days=1;だとうまく行かなかったので、ちょっと修正しました。 [blackbirdpie url=”http://twitter.com/jim0912/status/133707844091523072″]
WP-Post Viewsの記事タイトルの下に記事の紹介文を表示させてみよう！
こんにちは、霙です。 突然ですが、私はWordPressプラグインのWP-PostViews を使ってサイドバーに人気記事を表示しています。先日タイトルと閲覧数の表示だけじゃ物足りなくなり少し手を加えてみたので、 今回は具体的にどんな設定をしたのかメモしておこうと思います:D 表示させたい項目 いくら「人気記事です！」と書いてあったとしても、何についての記事なのか タイトルだけでは伝わらない事もありますし、簡単な紹介文が合った方が記事を読んで頂ける確率も上がると思うのです。 そこで、私がサイドバーに表示させたかったのが以下の4項目。 記事タイトル（自動） 記事の閲覧数（自動） 記事の簡単な紹介文 はてなブックマーク数 記事タイトルと閲覧数はプラグインの機能で既に表示される状態になっているので、 実際作業するのは残りの２つ。 はてブ数も先日ご紹介した方法を応用するだけなので、残る問題は記事の
WordPressでカテゴリー別でデザインを変更 | KH-WEBLOG
カテゴリースラッグ欄に、英数字で名前をつける。 まず、カテゴリー作成時にカテゴリースラッグとして英数字の名前をつけます。 この名前をcssのクラス名として使います。 例）「日記」のカテゴリースラッグを「diary」に設定。 クラス名として出力 ■カテゴリーアーカイブページに表示する場合 <div <?php if (is_category()) { echo 'class="' . get_category_parents($cat,FALSE,' ',TRUE) . '"'; } ?>> /*ここに内容*/ </div> ■個別記事ページに表示する場合 <div <?php $cat = get_the_category(); echo 'class="' . get_category_parents($cat[0],FALSE,' ',TRUE) . '"'; ?>> /*ここに内容
PHPで画像からHTMLのカラーパレットを作るサンプルプログラム:phpspot開発日誌
Generating a color palette from a image in php PHPで画像からHTMLのカラーパレットを作るサンプルプログラムがcode dieselにて公開されています。 画像を渡せば、GDを使って使われている色を分析し、頻度の多い順に配列で受け取ることができます。 なんらかのWEBサービスやツールに応用することができそうです。 クラスライブラリの形なので再利用も超簡単です。 元記事ではテーブルタグを使ったカラーパターンの出力用プログラムも公開されています。 関連エントリ PHPでWEBサイトのスクリーンショットを作成するチュートリアル PHPでAmazon SESを使うチュートリアル
functions.phpに書いておくといいかもしれないコードいろいろ
WordPress の便利なオプションファイル functions.php。 これに数行追加するだけで、本当にいろんなことができちゃいます。今回は、functions.php に書いておくといいかもしれないコードをいくつかまとめてみました。 WordPress のテーマの中で利用する functions.php。このファイルがかなり便利で、私はいろいろと functions.php に書き込んでいます。よくプラグインとかウィジットを使えばいいじゃないかーとも言われたりしますが、プラグインは厳選して重要なものだけを使って functions.php でできるものは、できるだけそうしたいなーと思っています。 プラグインが増えればその分ファイルの読み込みが多くなって、少なからず速度も落ちるかな … とか、プラグインの管理ページがごちゃごちゃするのがイヤだーとか、そんな程度の理由なんですけど …。
実質1行でメールフォームのSPAMを防ぐjQueryスクリプト
3月に フリー写真素材 :: Free.Stocker という無料写真素材サイトをオープンし、このサイトのサイドバーに クックパッド みたいに気軽にメッセージを送れるフォームを設置しました。 しばらくは何事も無かったのですが、ある日突然大量のSPAMメッセージが送られてくるように…(●´⌓`●) 酷い時には3分〜5分に1通送られてくるし、試しに送り元のIPアドレスとホストを調べてみたら毎回バラバラなので困りました。 こんな時、多くのサイトでは CAPTCHA と呼ばれる読みづらい英数字の羅列の画像を入力させることが多いと思いますが、それでは「気軽にメッセージを送れるフォーム」とは言いづらいですし、サーバーにもページを表示させるたびに毎回余計な負担がかかってしまいます。 試しにWordPressのSPAM防止などに広く使われている Akismet というSPAM防止APIをメール送信スクリプ
Webデザイナー&UIデベロッパー向けのHTML5/CSS3/jQuery/PHPフレームワーク・G5 Framework
Webデザイナーやフロントエンドデベロッパー 向けのフレームワークが登場したようですね。 HTML5/CSS3/jQuery/PHPを使って構成さ れており、シンプルで軽量。小規模レベルの プロジェクトのスターターキット等にも利用して 欲しい、とのことです。 話題を集めるHTML5やCSS3、jQueryで構成されているので勉強がてら触ってみるのもいいかもしれません。ライセンスはGPLとMITのデュアルライセンスです。 (X)HTML5, CSS3, PHP & jQuery Front-End Development Frameworkとのこと。PHPファイル1枚にHTML5/css3/jQueryを詰め込んだシンプルな構成です。 簡単に始められますよ。最初からそこそこ作られています。 マルチカラムのデモなんかも。 上記はIETesterを使用したIE7のキャプチャ。CSS-PIEなども
WordPressのテーマファイルの仕組みが一目で分かる -The anatomy of a WordPress theme
WordPressのテーマファイルはたいていの場合、複数のファイルから構成されています。 ちょっと見には複雑に感じるかもしれませんが、ここで紹介するインフォグラフィックを見ると簡単に把握できると思います。 The anatomy of a WordPress theme [ad#ad-2] WordPressでは1ページを生成するために、複数のPHPを利用しています。一般的な構成は、共通箇所としてheader.php, footer.php, sidebar.phpが使用され、あとはページの種類ごとにコンテンツ箇所が異なります。 例えば下記のように、トップページはindex.php、記事ページはsingle.phpを使用します。 また、各箇所にThe Loopを使用してエレメントを表示するのも特徴的です。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CV
%%sitename%%