そこで気になるのが「画像サイズ（容量）」。

高画質なアイキャッチは魅力的なものの、あまりにサイズが大きいと読み込みに時間がかかってしまうため、「できるだけキレイなまま画像サイズを落としたい！」という気持ちが出てきますよね。
あまり画像サイズが大きいと、GoogleのPage Insightで数字が悪くなってしまうので気になる！という方もいるのではないでしょうか。

そんな方にオススメしたいのが、画像サイズをぎゅっと圧縮してくれるサイトの数々！
無料で利用でき、手順もシンプルなので私もアイキャッチには毎回圧縮をかけています。

しかし圧縮が可能なサイトは非常に多く、これまた「どこのサイトを使えばいいの？」と悩みが出てきちゃいますよね……。

前置きがめちゃくちゃ長くなってしまいましたが、今回は「画像サイズ圧縮サイト」について、自分で試してみた結果をご紹介！

タイプが違う2つのイラストで比較するよ

今回はどのようになるか実験として、

A：シンプルなイラスト（Canvaのテンプレート使用）：269KB

B：水彩系の塗りのイラスト（自作イラストの一部）：458KB

の2つを利用し、どれくらい圧縮されるかをチェックしてみました。

なお、上記の2つはAのほうがBに対して画像サイズが大きいのに対して、Bの方が容量が大きくなっています。

画像のシンプルさでこれだけ画像容量が変わることがまずおわかりいただけるかと思います。

アイキャッチの画像容量をできるだけ小さくしたい！と考える方は、できるだけシンプルなものにしましょう。

Aconvert

1つ目のサイトは「AConvert」です。

画像JPG、PNG、GIF、SVG、WEBPまたはDDSをオンラインで圧縮

オンラインでイメージを圧縮 - JPG、PNG、GIF、SVG、WEBP、またはDDSイメージを最適化してファイルサイズを縮小します。 異なる画像フォーマットは異なる最適化方法を使用する。

www.aconvert.com

非常にシンプルなUIですが、ドラッグ＆ドロップ方式ではなく、いちいちファイルを選択しなければいけないのが面倒なところでしょうか？

「Type:」にて「Lossy Compression」と「Lossless Compresion」が選べます。

前者の方が圧縮度高めでサイズ減少も大きく、後者の方が圧縮度低めでサイズ減少も少なめ、と思っていただければOKです。タイプを選んだ次の数字で、さらに圧縮度を選べます。

今回は両方のタイプを、数値設定はデフォルトでやってみました。

Lossy Compression（数値80）

その結果がこちら。

A：269KB→63.1KB（約77％圧縮）

正直どこが変わったのかわからんレベルな気がします。
タッチが細かい右上の月のざらついた部分や、猫のヒゲ付近をじろじろ見てみましたが、よくわかりませんでした。

見た目を変えずにサイズだけ小さくできるのが理想ですから、かなり理想通りに圧縮できていると言えそうです。

B：458KB→131KB（約72％圧縮）

こちらも一見変わらない…ように見えますが、ざっと見るだけでも圧縮によるドットが見えてしまう部分がいくつかありますね。

キャラクターの首まわりの髪の毛の濃いめの色の部分や首の影、左肩の紫の部分がわかりやすいかと思います。

アイキャッチの写真があることが大切で、少しでも容量を少なくできたらいいというケースであれば十分許容範囲かと思いますが、その画像をコンテンツにする場合（イラストブログ、写真ブログなど）ですと正直利用すべきではないと思います。

少なくとも私はイラストが「劣化した」と判断してしまうので、絶対に使いません。

Lossless Compresion（数値3）

続いては、ロスレス圧縮の方で試してみます。

A：269KB→170KB（約37％圧縮）

こちらも正直どこが変わったのか…というレベルですね。

逆にこういったシンプルな単色で構成されたものであれば、圧縮率が高くてもそんなに劣化を感じづらいので、Lossyを使った方が（サーバー容量的に）お得、と言えそうです。

B：458KB→380KB（約16％圧縮）

ほとんど圧縮されていないだけあって、画質はキレイだなと思います。Lossy圧縮に比べると天と地の差というか……。

細かい部分もしっかり残っていて文句はないレベルです！

たった16％しか減っていないとも思ってしまいますが、このサイズでこれだけ減ったのなら、もっと大きなイラストを展示したい場合は結構な差になってくるかも……？

iLoveIMG

続いては、画像圧縮だけでなくリサイズなども可能な「iLOVEIMG」です。

iLoveIMG | 画像編集用オンラインツール

iLoveIMGは、使いやすくて完全無料の画像処理用オンラインサービスです。画像の圧縮、サイズ変更、切り抜き、変換などが可能です！

www.iloveimg.com

透かし画像を入れることもできるので、写真を自サイトで販売されている方は見本に入れる、なんてこともできそうですね。

画像の圧縮については、直接ドラッグ＆ドロップで投下でき、かつ複数ファイルを一括で圧縮してZipファイルにまとめてくれるので、管理も楽です。

A：269KB→60.6KB（約78％圧縮）

やっぱり一見して圧縮されていることがわからないかなーと思います。

圧縮率も高めですので、シンプルなアイキャッチを多様する方にはオススメできるかなと。

私はシンプルなイラストやアイキャッチの圧縮にこちらのサイトを愛用しています。

B：458KB→130KB（約72％圧縮）

こちらのイラストも72％まで圧縮できました。

が、やはり首周りにドットのような圧縮がかかっていて（色数を減らしたためにドットのようになっている）、正直繊細なイラストを見せたいときには不向きですね。

Optimizilla

画像の圧縮としては非常に有名なサイトだと思います。

オンラインイメージ最適化ツール

OptimizillaはJPEGやPNGフォーマットのイメージを最小サイズに圧縮する、高性能のイメージ最適化ツールです。

imagecompressor.com

最大の特徴は、自分で圧縮後の画像を見ながら圧縮率を調整できることでしょう。

オレンジ枠のスライダーを上下させることで、圧縮率が変わります。
より下にすると圧縮率も高くなりますがその分元の画像に比べると一部が荒くなる可能性が出てきます。

画像はブルー枠部分に投下、もしくは黄色枠の「アップロード」のどちらからでもOK。
複数の画像を圧縮した場合、個別の画像下にある黄色い「ダウンロード」ボタンを押せば1つずつ、「全てダウンロード」ボタンをおせばZipファイルでまとめてダウンロードできます。

こちらのサイトも一時期使っていて、自分でクオリティを調整できるところがお気に入りです。

A：269KB→81KB（約70％圧縮）

デフォルトの圧縮サイズなので、もっと圧縮もできます。

どのサイトにも言えることでもう耳タコ（目タコ？）ですが、やっぱりキレイに圧縮されていて元画像との乖離がないといってもいいくらいですね。

B：458KB→129KB（約72％圧縮）

だいたい同じくらいの圧縮率ですが、やはり首周りが気になりますね。

どうしても圧縮しようとすると、細かい部分が平坦化されるというか、細かい色はカットされてしまうのかなという印象です。

TinyPNG

こちらも超有名な圧縮サイト「TinyPNG」です。

TinyPNG – Compress PNG images while preserving transparency

Make your website faster and save bandwidth. TinyPNG optimizes your PNG images by 50-80% while preserving full transparency!

tinypng.com

画像をドラッグ＆ドロップすれば勝手に圧縮してくれるという非常にシンプルな使い心地なので、「とりあえず画像を圧縮してくれたらOK！」という方には一番オススメです。

