WordPressでレスポンシブを構築する際の画像サイズ対応例 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
サイン バイノー！ おっしーです。 今回はWordressにどうやってレスポンシブデザインを組み込むか？に焦点を絞ってみました。 まず「レスポンシブデザイン」について。 弊社のデザイナーの記事を読んでいただくと、すごくわかりやすいと思います。 必読！5分でわかる流行のレスポンシブWebデザインまとめ 必読！5分でわかる流行のレスポンシブWebデザインまとめ その2！！ 必読！5分でわかる流行のレスポンシブWebデザインまとめ 制作編 で、今回は画像のサイズに対応するにはどうするか？と言う事ですね。 WordPressでは便利な関数『the_post_thumbnail』がございます。 ドキュメントを確認して頂けると… 「トリミング」処理なので画像が切り抜かれてます。 /* functionで定義する */ add_image_size( 'category-thumb', 300, 300
レスポンシブWebデザインの基礎
第1回 Web Developer Selection「レスポンシブWebデザインの実践ワークフロー」のスライドです。
無料でしかも高品質！1ページで構成されたサイトを作るためのWordPressのテーマファイルのまとめ
キャンペーン、ギャラリー、ポートフォリオ、アプリ紹介、ランディングページ、個人ブログなど、1ページで構成されたウェブサイトを作成するWordPressのテーマファイルを紹介します。 全て無料で、レスポンシブ対応です。
[JS]ぷるぷるっとかわいいアニメーションでレイアウトを変更するレスポンシブ用のスクリプト -DyLay
ダイナミックなかわいいアニメーションでパネルのレイアウトを変更する、レスポンシブ用のレイアウトを生成するjQueryのプラグインを紹介します。 デモページ DyLayの使い方 Step 1: 外部ファイル 「jquery.js」と「easing.js」と当スクリプトを外部ファイルとして</bpdy>の上に記述します。 <script src="http://code.jquery.com/jquery.js"></script> <script src="js/jquery.easing.1.3.js"></script> <script src="js/dylay.js"></script> Step 2: HTML 各パネルはリスト要素で配置し、フィルタやソート用のデータをclassやdata属性に仕込んでおきます。 <ul id="dylay"> <li style="width:
タッチデバイスにも対応したシンプルなLightboxを実装するjQueryプラグイン・Swipebox
タッチデバイスに対応したLightboxを実装するスクリプトのご紹介です。jQueryに依存します。多機能なものではありませんが、使いやすくて良さそうです。ただ、実機での動作テストをしていませんのでその程度の記事。 タッチデバイスで使えるLightboxです。 見易くていいかも。CSSでカスタマイズできるらしいのでMedia Queriesを使うだけで対応できるなら楽でいいかも。 スマフォのスクショです。 $(".foo").swipebox();使い方はいつも通り。 <a href="big/bar.jpg" class="foo" title="My Caption"> <img src="small/bar.jpg" alt="image"> </a>マークアップもclassを振るだけ。 詳細は以下で確認できます Swipebox
厳選！高品質なのに無料で使用できるレスポンシブ対応のWordPressのテーマのまとめ -2012年版
2012年にリリースされたものを中心に、無料で利用できる高品質なレスポンシブ デザイン対応のWordPressのテーマファイルを紹介します。 まだちょっと早いですが、「2012年ベスト」な感じです。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
gl0ssy.net