Cocoonカスタム – ８ｍｙが投資で自由を目指すブログ https://8my-blog.com 木こりの８ｍｙ(ヤミー)が『資産』と『生活の質』への投資で自由で豊かな人生を目指すブログ Sun, 12 Sep 2021 01:12:12 +0000 ja hourly 1 https://wordpress.org/?v=6.9.4 https://8my-blog.com/wp-content/uploads/cropped-8my-normal-32x32.png Cocoonカスタム – ８ｍｙが投資で自由を目指すブログ https://8my-blog.com 32 32 【Cocoon高速化】サイトのページ表示速度が遅い場合の改善策４つ https://8my-blog.com/%e3%80%90cocoon%e3%80%91%e3%82%b5%e3%82%a4%e3%83%88%e3%81%ae%e3%83%9a%e3%83%bc%e3%82%b8%e8%a1%a8%e7%a4%ba%e9%80%9f%e5%ba%a6%e3%81%8c%e9%81%85%e3%81%84%e5%a0%b4%e5%90%88%e3%81%ae%e6%94%b9%e5%96%84/ https://8my-blog.com/%e3%80%90cocoon%e3%80%91%e3%82%b5%e3%82%a4%e3%83%88%e3%81%ae%e3%83%9a%e3%83%bc%e3%82%b8%e8%a1%a8%e7%a4%ba%e9%80%9f%e5%ba%a6%e3%81%8c%e9%81%85%e3%81%84%e5%a0%b4%e5%90%88%e3%81%ae%e6%94%b9%e5%96%84/#respond Tue, 26 May 2020 20:11:47 +0000 https://8my-blog.com/?p=5060

Cocoonでブログ書いてるんだけどページ表示速度が遅い

 

読みづらいし、改善したいな…

８ｍｙ（@8my__）です


今回の記事では、改善方法を4つ解説します

 

実際にやってみて効果があったかどうかも紹介しますね

 

※ サイトの表示速度はGoogleのPageSpeed Insightsで測定できます

※ 効果はあくまで自分のブログの場合のものです

※ 設定する前には必ずバックアップを取りましょう！

高速化設定（効果：小）

実行前と後の速度

モバイル速度：３１→４２
パソコン速度：８９→９３
手順
『Cocoon設定→高速化』で選択できます

『サイトの高速化』という画面になるので、以下５つのチェックボックスにチェックを入れて変更を保存します

１．ブラウザキャッシュの有効化

２．HTMLを縮小化する

３．CSSを縮小化する

４．JavaScriptを縮小化する

５．Lazy Loadを有効にする
これで終了です
高速化は管理画面から簡単に行えるので便利ですね

キャッシュ改善（効果：極小）

事前にサーバー上でページを生成し、キャッシュとして保存しておくことで、表示速度を改善するものです

実行前と後の速度

モバイル速度：４２→４５
パソコン速度：９３→９４
手順
『WP Fastest Cache』というプラグインを使いました

インストールして有効化すると、ダッシュボードのサイドバーに『WP Fastest Cache』が追加されます

選択して設定していきます

まず、言語が英語になっているので、設定の一番下にある『言語』を日本語に変更

選択できるチェックボックスすべてにチェックを入れます
※ 圧縮や結合の項目は他のプラグインで管理している場合は不要

Preload（プレロード）はよく使う項目（ホームページ、投稿、カテゴリー、固定ページ、タグ）にチェック

Preload（プレロード）

新しい投稿、Update postにチェックを入れる際に出る以下のウインドウでは『Clear All Cache』を選択

これで、新しい記事を投稿したり、記事を更新した際に自動でキャッシュが削除されます

新しい投稿、Update post

これで終了です

画像の最適化（効果：小）

実行前と後の速度

モバイル速度：４５→５３
パソコン速度：９４→９６
手順

『EWWW Image Optimizer』というプラグインを使いました