動作も基本的に軽くてサクサクなのも○。

A：269KB→90.4KB（約67％圧縮）

圧縮率は他に比べるとちょっと低めですね。

違いも大きく感じられないため、このようなシンプルな構造のイラストやアイキャッチであれば、もっと圧縮率が高いサイトを選ぶ方がいいかもしれません。

B：458KB→115KB（約75％圧縮）

圧縮率は一番高いですね！ですがやっぱり首まわりは…気になるところ……。

とはいえ、遠目でぱっと見ただけならめちゃくちゃ気になる！というくらいではないかな？「iLOVE IMG」くらいでしょうか。

サンプルや、どうしても圧縮しなきゃいけないときにはいい…のかな？

結論：シンプル画像なら「iLOVEIMG」。画質重視は「Aconvert」

ここまで比較してきた、個人的な結論はこちら！

シンプルな画像なら「iLOVEIMG」
画質重視なら「Aconvert」

今回例として使用した画像は単色のイラストでしたが、多少の写真であれば「iLOVEIMG」でもキレイに圧縮できます。

こちらの画像は「Canva」の「ブログバナー」サイズの写真です（写真もCanva）。
画像の容量は302KB。

これを「iLOVEIMG」にて圧縮したのがこちら。71％圧縮され、約91KBになりました。

フレア部分（画面中央下、光っているオレンジや白の部分）のグラデーションがなめらかではなくなっていますが、ぱっと見ではそう大きく印象が変わることはないと思います。

個人的にiLOVEIMGを押す理由は圧縮率の高さと、（その割の）劣化の少なさです。

色々あるけどとりあえずアイキャッチをさくっと圧縮したいなっていう方には十分かと思います。

画質を重視したい方は「Aconvert」のロスレス圧縮ですね。
とはいえ、これもイラストであればタッチ（描き方）であったり、写真であれば被写体や使われている色数で変わってくると思いますので、絶対にここがいい！とは言えないのが難しいところです。

ブログ視点でいうと、閲覧者のために少しでも画像サイズを落とした方がいいかなと思っている方も多いかと思いますので、ぜひ活用してページ速度の向上、およびサーバースペースの節約に役立ててみてください！

結局ブログを始めるならはてな？Wordpress？個人的には「はてなブログ」だと思う理由

ブログをこれから始めよう！と思う方の中には「どこのブログサービスで始めるべきだろう？」と思われる方もいると思います。で、迷う方はたいてい「はてなブログ」か「Wordpress」のどちらを選ぶか？で詰まっていることが多い印象です。ブ...

play.maro-cyanin.site

2020.02.05

その記事でははてなは無料でも色々メリットがあるのでいいよ～！という感じの内容を書いたのですが、結局渡しははてなブログ（Pro）からWordpressに移行しております。

「結局Wordpressがいいんちゃうの？」と思われる方もいると思いますが、これには深い…ってほどではないですけど、きちんと理由があります。

この記事では、なぜ私が「はてなブログ」から「Wordpress」に移行したのか、その理由を書いていきたいと思います。

はてなProからWordpressにしようと思うまで

ちょっと長いお話になってしまいますが、「はてなブログPro」から「Wordpress」に移行を考えるまでを、ざっくりとまとめました。

まずははてなブログ無料版から有料版（Pro）に移行

私はもともと「はてなブログ（無料版）」を利用していて、途中から「はてなブログ（Pro）」に変更しました。

はてなブログ（Pro）に移行した大きな理由は

の3つです。

前2つもそこそこ個人的には重要だったのですが、一番の決め手は「独自ドメインが利用できる」ことでした。

というのも、私はやはり多くのブログを始める方と同様、「Google Adsence」にあこがれている部分がございまして。
かつ、当時はアドセンスをするには独自ドメインが必須！的なことが言われている時代でもありましたので、移行作業をすることなく、独自ドメインを運用できるなら、はてなブログProでいいじゃん！っていう感じだったんです。

WordPressに移行した理由1：Google Adsence

では、なぜWordpressに移行したのか？その理由をこれから語っていきたいと思います。

1つ目の理由は「Google Adsence」です。

こう書くとアドセンスが悪者みたいなのですが、そうではありません（笑）。

はてなブログは、自由度はある程度保証されていて、かつテンプレートで様々な個性的なサイトを作ることも可能でした。
のですが、融通が利かない部分があるのも確かなんですよね。

Googleアドセンスに関しても融通が利かないなと思った部分があって、それが「記事一覧への広告挿入」でした。

アドセンスには「記事内広告」という広告形式があって、Wordpressで言えばインデックスページ（記事が一覧でざーっと表示されるページのことです）の記事と記事の間に、あたかも記事のように見せかけた広告として表示されます（もちろん広告であることはきちんとわかる形になっています）。

せっかくだしそれを使いたかったのですが、はてなでは色々いじらないといけなくて、さらに私はうまくそれが出来なかったんですね。

なんとか解決策を探そうと検索しても、だいたい出るのはWordpress絡みで、「せっかくアドセンスに合格したのに、自分の思った通りに広告を挿入できないのはちょっとな」と思ったのが大きかったです。

あとは「ads.txt」の注意が出るようになって、はてなだとユーザー側ではどうにも出来ない、というところも「移行した方がいいかも…」と思わせる大きな理由でした。

WordPressに移行した理由2：ページ表示速度

正直今となっては当時ほど気にしてはいないんですけども、はてなはGoogleのPage Insightsでどうしても数字が伸びないと言われていました。

自分なりに色々と工夫はしたつもりでしたが、当時モバイルが30台、PCでも50～60台だったかな…。

私に限らず多くの方が思っているとは思いますが、せっかく自分のブログを見に来てくれている方がいるのに、遅くて「なんだかな～」と思われたら申し訳ないと思ってしまいます。
できうる限りサイトの表示速度は速い方がいいと思っているので、この点でもストレスになっていました。

今は全体的に通信速度も速いですし、そこまで気にする必要はない部分かな…とは思うのですけどね…

WordPressに移行した理由3：カスタマイズの自由度

上の方で「はてなはカスタマイズが色々出来る」とかいうてるやん！とも思われそうですが、Wordpressと比べると全然違います。

テーマに付随する機能もそうですが、何より「プラグイン」の差が大きくて。

WordPressならプラグイン1個をぽいっと入れておけばいいようなことを、はてなだとCSSやJsで全部処理しなければならない…ということも少なくなかったので、こりゃ色々ファイル肥大を起こすのも仕方ないな、と思っていました。

これはどのブログサービスを利用していても共通のことですけど、カスタマイズにばっかり時間をかけてしまうと、一体何がしたいのかがわかんなくなっちゃうんですよね。
「私はブログを書きたくて始めたのに、なんでずっとカスタマイズを調べてるんだ…？」となっちゃいます。

私自身カスタマイズで色々やるのは嫌いじゃなかった、むしろ好きだったこともあって、物足りなくなってきた…という部分もありますね。

色々素敵なサイトをみると、つい「自分もこれ取り入れたい！」と思ってしまうので、カスタマイズでめっちゃ時間を費やしましたね…

WordPressに移行した理由4：複数サイトを運営したい気持ちがあった

突然ですが、私は絵を趣味で描いています。

もともと昔は漫画家になりたい！というカワイイ夢を持っていましたが挫折してはや○年。ここ2年くらいで久々に絵を再開した、いわゆる「復帰勢」だったりします。

