ゲームBGMをすこれ

WordPressテーマ「Seal」で自分好みにブログをカスタマイズする方法まとめ

WRITER
 

スポンサードリンク



この記事を書いている人 - WRITER -
ゲーム音楽をこよなく愛するものです。 (任天堂信者) このブログではゲーム音楽に関する記事や大学生活に関する記事、ブログに関する記事を紹介します。 超絶田舎の地方国立大学に通ってます。週1くらいで更新してるので暇なときに見に来てください。たまに面白い記事書いてます。彼女募集中!!←≪重要≫  
詳しいプロフィールはこちら

私がブログを始めたときに流行っていたので購入したWordPressテーマ「Seal」。 個人的にかなり使いやすくて気に入っています!!

この記事では

 

  • Sealの魅力
  • Sealのカスタマイズ方法

についてブログ初心者でも分かりやすく画像付きで解説していきます!

Sealもう持ってるよー!という方は下の目次から「Sealのカスタマイズ方法」に飛んでください。

 

目次

Sealの魅力

Sealの魅力はこちら

  • サイトカラー・カスタマイズの自由度が高く、同じテーマでも個性的なサイトを作れる
  • サイトの読み込み速度が速い
  • ショートコードが豊富

他にもいろいろ機能がありますがこの3つが個人的に便利だと感じています。

他にどんな機能があるか知りたい方はこちらの紹介ページから確認してみてください!

 

個性的なサイトを作れる

このサイトを見て貰えば分かりますがSEALを使いことで、かなりカラフルなサイトを作ることが可能です。

背景などの基本的な色から、カーソルが乗ったときのボタンの色までカスタマイズできます!

カスタマイズの方法については記事の後半で詳しく書いていきます!

 

サイトの読み込み速度が速い

サイトの読み込み速度はSEOの面でもとても重要です。今考えると、Twitterで知り合った同じ頃に始めたブロガーに比べて検索流入が多いのはSealを使っていたからかもしれません。

実際に、PageSpeed Insightsでこのブログのサイト速度を測定した結果がこちら。

サイト速度スマホ
        スマホ

         PC

う〜ん微妙なのでは?と思う方も入りかもしれませんがこれでも割と速い方。PCサイトはちゃんと合格点を取れていることに注目してもらいたいです。

先ほどのPageSpeed Insightsを使えば自分のサイトだけではなく、他の人のサイト速度も調べられるので色々なサイトを調べてください! これより速いサイトはなかなか見つかりませんよ?

スマホ版が遅くなる原因として挙げられるのはアドセンス広告による遅延。アドセンス広告を貼るとどうしても遅くなってしまうんです・・・ 

 

ショートコードが豊富

ショートコードを使えば、簡単にボタンや枠を作ったりできます。他の人のブログを見てどうやってるんだろう?と思った人も多いのではないでしょうか?

 

ショートコードとは

ショートコードとはボタンや枠を作る時の呪文のようなものです。

ボタンを1から作る場合にはかなり長いコードを書かないといけませんが、Sealにはそのコードがもともと用意されていて、「ショートコード」という呪文を唱えて「ボタン作成コード」を呼び出すみたいな感じです。

これによって記事を書くスピードが何倍も速くなります!

 

実際に、この記事で出てきたボタンや枠はショートコードを使って作りました。

Sealで使えるめちゃくちゃ便利なショートコード一覧

このページでショートコードについては詳しく書いてあります。

また、Sealはこちらの公式サイトでアドクイックタグのファイルも無料配布していて、これをダウンロードすることでわずか1秒でボタンや枠が作れます!(ちょっと盛った)

例えば文字を枠で囲みたいならこんな感じ。

まず囲みたい文字を入力します。

続いて入力した文字を選択します。

次にアドクイックタグから「枠(シンプル)」を選択

これでショートコードの記入が終了。ちゃんと1秒でしたね!(5秒)

完成したものがこちらです!↓

囲みたい文字

ボタンやトピックボックス、も同じ方法で作ることができます!

 

 

 

Sealの魅力は伝わりましたか?まだダウンロードしてない方はこちらからダウンロードしてください!

 

 

Sealのカスタマイズ方法

カスタマイズはサイト画面左上の「カスタマイズ」から始めます。

カスタマイズをクリックすると下の画像のように左側にカスタマイズメニューが表示されます。

ホームページのカスタマイズ方法

 

