楽天市場のお得情報を中心に発信します

SWELLで初心者がかっこいいブログを作る

のアイコン画像

ブログ初心者ですが、SWELLを使えばかっこいいブログを作ることができますか。

のアイコン画像

僕もSWELLでかっこいいブログを作りたいです。ちなみに、難しいことはわかりません。SWELLのテンプレートを使って、手間なくブログを作りたいです。

はい。SWELLは色々な機能がありますが、まずはテンプレートや基本的編集のみ設定しかっこいいブログを作りたいという方向けに、初心者の私が取り組んだSWELLの設定をご紹介します。

ブログ初心者の場合、どこからはじめてよいのかわからない場合もあると思います。私もそうでした。
今回は、2020年5月からブログをはじめ、ブログ開設4ヶ月でSWELLを使い始めた私が、SWELLの基本的な設定をご紹介します。

目次

初心者でもSWELLを使えばかっこいいブログが作れる

一度カスタマイズしておいて、その後、時間があるときにゆっくり記事を並び替えたり、凝った装飾にしたりすればよいと思います。

では、さっそくみていきましょう!初心者の方でもわかるように説明していきます。

まずはヘッダーの作成

SWELLの機能と使って簡単にヘッダー表示が可能です。

  • グローバルナビゲーションの選択
  • お知らせバーの色・配置

SWELLの基本機能を使ってかっこいいサイトを作る

ブログをはじめてから、かっこいいサイトにしたいとずっと思ってきました。ブログ初心者で技術や知識もない私でも、SWELLを使えば、かっこいいサイトを作ることができました。

たとえば、サイトのトップをかっこいいデザインにしたいと思っても、技術がなければ難しいですよね。でもSWELLを使えば、初心者でもかっこいいデザインのサイトができてしまいます。カテゴリーなども表示させて見やすいサイトにすることもできます。

ヘッダーに掲載するロゴを作る

まずはヘッダーに掲載するロゴを作ります。ロゴ作成にはcanvaを使いました。当ブログではアイキャッチを作るのにいつもcanvaを使っています。

画像サイズは【1600×360】

ゆるミニマリスト主婦くうかさんのサイトを参考にさせていただきました。

ロゴ画像設定箇所:
【外観】⇒【カスタマイズ】⇒【ヘッダー】⇒【ロゴ画像の設定】

  • 画像サイズ(PC):55px
  • 画像サイズ(PC追従ヘッダー):48px
  • 画像サイズ(SP):70px
  • ヘッダーレイアウト(PC):ヘッダーナビロゴ横右寄せ
  • ヘッダーレイアウト(SP):ロゴ中央メニュー左
  • ヘッダー境界線:なし

ちなみに私が作ったロゴはこんな感じです。

グローバルナビゲーション

これは、ダッシュボードから設定できます。

管理メニュー → 外観 → メニュー

「メニュー設定」→「グローバルナビ」でどのカテゴリーをヘッダー上部に表示するか選びます。

~Que Sera Sera~Annaさんのサイトを参考にさせていただきました。

続いて、お知らせバーの設定に進んでいきます。

お知らせバー

「お知らせバー」は、ヘッダー上部でサイトの特徴などを簡単に説明する機能です。

管理メニュー → 外観 → カスタマイズ → サイト全体設定 → お知らせバー

管理メニューから外観、カスタマイズを押すと、上の画面にとびます。

  • 「サイト全体設定」で「お知らせバー」をクリック
  • 「ヘッダー上部に表示」に✓をいれると、ブログ名の下に説明文が表示されます

私のサイトでは、「シンプルライフと資産運用でファイヤーを目指すブログ」とヘッダー上部にあるのがお知らせバーです。

以上がお知らせバーです。

記事スライダーの設置

記事スライダーは、ヘッダーの下で記事をスライドさせる機能です。

スライダー設定箇所:
【外観】⇒【カスタマイズ】⇒【トップページ】⇒【記事スライダー】

SWELLの初期設定のままでも、記事スライダーは設定されていますが、カスタマイズ設定、スライドさせる記事を新着順、人気順、ランダムにスライドさせるなど設定できます。

メインとなるトップページは固定ページで作成

トップページは、新着記事やお気に入り記事が並ぶページでアクセスが最も多くなるページです。

固定ページを作ることで、自分の好きな配置にカスタマイズすることが可能です。

【外観】⇒【カスタマイズ】⇒
【WordPress設定】⇒
【ホームページ設定】

【ホームページ】【投稿ページ】部分に作成したページをそれぞれ割りあてます。

ホームページのページ名は「Home」とします(別の名前をつけてもよいです)。

このページが、トップページのurl(私のサイトであれば「piroyan.com」)のページになります。

管理メニュー→固定ページ

固定ページのタイトルから先ほどの「Home」を選択し編集をクリック

  • 「人気記事」、「新着記事」など、トップページに掲載したい項目を「見出しH3」で記入
  • 「+マーク」→SWELLのブロック表示
  • 「投稿リスト」をクリック

すると、右の欄に「カード型」や「レイアウト」、「新着順or人気順」などを選ぶことができます。

「カラム数」の設定

投稿数に対して、PCやスマホで見るときの「カラム数」を選びます。

これは、2つに分けたり、3つに分けたりできます。

これで、「人気順」や「新着順」のカラムができたかと思います。

ちなみに私の設定は以下です。

  • 表示投稿数 6
  • カード型
  • 人気順か新着順
  • 大カラム数3列(PC)
  • 最大カラム数2列(SP)

以上がカラムの設定です。

カテゴリー別の表示を設定

「+マーク」→「レイアウト要素」→「カラム」をクリック

一番左選択

カラムがちょうど半分で2つ出てきます。

右でも左でも、+マークをクリック

ここでも「投稿リスト」をクリック

右の欄にある、SettingsというタブからPickupというタブに切り替える

スクロールダウンさせて、どのカテゴリーかタグで表示させるのかを選択する

右の欄にある、Settingsのタブの方に戻って、「表示する投稿数」やレイアウトなどを決める

  • 表示投稿数 3
  • リスト型
  • 人気順
  • 最大カラム数1列(PC)
  • 最大カラム数1列(スマホ)
  • More readのテキスト入れる

これで、固定ページが完成したと思います。SWELLはブログを書くのが楽しくなりますね。

コメント

コメントする

目次
閉じる