こんにちは、ペンギン（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」

ブログ村参加中です☆

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

にほんブログ村

ペンギン

こんにちはペンギンです！
ツイッター@penpockeblog

SWELLでサイト型にした場合、PCとモバイルで表示が変わるため場合によっては見え方を変更しなければいけないです

ペンポケブログも大きくトップページを変更しました

今回すごく使える！と思ったのがアコーディオンです

アコーディオンの使い方

SWELLブロックのアコーディオンを選択します

投稿リストをアコーディオンに入れる

次にテキスト入力部分を選択して投稿リストを選択します

テキスト入力部分は隠れる部分になります

右側の矢印で表示させる事ができます

好みで中身の投稿リストを作る

ペンポケのトップページは投稿数９＞カード型＞PC３列＞モバイル２列で作成しています

お好みで投稿リストを編集していきましょう！

投稿リストのリンク設定

リンクボタンのテキストとURLを設定するとすぐボタンが作成できます

次に何を使いたいかがしっかり想定されて作られてるのがSWELLのいいところ

実際に作ったアコーディオン

これで完成です！

必要以上にトップページにあれこれ表示させたくない場合に使うといいと思います

Word Pressテーマ『SWELL』

当ブログで使用中のテーマ

オシャレなサイトを作ってみませんか？

SWELL公式サイト

SWELL最高ですよ！

ペンギン

最後まで読んでいただきありがとうございます！

ブログ村参加中です☆

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

にほんブログ村

ペンギン

こんにちはペンギンです！
ツイッター@penpockeblog

今回は有料テーマ【SWELL】についてまとめていきたいと思います

有料テーマは沢山ありますが、

『どのテーマを選んだらいいんだろう？』

と悩んでいる方の参考になれば嬉しいです！

SWELLを選んだ理由

ツイッターのアカウントを開設してから色んなブロガーさんのサイトを拝見させてもらいました

その中で、SWELLで作られたサイトがすごく素敵に感じました

シンプルなのにカッコいい！

ペンギン

自分もこんな素敵なサイトがつくれたらなぁ。。。

そう思ってからSWELLについて調べていくうちにどんどん欲しくなってしまいました。笑

私の中でSWELLを購入したポイントは大きく３つです

ブロックエディター対応

ブロックエディター対応によって難しい知識がなくても直感的に操作できます

Cocoonを使っている方でGutenbergのブロックエディターを使用している方であれば、同じような操作で記事が書けます

ペンギン

装飾機能も充実してるよ！

完成したリスト

リストなども右側のスタイル選択で簡単に装飾できます

とにかく直感的で使いやすいです！

ポイント

新しいサイトにも使いまわせる

有料テーマを購入する際、テーマを使いまわせるか確認した方がいいです

『SWELL』の場合、値段が￥１７,６００（税込）と少し高いように感じますが、一度購入すれば２つ目のサイトにも使う事ができます

せっかく購入するのであれば複数のサイトに使いまわせるのはメリットが大きいです

金額も買い切りの値段なので、それ以上に料金がかかる事はありません

他に使いまわせる人気有料テーマ

などがあります

他のテーマで一番迷ったテーマは『THE THOR』でした

THE THORを使っているブロガーさんも多く、本当におしゃれなサイトが作れます

私の場合、機能が多すぎると使いこなす自信がないのでSWELLを選びましたが、気になる方は公式サイトを一度見てみて下さい♪

購入の際は以上の事も考慮して選んでみて下さい！

機能、デザインがシンプル

公式サイトにも書いてあるようにシンプルなのに高機能です

シンプルなのに記事スライダーが使えたり、動画が使えたりやりたい事は出来ちゃいます

操作性も直感的なので複雑な操作は少ないです

デザインも今時っぽくて気に入ってます

機能があまり多すぎても使いこなせる気がしないので私にはSWELLの機能で十分満足しています

更にSWELLではデモサイトの着せ替えも出来ます

オシャレなデモサイトに簡単に着せ替えが出来るのは嬉しいですね！

公式サイトでは分からない事は大抵書いていますので、困った事があったら公式サイトを見れば解決します！

SWELLはアップデートによって更に進化していく！

SWELLは頻繁にアップデートが入り、細かい仕様変更などがあります

より使いやすいテーマにアップデートされていく事は、利用者にとってはとても嬉しい事です

今後もSWELLの更なる進化に期待しています！

買ってよかった！

SWELLを購入してみてデメリットはあったかというと使用においては全くありません！笑

ひとつあげるとしたら金額が少し高めというところでしょうか

個人的には複数のサイトに使用できる分少し高めの設定なのかな？とも思いました

使ってみると金額分の価値は十分にありました

テーマはサイトにとって相棒のようなものなので是非お気に入りのテーマを見つけてみて下さい！

ペンギン

最後まで読んでいただきありがとうございます！

あわせて読みたい

SWELLでトップページをつくる！固定ページでカスタマイズ！ こんにちは、ペンギン（penpockeblog）です！ 当ブログで使用中のテーマ『SWELL』でのトップページの作成について解説していきたいと思います！ SWELLではおしゃれなト…

ブログ村参加中です☆

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

にほんブログ村

どうもペンギンです！

今日はブログを再開して１ヶ月が過ぎたので、収益はどうだったのか書いていきたいと思います

１ヶ月で得た収益は！

なんとうまい棒一本分！

え？笑

全然稼げてないです！笑

それだとこれで終わってしまうので１ヶ月何をしたか書いていきますね！

１ヶ月間した事

資格の勉強があったので記事数には満足していません

ツイッターは今まで発信する立場で運営した事がなかったのでまだまだ初心者ですね

１ヶ月の中で一番やってよかった事は有料テーマのSWELLに移行した事です

有料テーマSWELLに移行してよかった事

無料テーマから有料テーマへの移行はブログを始めてからずっと考えていましたが、早い段階で移行してよかったと思います

出来る事が増えると記事を書く楽しみも増えます

有料テーマへの移行で気になるのは金額です

私の場合は有料テーマを物として考えているので、今所有していて使ってないものを売って資金を作って購入しました

結果物々交換みたいな感じ！

なのでブログで稼げなくて辞めたとしても大きなダメージはないです

これから有料テーマに移行する事を考えている方で資金がない方は、一度家の中のものを見ていらない物を現金化してみると

意外と資金が作れるかもしれません

ブログで稼げている人はほんのひと握りなので、貯金を切り崩したり大量に資金を投入すると稼げなかった時のダメージが大

きくなります

ダメ元でやってみるくらいの感じが精神的にもいいです

記事下にSWELLのバナーを貼っていますのでよかったら見てみて下さい！

２ヶ月目も頑張って記事書いていきますね！

それでは！

ブログ村参加中です☆

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

にほんブログ村