こんにちは、ペンギン（penpockeblog）です！

画像に動きをつけたいときに便利なプラグイン『Shortcodes Ultimate』

無料で使えて実装も簡単です

Shortcodes Ultimateではさまざまな機能がショートコードから呼び出すことができるプラグインです

リストなどの機能も使えますが、SWELLに入っている機能と被るものも多いので使用するパターンは主にアニメーション！

サイトに動きをつけるメリット

メリットについて

突然吹き出しなどが動いて表示されると何が出てきたか気になりますよね！

どうしても見てもらいたい部分に動きをつけると、見てもらえる確率がグッと上がります

注意するポイントはあまり記事内にたくさんアニメーションをつけないこと。

色んなものが動いてくると、見ている側も疲れてしまいます

適用させたい部分を明確にて適用させていきましょう！

Shortcodes Ultimateの使い方

Shortcodes Ultimateのプラグインをワードプレスに新規追加します

有効化するとすぐに使用することができます！

機能を使いたいときは、ショートコードで簡単に機能を呼び出すことができます

ショートコードで呼び出す

SWELLの場合、ショートコードを選択すると画像にある部分が新たに表示されます

かっこのマーク部分を選択する

かっこを選択すると以下の機能一覧が表示されます

アニメーションを実装したい場合はアニメーションを選択します

• アニメーションは全部で61種類！
• アニメーションが適用される時間も簡単に変更できる

ショートコードで画像を挟み込むようにすることでアニメーションが実装される

ショートコードの中には1.5などのアニメーションが適用される時間が入るので、ここを変えることで表示時間が簡単に変更することができます

試しにアニメーションを吹き出しに入れてみました

ペンギン

アニメーションが適用されてるかなー？

画像以外にもアニメーションがつけられる

ブロック全体にアニメーションを適用させることもできます

分かりやすいようにキャプションにアニメーションを適用せてみます

このように、様々な部分に対してアニメーションをつけていくことが可能です

カテゴリー画像にアニメーションをつける

SWELLユーザーの多くの方がサイト型のトップページを使っています

中でもカテゴリーは画像を使うパターンが多いです（当ブログでも画像を使っています！）

カテゴリー画像は4枚など複数の画像を使うパターンが多いので、複数画像にアニメーションをつける方法を解説します

カラムブロックの上下にショートコードを適用させると、画像4枚が一つの動きをすることになってしまいます

カラムの上下にコードを入れた場合

4枚の画像がブロック全体で動いてしまうのでかっこ悪いですよね。

トップページはこうやって使ってます

そこで、画像のように画像ごとにショートコードを入れてあげることで一つ一つがバラバラに動いてくれるようになります

個別に動かしてみます

これで違和感なくアニメーションをつけることができました！

ページ速度は遅くならないのか

トップページにアニメーションをつけても、スコアが極端に悪くなることはありません

実際当ブログサイトのサイトスピードスコアはPCで98が出ています

カテゴリー画像部分だけであればスコアにはさほど影響しないので安心して下さいね！

まとめ

SWELLでアニメーションを簡単に適用させる方法を解説しました！

この記事が参考になった際は是非記事を紹介して下さると嬉しいです♪

CSSの知識がなくても簡単に使うことができるので、やってみたいなーと思う方は試してみて下さいね！

＼使用有料テーマはSWELL／

シンプルなのに便利な機能が沢山！

オシャレなブログサイトを作れる

複数のサイトで使用できる

WordPressテーマ「SWELL」

ブログ村参加中です☆

応援してくれたら嬉しいです♪

にほんブログ村

こんにちは、ペンギン（penpockeblog）です！

当ブログで使用中のテーマ『SWELL』でのトップページの作成について解説していきたいと思います！

SWELLではおしゃれなトップページを比較的簡単に作成することができます！

唯一難しい部分としては、アイキャッチ画像やサイト全体の色味だったり、サイトの表示スピードを考えながら作らないと行けないこと。

トップページを作るにあたって意識したことも合わせて解説していきます！

ペンギン

さぁ！やっていこー！！

この記事に書いてあること

トップページを作成する手順

ヘッダー画像を作成する

ヘッダー画像はCanvaで作成しています！

画像サイズは1500px×300pxで作っています（理由は特にありません。笑）

フォントはSource Han serif JP Semiを使っています

ペンギン

サイトロゴはシンプルにURLで作成しました！
色々作ってみてシンプルな方がバランスがよかった！

＼まずはCanvaを使ってみよう！／

7500万点の素材が無料

• 画像は全てCanvaで作成しています

Canvaを無料で使う場合、インライン画像などは背景と同じカラーにしないといけません

有料版では背景透過などの機能が使えるので、余計な手間が省けて作業効率が上がります！