インストールして有効化した後に、管理画面のサイドバーから『プラグイン→インストール済みプラグイン→（EWWW Image Optimizerの）設定』とすすみます

設定画面が開くので『一括最適化』を選択

一括最適化

『最適化されていない画像をスキャンする』をクリックします

画像をスキャン

『○○点の画像を最適化』をクリックして最適化を実行します

最適化を実行

すべての画像の最適化が済むまでに数時間と表示される場合もありますが、実際にはそんなにかかりません

自分の場合は、残り時間が１時間半と表示されましたが、３０分ほどで最適化が終わりました

これで終了です

アドセンス自動広告OFF（効果：特大）

実行前と後の速度

モバイル速度：５３→８０
パソコン速度：９６→９９

手順

まずはGoogleアドセンスにアクセス

『広告』→『サマリー』と進むと以下の画面が表示されるので、右下にある鉛筆マークをクリック

広告掲載の自動化

自動広告がオンになっているのでOFFにします

その下の『既存の広告ユニットを最適化しますか？』はＯＮにしておきましょう

自動広告OFF

サイトに適用をして、1時間～1日ほど待てばアドセンスの自動広告が消えます

これで終了です

自動広告をOFFにして、広告を入れる方法

サイトの速度を上げたい！でも、広告は入れたい！

そんな方はGoogleアドセンスで自動広告をOFFにした後に、Cocoonの管理画面から以下の設定をしましょう

手順

管理画面の『Cocoon設定』→『広告』をクリック

Cocoon設定→広告をクリック

下にスクロールすると『アドセンス表示方式』があるので、『マニュアル広告設定』を選択します

そして、その下の『広告の表示位置』で広告を入れたい箇所にチェックを入れればOK

広告を手動で

これで自動広告がOFFでも、広告が指定の位置に入ります

さいごに

ページの表示速度が遅いサイトは見る気が失せますよね

ストレスなく記事を読んでもらうためにも、自分のサイトの表示速度をチェックして必要があれば改善していきましょう！

]]> https://8my-blog.com/%e3%80%90cocoon%e3%80%91%e3%82%b5%e3%82%a4%e3%83%88%e3%81%ae%e3%83%9a%e3%83%bc%e3%82%b8%e8%a1%a8%e7%a4%ba%e9%80%9f%e5%ba%a6%e3%81%8c%e9%81%85%e3%81%84%e5%a0%b4%e5%90%88%e3%81%ae%e6%94%b9%e5%96%84/feed/ 0 身バレを防ぐ！投稿する写真から位置情報（exif情報）を消す方法。【WordPressは注意】 https://8my-blog.com/%e8%ba%ab%e3%83%90%e3%83%ac%e3%82%92%e9%98%b2%e3%81%90%ef%bc%81%e6%8a%95%e7%a8%bf%e3%81%99%e3%82%8b%e5%86%99%e7%9c%9f%e3%81%8b%e3%82%89%e4%bd%8d%e7%bd%ae%e6%83%85%e5%a0%b1%ef%bc%88exif%e6%83%85/ https://8my-blog.com/%e8%ba%ab%e3%83%90%e3%83%ac%e3%82%92%e9%98%b2%e3%81%90%ef%bc%81%e6%8a%95%e7%a8%bf%e3%81%99%e3%82%8b%e5%86%99%e7%9c%9f%e3%81%8b%e3%82%89%e4%bd%8d%e7%bd%ae%e6%83%85%e5%a0%b1%ef%bc%88exif%e6%83%85/#respond Sun, 12 Apr 2020 02:21:25 +0000 https://8my-blog.com/?p=4878 スマホで撮った写真をそのままSNSやブログにアップしていませんか？

実はそれ、身バレや自宅が特定されてしまう可能性があるんです

いやいや、人や場所が特定されるような写真は投稿しないようにしてるよ。

それだけではあまいです。

なぜなら、GPS機能をもつスマホやデジカメで撮影した写真には、位置情報（exif情報）が埋め込まれているから

