テーマの更新方法は、
「外観」⇒「テーマ」で、SEAL ver.1.5に更新通知が来ているので、更新をしてみてください。

アップデート内容を以下にまとめました。

1. トップページのSEO情報をプラグインなしで追加できるようになりました。
2. 投稿・固定ページのSEO情報をプラグインなしで追加できるようになりました。合わせて投稿や固定ページ1ページごとにnoindex、nofollowもチェック1つで設定できるようになりました。
3. Googleタグマネージャ専用の設置箇所を作りました。
4. OGP関係のプログラムのリニューアル。
5. ショートコード
   のちらつきの修正
6. animate.cssの4.0.0に対応

以下に、詳しく設定ができるようになった部分について解説します。

１．トップページのSEO情報の設定ができるように

外観⇒カスタマイズ⇒「SEO関係の設定」というメニューを追加しました。

こちらには、以下の項目を設定できます。

２．投稿・固定ページのSEO情報の追加方法

投稿や固定ページの編集画面の下の方に「SEOの情報」というメニューを追加しました。

↓　各項目、以下のような役割のメニューになっています。

３．Googleタグマネージャ専用の設置箇所の使い方

外観⇒カスタマイズ⇒「便利設定・アクセス解析設定」の中に、Googleタグマネージャを設置する専用のメニューを追加しました。

タグマネージャを使いたい方は、より分かりやすく設置できるようになったと思います。

４．OGP関係のプログラムリニューアル

OGPとはOpen Graph Protocolといって、FacebookやTwitterなどのSNSにWebページを投稿したときに、そのページのタイトルや画像を表示させる仕組みです。

基本的には、トップページとそれ以外（投稿・固定ページ）によってSNSに表示される部分が違います。

4-1.トップページをSNSに投稿する場合

外観⇒カスタマイズ⇒SEO関係の設定　で設定した以下の情報が表示されるようになります。

1. SEOタイトル　⇒　SNSに表示されるタイトル
2. ホームdescription　⇒　SNSに表示される説明文
3. ホームOGP画像　⇒　SNSに表示される画像

4-2.投稿や固定ページをSNSに投稿する場合

投稿や固定ページの編集画面（記事の編集画面）の以下の情報がSNSに表示されます。

1. タイトル　⇒　SNSに表示されるタイトル
2. SEOディスクリプション　⇒　SNSに表示される説明文
3. アイキャッチ画像　⇒　SNSに表示される画像

５．ランディングページで使えるショートコード

と

の修正

以下のページの一番上に表示される画像は、以下のコードを使っています。

⇒ランディングページの例

[lpimgpc]
ここにPCから見たときの画像
[/lpimgpc]
[lpimgsp]
ここにスマホとタブレットからみたときの画像
[/lpimgsp]

６．animated.cssの新しいバージョン4に対応

SEAL ver.1.5には、animated.cssが組み込まれていますので、アニメーションはプラグインなしで使うことができます。

6-1.アニメーションの使い方

以下のようにHTMLブロックなどを使って記述することで、アニメーションを使うことができます。

↓　記述が以前のanimated.cssとは変わっているのでご注意ください。

<div class="animate__animated animate__bounce">ここに動かしたい要素</div>

↓　実際にこんな感じで動きます。（再読み込みするとわかりやすいかもです）

bounce以外にもいろんな種類が使えるので、詳しくはanimated.cssのサイトを見てみてください。

まとめ

ということで、今回はSEAL ver.1.5の2.2.0の更新情報をお届けしました。

※サイトのスピードが多少落ちるかもしれませんのでご了承いただいた上で変更してください。

SEAL ver.1.5のフォントを変更する方法を２種類お伝えします。

1. Googleフォントを使わない場合
2. Googleフォントを使う場合

この２通りでやり方を解説します。

パターン１．Googleフォントを使わない場合

手順１．使いたいfont-familyを選ぶ

以下のようなfont-familyのサイトを参照していただき、使いたいフォントを選びます。

⇒外部サイト：総称ファミリ名分類のフォント名一覧

例えば、以下のように「游ゴシック」というフォントスタイルを使いたい場合は、↓左側の‘游ゴシック’とか‘Yu Gothic’という部分を覚えておいてください。

手順２．WordPress側にCSSを追記する

WordPressのダッシュボードから、外観⇒カスタマイズ⇒追加CSS　という順で画面を進めてください。

↓そうすると、以下のような画面になります。

この広いスペースに以下のコードをペーストしてください。

body, .gf{font-family:ココに入れたいフォントファミリー名;}

例えば、手順１で例を上げた游ゴシックにしたいなら、

body, .gf{font-family:'游ゴシック';}

このように入力します。

↓

あとは、「公開」ボタンを押せばサイト全体のフォントが変わります。

パターン２．Googleフォントを使う場合

GoogleフォントというWebフォントを使う場合は、少し手順が変わってきます。

手順１．Googleフォントのサイトから使いたいフォントを選ぶ

まずはGoogleフォント日本語のサイトへ行きましょう

⇒【公式】Googleフォント日本語のサイトへ

こちらから使いたいフォントを選びましょう。

