今回は、SWELLのサイト型トップページの見出しに自分で作った画像を入れる方法と、見出しデザインのアイディアをご紹介していきます。
普通のテキスト見出しではなく、画像を挿入することで他サイトとの差別化を図れて一気におしゃれなサイトになりますよ♪
この記事の内容は2022年12月時点の情報です。
[SWELLバージョン: 2.7.2.1]
最新情報についてはSWELL公式サイトをご確認ください。
SWELLサイト型トップページの見出しに画像を入れる方法
さっそく、見出しの挿入方法について解説します。
まずはCanvaで画像を作ります。
サイズは【1600×300px】で作っていますが、デザインによってお好みで調整してください。
今回は例として新着記事一覧の見出しでよく使われる「New post」を作ってみました。
or
フルワイドブロックを挿入
ここから、トップページ用の固定ページにコンテンツをどんどん入れていくんですが、基本となるのが今回の見出しです。
見出しに画像を入れる時は、「セクション見出し」から入れていきます。
背景が白いまま見出しのみ入れる場合
①セクション見出しの挿入方法
背景に色や画像を付ける場合はフルワイドブロック
②フルワイドブロックの場合は自動でセクション見出しが入るのでそのまま次へ進みます。
フルワイドブロックの詳しい使い方はこちらから↓
ここでは、フルワイドブロックを使った例で進めていきます。
フルワイドブロックの見出しに画像の手順でインライン画像を挿入します。
STEP1で作ったデザイン画像をアップロードして挿入してください。
画像のサイズを調整します。デフォルトの値は[150]です。
これでは小さいので、数値を調整してちょうどいいサイズに合わせていきましょう。
今回私が作った1600×300pxの画像サイズだと、[600]がちょうどいい感じでした。
画像サイズによって変わるので500〜700前後で調整してみてください。
これで完成です。
PCで確認してサイズがバッチリでも、スマホでチェックすると大きかったりするのでその場合は再度調整してください。
もふここんな感じで、表示したいコンテンツごとに、見出しをどんどん作って挿入していきます！
見出しの挿入方法の流れはわかりましたか？
このあとは、見出しの下に新着記事の投稿リストや目立たせたい記事を配置して固定ページの編集を進めていきます。
いろいろな見出しデザインのアイディア
ここからは、もふこが考えた見出しデザインのアイディアをテイストごとにご紹介します。
「見出しの入れ方はわかったけど、どんなデザインにするか思いつかないよ〜」という方は参考にしてみてくださいね。
シンプルな見出しデザイン
上:petit Formal Script
下:テロップ明朝
シンプルな見出しは視認性が高く読みやすいですよね。男女問わず使えます！
かわいい見出しデザイン
上 :Noto Sans Regular
下：M Plus Rounded Black
(イラストはcanva pro版)
上:Amiko TH
下:Rounded M+ 1p Bold
私自身かわいいテイストが好みなので、いろいろ楽しく作ってみました！
気に入ったのがあれば参考にしてくださいね。
もふこデザイン見出しの画像は背景透過で保存が絶対おしゃれになるのでおすすめです！
背景透過のありなしでこんなに差がつく！
背景透過処理：あり
おしゃれで垢抜けた印象に！
背景透過処理：なし
ただ画像を貼り付けただけ…な印象。
この背景透過はCanva proのみの機能ですがかなり使えます。
30日間のトライアル中なら無料で背景透過画像が作れるのでぜひやってみてください。
まとめ｜SWELLサイト型トップページの見出しに画像を入れる方法
見出しデザインのアイディアは湧いてきましたか？
トップページの見出しが個性的だと目を引きますよね！
サイトが素敵なデザインだとファンを増やすきっかけにもなると思います。
もふこあなたのオリジナルデザインで素敵な見出しを作ってみてくださいね。
最後までご覧いただきありがとうございました！
SWELLのサイト型カスタマイズまとめ記事はこちらから
個別記事はこちらから
当サイトのテーマはSWELLを使用しています
- 取り入れた瞬間からおしゃれなブログに
- だれでもサクサク使える直感操作
- 他テーマからの乗り換えプラグインも充実
- サイトスピードが大幅アップ
- カスタマイズもかんたんで自分好みに！
