WordPressのテーマを「SWELL」に変更したけど、カスタマイズ方法がわからない！
ブログデザインを調べながら挑戦しているけど、うまくいかない！
そんなお悩みありませんか？
Teruその気持ちすごくわかります！
以前投稿した「初心者でも簡単にブログデザインが可能！」でも紹介していますが、
沢山の尊敬するブロガーさんの記事を参考に試行錯誤しながらブログデザインに挑戦しました。
そして・・
大人気有料テーマ「SWELL」で自由につくることが出来ました。
こんな感じに仕上がっています
デザインは画像作成から始めて、約半日ほどで完成しました。
初心者にしてはおしゃれっぽい雰囲気が作れていませんか？
しかし、なかなかうまくいかなかったり、どこの部分の事を話されているのかわからなかったりと
初心者だからこそ混乱してしまうポイントが沢山ありました。
そんな私が実際に悩んだり、困った部分も含めてブログデザインに関してやり方とポイントをご紹介していきます。
この記事を読めば、初めて挑戦する方でも簡単にデザインの進め方がわかります。
- 用意すべきツール
- 作成前の下準備編
- 作成手順
大きく分けて３つのカテゴリーを実際に画像を交え、可能な限りわかりやすく説明していきます。
ぜひ最後までご覧いただけると嬉しいです。
- 初めてブログデザインに挑戦する方
- 他のブロガーさんの記事を読みながら挑戦したが挫折してしまった方
- 私のブログデザインを奇跡的に気に入ってくださった方（感謝感激です！）
①用意して欲しいツールなど
まずは最初に用意いただきたいツールなどをお話します。
- WordPressのご自身のブログ
- 有料テーマ「SWELL」の購入と準備
- 画像作成ツール「Canva」
- 可能な限り用意できるブログ記事数
以上の4点は用意いただく必要があります。
今回の記事では私が経験した内容をもとにご説明いたします。
ですので、私の使用していないブログテーマやツールだと同じように出来ない可能性が高いです。
＼ブログデザインに関係する他の記事／
WordPressの自身のブログ
本記事に興味を持っていただいている方は、ほとんどがWordPressでブログを作成されている方、
もしくは始める予定のある方だと思います。
したがって詳しくは手順等は省かせていただきます。
Teru私はhitodeblogを参考に始めましたよ！
有料テーマ「SWELL」
オシャレなブログデザインを目指す方におすすめなのは有料テーマの「SWELL」です。
SWELLを購入頂くことで、簡単に記事装飾ツールを利用でき、
初心者ブロガーの最初の難関である記事執筆の効率を上げることが出来ます。
そして、おしゃれなブログデザインも簡単に行うことで出来ます。
素人が使いこなせるか不安というあなた！一度使い方もチェックしてみてください。
SWELLの特徴を見てみる
作成ツール「Canva」
私はブログに使用する「アイキャッチ画像」、「デザインに使用した画像」、「記事内で使用する画像」
全てCanvaで作成しております。
Canvaは有料版、無料版とありますが最初は無料版で十分です。
使ってみて自分に合っている、もっと便利に使いたいと感じた際に有料版に変更する事をおすすめします。
Canvaのおすすめポイントは以下の２つです。
- 無料でも使えるテンプレートや画像の質と量が素晴らしい
- パソコンでもアプリでも使えて便利
Teru実はブログ以外にもインスタグラムの投稿やストーリー、
業務で使うPOP作成にも使用しています。
インスタやA4、名刺用などサイズのテンプレートも
豊富でおすすめです！
ブログの記事数
デザインを作成するにあたり、ある程度のブログの記事数がある方がつくりやすいです。
実際はデザイン作成だけであれば記事が無くても可能です。
- カテゴリー分け
- 新着記事
- おすすめ記事
上の3つの様に記事についてのカテゴリー部分もデザインしていきますので少なくとも10記事程度は
記事を執筆しておくことをおすすめします。
Teruブログのイメージや方向性を考えておくためにも、
ある程度ブログ運営を進めてからデザインし始めることをおすすめします！
②下準備編
ブログデザインを行うための下準備についてお話します。
こちらのパートでは実際にデザインに取り掛かる前の
構成やイメージを固めていく作業です。
ブログジャンルやテーマをもとにイメージ決定
まずはブログジャンルやテーマをもとにしてイメージを決めていきます。
Teru特化ブログなのか雑記ブログなのかでも変わるため重要ポイントです。
少し難しいのは雑記ブログの場合です。
私も雑記ブログなのですが、 大まかに4つのカテゴリーで運営しています。
- 仕事
- コスメやスキンケア
- ブログ関係
- その他雑記
ブログのジャンルやカテゴリーの内容でイメージをつくっていくのか、全く別の視点でデザインするか決めてください。
ガジェット特化のブログであればカメラやスマートフォンのイラストやカラーを使用したり、美容系特化であればパステルカラーやコスメの画像・イラストを使用するイメージです。
一目見て「何について書かれているブログか」がわかりやすいので統一感を出しやすいです。
Teru私の場合はブログのジャンルとカテゴリーに統一性が無かったため
好きな色やイメージで作成する「全く別の視点でデザインする」方向で進めました。
具体的にカテゴリーで決めるパターンと、別の視点で決めるパターンでどのような違いが出るのか
次のイメージカラーやアイコンの部分で説明していきます。
イメージカラー・イメージアイコン
考えたイメージをもとにして「イメージカラー」や「イメージアイコン」を決めておきます。
例えばガジェット系の特化ブログを運営しているのであれば
- カメラやスマートフォンの画像
- イメージカラーはブラックやホワイトのモノトーン
美容系特化ブログであれば
- コスメやドレッサーの画像
- ピンクやパステル系のカラー
このようなイメージで決めていきます。
Teru私は青色が基本カラーに決定！
後は植物や花をポイントアイコンとして使うことにしました。
SWELLの便利機能
SWELLでは様々な便利でおしゃれで便利な機能が使用できます。
私のブログでは「固定ページ」を使って上から下までサイトの様に
流れるようなイメージでデザインしています。
Teru固定ページの作成方法は後ほど！
固定ページでデザインをする場合でも
- 紹介のあいさつ
- 新着記事
- おすすめ記事
- カテゴリー紹介
何をトップ画面に置いておきたいかを考えておく必要があります。
＼今回使っていないけどSWELLのおすすめ機能／
記事スライダー
記事が自動でスライドされていく機能です。
最初はかっこよくて使っていたんですが、アイキャッチ画像がバラバラすぎて今回は外しました。
記事スライダーの設定は
WordPress「外観」→カスタマイズ→トップページ→記事スライダー
→「記事スライダーを設置するかどうか」を設置する選択で設定できます。
画像の作成
それでは実際にデザインの作業に入ります。
デザインで使用する画像をCanvaで準備しておきます。
Teru私の場合はイメージカラーや画像の雰囲気を統一するために
最初に大体つくっておいて、調整する方法で進めました。
今回作成したのはヘッダーロゴ、メインビジュアル、ピックアップバナー、見出し画像の4種類です
＼私が使用した画像のサイズ／
| Canvaでのサイズ | |
| ヘッダーロゴ | 960px×200px |
| メインビジュアル | 1200px×360px |
| ピックアップバナー | 500px×500px |
| 見出し画像 | 1200px×360px |
▼画像サイズに関して参考にした憧れブロガーさんの記事
他にあると便利な部分
他の設定であると便利だな、おすすめだなと思った機能も少しご紹介します。
お知らせバー
私はTwitterのリンクをここに貼り付けています。
＼理由は２つ／
- TOPページをみて気になった人がフォローしやすくなる
- 私がカスタマイズ中にTwitterをひらきやすい（笑）
やはり検索からブログに来ていただいた方がフォローしようかなと思ったときに
Twitterに飛びやすくなるメリットがあります。
Teruあとは私が気になった時に自分のTwitterページを見やすいんです。
Twitter以外のページも設定可能です。
- プロフィールページ
- 楽天ルーム
- お気に入りにの記事
ブロガーさんの個性が出ている部分でもあります。
一番見てほしいページを設定できるので設定しておいて損はないですよ！
③実際の作成手順
それでは実際の設定方法をご紹介していきます。
Teruまだまだ私も勉強中です。
実際に行いながら戸惑ったポイントを中心にご紹介します。
基本的な作業の流れ
- 基本カラーとカラーパレット設定
- ヘッダー、グローバルナビ
- メインビジュアル設定
- ピックアップバナー
- 固定ページ
①基本カラーとカラーパレット設定
詳しい作成手順はSWELL公式サイトの「サイト全体の基本カラーの設定方法」と
「カラーパレットの配色をカスタマイズする方法」でご確認ください。
テキストの色や背景色などブログ全体のカラーやブログ記事内の文字装飾の色を変更できます。
②ヘッダー、グローバルナビ
具体的な設定方法は、SWELL公式サイト「デザイン・レイアウト設定」、
「グローバルナビの設定方法」をご参照ください。
ヘッダー部分
私のヘッダー画像
最初は何も考えずに作成したので、目立つように文字もイラストも大きめに作っています。
現在のロゴでは全体のバランスを見ながらブログ名さえ分かればいいと思ったので、
イラストは透明度を高くして白色の背景に馴染ませています。
＼Canvaを使った画像の透明度変更法／
グローバルナビ
手順は公式サイト様で本当に解りやすくご説明されていますので、
恐らく悩むことは少ないと思います。
カテゴリーの名前を平仮名で「ぶろぐ」や「なんでも」と作成しているため、
このままだと子供っぽい印象になってしまいました。
Teru育児系のブログジャンルなら可愛くておすすめだけど、自分のブログには・・・
結果として英語で文字が入ることで、ちょっと知的な感じが出せました。
以前「なんでも」カテゴリーの英語表記はrandom noteにしていたのですが、
来た人がわかりにくいと思いZakkiと雑記のローマ字表記にしました。
SWELLは細かくカスタマイズできる点が面白いですね！
③メインビジュアル
メインビジュアルの設定です。
設定方法は
WordPress「外観」→カスタマイズ→トップページ→メインビジュアル
→メインビジュアルの表示内容 →画像にチェック→画像をアップロード
そのほかの私の画像設定は以下の通りです。
【周りに余白をつける】→つけない
【Scrollボタンを表示する】→表示しない
【フィルター処理】→なし
【オーバーレイカラー】→白色
フィルター処理
フィルター処理は
- ブラー
- グレースケール
- ドット
- ブラシ
４つの中から選択可能です。
こちらを選択すると画像を加工することが出来ます。
画像をぼやけた感じに出来たり風合いを変更できるので、イラストより写真を使われている方におすすめです。
オーバーレイカラー
画像全体に色を付ける機能です。
こちらもイラストより画像の方がオリジナリティを出せておすすめです。
Teruフィルターとオーバーレイカラーの組み合わせでイメージピッタリの
メインビジュアルをつくってください！
④ピックアップバナー
手順の流れは以下の４つです。
- Canvaで画像を作成しておく
- ピックアップバナーを新しいメニューで作成
- つくりたいカテゴリーの種類を選択
- Canvaでつくった画像を入れる
Teru画像はすでに作ったと仮定して進めていきます
メニューを作成する
①WordPress「外観」 →②メニュー→③新しいメニューの作成
→④メニュー名入力→⑤ピックアップバナーにチェック→⑥メニューを作成
作成したピックアップバナーにカテゴリーを設定
私はカテゴリーをピックアップバナーに設定しています。
Teru他にも「投稿した記事ページ」や「固定ページ」を設定する事も可能です！
設定の際にCanvaで作成した画像のURLが必要となります。
①WordPress「外観」 →②メニュー→③編集するメニューを選択【ピックアップバナー】
→④メニュー項目を追加【カテゴリー】→⑤タグ全てを表示から使用するカテゴリーにチェック
→⑥メニューに追加→⑦カテゴリー名横の▼を押す→⑧【説明】に画像のURLを入力
→⑨メニュー設定のメニューの位置【ピックアップバナー】にチェック→⑩メニューを保存
ピックアップバナーをトップページに設定する
最後にピックアップバナーの細かい設定を行います。
ピックアップバナーの設定方法
WordPress「外観」 →カスタマイズ→トップページ→ピックアップバナー
Teru幅や細かい調整をします。
私は可能な限り作成した画像にアレンジが加わらないようにしています。
私のブログのピックアップバナー設定は以下の通りです。
【バナーレイアウトPC】→固定幅4列
【バナーレイアウトSP】→固定幅2列
【バナータイトルデザイン】→表示しない
【内側に白線を】→つける
【バナー画像を少し暗く】→しない
⑤固定ページ作成
次に今回の目玉の固定ページ作成です。
Teru固定ページ作成が一番苦戦しました～
今回私が作成した固定ページはMizukijiさんの記事を参考に作成しました。
作成手順はぜひMizukijiさんの記事を参考にしてください！
Teruいつもお世話になっております！
ブログ関係以外にも副業やキャリアに関して執筆されているおすすめのブロガーさんです！
私が作成した項目は以下の3点です。
- 人気記事
- 新着記事
- カテゴリー部分
Teru手順とポイント点をお話していきます！
固定ページを新規作成する
まずは新規ページを作成します！
これからの作業はCanvaの画像を貼り付けて「見出し」をつくり、
投稿リストなどでコンテンツを作成していきます。
注意していただきたいのは、
フルワイドブロック→画像貼り付け
フルワイドブロック→投稿リスト
の様にフルワイドブロックを必ず先に作成してください。
paddingを変更するとこんなことも出来ます！
投稿ブロックを作成する
固定ページ編集中の画面で 左上のプラスボタンからメニューを開く→投稿リストを選択
私のブログでは投稿リストを使用して以下の2種類を作成しています。
- 新着記事のリスト
- 人気記事のリスト
Teru設定はほとんど一緒で大丈夫です。
表示する投稿数→3
レイアウト選択→カード型
投稿の表示順序→新着順
各種表示設定→公開日を表示する
カテゴリー表示位置→日付の横
最大カラム数（PC）→3列
最大カラム数（SP）→2列
抜粋分の文字数（PC）→０
抜粋分の文字数（SP）→０
表示する投稿数→6
レイアウト選択→カード型
投稿の表示順序→人気順
各種表示設定→公開日を表示する
カテゴリー表示位置→日付の横
最大カラム数（PC）→3列
最大カラム数（SP）→2列
抜粋分の文字数（PC）→０
抜粋分の文字数（SP）→０
Teru違う部分は黄色の部分のみです
その他
【まとめ】SWELLでのブログデザインに難しい技術は必要なかった！
画像を使いながらブログデザインのポイントをご紹介しました。
もちろんこれからもアップデートを続けていきますし、いいアイデアがあればご紹介していきたいと思います。
Teruブログのデザインは時間がかかってしまうので、沼にはまらないようにご注意ください！
デザインを考える事でアイキャッチの統一感やタイトルや文章の装飾など
様々な発見や改善点が見つかるので、すごく勉強になります。
様々なブロガーさんのブログを覗くだけでも沢山の発見があると思いますので、
是非一度挑戦してみてください！
コメント