WordPressでレスポンシブを構築する際の画像サイズ対応例 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
サイン バイノー！ おっしーです。 今回はWordressにどうやってレスポンシブデザインを組み込むか？に焦点を絞ってみました。 まず「レスポンシブデザイン」について。 弊社のデザイナーの記事を読んでいただくと、すごくわかりやすいと思います。 必読！5分でわかる流行のレスポンシブWebデザインまとめ 必読！5分でわかる流行のレスポンシブWebデザインまとめ その2！！ 必読！5分でわかる流行のレスポンシブWebデザインまとめ 制作編 で、今回は画像のサイズに対応するにはどうするか？と言う事ですね。 WordPressでは便利な関数『the_post_thumbnail』がございます。 ドキュメントを確認して頂けると… 「トリミング」処理なので画像が切り抜かれてます。 /* functionで定義する */ add_image_size( 'category-thumb', 300, 300
[CSS]半透明のパネルを使って、画像にキャプションをかっこよく表示する12種類のスタイルシート -InContent
InContentの使い方 実装はとても簡単です。 Step 1: 外部ファイル 当スタイルシートをhead内に配置します。 <head> ... <link rel="stylesheet" href="css/incontent.css" type="text/css" /> </head> Step 2: HTML 画像のimg要素とキャプションのspan要素をdivで包みます。 <div class="pic"> <img src="img/01.jpg" class="pic-image" alt="Pic"/> <span class="pic-caption bottom-to-top"> <h1 class="pic-title">Pic Title</h1> <p>Some description or text.</p> </span> </div> 用意されているcl
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