位置情報が埋め込まれたままだと、簡単に場所を特定されてしまうんです

今回の記事では、安心して情報発信できるように、位置情報の確認方法と削除方法を解説します

位置情報って何？確認する方法は？

位置情報は誰でも簡単に確認することができます

写真をパソコン上に保存し、『プロパティ』を見てみましょう

次に『詳細』をクリックします

写真の情報がずら～っと出てきます

その中にGPSという項目があり、写真を撮影した場所の緯度、経度、高度が表示されています

緯度と経度が分かれば場所は簡単に特定できてしまいます…

そもそも位置情報は、撮影場所を忘れてしまった時のために記録されているんですが、これが第三者に悪用されてしまうと…怖いですね

位置情報を自動で削除してくれるSNS・ブログ

写真をSNSやブログにアップしまくっている人は不安になったかもしれません

でも、大丈夫

以下のSNS、ブログでは位置情報を自動で削除してくれるので安心してください

・LINE
・Twitter
・Instagram
・Facebook
・メルカリ
・アメーバブログ
・はてなブログ

※ 多くのブロガーが利用しているWordPressではプラグインをインストールしないと、自動削除ないので注意が必要です（詳しくは後述）

位置情報を削除する方法

  • 自動削除してくれないサービスを利用している
  • 自動削除だけではなんとなく不安

こういう人は、以下のような方法で位置情報を消すことができるので参考にしてみてください。

・スマホで設定を変える

・アプリを利用する

・プラグインを利用する（WordPress）

スマホで設定を変える

位置情報なんて必要ない！という人は、あらかじめスマホで位置情報の設定を変更することで、写真に位置情報が入らないようにできます

・iPhoneの場合
「設定」→「プライバシー」→「位置情報サービス」→「カメラ」→「許可しない」

・Androidの場合
カメラアプリを開く→「メニュー」→「設定」→GPSのタグをオフ

アプリを利用する

位置情報を削除してくれるアプリはいろいろありますが、自分が利用しているのはこれ

写真情報確認：Exifリーダー

写真情報確認：Exifリーダー

tsttmk無料posted withアプリーチ

写真情報確認というアプリです

写真ごとに位置情報が含まれているかを表示してくれ、写真の位置情報の削除（復旧）をすることもできます

無料で利用できるので大変助かっています

プラグインを利用する（WordPress）

WordPressでは位置情報を自動で削除するためにはプラグインをインストールする必要があります

自分が利用しているのはEWWW Image Optimizerというプラグイン

インストールして、EWWW Image Optimizerの『設定』からベーシックタブ内にある『メタデータを削除』にチェックを入れて有効化するだけで、写真ファイルがアップされる際に自動で位置情報を削除してくれるので非常に便利です

また、ページ上部にある『一括最適化』から、『最適化されていない画像をスキャンする』を選択することで、過去にアップロードした画像の情報も削除することができます

さいごに

写真の位置情報が悪用されてしまうと、身バレや自宅が特定されたりする恐れがあります

自分は心配性なので、スマホの設定で位置情報をOFFにして、『位置情報確認』アプリでファイルの情報を削除して、さらにWordPressでは『EWWW Image Optimizer』をインストールして情報を削除しています

さすがにここまでする必要はないと思いますが、全く対策をしないのは危険です

