ブログ

社員が発信するブログ。

WordPressテーマ「Divi」で画像をグリッドレイアウトで表示する方法

WordPressテーマ「Divi」で画像をグリッドレイアウトで表示する方法

WordPressテーマ「Divi」で画像をグリッドレイアウトで表示する方法をご紹介します。 実際に作成するグリッドレイアウトのイメージ 画面を覆うように画像を表示し、各画像の右下にテキストを配置します。 スマートフォンでも同様に表示します。 Diviの設定内容 次のようなレイヤーを構成し、各「列」の背景に画像を設定します。 グリッドレイアウト作成の流れ Divi Builderを起動して、「最初から構築」を選択します。 2列構成の行を挿入します。 左の列にテキストモジュールを挿入します。...

CSS「position: sticky;」でサイドバーを固定しスクロール追従させる方法

CSS「position: sticky;」でサイドバーを固定しスクロール追従させる方法

CSS「position: sticky;」でサイドバーを固定しスクロール追従させる方法をご紹介します。 スクロール追従する固定サイドバーの完成イメージ CSSで画面をスクロールしても位置が固定されているサイドバーを持つ、2カラムレイアウトのページです。 ピンク色の部分がスクロール追従する固定サイドバーでに位置します。 サンプルコード 「position: sticky;」で上から50pxの場所に.side_contentを固定しています。 2カラムレイアウトは「display: grid;」で3:1にしました。...

人気の投稿

最新の投稿

カテゴリー

タグ

アーカイブ