で、絵を描いていると「自分のサイトを持ちたいなあ」とか思うんですよね。
実際中学生くらいの頃に自分のイラストサイトを運営していたんですが…もちろんソフトはホームページビルダー！！なつかしー！！

はてなもProなら複数サイトを保持することは出来ますが、やはりブログ用のテンプレートが殆どで、イラストサイトを作るなら結局サーバーを借りないといけないよね、と思いまして。

そして、サーバーを借りるならブログを移転してもいいんじゃないのかな？…と。

現状、まだイラストサイトは開設出来ていないのですが、ブログは2個（ここと、もともとメインのブログ）に増えています。

移行時に「失敗したな～」と思ったこと

私がはてなブログProからWordpressに移行する際に、「失敗してしまった…」と思ったことがひとつあります。

それは「はてなブログPro」を2年契約にしてしまったこと。

当時はそれだけ続ける気持ちはあるし、2年のほうが安いし…と思って決断したものなのですが、1年も経たないうちにWordpressに移行してしまったので、まる1年分くらいは使わずに放置スタイルになっています。

そこで別のブログをしてもいいのかもしれないですけど、そんなにブログをばらけさせる意味がないし、そもそも管理も面倒だし…ということで、アッサリ放置してます。

このお金を取り戻せるくらいやってやる！と思ったその時の気持ち自体は自分で評価したいなと思ってます…（笑）

移行はお願いしたのでさっくりと完了

はてなブログからWordpressへの移行は、「羽田空港サーバー」様にお願いして無料でやっていただきました。
このサイトは1から自分でやりましたが、もともとはてなブログでやっていた別ブログ（宝塚歌劇団のファンブログ）はその移行サービスを利用したものです。

詳しいレポはこちらに記載していますので、興味がある方はご一読ください。

ちなみにサーバーは上記記事にもあります通り、「ConoHa WING」を利用していますが全く不満はありません。

しかも最近新プランが出て、最初に1ヶ月～最大24ヶ月分の支払いをすることで支払い期間により一定額割引される「WINGパック」も出ました。

私はとりあえずはてなを教訓に（笑）1年で契約しましたが、それでも最安プランの「ベーシック」で、今まで月額1,200円だったのが900円になり、25％オフで利用できて非常にお安いのです。

さらに、パック契約中はドメインが1個無料でもらえて、ドメイン更新料も無料！！

と、これからちょっとブログをWordpressで始めてみようかしら、という方には非常にオススメ出来るサーバーになっております。

そのうち、ConoHa WINGについての記事も書きたいですね…。

WordPressに移行した今は満足！

WordPressに移行して、今は非常に満足しています。

カスタマイズもしやすいですし、色々な装飾も使えるので、記事を書いていて楽しいことが増えましたね。
はてなでもキレイな記事を書くことは出来ますが、手軽にアイコンを使って…とか、見栄えのいい記事を書こうとすると、その労力の差は歴然としているかな、と。

仮にアイコンを含めた、このようなものを作ろうと思っても

WordPressなら、極端な話左クリックだけで簡単に表示できますし、色も簡単に変えられます。
備わっている機能差が違う、という感じですね。

noteなどのシンプルに文章で読ませる感じも素敵だな、と思うのですが、私は関西人のためかやはり派手好きなので（笑）、色々とできるWordpressがとても気に入っていますし、様々なプラグインやテーマを駆使することで、同じWordpressとは思えないデザインのブログやサイトが出来るのも個人的に大きな魅力だと感じています。

今はてなブログ（無料版）でProにしようか、それともWordpressに迷っているのであれば、このタイミングなら私は後者のWordpressを強くおすすめしたいです。

特に独自ドメインを取るのであれば、最適なタイミングといえるかもしれません。

そして、Wordpressにした際は私の書いたこちらの記事を参考に設定していただければありがたいです！

Wordpressを導入したら、すぐにしておきたい設定5つ

ブログを始めよう、既にブログを始めていて、今利用しているサービスではイマイチ物足りない…と感じているタイミングで、Wordpressに移行した方などなど、とりあえずブログを書くなら候補のひとつに上がらないわけがない！のが「Wordpres...

play.maro-cyanin.site

2020.02.03

見出し変更・アイキャッチ設定など、Cocoon初心者向けポイントまとめ

無料Wordpressテーマ「Cocoon」で初心者がつまづきがちな「見出し（h2など）変更」「CSSの設定」「アイキャッチのサイズ」といった、「ここどうすればいいんだっけ？」な疑問が出やすい部分の解決策（回答）をまとめました。

play.maro-cyanin.site

2020.02.01

で、迷う方はたいてい「はてなブログ」か「Wordpress」のどちらを選ぶか？で詰まっていることが多い印象です。
ブログサービスには「アメブロ」とかまだまだ他にもサービスがありますけど、だいたい悩まれる方はこの2つかな、と。

多くの場合、「やる気があるならWordpressからやるべき！」という結論が多いですが、自分の経験からしたら「とりあえず始めるならはてなの方がいいかな」という結論です。

そう思う理由をご紹介します。今後ブログを始める方の参考になれば幸いです。

私が移行した理由と、失敗談を記事にしました↓

私がはてなブログproからWordpressに移行した理由と失敗したこと

「とりあえずブログを始めるのであれば、はてなブログ（無料版）がオススメだよ！」という記事を書きました。その記事でははてなは無料でも色々メリットがあるのでいいよ～！という感じの内容を書いたのですが、結局渡しは...

play.maro-cyanin.site

2020.02.06

とりあえず無料で始められる方がいい

理由の1つ目は「はてなブログであればとりあえず無料で始められるから」です。

何かしらのきっかけでブログをやろう！と思うのは素晴らしいことだと思いますが、そこで多くの方がふと立ち止まって考える点。
それは「果たして自分はブログを継続することが出来るのか？」だと思います。

「今、自分はブログで文章を書きたい！自分のこの思いや考えを発信したい！」という気持ちが強い時期が長く続けばいいですが、その気持ちがどこまで継続するかは正直未知数です。

ぶっちゃけブログって結構面倒くさい部分もありますし、「なにか書かないと…」と思うとそのプレッシャーでどうにもならなくなって結局放置してしまった、なんてこともあるでしょう。

その時に有料ブログでスタートしていると「こんだけお金もかけたのに、なんだかもったいないな…」という、マイナスな気持ちだけが残ってしまう可能性もあります。

なので、とりあえず続けられるか、自分にブログという媒体は合っているかを確認するためにも、まずは無料で手軽にスタート出来る「はてなブログ」で始めてみたらいいのではないか、と思います。

無料の中でも「はてなブログ」をおすすめする理由3つ＋1

無料ブログで始めたらいいのであれば、別に「Ameba」でも「Livedoor」でもなんでもいいのでは？と思われる方もいると思います。

私はこのサイトではなく別サイトをもともと「note」でやっていたのですが、「はてなブログ（無料版）」に移行し、そして「はてなブログPro」に移行し、最終的にWordpressに移行しています。

noteから別のブログサービスに移行する時に、色々な条件などを踏まえて「はてなブログにしよう！」と思った理由は以下の通りです。

内部コミュニティでアクセスを得られると判断した

はてなブログは独自のサークルみたいなものがあり、それに関する記事を投稿していれば自由に参加することが出来ます（単純に好みのサークルに参加することも可能です）。

そこからアクセスを得られることが出来るので、アクセスが数ヶ月0になることはないかな…というちょっとした下心がありました。