カスタマイズメニューの項目は下の15個。

  • ロゴ画像
  • サイト基本情報
  • 便利設定
  • サイトカラー(色)
  • デザイン設定
  • ヘッダーメディア
  • ヘッダー画像(スマホ&タブレット用)
  • ヘッダー周りの設定
  • フッター固定メニューの設定(スマホ&タブのみ)
  • ビジネスメニュー部分の設定
  • メニュー
  • ウィジェット 
  • ホームページ設定
  • 追加CSS
  • 関連記事

カスタマイズの主な流れは

自分好みにデザインや設定を変更

どのように変化したのかを画面右側のプレビューで確認
下のスマホマーク・タブレットマークに切り替えることでスマホ・タブレット版のプレビューも確認可能)

カスタマイズメニュー上部の「変更」をクリック

変更完了

というふうに進めていきます。

 

ロゴ画像のカスタマイズ

ロゴ画像の追加、変更が行えます。

写真の上にタイトルを入れるだけでもかなり印象が違ってきます。

印象に残るロゴ画像を設定することでサイトの名前で検索されやすくなるというメリットもあるので、なるべく印象に残るようなデザインにしましょう!

絵を書いたり、画像を編集するのが苦手なら、有料で業者にお願いするという手もあります!

 

サイト基本情報のカスタマイズ

サイト基本情報のカスタム

ここではサイトのタイトル、キャッチフレーズ、サイトアイコンが設定できます。

サイトの内容が分かりやすいようなものにすると良いと思います!

サイトアイコンはブックマークしたときの画像になるので分かりやすいものに設定すると良いです。こちらもプロにデザインしてもらっても良いかもしれません。

 

便利設定のカスタマイズ

便利設定使い方

便利設定では、ヘッダーお知らせの設定と、コードの入力などができます。

ヘッダーお知らせを設定すると、上の画像のピンクの部分みたいなお知らせを記事ページに設置できます。リンクも設定できるので読んでほしい記事に誘導することもできます。

コードの入力などについてですが、主に

  • アナリティクスの設定
  • headタグ・body直後・body直前にコードを追加

ができます。

アナリティクスを導入するときにここにコードを入力します。(私はAll in One SEO Packというプラグインでアナリティクスを管理しているので不使用)

また、headタグ・body直後・body直前にコードを追加の機能は、アドセンスやAmazonアソシエイトの審査などでheadタグなどにコードを追加するときに便利です。

 

サイトカラー(色)のカスタマイズ

36箇所の色を設定・変更することができます!

 

ヘッダーの色の変更

ヘッダーの色変更

ヘッダーの色を変更できます。「1-B.ヘッダーの色」を設定するとヘッダーの色を下のようにグラデーションにすることもできます。

ヘッダーの色をグラデーションに変更

う〜ん、ちょっとダサいかも。ヘッダー画像を設定しない場合にはアリかもしれません。

 

ヘッダー部分文字色の変更

ヘッダー文字色変更

ヘッダーのメニューや検索マーク、キャッチフレーズなどの文字色を変更できます。

黒→赤に変更すると下の画像のようになります。

ヘッダー文字色変更

 

SP&Tablet左メニューカラーの変更

スマホ用

スマホ・タブレット版画面の左上のメニューの色を変更できます。

緑→赤にしてみました。

 

スマホナビメニューの文字色の変更

ブログタイトルの下にあるスマホナビメニューの文字色を変更できます。

黒→紫に変更してみました。

ナビメニューの作り方はこの後出てきます。

 

ナビメニューの文字色(マウスオン)の変更

マウスが乗った時のナビメニューの文字色を変更できます。

上の画像では「ネタ・暇つぶし用」にマウスが乗っています。

黒→赤にしてみました。

 

スマホ用メニューの背景色

スマホ用メニューの背景色えお変更できます。

黄緑→赤にしてみました。

 

ナビメニュードロップダウン文字色・背景色の変更

ナビメニューのドロップダウンの文字色と背景を変更できます。

見にくくならないように、背景とかぶらない色に設定しましょう。

 

メインの文字色の変更

書いた記事のメインの文字色を変更できます。

上の画像では赤色にしてみましたが、デフォルトの黒から変更する必要はなさそうです。背景を黒色に設定したときに白にするぐらいですかね。

 

リンクの色の変更

リンクのついた文字の色を変更できます。

画像ではリンクを緑、マウスに乗った時を赤に設定しています。文章中の文字色と区別が付く色を設定しましょう。

 

