ワードプレステーマ『スワロー』をたった10分でオシャレにカスタマイズする方法

レメディオ
こんにちは、レメディオです。
悩める人
  • ワードプレス『スワロー』のカスタマイズ方法が知りたい
  • 最初にやっておくべき設定って何?
  • すぐにオシャレなデザインにしたい
  • 『スワロー』を購入したけど、何したらいいか分からない

こんな悩める方に記事を用意しました。

スワローはシンプルであっという間にオシャレになるんですけど、さすがに何も分からない状態でパソコンの画面をいじるのは厳しいですよね。

 

実は、僕も知識0だったので、カスタマイズの方法に苦労しました。

 

この記事は、『スワロー』を導入したら最初にやっておくべきカスタマイズ方法について詳しく説明しています。

 

この記事を読めば、初心者の方でも10分で、ブログのトップページをシンプルかつオシャレなものに出来ますよ。

 

まだ、スワローの導入してないよ方は、スワローの導入方法の記事を見てから戻ってきてくださいね。

この記事のポイント
  • たった10分でオシャレにカスタマイズできる
  • 本サイトの見本を見ながらカスタマイズできるので簡単!
目次

カスタマイズ前に全体の構図を把握しよう!

カスタマイズ前に全体の構図を把握しよう!

カスタマイズする前に、全体の構図を確認しておきましょう。

 

どこがどの部分に対応しているのかが分かるだけでもこれからカスタマイズしていく中で非常にスムーズに行えると思います。

 

今回は、①から⑤と書かれている緑色のマーカーの部分のカスタマイズの方法を順を追って説明していきますね。

 

これだけでオシャレになるカスタマイズ項目
  • カスタマイズ①:サイト上部

→ブログのタイトルやロゴをカスタマイズ

→カテゴリーメニューをカスタマイズ

  • カスタマイズ②:ヘッダー
  • カスタマイズ③:スライドショーの設置
  • カスタマイズ④:記事ページ
  • カスタマイズ⑤:サイドバー
レメディオ
全体が確認できたところで、カスタマイズしていきましょう!

スワローのカスタマイズ方法

まず、カスタマイズする方法としては、2つあります。

  • サイトを表示→カスタマイズ
  • ダッシュボード→外観→カスタマイズ
僕のブログの画像を使って説明していきますね。

カスタマイズ①:サイト上部

ブログのタイトルやロゴをカスタマイズ

「サイト基本設定・ロゴ画像」をクリックしてください。

すると、以下の画像が表示されるので、サイトのタイトルとキャッチフレーズを決めてください。

キャッチフレーズはブログのコンセプトを示すのがいいと思います。

キャッチフレーズを表示する場合は「表示する」をONにするのを忘れないように!

ロゴ画像をアップロードすると、「ためになるブログ」と表示されている部分がロゴ画像になります。

ロゴ画像を入れると、サイトのタイトルは消えてしまうので注意!

カテゴリーメニューをカスタマイズ

カテゴリーメニューをカスタマイズする前に、カテゴリを作成しましょう。

カテゴリの作成が終わっている方はとばしてください。

ダッシュボードのメニューバーより「投稿→カテゴリー」をクリックして下さい。

  • 名前

カテゴリー名を入力してください。

  • スラッグ

URLに使われる文字列を入力してください。
半角小文字で、英数字、ハイフンのみの使用にしてください。

カテゴリーが作成できたら、カテゴリーメニューに追加しましょう!

 

カテゴリーメニューに追加する手順
  1. 「外観→メニュー」をクリック
  2. 「カテゴリー」をクリック
  3. カテゴリーメニューに追加したいカテゴリーをチェック
  4. 「メニューに追加」をクリック
各項目をドラッグすると、好みの順番に並び替えられます。また、項目の右側の矢印をクリックすると、追加設定オプションを表示できます。

カスタマイズ②:ヘッダー

カスタマイズ②:ヘッダー

「全ページ共通設定」をクリックすると、ヘッダーの設定ができます。

ヘッダーイメージをカスタマイズ

トップページのヘッダーイメージは最初に目に入る画像です。

ブログの顔といってもいいかもしれません。

もちろん、表示しないことも可能ですが、あった方が発信軸をお知らせできるのでいいと思います。

カスタマイズ方法は簡単です。

  1. 「トップページヘッダー表示設定」をクリック
  2. 「ヘッダーイメージ」でトップページに表示される画像を選択

スマホ用のヘッダーイメージも選択できます。

スマホ用のヘッダーイメージを選択しない場合は、先程設定したPC用のイメージとなります。

また、「ヘッダーイメージにオーバーレイカラー」を選択すると、「ヘッダーイメージ」にうっすらと色をのせて文字を見やすくできます

オーバーレイカラーの種類
  • 半透明(黒)
  • 半透明(白)
  • オーバーレイしない
レメディオ
僕は、ヘッダーイメージが暗い色なので、半透明(黒)を選択しています。

ヘッダーテキストをカスタマイズ

ヘッダーテキスト(大)は大きく表示されるので、サイトのタイトルよりも目立つ存在なので、短いインパクトの有るキャッチコピーを入れるといいでしょう。

 

ヘッダーテキスト(小)は、ヘッダーテキスト(大)を補足する言葉を入れましょう。

  1. 「トップページヘッダー表示設定」をクリック
  2. 「ヘッダーテキスト(大)と(小)」にテキストを入力

ヘッダーボタンテキストをカスタマイズ