「アクセスがないのでやる気がでない」とブログを辞められる方も多いそうなので、「アクセスがないことで萎えて辞める」可能性を少しでも減らすための施策といったところでしょうか。

私ははてな時代に密な交流は一切していませんので、あまりコミュニティには詳しくありませんが、それでもはてな内からのアクセスはそこそこありました。

私ははてブとか全く興味なかったのでそちら方面のコミュニティは全くわからないのですが、積極的に交流されていたらかなりアクセスは伸びるんじゃないかなと思います。

専用アプリがあり、出先でも更新しやすかい

はてなブログは専用（公式）のアプリがあり、スマホさえあればかんたんに更新することが出来ます。
これは別にはてなブログに限ったことではありませんが、（失礼ながら）意外にもアプリが利用しやすく、出先からでも更新や自サイトのチェックが出来るのはいいな、と思ったのも「はてなブログ」に決めた理由のひとつです。

基本的に私は自宅のPCで更新をしたいので、あまりアプリで…ということはなかったのですが、下書きにざっくりとした内容を書き、家で加筆して記事をアップすることはありましたので、そういった使い方をしたいならオススメかと思います。

独自ドメインに移行しやすい

「独自ドメインに移行しやすい」ことも、私にとっては決め手のひとつでした。

そもそも私も最初はブログを続けられるか自分で不安だったので、とりあえず無料で！と始めましたが、そこからまた独自ドメインを取って別のサイトにお引越し…というのは非常に面倒だなと思っていました。

しかしはてなブログであれば「Pro」に移行することで広告も消えますし、独自ドメインを利用できるのでお引越し（といえるのか？）が超ラク！と思ったんです。

また、仮に今後Wordpressに移行するとしてもドメインはそのまま移行出来るので損はない！と思ったのも理由のひとつですね。

実際、私はWordpressにドメインをそのまま移行しています。
見てくださる方もアドレスが変わるわけじゃないので（中身が変わっても）困らないかなと。

Googleアドセンスを利用できる可能性がある

ブログ楽しい！続けていきたい！と思うと同時に「どうせなら収益化したい！」と思われることもあるでしょう。
そこでぱっと頭に思い浮かぶのが「Googleアドセンス」。
「なんかGoogleアドセンス貼ってあるのって格好いいし！自分も貼りたい！」なんて思うかもしれません（笑）。

Googleアドセンスを利用するためには「独自ドメインの取得が必要」というのが一般的で、私も当時独自ドメインを取りました（この時にはてなProにしました）。

私が体験したわけではありませんが、「はてなブログ」であれば独自ドメインではなく「hatenablog.com」というサブドメイン（無料版）でもアドセンスに合格という記事をいくつか見ています。

ブログでちょっとお小遣いでも稼げたらいいな～と思っている方は、実際に合格されている方がいる（実績がある）ところの方がいいでしょう。

無料で物足りなくなったら有料を考えるので十分

個人的には、無料ブログで始めてみて、それで物足りなくなったら有料ブログを考えるという順番でも十分だと思います。

はてなかWordpressかの論争で「私は最初からWordpressにしておくべきだった」と後悔を綴られている方も多いですが、それはあくまで「結果論」であり、ぶっちゃけ続くかわからないブログに最初からコストをかけるのは…と思っちゃうんですよね。

正直私も今であれば「最初からWordpressにしときゃよかったわ」と思っていますし、色々金銭面で無駄なコストをかけた経験はあるものの、それでもこの順番でよかったなと思っています。

ただ、「お金をこれだけかけたんだから絶対に続けないと！！」と奮起するタイプの方なら…最初からお金をかけるのもアリかもしれませんね。

でも結局Wordpressにしてるから説得力ないよね

と思われる方もいるでしょう。

まあ確かにそれは本当にそう。わたしははてなブログからWordpressに来て非常に満足しています。

それではなぜ、Wordpressに移行したのか？その理由は？
…というのは、別記事で書きたいと思います。

記事を書きました↓

私がはてなブログproからWordpressに移行した理由と失敗したこと

「とりあえずブログを始めるのであれば、はてなブログ（無料版）がオススメだよ！」という記事を書きました。その記事でははてなは無料でも色々メリットがあるのでいいよ～！という感じの内容を書いたのですが、結局渡しは...

play.maro-cyanin.site

2020.02.06

はてなProでも苦労したり色々失敗したので、それもあわせてお伝えできればと…！！

私自身も、このブログより前に始めたものは「はてなブログ（無料）」からスタートし、「はてなブログ（Pro）」を経て現在Wordpressに移行しています。

なぜ「はてなブログPro」から「Wordpress」に移行したのかは、また別記事で書ければいいなと思っています。→書きました

私がはてなブログproからWordpressに移行した理由と失敗したこと

「とりあえずブログを始めるのであれば、はてなブログ（無料版）がオススメだよ！」という記事を書きました。その記事でははてなは無料でも色々メリットがあるのでいいよ～！という感じの内容を書いたのですが、結局渡しは...

play.maro-cyanin.site

2020.02.06

さて、Wordpressはもともと色々と設定する場所が多いのですが、その中でも「できるだけ早くやっておきたい設定」があります。

後から変更するといろいろ面倒くさい部分もありますので、この記事を見てちゃちゃっと完了させちゃってくださいね！

投稿者名の表示を変更する

早めにやっておきたいのが、「投稿者名の表示の変更」です。

といいますのも、これ、何も設定していないとそのブログ（Wordpress）のユーザー名のままなんですよね。

WordPressのメニューから「ユーザー＞あなたのプロフィール」を選択します。

すると、「名前」の項目にて「ユーザー名」が既に入っているのが確認できるかと思います（画像ではモザイクをかけています）。

既に画像には「まろにー」と入っていますが、この「ニックネーム」部分にハンドルネームを入力し、下の画像のように「ブログ上の表示名」をニックネームに変更しておきましょう。

記事を書いた人として名前が記事に残っちゃうので、いの一番に変更すべき部分だと言えます…

サイトタイトル・キャッチフレーズの設定

なんとなく早めに設定しておくといいかな、と思うのが「サイトタイトル」と「キャッチフレーズ」の設定です。

「設定＞一般」から進めばOK。

特に説明するほどでもありませんが、キャッチフレーズはともかく、サイトのタイトルはある程度早くかためてしまったほうがいいと思います。

私は今更他の名前にしたほうがよかったかな、とも思っているので…。
（まあ、後からサイトタイトルを変えても別に問題はないんですけどね）

パーマリンク形式の変更

「パーマリンク」とは、その記事がもつ特有のリンクアドレスのことです。
たとえば、この記事のパーマリンクは「wordpress-first」という名前になっています。

そのパーマリンクをどういった形式にするかも、Wordpressなら設定できるのでとっても便利！

設定は「設定＞パーマリンク設定」から行えます。

進むとこんな感じ。すこし画像が大きいですが…。

SEOなどの観点で言うと「投稿名」がオススメされています。
まろっぱげ。では「カスタム構造」を選択し、「カテゴリー名/記事名」と表示されるように設定しています。

このあたりは好みだと思うのですが、まろっぱげ。のようないろんなテーマが入っているブログだと、記事名だけではどんなカテゴリーに属しているのかわかりづらい、というデメリットがあります。

ですがカテゴリーが表示されていれば、例えばゲームを紹介する記事であれば「Game/○○（記事名）」になるので「ゲームカテゴリーの記事なんだな」と、アドレスでもどんな記事を見ているのか、ブログを見てくださる方がわかりやすいかな？という判断です。