安全に画像をアップすることを意識して、楽しく情報発信できるといいですね

]]> https://8my-blog.com/%e8%ba%ab%e3%83%90%e3%83%ac%e3%82%92%e9%98%b2%e3%81%90%ef%bc%81%e6%8a%95%e7%a8%bf%e3%81%99%e3%82%8b%e5%86%99%e7%9c%9f%e3%81%8b%e3%82%89%e4%bd%8d%e7%bd%ae%e6%83%85%e5%a0%b1%ef%bc%88exif%e6%83%85/feed/ 0 便利すぎ！マーカーやボックスを使う方法【Cocoon】 https://8my-blog.com/%e4%be%bf%e5%88%a9%e3%81%99%e3%81%8e%ef%bc%81%e3%83%9e%e3%83%bc%e3%82%ab%e3%83%bc%e3%82%84%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%82%92%e4%bd%bf%e3%81%86%e6%96%b9%e6%b3%95%e3%80%90cocoon%e3%80%91/ https://8my-blog.com/%e4%be%bf%e5%88%a9%e3%81%99%e3%81%8e%ef%bc%81%e3%83%9e%e3%83%bc%e3%82%ab%e3%83%bc%e3%82%84%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%82%92%e4%bd%bf%e3%81%86%e6%96%b9%e6%b3%95%e3%80%90cocoon%e3%80%91/#respond Sun, 27 Oct 2019 21:00:46 +0000 https://8my-blog.com/?p=3122

こんにちは！

８ｍｙ（@8my__）です

WordPressの人気テーマCocoonでアンダーラインマーカーやボックスが使えるのを知っていましたか？

僕は最近知りました…

「こんな便利な機能があるなんて、なんで今まで気づかなかったんだ！」

と後悔するほど使い勝手が良いです

それでは、さっそく使い方を見ていきましょう！

この記事はプラグイン『TinyMCE Advanced』を有効化している方向けに書いています

有効化していればビジュアルエディター『Classic Paragraph』が利用できます

アンダーラインマーカー、ボックスとは？

アンダーラインマーカーを使うとこのように線を引くことができます

色は赤、青、黄色の３色です

 

ボックスは以下のようなものです

具体例その１：ボックス（アイコン）
具体例その２：ボックス（案内）
具体例その３：ボックス（白抜き）
具体例その４：ボックス（タブ）
具体例その５：ボックス（付箋風）

ボックスの種類はアイコン、案内、白抜き、タブ、付箋風の5種類

色は灰色、黄色、赤色、青色、緑色の5色です

タブ、アイコンの種類には、チェック、補足情報、メモなどなど種類がたくさんあります（多いので割愛）

これらの機能を使えば記事が非常に見やすくなりますね

 

使い方

それでは、使い方を見ていきます

手順１
マーカーを引きたい箇所、ボックスで囲いたい箇所をドラッグして選択

手順２
エディターのスタイルを選択

手順３
使用する装飾を選択

以上です！超簡単ですよね

 

スタイルの項目がエディターに無い場合

スタイルの項目が無い場合は追加する必要があります

『スタイル』を追加する手順は以下のとおりです

手順１
管理画面の設定からTinyMCE Advancedを選択

手順２
エディター設定の画面になるので、Block Editor（Gutenberg）を選択

手順３
スクロールして下に行き、以下のような画面で『スタイル』をドラッグ＆ドロップしてエディターに追加する

手順４
『変更を保存』して完了です

 

その他の機能も！『スタイル』は使い勝手が良い

『スタイル』の項目からは、『バッジ』や『囲みブログカードラベル』などもあります

バッジは、先ほど手順で使っていたものです

色も複数種類あります

 

囲みブログカードラベルは、以下のように他の記事へのリンクを装飾することができます↓

カテゴリーの階層をつけて、順番を並び替えてみた【Cocoon】
こんにちは！僕は現在、WordPressテーマ Cocoonを使っていますつい先日、サイドバーに表示される『カテゴリー』を少しカスタマイズしてみました なぜカスタマイズしたかというと...非常に見ずらいからカスタム前のカテゴリを見てください
8my-blog.com

タブも『あわせて読みたい』、『関連記事』、『公式サイト』など種類が豊富で便利です

 

非常に便利なので、ぜひ活用してみてください

