Diviを使用した見事なモバイルデザインで最新のブログ投稿を特集

公開: 2019-03-17

Webサイトでブログ投稿を紹介する方法は、訪問者がWebサイトをナビゲートしているときにブログ投稿に遭遇したときの動作に大きな影響を与えます。あなたが創造的で効果的になるのを助けるために、私たちはあなたの最新のブログ投稿を驚くべき方法で特集する方法をあなたに示すつもりです。

再現する例は、デスクトップとタブレットでも優れたルックアンドフィールを維持しながら、小さい画面サイズで特に見栄えがします。このチュートリアルが、独自のカスタム最新ブログ投稿デザインを作成するきっかけになることを願っています。

それを手に入れよう！

プレビュー

チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。

最新のブログ投稿

再作成を始めましょう！

新しいセクションを追加

グラデーションの背景

新しいページを作成するか、既存のページを開いて、通常のセクションを追加します。設定を開き、次にグラデーションの背景を追加します。

色1：＃2e1b8f
色2：#ffffff
グラデーション方向：90度
開始位置：53.3％
終了位置：53.3％

最新のブログ投稿

間隔

次に、間隔の設定に移動します。ここでは、デスクトップのセクションコンテンツのサイズを縮小し、小さい画面サイズではそのスペースを徐々に取り除きます。

トップマージン：100px
下マージン：100px
左パディング：26vw（デスクトップ）、13vw（タブレット）、0vw（電話）
右パディング：22.8vw（デスクトップ）、11.4vw（タブレット）、0vw（電話）

最新のブログ投稿

新しい行を追加

カラム構造

次の列構造を使用して、セクションに新しい行を追加して続行します。

最新のブログ投稿

列2の背景色

モジュールをまだ追加せずに、行設定を開き、2番目の列に背景色を追加します。

列2の背景色：＃f7f7f7

最新のブログ投稿

列3の背景色

同じ色を列3の背景にも追加します。これらの列を接続し、1つのピースのように見せるために、両方の列に同じ色を使用しています。投稿の後半で、これを使用して、小さい画面サイズの列幅を操作します。

列3の背景色：＃f7f7f7

最新のブログ投稿

サイジング

次に[デザイン]タブに移動し、サイズ設定を開きます。ここでは、列間のデフォルトのスペースをすべて削除します。

この行を全幅にする：はい
カスタムガター幅を使用：はい
側溝幅：1
列の高さを等しくする：はい

最新のブログ投稿

画面

ここで、小さい画面サイズで3つの列すべてが隣り合って表示されるようにするには、行のメイン要素に1行のCSSコードを追加する必要があります。

display: flex;

最新のブログ投稿

列1に宣伝文モジュールを追加する

アイコンを選択

モジュールの追加を開始する時が来ました！列1の宣伝文モジュールから始めて、選択したアイコンを選択します。

最新のブログ投稿

グラデーションの背景

モジュールの背景設定に移動し、放射状グラデーションの背景を追加します。

色1：＃5000ff
色2：rgba（41,196,169,0）
グラデーションタイプ：ラジアル
半径方向：中心
開始位置：28％
終了位置：28％

最新のブログ投稿

アイコン設定

[デザイン]タブに移動し、アイコン設定を変更して続行します。

アイコンの色：#ffffff
画像/アイコンの配置：上
アイコンフォントを使用する：はい
アイコンフォントサイズ：22px

最新のブログ投稿

間隔

次に、カスタムの上部と下部のパディングを追加します。

トップパディング：20px
ボトムパディング：10px

最新のブログ投稿

国境

そして、微妙な下の境界線を追加して、宣伝文句のデザインを完成させます。

下の境界線の幅：1px
下の境界線の色：#ffffff
下の境界線のスタイル：破線

最新のブログ投稿

列1にテキストモジュールを追加

コンテンツを追加する

最初の列に必要な次の最後のモジュールはテキストモジュールです。お好みのコンテンツを追加してください。

最新のブログ投稿

テキスト設定

次に、[デザイン]タブに移動し、それに応じてテキスト設定を変更します。

テキストフォント：Didact Gothic
テキストフォントの太さ：太字
テキストの色：#ffffff

最新のブログ投稿

列2にテキストモジュールを追加します

コンテンツを追加する

2列目へ！ここで必要なモジュールはテキストモジュールだけです。お好みのコンテンツを入力してください。

最新のブログ投稿

背景色

背景設定に移動し、完全に白い背景色を追加します。

背景色：#ffffff

最新のブログ投稿

テキスト設定

また、デザインタブのテキスト設定を変更することで、コンテンツの外観を変更しています。

テキストフォント：Source Serif Pro
テキストフォントの太さ：太字
テキストの色：＃000000
テキストサイズ：13px
テキストの向き：中央

最新のブログ投稿

サイジング

前述のように、列構造を操作して、小さい画面サイズでカスタムデザインを作成しています。これを行うには、テキストモジュールの幅を狭くし、列の左側に配置されていることを確認する必要があります。

幅：60％
モジュールの配置：左

最新のブログ投稿

間隔

次に、いくつかのカスタムパディング値を追加します。

トップパディング：57px
ボトムパディング：57px
左パディング：20px
右パディング：20px

最新のブログ投稿

ボックスシャドウ

微妙なボックスシャドウと一緒に。

ボックスシャドウブラー強度：80px
影の色：rgba（0,0,0,0.23）

最新のブログ投稿

列3にテキストモジュールを追加

コンテンツを追加する

次の最後の列に進みます。ブログ投稿のH3タイトルとリンクを含むテキストモジュールを追加します。タイトルのすぐ下の段落テキストスタイルに投稿の詳細を追加します。

最新のブログ投稿

テキスト設定

テキストモジュールのデザインタブに移動し、テキスト設定を変更します。

テキストフォント：Source Serif Pro
テキストの色：＃a8a8a8
テキストサイズ：12px

最新のブログ投稿

H3テキスト設定

H3テキスト設定も変更して続行します。

見出し3フォント：Didact Gothic
見出し2フォントの太さ：太字
見出し3テキストサイズ：17px

最新のブログ投稿

間隔

最後に、いくつかのカスタム間隔値を追加する必要があります。モジュールに負の左マージンも追加していることに気付くでしょう。これは、小さい画面サイズで異なる種類の列構造を作成するための最後のステップです。そのため、列の構造は技術的には同じですが、列の背景、モジュールの幅、負の左マージンを組み合わせて、外観が異なる結果を作成しました。