このへんは本当に好みだと思いますので、投稿名か、私のようにカスタム構造でカテゴリーを表示させる程度でいいんじゃないかなと思います。長過ぎるアドレスもちょっと嫌ですしね…

こちらもあとから変えると内部リンクがおかしくなる可能性もありますし（自分で試してみたところ、素直に内部リンクは飛んでくれたのでそこまでではないかもですが…）、最初に固めてしまったほうがいいでしょう。

コメントのメールアドレス入力を必須にしない

これは迷うところでもあるかと思います。
メールアドレスの入力を必須にしておくことでスパムコメントが防ぎやすいですし、変な荒らしコメントをもらうリスクも減りますので…。

しかし、メールアドレスが必須というのは、コメントをもらう上ではちょっとハードルが高いかなとも思いますので、私は必須にしないように設定を変更しました。

「設定＞ディスカッション」から設定できます。

オレンジ下線を引いた部分が該当箇所です。
すでに画像ではチェックが外れていますが、初期設定ではチェックが入った状態なので、それを外してしまいましょう！

なにげに忘れやすい設定なんですよね、これ…

プロフィールの設定

これは急いですべき！というほどではありませんが、早めにやっておくと楽＆結構場所を迷いがち、ということで。

サイドバーにプロフィールを掲載される方は多いかと思いますが、そこに表示される文章はWordpressの設定で行えます。

「ユーザー＞あなたのプロフィール」に進みましょう。
ページの真ん中より下くらいに「あなたについて」という項目があり、そこでプロフィールや画像を設定できます。

「プロフィール情報」では、アイコンの下に掲載される文章を編集出来ます。
この画像の黄色い○で囲まれてる部分ですね。ちょっと長いから整理しよう…（客観的視点大事やなあ）

アイコンは同ページ、もうちょっと下にある「プロフィール画像」から。
「プロフィール画像をアップロード」で、アイコンにしたい画像を選択してください。

私は吹き出し用に描いた絵を流用しています。このウザ顔が気に入ったので！

アイコンは著作権的に問題ないものを使った方がいいですね（他の画像もそうですが）。
フリーアイコンを利用したり、依頼で描いてもらうなども手かと思います。

早めに設定しておくと後がラク！特に表示名は早めに変更を

今回ご紹介しました設定は、早めにしておくと「ちょっとブログっぽくなってきた！」と感じられるのでオススメです。
しかし、表示名の変更はセキュリティ観点からもなるべく早く行うことをオススメします。

プロフィール系はちょっと後からでも大丈夫。内容自体後からいくらでも変更できますので、ブログを始めて「なんかこのプロフィールちゃうなあ」と思ったら適宜書き直していったり、アイコンもブログの雰囲気にあわせて変えていってもいいと思います。
私も実際変えていますし（当時はよかったけど、今みたら絵が気に食わなかったので…）。

また、個人的には無料テーマ「Cocoon」がオススメです。
有料テーマもいいのでしょうが、まずは無料で試してみて…というのもアリかと。

見出し変更・アイキャッチ設定など、Cocoon初心者向けポイントまとめ

無料Wordpressテーマ「Cocoon」で初心者がつまづきがちな「見出し（h2など）変更」「CSSの設定」「アイキャッチのサイズ」といった、「ここどうすればいいんだっけ？」な疑問が出やすい部分の解決策（回答）をまとめました。

play.maro-cyanin.site

2020.02.01

ただ、機能が多いだけに「この設定はどこですればいいの？」「ここを変更したいんだけど出来ない」なんてこともザラにあるのがCocoon。

私自身も使い始め…いや、今でも「どこだっけ！？」となることが多いので、自分用としても、初心者の方用としても便利な、「Cocoon初心者向けポイント」をまとめました。

かなり初心者の方向けの内容になっています！

見出しデザインの変更が出来ない

カスタマイズの中ではかんたんな「見出しカスタマイズ」。
多くのサイトで可愛いCSSを使った見出しが紹介されており、「自分のサイトの見出しもこれにしたい！」なんて時がありますよね。

しかし、CSSに記述をしても「あれ？反映されない…」ということも。

これはCSSの指定にちょっと工夫が必要です。

多くの場合、

.h2 {
Color:ccc;
font-size:20px;
}

といったコードになっていると思いますが、このまま採用すると反映されなかったり、本文以外のサイドバーの見出し部分まで変わってしまうなど、色々と弊害が出ることも。

そこで、<h2>を

.article h2

とすることで、本文の見出しのみ変更することが出来ます。

あとのデザインは、お好きなものをコピペするだけでOK！<h3>や<h4>も同様です。

初心者のころ、この設定につまづいて半日くらい費やしました（ドヤ顔）

CSSはどこを編集するの？どこから行くの？

Cocoonでカスタマイズをしたい！だけどCSSはどこを編集すればいい？メニューのどこから？と迷う方もいると思います。

こちらはWordpressの管理者メニューの「Cocoon設定」ではなく「外観＞テーマエディター」にあります。

この緑色の文字になっているところですね。

続いて表示されるのは、謎のファイルたち。

赤枠で囲まれている部分をチェック。「Cocoon」の場合はCocoonの親テーマを指していますので、こちらを編集してしまうと、Cocoon本体のアップデートが行われた際、カスタマイズしたCSSが消えてしまいます。

ではどうすればいいのか？といいますと、赤枠で囲まれている部分のプルダウンから「Cocoon Child」を選択します。（「選択」を押さないと遷移しませんのでご注意を！）

これが「子テーマ」のCSSとなり、こちらでCSSを編集すれば、親テーマのアップデートがあっても、カスタマイズ部分が問題なく反映されたままになります。

きちんと子テーマのCSSファイルが表示できているかは、赤枠部分をチェックすることで確認できますよ。

ファイルの内容に、上記の記載を確認することでも子テーマ用CSSになっていることが確認できます。

Cocoonでやっておくべき設定・忘れがちな設定箇所

「Cocoon」を導入した際にやっておくべき設定についてざくっとかんたんに解説していきます。
より詳しいことが知りたい！という方は、個別記事（ある場合）にジャンプ出来ますので、そちらからどうぞ！

ホームイメージの設定

大事な設定のひとつが「ホームイメージの設定」です。

ホームイメージとは、ブログのアドレスを記載した時に表示される、ブログ自体のイメージ（画像）のこと。
たとえばこのブログだとこうなります。

まろっぱげ。旧館 | ゲーム＆Cocoon＆イラスト＆雑記の4つでできていた。

play.maro-cyanin.site

この左側に表示されている画像をオリジナルのものに設定出来ます。

これは「Cocoon設定＞OGP」で設定が可能です（画像で黄色くなっている部分）

かんたんに自分のオリジナリティを出すことができるので、ぜひともやっておきたいところです！

画像サイズなど詳しくはこちらの記事に記載していますので、興味のある方はどうぞ！

【Cocoon】忘れがち！ホームイメージの変更方法

WordPressテーマ「Cocoon」でサイトの顔だと言える「ホームイメージ」画像の設定方法やサイズについて、画像入で解説しています。

play.maro-cyanin.site

2019.12.20

ホームイメージはHPの顔！TwitterなどのSNSで積極的にシェアしたい！と考えているならぜひとも設定してくださいね。

インデックスページのアクセス解析消去

