【サイトに美しさを】SWELLで波線の区切り表現方法

ポンデ
今回は、SWELLの必殺技とも言える波線を実装するよ

私が、SWELLをWordpressのテーマに選んだ一つの理由としてこの波線の実装があります。

波線をつけることで、直線だけで領域を区分しているサイトより、視覚的に閲覧者に刺激を与え、滞在時間を向上させる効果があります。

\\目次から飛べるよ//

変更前

今回、波線で領域を区切るのは「最新記事」です。

以下の写真は、ほぼ初期設定のままで、面白みに欠けています。投稿記事を押したくなるような工夫が必要です。

参考ブログ(ばくさんのブログ:monochrom)

今回目標とするデザインは、以下のブログになります。

サイトの雰囲気に合わせた、柔らかい色合いと波線がデザイン性を強化しています。ばくさんはデザインを勉強されていただけあって、さすがという感じです。

波線の実装方法

早速、波機能を実装していきます。(超簡単です)

まずは、「1. +マーク」→「2. フルワイドを選択」→「3. 点点々マーク」→「4. 追加設定を表示」→「5. コンテンツサイズをフルワイドに設定」をします。

次に、「6. 背景色」でサイトに合った色を選択し、「7. 上下の境界線の形状で波を選択・高さレベル5」にして波線の波の高さを調節します。

以上で波線設定は完成!!!

投稿リスト設定(最新記事)

先ほどの画面のまま、波線領域部分にカーソルを持っていき、「1. +マーク」→「2. 投稿リスト」を選択すると、ブログカードが出てきます。

次に「3. 点点々マーク」→「4. 追加設定を表示」を選択します。

最後に、詳細の設定を行っていきます。

私の場合

表示する投稿数:2
レイアウトを選択:カード型
投稿の表示順序:新着順
最大カラム数:2列
etc…

以上で完成です。

まとめ

完成したのがこれです!!!!

今回も初心者の私でも簡単に作成できました。
ぜひ試してくださいね!(^^)!

(スポンサーリンク)

よかったらシェアしてね!

コメント

コメントする

\\目次から飛べるよ//
閉じる