ボタン型リンクの色の変更

上の画像のようなボタンの色を設定できます。

ボタンは始めに紹介したショートコードで作成できます。なるべくカラフルで目立つ色にしましょう。

 

見出しのカラー文字色の変更

記事の見出しの文字色・背景色を変更できます。

他の文字と区別が付くような色に設定しましょう。

緑→黄色に変更してみました。

 

ポイントカラーの変更

記事のカテゴリーの文字色・背景色、箇条書きの点、登校日などの文字色を変更できます。

ちょっと分かりにくいのでまとめて画像で解説。

背景色を黒、文字色をに設定するとこんな感じ。

背景色を黄色、文字色を黒にするとこんな感じ。

CTA背景色の変更

CTAの背景色を変行できます。

CTAとは記事の終わりの広告スペースのことで、多くのブログで「アフィリエイトの必勝法教えます!」みたいなことが書いてある場所です。

このブログでは宣伝することがないので作ってませんが暗めの色に設定することが推奨されています。

 

フッターカラーの変更

フッター文字色

フッターの文字色や背景色を設定できます。

基本的にヘッダーと同じ色にしておくとサイトの統一感が出て良い感じになると思います。あまりみられる場所ではないですがある程度整えておきましょう。

↓カラフルにしてみました。

 

右下の上へボタンの色の変更

ブログ上へボタン

上へボタンの色を変更できます。

緑→ピンクにしてみました。

 

 

ヘッダーお知らせ背景色の変更

ヘッダー部分に設置できるお知らせの背景色を変更できます。また、マウスが乗った時の色も同様に変更できます。

よく目立つ明るい色に設定するのがお勧めです。

ピンク→赤にしてみました。

 

記事カードの色の変更

記事カードの背景色、記事タイトルの文字色を変更できます。私はサイトのメインカラーを黄緑にしているので上の画像のような設定にしています。

背景色を白、文字色を青にしてみました。これはこれでアリかも。

 

ビジネスメニュー部分のカラー変更

ビジネス部分のカラーの変更ができます。上の画像のLINEとかお問い合わせとか書いてある場所ですね。ビジネスには欠かせない機能です。

こちらもカラフルにしてみました。

 

サイト背景色の変更

サイトの背景色を変更できます。といってもコンテンツ部分ではなく、変わるのは上の画像の水色の部分です。

 

コンテンツ部分背景色の変更

コンテンツ部分の背景色を変更できます。

おそらく一番重要な部分です。これひとつでサイトの雰囲気がガラッと変わります。 上の画像を見てもらうとわかるようにピンクに設定するといかにもって感じのサイトになってしまいました。

基本的に白で良いんじゃないかなと思います。ホラーサイトにするなら黒にしても面白そうですね。

 

TOC+の背景色の変更

目次プラグインTable of contents+のカラーを変更できます。背景色とかぶらないような色に設定すると良いでしょう。

背景色→黒、文字色→黄色にしてみました。

 

デザイン設定のカスタマイズ

デザイン設定ではこのようなことができます。

 

  • マテリアルデザイン・フラットデザインの切り替え
  • サイドバーの有無の切り替え
  • トップページの最新記事のデザイン
  • 投稿日・更新日の表示切り替え
  • パンくずリストの位置の変更
  • プロフィールの配置の設定
  • 記事のアイキャッチ画像の表示設定
  • SNSシェアボタンのデザイン設定
  • 記事を気に入ったらいいねの表示設定
  • 前の記事・後ろの記事の表示設定
  • 関連記事の表示切り替え
  • コメント欄の表示切り替え
  • 記事の見出しのデザイン設定

順に解説していきます。

 

マテリアルデザイン・フラットデザインの切り替え

記事カードのデザインを変更できます。マウスオンした時のモーションが少し変わる程度なのでどっちでもいいかなと思います。

 

サイドバー有無の切り替え

サイドバーを無くしたり、設置したりできます。

特別な理由がない限りは有りでいいと思います。

 

トップページの記事のデザインの変更

トップページの記事のデザインを変更できます。

シンプルカード型と横長カード型があり、それぞれのデザインはこんな感じ。

シンプルカード型

横長カード型

どちらも1ページ目に掲載される記事数は一緒なので好みの問題ですが、訪れた人がなるべくスクロールせずに済むシンプルカード型がいいかもしれません。

 

投稿日・更新日の非表示設定

