「SWALLOW（スワロー）」はシンプルなデザインが特徴のWordPressテーマです。
しかしシンプルといっても、デザイン設定、プロフィール欄の作成、フォントサイズ、ショートコードといった設定は、他のテーマとおなじで自分で設定する必要があります。
そこで今回は「スワロー」のカスタマイズノウハウを6つ激選して解説します。
「SWALLOW（以下、スワロー）」はOPENCAGE社が提供するWordPressテーマです。↓のデザインのようにシンプルでクールなイメージがあります。
「スワロー」がシンプルなのは見た目がごちゃごちゃしてなくて、すっきりとした印象を与えるからです。
デザインができないわけでなく、他のサイトと同様に様々なカスタマイズが可能です。例えば以下のようなことができます。
・プロフィール欄の作成
・フォントの調整
・背景やヘッダー、フッターの調整
・広告の設定
他のワードプレス（AFFINGER、JIN、ストーク、アルバトロス）と同じことができます。
ですが「こんな風にカスタマイズしたいけど、どうしたら良いのか？」「こういう風にしたいのにいちいち色んなページに飛ばないといけない」と悩みは多く、僕も色んなサイトを行き来しました。
まあまあ煩わしいなと感じたので、実際に設定したスワローのカスタマイズ方法をご紹介します。
WordPressテーマ「スワロー」で導入したいカスタマイズ
本記事でご紹介するカスタマイズは以下の機能です。
- 背景色などのデザインの調整
- フォントサイズの調整
- 「スワロー」におすすめのプラグイン
- ショートコードの設定
- プロフィール欄の設定
- 広告の貼り付け方
それでは早速ご紹介します。
「スワロー」カスタマイズ① 背景色などのデザイン色設定
まずはワードプレスのどのテーマにも関連する「色」について基本的な設定をご紹介します。
背景色は読者にとって、とても大きな印象を与えています。同じ「ブログ」をテーマにしても、サイトごとに雰囲気が全然違うのがおわかりいただけると思います。
ぼくはこのデザインがとても重要なものだと感じています。
なぜなら、読者にとってとても大きな影響を与えるからです。
例えば同じ飲食店でもそれぞれ傾向がありますよね？
明るい色味でキレイな飲食店 ➡ 女性が集まりやすい
老舗っぽい暖簾がかったようなお店 ➡ お酒好きの方やサラリーマンの方が集まりやすい
それと同じでどのような読者を集めたいかでデザインを決めると良いでしょう。
サイトのパーソナルカラーを決めよう
デザインの手順の前に、サイトのデザイン色を決めましょう。
「デザインなんか意識したことない・・・・」
そんなに力を入れる必要はありません。デザイン色はある程度のパターンが決まっています。
色の決め方については、サルワカさんの『配色パターン見本40選：ベストな色の組み合わせを探せるツール』でとても分かりやすく解説されているので、こちらの組み合わせを参考にされるのが良いでしょう。
僕もこちらの記事を参考にして配色しています。
「スワロー」で基本的なデザインを整えよう
ここからは「スワロー」でのデザイン設定手順になります。
①「外観」ー「カスタマイズ」とクリックします。
すると↓のようなエディタ画面が表示されます。以下の①～⑤を設定すればOKです。
- サイト基本設定・ロゴ設定
- サイトカラー設定
- 全ページ共通設定
- 記事一覧ページ設定
- 投稿・設定ページ設定
①サイト基本設定・ロゴ画像
「サイト基本設定・ロゴ画像」でヘッダーに表示する内容を決めます。ヘッダーはトップページや記事の一番上にあるタイトルになる部分です。
■本サイト「エンジニアの記憶部屋」の設定
| サイトのタイトル | エンジニアの記憶部屋 |
| キャッチフレーズ | ※未使用 |
| キャッチフレーズを表示する | 表示しない |
| ロゴサイズ変更 | 大き目 |
ロゴのサイズはご自分でパソコンやスマホを確認しながら調整してください。
②サイトカラー設定
色分けをしていますが以下のような分類で分けています。先ほど決めた背景色をこちらに設定していきます。
注意点はリンク色だけは青色に設定しましょう。（青色の方がクリックされやすいので）
| メインテキスト | タイトルや本文の文字 |
| リンク色 | リンクを貼った時の色 |
| ヘッダー背景、テキスト、ロゴ | 最上部ヘッダー部分 |
| 記事ページ見出し（H2)背景、文字色 | H2タグ |
| フッター背景、テキスト | 最下部 |
H2タグの見出しはこのようなイメージとなります。
フッターの色はこのようなイメージです。
リンクの色は青色で設定しよう
③全ページ共通設定 ④記事一覧ページ設定
H２などの箱を四角にするか吹き出しにするか、といった細かなデザイン設定ですね。
こちらはお好みで設定していただければ構いません。
本サイトでは以下のように設定しています。
⑤投稿・設定ページ設定
ここは記事からTwitterを連携できるようにしましょう。
記事下に「FOLLOW」という欄があると思います。
「カスタマイズ」ー「投稿・設定ページ設定」で下のほうにいくとTwitter入力欄があります。以下のように自分のツイッターサイトからURLを取得してきましょう。
「https://twitter.com/」の後ろはご自分の「＠」以下が入ります。
記事下からご自分のツイッターへ飛べればOKです。
「スワロー」カスタマイズ② プラグイン「WordPress Popular Posts」
次に、スワローでおすすめのプラグインを紹介します。
スワローでおすすめのプラグインは以下の２つです。
- WordPress Popular Posts
- AddQuicktag
2つのプラグインの設定方法は『WordPress「スワロー」におすすめのプラグイン2選【設定方法あり】』でまとめています。
「スワロー」カスタマイズ③ フォントサイズの調整
スワローでフォントサイズを調整するのは「style.css」を修正します。
style.cssは必ずバックアップを取りましょう。編集に失敗するとサイトが表示されなくなります。今あるものを消さなければ大丈夫です♪
「外観」－「テーマエディター」から「style.css」を開きます。
ここでコードが書かれてあるところを選択し「Ctrl ＋ F」を押しましょう。
検索ボックスがでてきます。
検索ボックスに「GENERAL」と検索し、Enterを押します。
すると「GENERAL STYLES」が表示れます。ここが本文などのフォントサイズです。
| font-family | フォントの種類 |
| font-size | 文字の大きさ |
| line-height | 分と分の余白 |
この辺りかと思います。
スワローではもともと「font-size」が「102％」、line-heightが「2.0」ぐらいだったと思います。これを見やすく調整しています。
本サイトではfont-sizeを「98%」、line-heightを「4.0」にしています。
これもパソコンやスマホを確認しながら調整されるのが良いでしょう。
「スワロー」カスタマイズ④ ショートコードの使い方
スワローでは記事作成を楽にするために「ショートコード」機能が使えます。
OPENCAGE社の『ショートコードの使い方』にも掲載されております。便利なので使っていきましょう。
注意点は「他のテーマに変えると使えなくなる」ことです。そこだけ注意なので、スワロー一択でがんばりましょう！
ショートコードはスワローにあらかじめ使えるように「style.css」に保存されています。
例えば記事を書いてるとき「関連記事を書きたい！」となったときは、記事の入力中に以下のコードを入力しましょう。
“[“kanren postid=”ID番号”]”
「ID番号」は投稿記事一覧で、関連記事にしたい記事にカーソルをあてると画面下部から確認できます。
ちょっとめんどくさいので、僕は記事を投稿したらメモするようにしています。
関連記事のイメージは以下のように感じです。↓
こういったショートコードは何十種類もありますがOPENCAGEのホームページでは細かく紹介されていません。（なぜ？）
ショートコードの所在は「style.css」で「ショートコード」と検索すれば出てきます。ショートコードの詳細が知りたい！という方は調べてみてください。
ショートコードについてはOPENCAGEの公式ホームページでもまとめられています。ラインマーカーやボタンなども出力できます。
『ショートコードの使い方』（OPENCAGE社のサイトへ移動します）
※本サイトでもショートコードはまとめる予定ですので、今しばらくお待ちください。
「スワロー」カスタマイズ⑤ プロフィール欄の設定
トップページや記事のサイドバーへ「プロフィール欄」を作る方法を紹介します。
やはり「誰が書いたものか？」これが分かるだけでもかなり信頼性は異なります。
人の見えないインターネットの世界だからこそ、プロフィールは表示させて信頼性を高めましょう。
本記事の「プロフィール」のような欄を作成します。
「外観」－「テーマエディター」より「style.css」を開きます。
そこに下記コードを挿入しましょう。（コピペでOK）
挿入箇所はどこでもOK、わからなければ一番下にいれましょう。
必ず「style.css」はバックアップを取ってから編集しましょう
.authorbox .custom-profile_img img {
width: 40%;
margin: auto;
border-radius: 50%;
border: 2px solid #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
}
.authorbox .profile_name a, .authorbox .author_sns a {
text-decoration: none;
color: inherit;
}
つづいてウィジェットにコードを追加していきます。
以下のソースコードを使いますが、修正が必要なところを赤文字と青文字にしています。
修正箇所をご自分のものに設定してから、次の手順へ進みましょう。（URLの取得方法は↓で紹介）
<div class=”authorbox wow animated fadeIn” data-wow-delay=”0.5s”>
<div class=”inbox”>
<div class=”profile cf”>
<div class=”custom-profile_img”><img class=”avatar avatar-150 photo” src=”https://プロフィール画像URL” srcset=”https://プロフィール画像URL” alt=”” width=”150″ height=”150″ /></div>
<div class=”custom-profile_description”>
<div class=”profile_name”><a title=”xxxxx” href=”https://ブログURL/author/ブログアカウント名/” rel=”author”>ここに名前をかく</a><span class=”userposition”>ここに肩書きを書く</span></div>
ここに自己紹介文・・・・
</div>
</div>
<div class=”author_sns”>
<ul>
<li class=”author-site”><a href=”ブログURL” target=”_blank” rel=”noopener”>WebSite</a></li>
<li class=”author-twitter”><a href=”https://twitter.com/アカウント” target=”_blank” rel=”nofollow noopener”>Twitter</a></li>
<li class=”author-facebook”><a href=”https://www.facebook.com/アカウント” target=”_blank” rel=”nofollow noopener”>Facebook</a></li>
<li class=”author-google”><a href=”https://plus.google.com/アカウント” target=”_blank” rel=”nofollow noopener”>Google+</a></li>
<li class=”author-instagram”><a href=”https://www.instagram.com/アカウント” target=”_blank” rel=”nofollow noopener”>Instagram</a></li>
</ul>
</div>
</div>
</div>
| ①プロフィール画像URL | 以下で説明 |
| ②ブログURL | ご自分のサイトURLです。 |
| ③ブログアカウント名 | 以下で説明 |
| ④アカウント | 各SNSのアカウント名 |
青文字は任意なので、ご自分で設定しましょう。
①プロフィール画像URLは以下の通り、画像をワードプレスにアップロードする画面で表示されます。
③ブログ「アカウント名」はダッシュボード「ユーザ」ー「あなたのプロフィール」から確認できます。
編集が完了したらコードを以下に貼り付けましょう。
「外観」－「ウィジェット」より「カスタムHTML」をサイドバーに準備します。
タイトルをプロフィールとして、コードを貼り付けましょう。
これでプロフィール欄は完成です。
「スワロー」カスタマイズ⑥ 広告の貼り付け方
最後に広告の貼り付け方です。
今回はトップページや記事の右上に表示させる広告を例に紹介していきます。
イメージは以下。
こちらはASPサイトやグーグルアドセンスでコピーしてきた広告をウィジェットの「カスタムHTML」に貼り付けます。
広告なので「タイトル」は不要です。
サイドバーだとレスポンシブタイプ、または300×250ぐらいのサイズが適切かと思います。
WordPressテーマ「スワロー」で導入したいカスタマイズ【まとめ】
いかがでしたでしょうか？
ワードプレスのカスタマイズはどのテーマであっても、初めはどこの何を修正したらいいのかわからないことが多いです。
WEB系の知識がなくてもワードプレスは使いこなせると便利ですし、ここで紹介したことだけでもサイトのデザインはほとんど整ってくるでしょう。
さらにデザインにこだわりたい方は、Googleなどで検索してみてください。僕も新しいデザインを導入し次第、掲載させていただきます。
もしワードプレススワローに興味を持たれた方は公式ホームページで検討してみください。
「スワロー」を公式ホームページを確認する➡【WordPressテーマ「スワロー」】
ワードプレステーマ「スワロー」を使って、ブログやサイトを作成したいと思われた方は、以下の記事を参考にしてみてください。