例えば「Noto Sans JP」を選ぶとすると、その部分をクリックしてください。
↓↓

手順２．HTMLコードを、WordPressサイトのheadタグの中に設置する

次に、GoogleフォントのサイトにHTMLとCSSというのが出てくるので、HTMLの部分を全てコピーしてください。

次に、コピーしたHTMLコードをWordPressの「外観」⇒「カスタマイズ」⇒「便利設定」のheadタグという中にペーストしてください。
↓↓

これで、まずは「公開」を押しておいてください。
（※まだこれだけではフォントは変わりません）

手順３．GoogleフォントのCSSを追記する

最後に、GoogleフォントのサイトのCSSの部分のfont-familyの中身の部分だけをコピーしてください。例えば、以下のようにGoogleフォントのサイト上で記載されていたら、、、

.wf-notosansjapanese { font-family: "Noto Sans JP"; }

この中の

 "Noto Sans JP"

だけをコピーしてください。
　
↓　参考

コピーしたコードは、WordPressサイトの外観⇒カスタマイズ⇒追加CSSに以下のようにして追記してください。

 body, .gf{font-family:"Noto Sans JP";} 

↓↓こんな感じです。

あとは「公開」ボタンを押せば完了です。

フォントがGoogleフォントに変更されます。

ver.2.0.0（★最新）
⇒パンくずリストのdata-vocabularyでのマークアップを廃止、schema.orgに対応
⇒構造化データもschema.orgに対応

ケース１）うまく動かない

推奨プラグイン以外を使っていることが原因の可能性があります。この場合は、以下の手順で問題のあるプラグインを特定して停止してみてください。

大抵はこれで解決できます。問題のあるプラグインが特定できたら、基本的にはSEAL ver.1.5では使えませんのでご了承ください。

ケース２）表示にしたものが表示されない、非表示にしたものが表示されてしまう

このケースは、『外観』⇒『カスタマイズ』⇒『デザイン設定』の表示・非表示切り替えをし直すことで直るケースがほとんどです。

それ以外のケース

お手数ですが、以下のお問合せフォームより、不具合のお問い合わせを送信ください。

⇒不具合報告フォームへ

他のテーマから変更をする手順

1. SEAL ver.1.5を購入する
2. 推奨プラグイン以外を一旦停止する
   ⇒SEAL ver.1.5で動作確認が取れているプラグインはコチラ
3. SEAL ver.1.5をインストールする（親テーマ⇒子テーマの順。子テーマを有効化。）
4. 「ユーザー」⇒「あなたのプロフィール」に必要事項を入力
5. 「外観」⇒「カスタマイズ」でサイトカラー設定をする
6. 「外観」⇒「カスタマイズ」で各パーツの表示・非表示設定をする
7. 「外観」⇒「カスタマイズ」でヘッダー画像を設定
8. 「外観」⇒「ウィジェット」でウィジェットの場所を調整
9. 「外観」⇒「メニュー」でSEAL ver.1.5用にメニューを設定
10. 推奨プラグイン以外を使う場合、1つ1つ有効化して不具合が出ないかチェック。
    ※自己責任でお願いします。推奨プラグインによる不具合は、サポートの範囲外となりますのでお気を付けください。

（2018年12月17日現在）

以下のプラグイン以外のものをお使いになる場合は、自己責任でお願いします。

ただ、今回のページの施策をすれば、モバイルで80～90点台、PCで90～100点と更に高パフォーマンスのサイトになります。

ぜひ試してみてください。

SEAL ver.1.5の高速化施策

対策１．パフォーマンスを下げるプラグインを停止、削除する

SEAL ver.1.5のおすすめプラグインとして挙げています「JetPack by WordPress.com」ですが、高パフォーマンスという面ではマイナスになってしまいます。

また、吹き出し用プラグインとして有名な「Speech Bubble」、コードをキレイに表示するためのプラグイン「Crayon Syntax Highlighter」もかなりページのパフォーマンスを下げてしまいます。

このように、プラグイン１つでページのパフォーマンスを下げてしまうものもありますので、必ずしも必要ではない場合は停止をして削除しましょう。

対策２．高速化におすすめのプラグイン３つをインストールして設定しよう

SEAL ver.1.5では、以下の３つのプラグインを設定することで、さらにパフォーマンスが良くなります。

1. a3 Lazy Load
2. Autoptimize
3. WP Fastest Cache

対策３．エックスサーバーの高速化機能を使おう

エックスサーバーには、サイトの高速化対策機能があります。こちらも活用しましょう！

サーバーパネルにある「高速化」メニューの内、

1. Xアクセラレータ
2. mod_pagespeed設定
3. ブラウザキャッシュ設定

この３つは是非有効化しておきましょう。

対策４．サイトに使う画像は必ず圧縮しておきましょう

ページのパフォーマンスを一番下げてしまう原因は「画像」です。

画像が大きいと、それだけで一気に速度が落ちます。

画像の最適化手順は以下の2ステップ。

• STEP1.画像を必要最低の大きさにする
• STEP2.画像圧縮をする

SEAL ver.1.5では、

