VIVABlogコンテンツへスキップVIVABlogWordPressやMovableTypeのカスタマイズやWebサイトの制作・運営に役立つ情報など。動画の貼り付けコードをレスポンシブに最適化させる2015年9月29日YouTubeをはじめ様々な動画サイトの貼り付けコードは、そのまま貼り付けるとサイズ調整されずに、レスポンシブレイアウトが壊れてしまう場合があります。レスポンシブサイトに最適化させるには、cssでコンテナを作りwidthをピクセル指定からパーセント指定にしてやります。以前紹介したFitVids.JSを使う方法(とコンテナを使う方法)では、実質、YouTubeの貼り付けコードのみに対応していましたが、iframe以外にobjectやembedにも対応させることで、幅広い貼り付けコードをレスポンシブサイトの表示を崩さずに貼り付けることができます。記事の階層を分かりやすくする「パンくずリスト」をマイクロデータでマークアップすると、Googleの検索結果にもパンくずリストを表示することができます。これはリッチスペニットというもので、通常のパンくずリストのままでもGoogleが自動でやってくれますが、サイトによっては反映されないこともあるのでできるだけマークアップした方が良いでしょう。やり方は簡単、既存のパンくずリストに属性を加えるだけです。ブラウザから使える、オンラインHTMLエディター「CODECAST」2015年2月12日ブラウザから使えるオンラインのHTML&CSSエディター「CODECAST」がローンチしました。左にコード、右でリアルタイムプレビューというシンプルなデザイン。HTMLタグを入力すると自動で閉じてくれます。本格的なサイト構築に使うのでは無く、ブログ記事などを作成するのに使うと便利かな〜という感じですかね。Templatesフリーのデザインテンプレート配布サイト。レスポンシブHTML5のものもあり。「Fibonacci」は、どんなに複雑なフレキシブルボックスレイアウトでも、簡単に生成してコードを利用できるという便利なサービスです。自分でフレックスボックスレイアウトを作成。HTMLコードが生成されるので、それをコピペすればレイアウトのベースとして使う事が出来ます。