記事を書いてるときに、自分の別記事のリンクを貼りたいときあるじゃないですか。文字だけだとなんか寂しいし、かといってわざわざバナーを作るのもめんどう……。
そんな人にちょうどいいのがブログカードなんですよね！
↑こんなやつ。
記事一覧の表示をミニマム化したようなリンクで、良いアクセントにもなります。
すぐさま私も使おう！ と張り切ったわけですが……これがまたうまく使えずかなり手こずることになりました。
ブログカードを貼ること自体は全然難しくないんです。むしろ簡単すぎるくらい。私の使ってるSimplicity2だと、
────────
URL
────────
↑のように前後を改行してリンクを貼りたいURLをそのまま記述するだけでブログカードが貼れます。
その通りにやってるんですが私の場合なぜか画像がかなり大きい！
原因がわからず「ブログカード 大きい」とかでいろいろ検索しまくってみたんですが、私とは違う原因のものしか見つけられませんでした。
本当に参ったけど、ブログカードを使いたい思いにも抗えず……。
諦めず必死に探った結果、無事原因と解決策を見つけることができました！
なぜ今回のような問題が発生したかの説明もしています。解決方法だけサクッと知りたい方は、もくじにある「100x100のリサイズが必要」に飛んでください。
| ▼もくじ |
|---|
リサイズの作成を無効化
WordPressのリサイズの作成を無効化
事の発端はWordPressのリサイズ作成にありました。
記事中に画像を挿入する際に、
こんな風にサイズを選べられるんですね。
1枚の画像をアップロードするだけで、フルサイズ(原寸)とは別にサムネイル、中、大サイズの画像を自動的に生成してくれるのです。
この自動生成というのは、画像を加工せずアップロードする人用なのです。
スマホやパソコンのスクリーンショットやデジカメで撮ったものなど、そのままだと結構サイズが大きいですよね。なので、大抵はトリミングしたり解像度を下げたり軽くしてからアップロードします。
wordpressはその手間を省いてくれるわけです。
逆を言えば、自分で画像を加工してアップロードする人には不要な機能なんです。
私は昔から画像は必ず編集してからアップロードしてるので、自動でリサイズを作成されることにメリットはありません。
例えば、上記の画像のフルサイズは500x889ですよね。これは私が自分で幅500になるように編集したわけですが、大サイズも同じサイズになってしまっています。
これはメディア設定で大サイズを「幅の上限500、高さの上限なし」に設定していたためです。幅501以上の画像をアップロードすればフルサイズと大サイズに違いは生まれるんですが、もともと幅500に編集してアップロードした場合は意味がないってことです。
最初は不慣れでよくわからなかったので、こうしておくといいよという情報を鵜呑みにして「サムネイル300x300、中400x400、大サイズ500x上限なし」を設定していました。大サイズがメインで使用するサイズとして。
ところが、自分で幅500に編集するものだから、いざ画像を挿入しようとしたときにフルサイズとまったく同じ大サイズの存在に疑問を感じたんです。そこから徐々に「そもそもサムネイル使わないし、中サイズも自分で幅400作るし……あれ、これ……いらなくね……？」となるに至りました。
まずは現時点で1枚の画像をアップロードしたときのFTPから見た状態をご覧ください。
多ッ！！
原寸のScreenshot.jpgをアップロードしただけで7枚も余分に画像が生成されていました！
500x889が大サイズ、225x400が中サイズ、300x300がサムネイルですね(少し多いんですが、これは後述するEWWW Image Optimizerというプラグインが関係しています)。
毎回こんなに作られるなんてたまったものじゃないですね……。メディア上ではリサイズされた画像本体が見えないのが厄介なところです。
使わない画像が自動的に増えてくのは無駄に容量を喰いますし、ゴミを抱えてるみたいで気分的にもスッキリしません。
ということで、WordPressのリサイズ作成を無効化します！
メディア設定で数値をすべて「0」にするだけ！
改めてScreenshot.jpgをアップロードしFTPで確認してみると……
WordPressでのリサイズが作成されなくなりました！
EWWW Image Optimizerでリサイズの作成を無効化
しかしまだ無駄なリサイズがありましたよね？
私もなにこれ状態だったんですが、原因はプラグインの「EWWW Image Optimizer」であると判明しました。
このプラグインを入れておくと画像を最適化してくれると評判が良かったので、ほいほいと導入だけしてたんですよねｗ 初めにちゃちゃっと設定だけしておけばあとはいじることないので気付かなかったんですが、よく見たらリサイズ設定の項目がありました。
リサイズ設定の下の方にこんなチェックボックスがあります。作成したくないリサイズにチェックを入れれば作成されなくなります。
thumbnail - 0x0
medium - 0x0
large - 0x0
上記3つはWordPressのメディア設定にあるものと同じです。メディア設定ですでに作成無効にしてるので数値が「0」になってますね。こちらで改めてチェックする必要はありません。
medium_large - 768x9999
これがなんなのかいまいち分からないんですよねー。まぁ、いらないことに変わりはないのでチェックを入れておきます。
thumbn100
thumbn150
thumbn320
thumbn320_raw
その下にある4つのサイズ。さきほど残っていた4つのリサイズとサイズも同じなので、犯人はこやつらでしょう。4つともチェックを入れます。
変更を保存するのを忘れずに。
改めてScreenshot.jpgをアップロードしFTPで確認してみると……
EWWW Image Optimizerでのリサイズが作成されなくなりました！
だいぶスッキリしました。これで不要な画像とはおさらばです！
ブログカードがおかしい！
ある日、ブログカードを使おうと思い至りリンクを貼ってみました。すると、
なんじゃこりゃ(´･ω･`)
上の画像が記事に直接貼ってる画像で、下の枠に囲まれてるのがブログカードです。画像のサイズがほぼ一緒やないか！
小さい画像ならこれはこれでありな気もしますが、ブログカードに使われる画像ってアイキャッチ画像が使われてるんですよね。なのでドデカい画像を使ったりもするわけですよ。
ブログカードを使うたびにそんな大きな画像がデーンとあると、リンクを伝えたいのか画像を見せたいのかあやふやで本末転倒です。あと単純に邪魔ですし。
この解決策がなかなか見つからなくて苦労しました＿( _´ω`)_ﾍﾟｼｮ
100x100のリサイズが必要
調べたところ、どうやらsimplicity2ではブログカードに100x100のリサイズを使ってると判明しました。アイキャッチとか勝手に縮小してくれてるのであんな感じになると思ってたら違うんですね……。
つまりは、
リサイズの作成をすべて無効化したことで、私のブログ上には100x100の画像が存在しない。
↓
ブログカードが100x100の画像を使えない。
↓
代わりなのか、ブログカードがアイキャッチ画像をほぼフルサイズで表示する。
↓
画像がやたらとでかいブログカードのできあがり。
ということでした。
ブログカード「使いたきゃ100x100の画像を用意しろよ」
仰せのままに～！
ﾋﾞｭｰﾝ ε=ε=ε=ε┏│´･ω･`│┛
EWWW Image Optimizerのリサイズ設定にて、赤枠の部分のチェックを外します。
変更を保存するのを忘れずに。
これでフルサイズに加えて100x100のリサイズのみ生成されるようになりました。
ブログカードが正常に表示されました！ そう！ こう表示したかったの！
注意点
100x100のリサイズ作成を無効にしていた間、記事に差し込んだ画像には当然ながら100x100の画像はありません。
ので、当該記事へのブログカードを貼ると相変わらず大きな画像で表示されます。それを修正するにはアイキャッチ画像をアップロードし直す必要があります。
私はまだ数記事しかなかったので全部修正しましたが、めんどうな場合はブログカードを貼るときに都度修正ってだけでいいかもしれません。関係あるのはリンクを貼る記事だけですからね。
それから今後はすべての画像に100x100のリサイズが作成されてしまうわけですが、どうするかは好みの問題ですね。
①不要な画像は排除派
アイキャッチ画像をアップロードするときだけ100x100のチェックを外し、それ以外のときはチェックを入れてアップロード。
メリット
不要な画像は一切溜まっていかない。
FTPで見たときもフォルダ内がスッキリ。
デメリット
すごく手間。
②100x100のチェックは外したまま、FTPで余分を削除派
基本的にアップロードした画像すべてに100x100が生成される。その都度or溜まってきたらFTPでアイキャッチ画像以外の100x100をまとめて削除。
メリット
逐一チェックのONOFFをしなくていい。
不要な画像は気が向いたときにまとめて削除するだけ。削除を怠らなければ不要な画像は一切溜まっていかない。
デメリット
100x100を削除した画像は、メディアでリスト表示にしたときの画像が見えなくなる。クリックすれば画像は見れるし、グリッド表示なら問題なく見える。使用にも問題はなく、ただリスト表示上だけ不便になる。
③100x100のチェックをはずしたまま放置。
メリット
超楽。
デメリット
不要な画像は溜まる一方。
私は①と③で揺らいでます(´д`;)
最初は②だったんですけどね、ある日100x100を消した画像だけリスト表示上で見えないと気付いてからはやめました。気になるので。
不要な画像が溜まってくのも気になるので綺麗に片付けたいんですが、①って本当めんどう……。
まぁ別に③でも100x100は容量的にかなり軽いので、フルサイズのオマケと思えば容量面では気にならないかもしれない。FTPで見たときに不要な画像が並んでるのを気にさえしなければ……。
途中でやっぱ消そうってなると②のデメリット発生しちゃいますし……悩ましいところ。
せや！ メディア上では100x100は見えへんからFTPに触らんかったらええんや！
……FTP好きにそれは無理(´･ω･`)
まとめ
ひとまずブログカード問題は解決してホッと一息。
欲を言えば、アイキャッチと同じく画像の表示サイズを変更したものが使えたら完璧でした。それなら画像としてはフルサイズ1つで済むのでスッキリしますし。
まぁこの辺あんまり詳しくないので出過ぎたことは言えませんｗ
どこかにアイキャッチ用だけ100x100も生成して、ほかはリサイズ無しみたいな便利な機能はないものですかねぇ(だいぶ局所的)。