スキップしてメイン コンテンツに移動

エッセイ風の日記ブログ

ラベル(レスポンシブ)が付いた投稿を表示しています すべて表示

BloggerブログでYouTube動画の埋め込みをレスポンシブに表示するCSSコーディング

イメージ

YouTube 動画の埋め込みコードにはHTMLのiframeタグが使われていてデバイスの画面毎にレスポンシブ対応でデザインを揃えるのが難しい。特にモバイルのスマホやタブレットで画面の横幅一杯に表示する場合に埋め込み動画の縦幅を一定の割合で維持できず、画像比が崩れる。写真などに...

Bloggerの画像なしの投稿のスニペットに専用のサムネイル画像を表示する方法

イメージ

Bloggerの公式テーマのテンプレートで記事の抜粋のスニペットがインデックスページやサイドバーに置かれる場合に画像なしの投稿については文章だけしか載らない。専用のサムネイル画像を予め用意しておいて画像ありの投稿と変わらずに表示するようにスニペットのデザインを変えるカスタマイズ...

CSSで画像に文字を重ねる:グリッドデザインでアイテムのスペースを合わせて表示する

イメージ

サイト作成で画像に文字を重ねる場合にそれぞれの位置取りが難しい。加えて レスポンシブ でデバイスの画面幅によってデザインが伸縮されると画像と文字のバランスが崩れ易い。二つの悩みを同時に解決するために最も相応しい方法は グリッドデザイン :displayのgridで、画像と文字のス...