画像の作成方法はアイキャッチ画像の作成と変わらないので、アイキャッチ画像作成記事を参考にして下さい

ヘッダーの設定をする

各設定は、外観＞カスタマイズ＞ヘッダーで設定していきます

ヘッダー画像の設定

レイアウト・デザイン設定

カテゴリーの下に英語表記を入れるには、投稿＞カテゴリーでスラッグを設定することで完了です！

お知らせバーは、外観＞カスタマイズ＞サイト全体設定＞お知らせバーから設定します

メインビジュアル設定

メインビジュアル画像もCanvaで作成しています

文字には動きをつけるため、アニメーションを使って動画を設定しています

画像サイズは1920px×1080px

ペンギン

Canvaでは文字にアニメーションをつけるのも簡単♪

メインビジュアル設定は、外観＞カスタマイズ＞トップページ＞メインビジュアル

動画の設定

ペンギン

PCとSPで別々の動画を設定することができますが、テキストをセンターに配置することでPCのみの設定で完結しています！

トップページを作成していこう

メインビジュアルの下には記事スライダーを設置しています

トップページは全てフルワイドブロックを使ってコンテンツを作っていきます

ペンギン

記事スタイダーを設置するとサイト表示スピード低下の原因に。
アイキャッチ画像から記事流入を狙うのと、メインビジュアル同様に動きをつけたかったので設置しています！

トップページのカスタマイズはフロントページ用に作った固定ページで作成していきます

人気記事を表示させることも可能ですが、人気記事にアクセスが集中してしまうのを防止するために新着記事のみ表示させています！

タブブロック内に投稿リストを追加して表示させています

上下にリストを配置する場合は同じ投稿が表示されてしまうので、CSSで被ってしまうリストを除外します

コードは記載しませんが、ググってみると見つかるはずです！

カテゴリー前にブログ関連リストを表示

見出しにはインライン画像で画像を入れています(見出しはセクションを選択)

画像サイズは1000px×400px

投稿リストはカラム内にリストを表示させています

カラムブロックで50:50でブロックを入れたら、カード型とテキスト型のリストを追加して下にSWELLボタンを設置します

カテゴリーの設定

カラムで4つのブロックを作ったら、バナーリンクで画像を追加して各カテゴリーへのリンクを入れていきます

バナーリンク用に画像を4枚作成しています

画像サイズは各640px×427px

アニメーションはワードプレスのプラグインShortcodes Ultimateで動きをつけています

あわせて読みたい

【SWELL】Shortcodes Ultimateで画像にアニメーションをつける！ こんにちは、ペンギン（penpockeblog）です！ 画像に動きをつけたいときに便利なプラグイン『Shortcodes Ultimate』 https://ja.wordpress.org/plugins/shortcodes-ulti…

画像の横にはテキスト型の投稿リストとSWELLボタンを設置しています

タグ検索部分

検索部分にはGoogleアドセンスの検索広告を設置しています

ほぼ使われることのない部分ですが、見た目が好きなので。笑

広告下にはタグクラウドを設置して、CSSで装飾をしています

ペンギン

CSSについての解説は省略します
タグも装飾するとオシャレになりますよ♪

タグ下の広告部分の解説も省略します！

フッターの作成

フッター部分は外観＞ウィジェットから設定しています

フッターは1,2,3と別れていて、左、中央、右と設定することができます

表示させたいウィジェット項目を追加していくことで簡単に表示させることができます

現在中央にプロフィールを入れていますが、今後は違う場所に移設するかもしれません

トップページの表示設定

固定ページが完成したら、固定ページをトップページに表示させる設定をします

外観＞カスタマイズ＞ワードプレス設定＞ホームページ設定＞固定ページ

ホームページにコンテンツを作成した固定ページを設定し、投稿ページには空の固定ページを設定すれば完成です

ペンギン

順番を間違っても入れ替えれば大丈夫なので安心して下さいね！

サイトの表示スピードについて

現在の表示スコアはこんな感じです

当ブログサイトはスコアも気にしながら作っているので、結構シンプルです

サイト型に変更する場合、あまりコンテンツを入れ込みすぎるとスコア低下につながります

また、モバイルで見てみると今どこにいるか分からない迷子状態になってしまうので、バランスを見ながら作成していくといいと思います

サイト型はスコアとデザイン、使いやすさを考えないといけないので難しい部分もありますが、とても楽しいところでもあります

デザインは固定ページを変更していけば自由に変更できるので、理想のトップページを作ってみて下さいね♪

＼使用有料テーマはSWELL／

シンプルなのに便利な機能が沢山！

オシャレなブログサイトを作れる

複数のサイトで使用できる

WordPressテーマ「SWELL」

ブログ村参加中です☆

応援してくれたら嬉しいです♪

にほんブログ村