- ブログの表示が遅い気がする
- 記事スライダーを削除したい
- ピックアップバナーを設置したい
- ピックアップバナーへの画像のつけ方が知りたい
という方へ向けた記事です。
ブログの表示速度をはかってみる
![](https://toushi-penguin.com/wp-content/uploads/2020/11/img_3890.png)
こんにちは投資するペンギンです
先日このブログの表示速度をPageSpeed Insights(ページスピードインサイト)を使ってはかってみました。
やっぱり表示速度が速いと読んでくれる人のストレスも減るし、Googleの検索順位も良さそうじゃない?
結果は0〜100のスコアで表示されます。
![](https://toushi-penguin.com/wp-content/uploads/2020/11/img_3895.png)
![](https://toushi-penguin.com/wp-content/uploads/2020/11/img_3895.png)
![](https://toushi-penguin.com/wp-content/uploads/2020/11/img_3895.png)
どれどれ
![](https://toushi-penguin.com/wp-content/uploads/2021/04/B8BAD955-BD94-4F2A-9AF9-5841D42DC7BA-1024x599.jpeg)
![](https://toushi-penguin.com/wp-content/uploads/2021/04/B8BAD955-BD94-4F2A-9AF9-5841D42DC7BA-1024x599.jpeg)
わっるー!なんかめっちゃ悪い!
でも心当たりはあります。
このブログのトップページで表示速度を下げていそうなのは…
![](https://toushi-penguin.com/wp-content/uploads/2021/04/B359B9E8-CCC1-4448-BC88-2361F6E787E9.jpeg)
![](https://toushi-penguin.com/wp-content/uploads/2021/04/B359B9E8-CCC1-4448-BC88-2361F6E787E9.jpeg)
きみだー!
記事スライダー!
自動でスライドしてランダムな記事を表示してくれるきみー!
ただなんとなく動くのカッコいいっていう理由だけで設置してたけど、やっぱ動く系は重い気がする!!
というわけでこのカッコいい記事スライダーを削除して、有名なブロガーさんたちがこぞって採用している
ピックアップバナーを設置することにしました。
ピックアップバナーとは↓
![](https://toushi-penguin.com/wp-content/uploads/2021/04/01B57AEB-1207-41DF-A08F-428F10D9591F.jpeg)
![](https://toushi-penguin.com/wp-content/uploads/2021/04/01B57AEB-1207-41DF-A08F-428F10D9591F.jpeg)
こんなやつです。
読んで欲しい記事や見てほしいリンクなどをアピールできるメニュー。
さぁ、これで表示速度は速くなっただろう!
![](https://toushi-penguin.com/wp-content/uploads/2020/11/img_3890.png)
![](https://toushi-penguin.com/wp-content/uploads/2020/11/img_3890.png)
![](https://toushi-penguin.com/wp-content/uploads/2020/11/img_3890.png)
どうだ!
![](https://toushi-penguin.com/wp-content/uploads/2021/04/B828029D-8164-4C9D-A4E3-63FF4A04E208-1024x600.jpeg)
![](https://toushi-penguin.com/wp-content/uploads/2021/04/B828029D-8164-4C9D-A4E3-63FF4A04E208-1024x600.jpeg)
う〜ん微増!
![](https://toushi-penguin.com/wp-content/uploads/2020/11/img_3891.png)
![](https://toushi-penguin.com/wp-content/uploads/2020/11/img_3891.png)
![](https://toushi-penguin.com/wp-content/uploads/2020/11/img_3891.png)
9ポイントあがりました
まぁちょっとだけ改善できたならいいか。
以下、SWELLで記事スライダーを削除してピックアップバナーを設置する方法を簡単に紹介いたします。
![](https://toushi-penguin.com/wp-content/uploads/2020/11/img_3890.png)
![](https://toushi-penguin.com/wp-content/uploads/2020/11/img_3890.png)
![](https://toushi-penguin.com/wp-content/uploads/2020/11/img_3890.png)
参考になれば幸いです
SWELL・記事スライダーの削除
まずは問題の記事スライダーを非表示にしちゃいます。
ワードプレスにログイン後、
外観
→カスタマイズ
→トップページ
→記事スライダー
![](https://toushi-penguin.com/wp-content/uploads/2021/04/61B8DF2A-F9DC-4AB8-A2A7-8BBF0CD8E7AA.jpeg)
![](https://toushi-penguin.com/wp-content/uploads/2021/04/61B8DF2A-F9DC-4AB8-A2A7-8BBF0CD8E7AA.jpeg)
記事スライダーを設置するかしないか選べるようになっているので設置しないにチェックを入れます。ひとまず記事スライダーは削除できました。
SWELL・ピックアップバナーの設置
![](https://toushi-penguin.com/wp-content/uploads/2020/11/img_3890.png)
![](https://toushi-penguin.com/wp-content/uploads/2020/11/img_3890.png)
![](https://toushi-penguin.com/wp-content/uploads/2020/11/img_3890.png)
ピックアップバナーは簡単にできるよ〜
メニューに使いたい画像を用意しておいたら5分くらいでできるよ
ピックアップバナーというメニューを作成する
外観
→メニュー
![](https://toushi-penguin.com/wp-content/uploads/2021/04/05CF5932-586C-496C-9CC8-24AA2D987C06-1024x1024.jpeg)
![](https://toushi-penguin.com/wp-content/uploads/2021/04/05CF5932-586C-496C-9CC8-24AA2D987C06-1024x1024.jpeg)
以下のようにメニューを作成していきます。
- 表示オプションのチェックを入れる
- 新しいメニューを[ピックアップバナー]という名前で作る
- バナーに加えたいページやカテゴリー等を選ぶ
![](https://toushi-penguin.com/wp-content/uploads/2021/04/3F9C365B-3570-4AA7-842C-0A9357F98BD2-900x1024.jpeg)
![](https://toushi-penguin.com/wp-content/uploads/2021/04/3F9C365B-3570-4AA7-842C-0A9357F98BD2-900x1024.jpeg)
メニュー設定
→メニューの位置
→ピックアップバナー
↑ここにチェックを入れます。
![](https://toushi-penguin.com/wp-content/uploads/2020/11/img_3890.png)
![](https://toushi-penguin.com/wp-content/uploads/2020/11/img_3890.png)
![](https://toushi-penguin.com/wp-content/uploads/2020/11/img_3890.png)
最後、メニューを保存を忘れずにね
ピックアップバナーへの画像のつけ方
次はピックアップバナーに画像をつけてみましょう。
事前に画像アプリ等で画像を作っておくと楽ちんです。
![](https://toushi-penguin.com/wp-content/uploads/2020/11/img_3890.png)
![](https://toushi-penguin.com/wp-content/uploads/2020/11/img_3890.png)
![](https://toushi-penguin.com/wp-content/uploads/2020/11/img_3890.png)
細めの画像にしたかったので画像サイズは幅300×縦100で作ったよ
画像作成はいつも ibis Paint X を使っています。
![](https://toushi-penguin.com/wp-content/uploads/2021/04/D53DD3BB-FE02-4ACD-B6AF-0675F04C3122-300x158.jpeg)
![](https://toushi-penguin.com/wp-content/uploads/2021/04/D53DD3BB-FE02-4ACD-B6AF-0675F04C3122-300x158.jpeg)
メディア
→新規追加
![](https://toushi-penguin.com/wp-content/uploads/2021/04/8582731C-0B3B-4E07-AB0F-0C7A3B30B177-1024x290.jpeg)
![](https://toushi-penguin.com/wp-content/uploads/2021/04/8582731C-0B3B-4E07-AB0F-0C7A3B30B177-1024x290.jpeg)
画像をアップロードします。
![](https://toushi-penguin.com/wp-content/uploads/2021/04/3C24B2F8-AF05-4EF0-8730-A307F7F70EA7.jpeg)
![](https://toushi-penguin.com/wp-content/uploads/2021/04/3C24B2F8-AF05-4EF0-8730-A307F7F70EA7.jpeg)
アップロードした画像を選んで詳細をひらきます。
下のほうにファイルのURLがあるのでコピーしておきましょう。
ここまで出来たらピックアップバナー作成の画面に戻ります。
外観→メニュー
![](https://toushi-penguin.com/wp-content/uploads/2021/04/9F9E04EA-2C1B-4B4F-8174-CAFC4D6B1C27-947x1024.jpeg)
![](https://toushi-penguin.com/wp-content/uploads/2021/04/9F9E04EA-2C1B-4B4F-8174-CAFC4D6B1C27-947x1024.jpeg)
画像をつけたいメニューを選んで、説明のところにさきほどコピーしたURLをはりつけ。
もし説明の欄が無いようでしたら表示オプションの説明という項目にチェックをいれてみてください。
メニュー項目すべてに画像URLを設定できたら完成です!
![](https://toushi-penguin.com/wp-content/uploads/2020/11/img_3890.png)
![](https://toushi-penguin.com/wp-content/uploads/2020/11/img_3890.png)
![](https://toushi-penguin.com/wp-content/uploads/2020/11/img_3890.png)
さっそくブログを確認してみよう
このブログのピックアップバナーを見てみる(トップページへ移行します)
SWELL・ピックアップバナーのカスタマイズ
SWELLではいろいろなカスタマイズが簡単にできるようになっています。
外観
→カスタマイズ
→トップページ
→ピックアップバナー
![](https://toushi-penguin.com/wp-content/uploads/2021/04/D2CC752B-5D45-4B06-95C6-7C1E0890F7D1-508x1024.jpeg)
![](https://toushi-penguin.com/wp-content/uploads/2021/04/D2CC752B-5D45-4B06-95C6-7C1E0890F7D1-508x1024.jpeg)
バナーレイアウト(パソコンとスマホそれぞれ設定できる)や、
ピックアップバナーの画像の中に文字を表示させるか(表示できる位置もいろいろあります)、
白枠をつけるか等がカスタマイズできます。
SWELLの公式サイトにはピックアップバナーのカスタマイズについて画像つきでわかりやすく解説されていますので是非見てみてください。
今回は文字入りのメニュー画像を作ったので、ここでの文字は非表示にしていますが
ほんとに写真だけのような画像でもカスタマイズでカッコよく文字を入れることができますよ。
ブログのメニューを自分好みにいろいろアレンジしてみましょう!
![](https://toushi-penguin.com/wp-content/uploads/2020/11/img_3890.png)
![](https://toushi-penguin.com/wp-content/uploads/2020/11/img_3890.png)
![](https://toushi-penguin.com/wp-content/uploads/2020/11/img_3890.png)
記事スライダーもかっこいいんだけど、しばらくはピックアップバナーでいってみよ〜
お読みいただきありがとうございました!