投稿日・更新日の表示・非表示を設定できます。

特別な理由がない限り表示するに設定しておけばいいでしょう。

 

パンくずリストの位置の変更

パンくずリストの位置を変更できます。

パンくずリストとは、記事ページのタイトル上にあるその記事が属するカテゴリーなどを示す部分。下の画像で言うと、「🏠ホーム>漫画>GIGANT」てやつです。

端よりと中央よりの2種類があり、正直ほとんど変わらないので好みの問題です。上の画像が端より、下の画像が中央よりです。

 

プロフィールの配置の設定

上の画像のようなプロフィールを配置する場所を設定できます。

アイキャッチ画像の右上、アイキャッチ画像の直後、記事終わり部分に設定できます。

正直インフルエンサーでもない限りほとんど読まれないので私は記事下だけに設定しています。

 

アイキャッチ画像の表示設定

アイキャッチ画像の表示・非表示を切り替えられます。

表示させておいた歩がいいと思います。

 

SNSシェアボタンのデザイン設定

SNSシェアボタンのデザインを設定できます。

ノーマル、フラット、ゴーストの3種類がありそれぞれのデザインはこんな感じです。

ノーマルとフラットはマウスが乗った時のモーションが変化します。

 

いいねの表示設定

表示するにすると、上の画像のように、背景がアイキャッチ画像のいいねスペースが表示されます。Twitterを活用している人は設定しておくといいでしょう。

正直ほとんどクリックされることはありません。

 

前の記事・後ろの記事の表示設定

表示するにすると記事下に上の画像のような記事カードが表示されます。

特化ブログの場合はいいですが、私のサイトでは現在の記事と関連性がないことが多いので非表示にしています。

 

関連記事の表示設定

表示するにすると、記事下に関連記事と最新記事が表示されます。サイトの回遊率が上がるので表示するにしておくといいでしょう。

 

コメント欄の表示設定

コメント欄表示・非表示
コメント欄の表示・非表示を設定できます。

アンチコメントがたくさんくる場合は表示しないに設定するといいでしょう。

↓こちらの記事でメールアドレスや名前の入力をしなくてもコメントをできるようにする方法も紹介しています。

 

見出しのデザインの変更

2h、3h、4hの見出しのデザインを変更できます。

リボン型、マテリアル型、吹き出し型など色々あるので自分の気に入ったものを設定するようにしましょう。なるべく目立つものにするといいです。

 

ヘッダーメディアのカスタマイズ

トップページのタイトル下にヘッダー画像を挿入できます。

サイトのテーマ、自分の紹介などを分かりやすくまとめたヘッダー画像にするといいでしょう。

 

ヘッダー画像(スマホ&タブレット用)

先ほどと同様に、スマホ・タブレット版で表示されるタイトル下の画像を設定できます。

PC版と同じ画像でいいと思います。

 

ヘッダー周りの設定のカスタマイズ

ヘッダー周りの設定では次のカスタマイズができます。

  • ヘッダー画像のデザイン
  • サイトタイトルのポジションの設定
  • キャッチコピーの表示設定
  • ヘッダー部分の透過設定
  • スマホ&タブレット用のメニューの表示設定

 

ヘッダー画像のデザイン

ヘッダー画像の大きさを変更したり影をつけたりできます。

正直「え?どっか変わった?」ぐらいの変化なのでデフォルトの「小さめ」のままでいいと思います。ヘッダー画像のデザインに凝ったほうがいいでしょう。

 

サイトタイトルのポジションの変更

サイトタイトル、キャッチコピー、メニューを「中央に寄せる」か「左によせる」かを切り替えることができます。
  • 中央寄り

  • 左寄り

正直ほとんど変わらないので好みの問題です。

 

キャッチコピーの表示設定

キャッチコピーの表示・非表示の切り替えができます。

これも好みの問題ですが、表示しておいても損はないでしょう。

 

ヘッダー部分の透過切り替え

ヘッダーの背景をヘッダー画像に変更できます。画像によっては文字が見えずらくなる場合もあるので、透過させるなら文字が見やすくなるようなヘッダー画像を設定しましょう。

↓透過後の画像

 

スマホ&タブレット用のナビメニューの表示設定

 

スマホ・タブレット版の画面にナビメニューを表示させることができます。

サイト回遊率がグッと上がるので必ず表示しておきましょう。

 

 

フッター固定メニューのカスタマイズ