• アイキャッチ画像・ページ内に使う画像＝横幅750px以下
• ヘッダー画像・フルワイド画像＝横幅2,000px以下

であれば十分です。まずは、使用する画像はこの大きさ以下にしましょう。

次に、おすすめの画像圧縮サイト『TinyPNG』に、使用する画像をアップロードして圧縮しましょう。
圧縮をすると、見た目は殆ど変わらないのに、画像ファイルだけ小さくなります。

⇒Tiny PNGへ

以上、４つの対策をしてみてください。きっと今まで以上にページのパフォーマンスは改善されるはずです！

詳しくは以下の動画でも解説していますので参考にしてみてください。

今回は、その方法を解説します。

フルワイドのランディングページを作ってみよう

フルワイドのLPを作るには、『固定ページ』⇒『新規追加』で、作ります。

その後「ページ属性」を「ランディングページ」にしてください。

あとは、フルワイド系のショートコードを組み合わせていけば作れます。

フルワイドカラーブロック

[lpwide2 color="#ffffff"]
カラーコードの部分は好きなコードを入れることができます。
[/lpwide2]

フルワイド画像

背景画像が動かないパターン

[tob backimg="ここに画像のURLを入力" height="数字"]
ここに画像の上にのせたい文字やボタンなどを。
[/tob]

背景画像が動くパターン

[tob2 backimg="ここに画像のURLを入力" height="数字"]
ここに画像の上にのせたい文字やボタンなどを。
[/tob2]

詳しくは、以下の動画でも詳しく解説しています。

次のページ
『STEP6-1.サイトの高速化・パフォーマンス改善をしよう！』

⇒ポートフォリオページのサンプルを見る

今回は、SEAL ver.1.5でポートフォリオページを作る方法を解説します。

ポートフォリオページを作る方法

ポートフォリオは固定ページで作ります。

固定ページの新規作成で、右側のページ属性を『ポートフォリオ』にしましょう。

あとは、STEP5-1のショートコードの使い方のページでも解説しましたが、ポートフォリオ専用のショートコードを使ってあげればOKです。

タイトル部分

以下のショートコードを使ってみてください。

[tob3 backimg="画像のURL" height="画像の希望高さの数字"]
作品集のタイトル
[/tob3]

ポートフォリオA（フラットタイプ）

[pfwrap]
[pf4 title="作品のタイトル" url="画像をクリックしたときに飛ばしたいURL（画像ファイルのURLなど）"]
1枚目の画像を挿入（←必ずリンクは切る）
[/pf4]
[pf4 title="作品のタイトル" url="画像をクリックしたときに飛ばしたいURL（画像ファイルのURLなど）"]
2枚目の画像を挿入（←必ずリンクは切る）
[/pf4]
[pf4 title="作品のタイトル" url="画像をクリックしたときに飛ばしたいURL（画像ファイルのURLなど）"]
3枚目の画像を挿入（←必ずリンクは切る）
[/pf4]
[pf4 title="作品のタイトル" url="画像をクリックしたときに飛ばしたいURL（画像ファイルのURLなど）"]
4枚目の画像を挿入（←必ずリンクは切る）
[/pf4]
[/pfwrap]

ポートフォリオB（マテリアルタイプ）

[pfwrap]
[pf4b title="作品のタイトル" url="画像をクリックしたときに飛ばしたいURL（画像ファイルのURLなど）"]
1枚目の画像を挿入（←必ずリンクは切る）
[/pf4b]
[pf4b title="作品のタイトル" url="画像をクリックしたときに飛ばしたいURL（画像ファイルのURLなど）"]
2枚目の画像を挿入（←必ずリンクは切る）
[/pf4b]
[pf4b title="作品のタイトル" url="画像をクリックしたときに飛ばしたいURL（画像ファイルのURLなど）"]
3枚目の画像を挿入（←必ずリンクは切る）
[/pf4b]
[pf4b title="作品のタイトル" url="画像をクリックしたときに飛ばしたいURL（画像ファイルのURLなど）"]
4枚目の画像を挿入（←必ずリンクは切る）
[/pf4b]
[/pfwrap]

詳しくは以下の動画でも解説していますので参考にしてみてください。

今回の解説は以上です。

＞次のページ
「STEP5-6.フルワイドのランディングページを作ってみよう」へ進む

↓↓↓

今回は、SEAL ver.1.5専用のプロフィールパーツを設定する方法を解説します。

サイドバーにあなたのプロフィールを設定しよう！

まずは、準備として『ユーザー』⇒『あなたのプロフィール』で、入力できる部分は入力しておいてください。

ちなみに、プロフィールとして表示される名前は「ブログ上の表示名」という部分です。

ここは、「ニックネーム」を登録すると、変更することができます。

ここまで入力できたら「プロフィールを更新」ボタンを押しておきましょう。

次に『外観』⇒『ウィジェット』へ行きます。

ここで、左の方にある『[SEAL]サイドバー用プロフィール』というパーツを、右の『１．サイドバー』の中に入れます。勝手に保存されると思います。

これで作業は完了です！

↓↓詳しくは以下の動画でも解説しています。

＞次のページ
「STEP5-5.ポートフォリオページを作る方法」へ進む