さいごまで読んでいただき、ありがとうございました！

]]> https://8my-blog.com/%e4%be%bf%e5%88%a9%e3%81%99%e3%81%8e%ef%bc%81%e3%83%9e%e3%83%bc%e3%82%ab%e3%83%bc%e3%82%84%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%82%92%e4%bd%bf%e3%81%86%e6%96%b9%e6%b3%95%e3%80%90cocoon%e3%80%91/feed/ 0 フリー画像の挿入が楽になる神プラグイン【Pixabay Images】 https://8my-blog.com/%e3%83%95%e3%83%aa%e3%83%bc%e7%94%bb%e5%83%8f%e3%81%ae%e6%8c%bf%e5%85%a5%e3%81%8c%e6%a5%bd%e3%81%ab%e3%81%aa%e3%82%8b%e7%a5%9e%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e3%80%90pixabay-images/ https://8my-blog.com/%e3%83%95%e3%83%aa%e3%83%bc%e7%94%bb%e5%83%8f%e3%81%ae%e6%8c%bf%e5%85%a5%e3%81%8c%e6%a5%bd%e3%81%ab%e3%81%aa%e3%82%8b%e7%a5%9e%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e3%80%90pixabay-images/#respond Sun, 20 Oct 2019 21:00:54 +0000 https://8my-blog.com/?p=3050

８ｍｙ（@8my__）です

現在、WordPressテーマ Cocoonを使ってブログを書いています。

みなさん、ブログにフリー画像を挿入するのに苦労していませんか？

画像の種類が少ない
いちいち他のサイトを開かないといけない
検索回数に制限がある…などなど　

８ｍｙもフリー画像の挿入は面倒でした。
でも、画像があった方が記事が読みやすいですよね。

そんな悩みを解決してくれるプラグインがありました。
『Pixabay Images』です。

この度の記事ではそんなPixabay Imagesの使い方を紹介します。

Pixabay Imagesとは？

このプラグインを使えば、『Pixabay（ピクサベイ）』という無料画像サイトの画像をダウンロードせず、そのままブログに挿入できます。

Pixabayとは、商用利用可能（アフィリエイトサイトもOK）、クレジット表記不要、加工可能ないかなる権利も所有しないという写真・画像を集めたサイトです。

つまり、Pixabay Imagesを使えば、他のサイトを開いてダウンロードして…という面倒な作業が一切無くなります。

Pixabay Imagesをインストール

それでは、早速インストールしましょう！
まず、管理画面の『プラグイン』から新規追加を選択します。

次に『Pixabay Images』で検索をします（↓赤丸のところにPixabay Imagesをコピー＆ペースト）。
その後、今すぐインストールを選択して有効化します。

Pixabay Imagesの使い方

プラグインをインストール後、ブログ記事投稿ページで『メディアを追加』ボタンを押します。
すると、Pixabay Imagesが以下のように追加されています↓

画像検索のやり方

先ほどのPixabay Imagesをクリックすると検索画面がでてきます。
枠内にキーワードを入力して検索します。

英語で書いてありますが、日本語でも検索できるので安心してください。
もちろん、英語でも検索できます。

絞り込み機能

検索枠の下に４つのチェック項目があります。
ここにチェックを入れることで必要なものだけに絞れます。
不要なものはチェックを外してください。

４つの項目はそれぞれ以下のとおりです。

『Photo』：写真のみ表示
『Cliparts』：イラストのみを表示
『Horizontal』：横向きの画像を表示
『Vertical』：縦向きの画像を表示

画像を挿入

気に入った画像があれば、配置やサイズを選択して、『投稿に挿入』のボタンを押せば完了です。

さいごに

Pixabay Imagesを使えば、本当に簡単にフリー画像を記事に挿入できるようになります。

少しでも時短をしたい！
快適に記事を書きたい！
フリー画像を探すのが面倒くさい！

という方にはピッタリのプラグインだと思います。