スマホ・タブレットで表示されるフッター固定メニューをカスタマイズできます。上の画像みたいなやつです。サイト内回遊率が上がるので必ず設定しましょう。

最大5個まで設定できます。もちろん非表示にすることもできます。

フッター固定メニューの設定方法

1.アイコンを決める

アイコンがたくさん用意されているので内容にあったアイコンを設定できます。

 

2.テキストを入力する

メニューに表示されるテキストを決めます。リンク先の内容を短く表す用にしましょう。

 

3.リンク先を設定する

アイコンをクリックしたときに移動するページのリンクを設定します。画像ではホームページに飛ぶように設定しています。

 

4.背景と文字色の設定

アイコンの色と文字色を設定します。文字色が読めるように色を設定しましょう。

 

これで完成です。2個目3個目も作っていきましょう。私はこんな感じにアレンジしてみました!

ビジネスメニューのカスタマイズ

ビジネスメニューを設定すると、上の画像のようにヘッダー上に自分の連絡先を載せることができます。

ビジネスにはもってこいの機能ですが、個人ブログではさほど使う機会はなさそうです。私は非表示に設定しています。

あと、スマホ版ではフッターメニューと被ってしまうので、どちらか片方だけにしましょう。下の画像のちょっと見えてる紺色の部分がビジネスメニューです。

メニューのカスタマイズ

メニューをカスタマイズすることができます。サイトの回遊率が上がるので必ず設定しましょう!

1.新規作成をクリック

2.メニュー名・メニューの位置を決める
メニューの位置は

  • メインメニュー(ヘッダー下)
  • 左メニュー(左上のタブ開いたところ)
  • スマホナビ(スマホ版ヘッダー下)
  • フッターナビ(フッター)

から選べます。

3.項目を追加してゆく

メニューに追加する項目を決めていきます。

参考までに私のPC版ヘッダー下メニューはこんな感じに設定しています。

「ONE PIECE」などの他より小さい項目は「漫画」にカーソルを合わせるとドロップダウンして表示されます。右に少しドラッグすると設定できます。

また、ナビゲーションラベルから項目の名称も変更できます。

 

ウィジェット のカスタマイズ

ウィジェット のカスタマイズができます。サイドバーやタイトル下、記事終わりに広告やテキストなどの色々な項目を入力するときに使います。

プレビューを確認しながらできますが、表示されない項目もあるので、ダッシュボードからカスタマイズすることをお勧めします。

ここでは詳しく解説しませんが、好みの部分が大きいので自分でいろいろいじってみてください!近々お勧めのウィジェット のカスタマイズ方法の記事も出す予定です!

 

ホームページ設定のカスタマイズ

ホームページを最新の投稿を表示するか固定ページを表示するか選べます。「最新の投稿」を選択しておきましょう。正直固定ページに設定するメリットがないです。

 

追加CSSのカスタマイズ

検索するとたまに出てくる「〜をCSSに追加してください」みたいなときに利用できます。

わざわざダッシュボードのテーマのカスタマイズまで移動しなくていいのでかなり便利です!

 

関連記事のカスタマイズ

記事下の関連記事のカスタマイズができます。サイトの回遊率が上がるので必ず設定しておきまししょう!

 

まとめ

いい感じにサイトをカスタマイズできたでしょうか?

  • メニュー
  • フッター固定メニュー
  • 関連記事

の3つはサイト回遊率が上がりPVを増やすために必ず設定しておきましょう!

 

このブログでは他にもブログ関係の記事を書いているのでぜひ読んでみてください!

YouTubeチャンネル紹介

【必見!】当サイト イチオシのゲーム実況チャンネル!

友達がゲーム実況始めたので紹介します!

はかせとやそしの2人で活動しているゲーム実況チャンネルで、協力しながら懐かしい名作ゲームをクリアしていくのがメイン。

面白さには自信ありとのことなのでぜひチェックしてみてください!

 

この記事を書いている人 - WRITER -
ゲーム音楽をこよなく愛するものです。 (任天堂信者) このブログではゲーム音楽に関する記事や大学生活に関する記事、ブログに関する記事を紹介します。 超絶田舎の地方国立大学に通ってます。週1くらいで更新してるので暇なときに見に来てください。たまに面白い記事書いてます。彼女募集中!!←≪重要≫  
詳しいプロフィールはこちら

- Comments -

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Copyright© WATA-BLOG(わたブログ) , 2020 All Rights Reserved.