Cocoonには独自のアクセス解析機能が備わっており、ページごとのアクセス数を出してくれます。
これで人気のページを簡易的にですがチェックすることもできちゃいます！
管理者のアクセスを含める・含めないの設定も出来る便利機能！

初期設定では、この画像のように「インデックスページ」にもCocoonのアクセス解析結果が表示されています（画像黄色部分）。

これは閲覧者から見えるものではないのですが、結果を表示するのに多少時間がかかるとテーマ内に記載されていること、そして見た時にアクセスがなかったら切なくなるので、私は毎回表示しないようにしています。

設定箇所は「Cocoon設定＞管理者画面」タブにあります。

その中の「管理者パネル＞PVの表示」内、「インデックスにPV数を表示」に入っているチェックを外します。

これでインデックスページの記事に、アクセス解析が表示されることはありません。

上の「PVエリアを表示する」というのは、プレビュー画面などでしばらく待つと画面下に出てくるグレー色のバー部分のことを指します。

こちらもいらない！という方はチェックを外してもいいかもしれませんが、レスポンシブのテストが行えるなど便利な機能がついていますのでもったいないかも…？

アイキャッチ画像の中央揃え

アイキャッチ画像を横800ピクセル以上で作成している方であれば不要ですが、 私のように画面よりも小さいサイズで作っている場合、中央揃えにしないと左よりになってしまい、ちょっと見た目がよろしくない雰囲気になります。

なので、Cocoonの設定でアイキャッチ画像を「中央揃え」になるように設定します！

こちらの設定箇所は「Cocoon設定＞画像」タブになります。

その中の「アイキャッチの表示」メニューから、「アイキャッチの中央寄せ」にチェックを入れればOKです！

トップページの記事表示方法の変更

ブログのトップページの記事一覧の表示方法は、適用している子テーマによって変わりますが、こちらもCocoon設定より変更することが出来ます。（テーマによっては制御され、変更できない場合もあります）。

「Cocoon設定＞インデックス」より変更可能。

カードタイプは6種類から選べます。
個人的に好きなのは「縦型カード2列」ですね。現在のまろっぱげ。でもこちらを採用しています。

エントリーカードも嫌いではないのですが、せっかくアイキャッチに自作のイラストを使用しているので、ちょっとでも大きめがいいなとｗ

「大きなカード」は本当に大きなカード（メインカラムいっぱいになります）なので、写真やイラストがメインのサイトにオススメかもしれません。この記事を書くために私も一度変更してみましたが、「でけえ！」って感じでした…。

あんまり画像が大きいと、それはそれで見づらい気がしてしまいました…

メインカラム幅の調整

Cocoonはデフォルトのメインカラム幅が「800px」ですが、これはちょっと広いなと感じる方もいると思います。
こちらも設定でかんたんに変更することが出来ます。後から変更するとアイキャッチ画像やサムネイル画像などに崩れが出てくる恐れがありますので、できれば初期にちゃちゃっとやっちゃいましょう！

場所は「Cocoon設定＞カラム」です。

まろっぱげ。では「680px」に設定しています。細すぎるのもなんだかなーなので、ちょっと狭め、くらいですかね。

アクセス解析・アドセンスのコードを貼りたい

ブログを運営していくと「Google Analyticsを使いたい」とか「Google Adsenceを利用したい」といった気持ちも出てきますよね。

Cocoonではそのあたりもかんたんに設定できるようになっています！

タブもそのまま「Cocoon設定＞アクセス解析・認証」。

それぞれのコードを入力できる箇所がわかりやすく記載されていますので、迷うことはないでしょう。

Google Adsenceのコードを貼る場所もここにあります。
「その他のアクセス解析・認証コード設定＞ヘッド用コード」に貼り付ければOKです。

また、設定の一番上部に「サイト管理者も含めてアクセス解析する」という項目がありますが、個人的にはこちらのチェックを外したほうがいいかなと思います。（確かデフォルトで外れてる気がしますが）

また、私はこのエリアに「もしもアフィリエイト」の「かんたんリンク」を使用する際のレスポンシブ用コードを記載しています。
Cocoonは完全レスポンシブなので、別に必要ないのかな？とも思いましたが、念の為。

ちなみにもしもアフィリエイトは、ひとつでAmazon・楽天・Yahooショッピングの3つをまとめて管理できるので、アフィリエイトをしたい方の入門としてめっちゃオススメです。

アドセンス＝広告なので、つい広告タブをチェックしがちなのですが、Metaタグはこちらなんですよね…

覚えてしまえばかんたん、だけどなかなか…。

設定が多岐にわたるので、どうしても「これどこだっけ～！？」となりがちなCocoon。
覚えてしまえば無意識レベルで的確に行けますが、なかなかそこまで覚えられないってことも多いですよね。

そんな時に、この記事のことを思い出して索引代わりにでもしていただけたら嬉しいです。
また、何か気づいたり「ここ必要かも」と思ったら追記していきます～！

とはいえ、色々なブロックが使える中「これもうちょっとうまく使えないのかなあ」と思っていたのが「再利用ブロック」。

色々いじっていたら「こんな使い方ができるやん！」と思ったので、メモとして残しておきます。

「再利用ブロック」とは？

「再利用ブロック」とは、自分で作成したブロックの内容を「再利用ブロック」として登録することで、他の記事や固定ページなどで使いまわしができる機能（ブロック）のことです。

毎回ブログに特定の文章を最後に入れている場合など、わざわざメモ帳に残しておいてコピペをしなくても、再利用ブロックを使えばすぐに使える！というわけです。

再利用ブロックは「通常ブロック」に変化できる！

「でも、再利用ブロックは同じ内容しか使えなくない？」という声もあるでしょう。

再利用ブロックはたしかに同一の内容を何度も使い回す、というもので、再利用ブロックを編集してしまうと、ブロック自体の内容が変更されるため、例えばページAとページBに再利用ブロックをすでに使用しており、ページCで再利用ブロックを編集した場合、ページAとページBにもその内容が反映さてしまいます。

しかし、再利用ブロックは「通常ブロック」に変化させることもできるんです！

テンプレートなどで使い回せる文章を作れるテーマもありますが、再利用ブロックは基本の枠組みを作っておいて内容を変化させるなんてこともできちゃいます！

このサイトでの実用例

私はこのサイトで実際に再利用ブロックを活用しています。
具体的にどのブロックで活用してるの？といいますと、Steamリンクです。

Steamリンクはifremeという属性でいわゆる「埋め込み」を行っているわけですが、いちいちソースをコピペするのは面倒なんですよね。

先日「購入して後悔がなかったSteamゲーム」の記事を書きましたが、そのときに大いに活躍してくれました。

404 NOT FOUND | まろっぱげ。旧館

ゲーム＆Cocoon＆イラスト＆雑記の4つでできていた。

play.maro-cyanin.site

写真で説明！「再利用ブロック」の使い方

実際どのように使うのか、写真を交えながら説明していきます。

事前準備：好きなブロックを「再利用ブロック」にしておく

これがないと始まりません。自分が使いまわしたい！と思っているアイテムを「再利用ブロック」に指定しておきましょう。

再利用ブロックの作り方は、そのブロックを選択した状態で一番右の「…」が縦に並んでいるアイコンを選択すると表示されるメニューの中から「再利用ブロックに追加」を選びます。

再利用ブロックには名前をつけられるので、自分が判別しやすい名前をつけるといいでしょう。

再利用ブロックをおきたいところに配置

まず、「再利用ブロック」を「ここだ！」というところに配置します。