是非使ってみて下さい。

 
 
]]> https://8my-blog.com/%e3%83%95%e3%83%aa%e3%83%bc%e7%94%bb%e5%83%8f%e3%81%ae%e6%8c%bf%e5%85%a5%e3%81%8c%e6%a5%bd%e3%81%ab%e3%81%aa%e3%82%8b%e7%a5%9e%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e3%80%90pixabay-images/feed/ 0 カテゴリーの階層をつけて、順番を並び替えてみた【Cocoon】 https://8my-blog.com/%e3%82%ab%e3%83%86%e3%82%b4%e3%83%aa%e3%83%bc%e3%81%ae%e9%9a%8e%e5%b1%a4%e3%82%92%e3%81%a4%e3%81%91%e3%81%a6%e3%80%81%e9%a0%86%e7%95%aa%e3%82%92%e4%b8%a6%e3%81%b3%e6%9b%bf%e3%81%88%e3%81%a6%e3%81%bf/ https://8my-blog.com/%e3%82%ab%e3%83%86%e3%82%b4%e3%83%aa%e3%83%bc%e3%81%ae%e9%9a%8e%e5%b1%a4%e3%82%92%e3%81%a4%e3%81%91%e3%81%a6%e3%80%81%e9%a0%86%e7%95%aa%e3%82%92%e4%b8%a6%e3%81%b3%e6%9b%bf%e3%81%88%e3%81%a6%e3%81%bf/#respond Wed, 16 Oct 2019 21:00:27 +0000 https://8my-blog.com/?p=2919

こんにちは！

８ｍｙ（@8my__）です

僕は現在、WordPressテーマ Cocoonを使っています

つい先日、サイドバーに表示される『カテゴリー』を少しカスタマイズしてみました

 

なぜカスタマイズしたかというと…

非常に見ずらいから

カスタム前のカテゴリを見てください↓

まとまりがなく、ただ並んでいるだけ…

見る気が失せますね 笑

そこで、

  1. カテゴリーに階層をつける

  2. カテゴリーの順番を整理

してみました

1→2の順に解説していきます

 

1．カテゴリーに階層をつける

まずは、カテゴリーに親カテゴリーを設定しましょう

管理画面の『投稿→カテゴリー』から設定できます

  • 既存のカテゴリーに親カテゴリーを設定する場合
    ⇒既存のカテゴリーを編集して設定

  • 新規に子カテゴリーを作成する場合
    ⇒赤丸の箇所で親カテゴリーを設定

 

次に、『外観→ウィジェット』から『カテゴリー』をクリック

『階層を表示』にチェックを入れ保存します

これで、カテゴリーの階層になってブログに表示されるようになります

 

2．カテゴリーの順番を並び替え

ワードプレスでは、カテゴリーの順番を並び替える機能が無いので、プラグインをインストールする必要があります

Category Order and Taxonomy Terms Orderというプラグインを使うと簡単にカテゴリーの順番を替えることができるようになります

 

まずは、プラグインのインストール

管理画面の『プラグイン→新規追加』から以下の画面に移ります

そして、右の赤丸の箇所にCategory Order and Taxonomy Terms Orderをコピー＆ペーストして検索

その後、インストールして有効化します

 

次に、『管理画面の投稿→ Taxonomy Order』をクリック

 

あとは、入れ替えたいカテゴリーをドラッグ＆ドロップで移動するだけです

 

さいごに

カスタマイズ後のカテゴリーがこちらです↓

親カテゴリーと子カテゴリーの違いもハッキリ

少し見やすくなりましたね！

以上、参考になれば嬉しいです

さいごまで読んでいただき、ありがとうございました！

]]> https://8my-blog.com/%e3%82%ab%e3%83%86%e3%82%b4%e3%83%aa%e3%83%bc%e3%81%ae%e9%9a%8e%e5%b1%a4%e3%82%92%e3%81%a4%e3%81%91%e3%81%a6%e3%80%81%e9%a0%86%e7%95%aa%e3%82%92%e4%b8%a6%e3%81%b3%e6%9b%bf%e3%81%88%e3%81%a6%e3%81%bf/feed/ 0