ヘッダーボタンテキストには、みんなに見てほしい記事プロフィールなどの固定ページを設置しておくのがいいでしょう。

  1. 「トップページヘッダー表示設定」をクリック
  2. ヘッダーイメージURLにリンク先のURLを入力
  3. ヘッダーボタンテキストを入力
レメディオ
ヘッダーは非常に目に留まりやすい部分なので、しっかりとしたものにしておきましょう!

カスタマイズ③:スライドショーの設置

カスタマイズ③:スライドショーの設置

記事のアイキャッチが自動でスライドしていくので、こちらも非常に目につきやすいです。

自分の自信のある記事を設定しておきましょう。

設定の仕方は非常に簡単です。

  1. 「投稿→タグ」をクリック
  2. 「名前」に「オススメ!」と入力
  3. 「スラッグ」に「pickup」と入力
  4. 「新規タグを追加」をクリック
  5. 記事の編集ページに移動して、右側にある「タグ」に「オススメ!」と入力

「名前」は、何でもいいのですが、今回は「オススメ!」としておきましょう。

「スラッグ」に、「pickup」と入力して、「新規タグを追加」を押して完了です。

次に、記事の編集画面に行って、右側に「タグ」という項目があるので、そこに「オススメ!」と入力して記事の下書き保存または更新をしてください。

これで完了です。

実際にスライドショーができているか確認してみましょう!

レメディオ
こんなにオシャレなスライドショーが簡単に作れるのはすごいですね。

カスタマイズ④:記事ページ

シンプル

アイキャッチ画像とタイトル・抜粋文字がコンパクトにまとまった記事一覧ページです。

カード型

記事をカード風に表示し、一覧性のあるレイアウトです。ディスプレイサイズに応じて2列・3列(タブレット)・1列(スマートフォン)と変化します。

ビッグ

記事ページと同じデザインで大きく画像やタイトルをみせることができます。

記事一覧のレイアウトは「その他一覧ページ記事レイアウト」(カテゴリーページなど)で変更できるので、トップページではカード型、それ以外ではビッグタイプのように見せ方を変えられます。

カスタマイズ⑤:サイドバー

カスタマイズ⑤:サイドバー

サイドバーの設置の仕方はいたってシンプルです。

  1. 「外観→ウィジェット」をクリック
  2. 「PC用サイドバー」があるので、自分の好きなものを置く

サイドバーに置くものは人それぞれなので何とも言えませんが、初心者の方は何を置けばいいか分からないと思うので、一例として紹介しますね。

困ったらこれにしておくといいでしょう。

サイドバーによく置かれているもの
  • プロフィール
  • 最新の投稿
  • カテゴリー
  • アーカイブ
  • 検索
  • タグ
レメディオ
サイドバーに置きすぎても見た目が悪くなるので、4つくらいを目安にしましょう。

ブログの配色を決めよう

ブログの配色を決めましょう!

色彩心理学という言葉もあるくらい、ブログを見た人に与える印象が変わってきます

僕は最初は適当に好きな色で配色していたのですが、自分に合った色にするようにしています。

Twitterやブログのアイコンが緑色なので、基本的に緑色と青色をベースにブログの配色を決めています。

  1. 「カスタマイズ→サイトカラー設定」をクリック
  2. サイトの色変更をする

[open title=”設定すべきサイトカラー設定”]

  • リンク色
  • 記事ページ見出し(H2)背景[/open]

特に、リンク色は青系統がいいです。

リンクは下のような内部リンクで記事と記事を繋げたいときに使ったり、誰かの記事や公式サイトのリンクを引用したいときなどにも使う大切な要素です。

「記事ページ見出し(H2)背景」の色とはこの記事であれば、緑色をした見出しのことです。

また、背景色は白メインテキストの色は黒が一番見慣れた色なので、デフォルトのままでいいと思います。

他のものに関しては、自分の好みのものにしてみてください。

ブログをカスタムできたら記事を書こう

ブログをカスタムできたら記事を書こう

カスタマイズおつかれさまでした。

 

やっておきたいブログのカスタマイズはこれで終了ですが、まだまだパワーアップできるところはあるので、いろいろといじってみてください。

 

また、この短時間でカスタマイズできてしまうので、記事を書くのに時間をかけられます

 

「有料テーマ」を選ぶというのは、かなり勇気のいる選択だとは思いますが、カスタマイズにかける時間を記事の作成にまわせるのを考えたらかなりコスパがいいと感じています。

 

そういう意味でも、この有料テーマの「スワロー」にしてみてよかったです。

 

あわせて読みたい
ワードプレステーマ『スワロー』をたった10分でオシャレにカスタマイズする方法 こんな悩める方に記事を用意しました。 スワローはシンプルであっという間にオシャレになるんですけど、さすがに何も分からない状態でパソコンの画面をいじるのは厳しい...
Amazonでお得な買い方

塵も積もれば山となるから少しでもお得に買い物をしましょう!

\現金チャージでお得に購入!/

Amazonでお得な買い方

  • ポイント還元率がチャージ額によって違う
  • チャージするのにクレジットカードを使うと、還元されない
  • 支払い期限が6日間
スクロールできます
1回のチャージ額通常会員プライム会員
5,000円〜19,999円0.5 %1.0 %
20,000円〜39,999円1.0 %1.5 %
40,000円〜89,999円1.5 %2.0 %
90,000円〜2.0 %2.5 %
チャージ額に対するポイント還元率
よかったらシェアしてね!

コメント

コメントする

目次
閉じる