この画像では「Steam」が再利用ブロックです 。

再利用ブロックが配置されると、こうなります。

この画像では「Glass Masquerade」になっていますが、このゲームばかりを紹介しているわけではありません。別のゲームに変えられないと意味がない！

「通常ブロックに変換」を選択すると編集できる！

そこで、左上のメニューから「通常ブロックに変換」を選択します。

画像で黄色くハイライトしている部分を選択してください。

すると！

このように、再利用ブロックからただのHTMLになります。

通常ブロックに変換したものを編集する

通常ブロックに変換すれば、「再利用ブロック」の内容を変更せずに、そのブロックのみ変更を適用することができます。

今回の例では、Steamの他のソフトを表示させたいので…

表示させるための必要なURLをSteamから取得（赤線部分の数字をコピーするだけ）し、

ここを書き換えれば…

こういう表示になり、ちゃんと変わっているのがわかります！

Cocoonのテンプレートでは編集がすべてに適用されてしまう

WordPressテーマ「Cocoon」を利用している方であれば「Cocoonのテンプレートでもいいんじゃない？」と思われたかもしれません。

確かにCocoonのテンプレートは非常に便利で、別サイトでも活用していますが、Cocoonのテンプレートは編集するとすべてに適用されてしまうため、「ここのタグのこの一部だけ変えたいんだよね」という使い方には適さないんです。

対して、この「再利用ブロック」は今回のような「一部の数字だけちょっと変えたい！」というときに非常に便利。
毎回ちょっとした部分を変えるために、わざわざメモ帳からペーストしてくる必要もありません。

「ここ変えたい」なモノが多いなら、活用しない手はない！

今回はHTMLタグでしたが、文章であっても「大体これを使いまわしたいけど、ここだけ変えたいんだよね…」なものがあれば、再利用ブロックを活用しない手はない！というレベルです。

これまで使っていなかったわ、という方も、ぜひ一度使ってみてはいかがでしょうか？

他に設定でつまづきやすい箇所などはこちら↓の記事に記載しています！

見出し変更・アイキャッチ設定など、Cocoon初心者向けポイントまとめ

無料Wordpressテーマ「Cocoon」で初心者がつまづきがちな「見出し（h2など）変更」「CSSの設定」「アイキャッチのサイズ」といった、「ここどうすればいいんだっけ？」な疑問が出やすい部分の解決策（回答）をまとめました。

play.maro-cyanin.site

2020.02.01

Cocoonデフォルトであれば横幅800px

Cocoonは、カラム幅（横幅）の初期設定が「800px」に設定されていますので、そこから特別カラム幅をいじっていることがなければ「800px」の画像を使うことでキレイに収まります。

しかし、個人的には800pxカラムはちょっと幅が広すぎるかな…とも思っています。

当ブログでは650px×400pxにしています

当ブログ「まろっぱげ。」では、カラム幅を「680px」に変更していますので、アイキャッチ画像もそれに合わせています。

具体的には「650px×400px」です。カラムめいっぱいの幅ではないのですが、その点に関してはあんまり気にしていません。

Facebookに共有することが多いなら横幅1200pxも

どのようにブログを運営するのかは人それぞれですが、「私はブログ記事をFacebookでシェアをしている・することが多い」という方であれば、横幅が1200px程度あったほうがいいと言われていますね。

とはいえそうなると画像サイズが大きくなってしまい、100kbを超えることも珍しくないので「アイキャッチの画像サイズはできるだけ控えたい」という方は、画像サイズを小さくする方がいいかもしれないです。

個人的に、アイキャッチ画像の美しさを厳しくチェックする読者の方は少ないと思うので、画像サイズは小さめでもいいかなと思いますし、容量を抑えた方がいいんじゃないかなと思っています。

画像比率は16:9が無難。ツールを使えば算出は簡単！

画像の比率は16:9が無難かと思います。
多くのWordpressテーマのアイキャッチ画像としても採用されている比率かと思いますし、今は4:3よりも馴染みがある比率ではないかと。

…しかし、自分は横幅を700pxにしたい！だけど縦幅のサイズがわからない！ってことになりますよね。
もちろん計算は出来ますけど、いちいち計算したくない…！
そんな方にオススメなのが、こちらのサイトです。

アスペクト比計算ツール（縦横比/16:9/4:3/3:2/2:1/黄金比） | WordPressやWebデザインなど紹介 Ocadweb

アスペクト比計算ツール（縦横比/16:9/4:3/3:2/2:1/黄金比）は、画像サイズを16:9や3:2、4:3、黄金比などアスペクト比を簡単に計算をしてくれるツール。写真サイズを入力するだけで、ピクセルで計算してくれたり、各比率で画像をシュミレーションができるアスペクト比計算ツールです。

ocadweb.com

自分の好きな比率で、横幅または縦幅を入力するだけで、比率に合ったサイズを算出してくれます！これがめっちゃ便利！
16:9だけではなく、4:3や黄金比など、全部で6つの比率を自動計算してくれます。

画像比率でちょっと他のブログとは違う印象を出すのもアリ…かもしれませんね！

私はアイキャッチのサイズではなく、画像の中身（イラスト）でなんとか個性を出せないかと奮闘中です…！

10にして自分のブログをのぞいてみると、なんとフォントが変わっている！8以降で適用されている「游ゴシック体」が自分は気に入らなかったので、「Cocoon設定」から慌てて変更。7だとメイリオなので気づかないんです！恐ろしいですよね…。

ですが、困ったことにエディタ画面だけは変わらず…！！

こんな感じになってました。正直私にとってはめちゃくちゃ見づらい！

しかも、「プレビュー」したらちゃんと「メイリオ」が適用されているんです…

「別にエディタだけ違うくらいいいじゃん」と思われるかもしれませんが、ブログを書く人間にとっては、プレビュー画面よりもエディタ画面の前に居るほうが長く…。

個人的にはめちゃくちゃモチベーションが下がるため、なんとかメイリオにしたい！！

とはいうものの、「Cocoon設定」の「エディター」ではフォントスタイルは変更出来ないみたい…ということで、なんとかならんか！と色々と対策をしたお話をまとめました。

その他、Cocoonの設定に関する記事はこちら

見出し変更・アイキャッチ設定など、Cocoon初心者向けポイントまとめ

無料Wordpressテーマ「Cocoon」で初心者がつまづきがちな「見出し（h2など）変更」「CSSの設定」「アイキャッチのサイズ」といった、「ここどうすればいいんだっけ？」な疑問が出やすい部分の解決策（回答）をまとめました。

play.maro-cyanin.site

2020.02.01

Cocoonのアイキャッチ画像サイズはどれが最適？

「Cocoon アイキャッチ」というワードで結構検索されて（うちのサイトが出る）ようなので、Cocoonのアイキャッチ画像について個人的な意見をまじえて、どのサイズがいいのか？という点をご紹介したいと思います。他に設定でつまづきや...

play.maro-cyanin.site

2020.01.23

対処法その1： editor-style.css を編集する

1つ目の対処法は、「editor-style.css」を編集することです。

これはCocoonに限らず、Wordpressにおけるエディター画面のCSSファイル…つまり、これを編集すればエディター画面を自分の好きなように編集出来る、とも言いかえることが出来ます。

他のテーマでは自分でcssを作成し、かつfunction.phpというWordPressの根幹といえるファイルにも手を入れなければならないようですが、Cocoonでは最初から「editor-style.css」が用意されています。

まずは「外観＞テーマエディター」に進み、「Cocoon_Child」を選択します。

その中に「editor-style.css」がありますので、そちらを選択すると、エディター画面に適用されるCSSを自分で編集することが可能です。

こんな感じで、CSSを編集するように出来ます。

テーマによって適用度が違う！？

「なんだ、ここを編集すればいいんじゃん～～」とざっくり上のように編集したものの、ここで大きなトラブルが！

私は現状2つのブログを持っており、どちらもCocoonを使っています。
1つのブログではテーマ「Momoon」を使用しており、そちらでは上記のような雑なｗコードでもエディター画面をメイリオにすることが出来ました。

body,h2,h3,h4,h5{
font-family:"メイリオ","Meiryo",Verdana ;
}

ほんと、こんなくらい雑でも大丈夫です。（フォントはお好きに変えてください。私はどうせ自分しか見ないのでガチで自分用のフォント指定しかしていません）

しかし、別のテーマではこんな雑なコードでは全く意に介しません。

このブログで使わせていただいている「Fuwari」もそのひとつです。
スキンテーマの中身なども見てみたのですが、特別Font-Familyを固定しているようなこともなくて…非常に困りました。

対処法その2：ブラウザ側でいじる

ぶっちゃけ、わざわざ「editor-style.css」をいじらなくとも、ブラウザ側でそう見せてしまう…という手もあります。

というのも、閲覧者の方々は編集画面を見ることはないわけで、わざわざWordPress側でそう見せなくても、自分のブラウザからそう見えればいいんじゃね？ということですね。

そこで利用したのがスタイルシートを変更するChrome拡張機能「Stylus」です。

Stylus

Stylus でウェブのデザインを変更しましょう。これは、ユーザースタイルを管理するツールです。Stylus を利用すると、多くの人気サイト向けのテーマやスキンを簡単にインストールできます。

chrome.google.com

FireFox版もあるようなので、ブラウザが火狐ちゃんの方はこちらをお使いください。

Stylus – 🦊 Firefox (ja) 向け拡張機能を入手

Firefox 向け Stylus をダウンロード。お気に入りのWebサイトをStylusでデザインしましょう。Stylusは、アクティブに開発されているコミュニティ主導型のユーザースタイル管理ツールです。有名なオンラインリポジトリからカスタムテーマを簡単にインストールしたり、あなたの個人用のCSSスタイルシートを作成...

addons.mozilla.org

拡張機能をインストールした状態で、管理画面に入ります。

ツールバー上の「S」アイコンをクリックするとこのようなウインドウが出ますので、「次のスタイルを書く：（URL）」をクリックします。

そうしますと、CSS編集画面に入ります。

私は以下のコードを記入することで、だいたいの部分はメイリオに変換出来ています。

.editor-post-title__block .editor-post-title__input,.editor-post-title__block:not(.is-focus-mode).is-selected, .editor-post-title__input,.editor-styles-wrapper,.main p.wp-block-paragraph,h2,h3,h4,h5{
   font-family: "メイリオ", "Meiryo", Verdana;
}

「だいたい」という理由は、リストボックスだったり、タブボックスだったりといった、またClassが違うものまでは対応しきれていないからです。

まあ、一部くらいなら違ってもいいかな…という妥協の気持ちもあります。調べ続けて時間だけ過ぎるというのも辛いですしね。

編集画面下部はこのようにしておきます（アドレスはご自身のものを入れてくださいね）。記事編集ページで作ってしまうと、その記事のみにCSSが適用されてしまうので、こう設定しておくことで全ての記事作成・編集画面でこのCSSが適用されるようになります。

とりあえず！な感じではあるものの、「ビジュアルエディターのフォントが気に入らなくてやる気が…」という方は、一度試してみてはいかがでしょうか。

正直、いちいちCSSをいじるよりはこっちの方がラクだと思います！
複数サイトをお持ちの場合でも適用範囲を変えたり、コピペするだけでOK！

その中には「サイトの顔」として重要な部分も！それが「ホームイメージ」です。

ホームイメージとは、TwitterやFacebookなどでサイトが共有された時に出てくるイメージのことで、当ブログならこうなってます。

個別記事へのリンクであればその記事のアイキャッチが表示されるのですが、サイトアドレスをシェアする・される場合にも独自の画像があった方が目を惹きますよね。

この記事ではそんな「ホームイメージ」の設定方法についてまとめていきます！

設定していないとデフォルト画像が表示される

「ホームイメージ」を設定していないとCocoonのデフォルト画像になります。

これはこれで素敵なんですけど、自分のサイトってよりはCocoonのサイトになっちゃってますよね！

アピールのためにも、極端な話白地に黒で文字を書いただけでも！オリジナルの方が絶対にいいと思います。

個人的に文字だけでオシャレに作られた画像は憧れます…！

ホームイメージの画像サイズは？

というわけで、ホームイメージを作りましょう。
素材を使ってもいいですし、ド定番のCanvaを使ってうまいことやるのもいいかと思います。

ここで気になるのが画像サイズ。

Cocoonのデフォルト画像のサイズは「880×660ピクセル」となっていますので、公式と合わせるならこのサイズで。

ただ、Facebookのアイキャッチ画像でベストなのは「1200×628ピクセル」なので、Facebookでのシェアを狙いたい！という方や、Facebookでブログ記事を紹介することが多い方はこちらのサイズで作るのもいいかと思います。

私はあんまり大きい画像が好きではないので、小さめの「650×400ピクセル」で作っています。別ブログのアイキャッチ画像サイズをそのまま流用しました。

先程のツイッター画像と比べていただくとわかるんですけど、上下が切れてるのできちんと全て表示させたい場合、このサイズはおすすめしません。

切れることを前提に真ん中に情報をつめこめばいいだけなので、個人的にはそう気にすることでもないかなとは思っていますが…

Cocoonで設定しよう

画像が出来たら、あとはCocoon内で設定するだけ！

場所は「Cocoon設定＞OGP」です。下の画像で黄色くなっているところですね。

OGPを選択したら、そのまま画面下までスクロールしてもらうと、ホームイメージ設定部分がありますので、用意した画像をアップロードすればOK！

私の場合すでに自分の画像になっちゃってますが、「選択」ボタンを押してもらって、メディアライブラリから（必要があればアップロードして）選べば完了します。

確認は「Card Validator」がおすすめ

どのように表示されるか確認したい場合は「Card Validator」がおすすめです。

Twitterカードの表示確認が可能な上に、メタデータも更新してくれるのでホームイメージ画像の反映が早くなります。

Twitterにログイン

Twitterへようこそ。ログインして通知をチェックしたり、会話に参加したり、フォローしているユーザーの最近のツイートを見てみましょう。

cards-dev.twitter.com

実際にツイートして確かめる必要がないので重宝してます！

簡単に個性が出せる部分！ぜひ設定を

ホームイメージは作業自体もそんなに大変ではなく、簡単に個性が出せる部分だと思います。

絵がかけないという方でも、タイポグラフィ（文字デザイン）だけでオシャレに作成できますし、先程のCanvaでいいテンプレートを見つけたらそれを流用するだけでもいいと思います。

1回変えたらもう変更不可！というわけでもないですし、季節ごとに変えてもいいかもしれません。（あまり印象が違いすぎると、同じサイトだと思われない可能性はありますが…）

せっかくの自分の城（サイト）なのですから、絶対に設定する方がお得だと思います。

「まだやってなかったな！」という方はぜひ試してみてくださいね。