WordPressで画像の読み込みを高速化する方法

WordPressで使用する画像の表示スピードを高速化する方法を解説します。

サイズの小さい画像を使う

大きなサイズの画像は(えてして)画像のデータサイズも大きく、ページの表示スピードを遅くします。

文字が書かれている画像など、画質が重要な画像ならばともかく、サムネイルなど、さほど画質が重要でない画像はサイズを小さくしましょう。

パソコンによっては4Kの画像なども表示できますが、ウェブサイトに4K(3840×2160px)やフルHD(1920×1080px)の画像は大きすぎるのではないかと思います。

ではどのサイズが最適かというと、一概には言えませんが、自分が納得できる範囲でできる限り小さいサイズの画像を使いましょう。

デジカメやスマートフォンで撮った画像をそのまま使うと、非常に大きなサイズになってしまうので気をつけてください。

画像は圧縮して使う

画像はそのままアップロードするのではなく、事前に圧縮してからアップロードしましょう。

筆者は「Ccompressor.io」というウェブ上で使えるツールを利用しています。

また、WordPressにはアップロードされた画像を自動で圧縮してくれるプラグインもあります。筆者は「EWWW Image Optimizer」を使用しています。

画像の遅延読み込み(Lazy-loading)

WordPressに「画像の遅延読み込み(Lazy-loading)」を設定しましょう。

画像の遅延読み込みを設定することで、サイトやブログを読み込む際、サイトの下部などページをスクロールしなければ表示できない画像の読み込みを遅らせる(後回しにする)ことで、サイトの高速化が期待できます。

画像の遅延読み込み機能はWordPress 5.5から標準で搭載されています。

WordPress 5.5から、画像遅延読み込みが標準機能になりました。プラグインを使わなくても遅延読み込みさせることができます。

出典:画像の遅延読み込みが標準機能に【WordPress5.5の新機能】 | WordPress超初心者講座

なので、最新のWordPressを使っている方は何もしなくてもOKです。

画像をCDNで配信する

画像をCDNを使って配信しましょう。

ブログの画像などを専用のサーバーにキャッシュし、WordPressを設置しているサーバーの負荷を減らすことで高速化が期待できます。

画像をCDN経由にすると、ブログによっては大幅な高速化が期待できます。

オススメのCDN

CDNサービスは「Clodflare」やWordPressのプラグインである「Jetpack」が有名です。どちらも無料で使用できます。

筆者はJetpackの画像CDNを使っています。管理画面から有効化するだけで難しい設定が不要で利用できるのでオススメです。

高速化の効果もかなりありました。

まとめ

画像はデータ量が特に重いので、画像のサイズを小さくしたり、圧縮したりすることは、WordPressの高速化にとても効果的です。

初心者の方でも取り組みやすいことが多いので、ぜひ試してみてください。

マークダウンとは?書き方の一覧(チートシート)

マークダウン(Markdown)はテキストをHTMLに変換するための記法です。

「マークダウン記法」と呼ぶこともあります。

マークダウンの例

マークダウンはブログなどの文章をHTMLで書きたいときに知っていると便利です。

例えば、以下のような文章を書くとします。

<h1>こんにちは</h1>

<p>元気ですか?</p>

<ul>
<li>りんご</li>
<li>みかん</li>
<li>ぶどう</li>
</ul>

これを全て入力するのは面倒です。

しかし、マークダウンなら以下のように入力するだけで同じ意味になります(正確には対応しているサービスを使うことで、上記のHTMLに変換されます)。

#こんにちは
元気ですか?

- りんご
- みかん
- ぶどう

マークダウンに対応しているサービスを使えばHTMLの文書も非常にカンタンに書くことができるので便利です。

マークダウンが使えるサービス

マークダウンは有名なサービスだとWordPressやTumblr、Qiita、GitHubなどで使用することができます。

ただし、これらの中には完全に対応していないサービスもあります(WordPressなど)。

マークダウンの基本情報

マークダウンで作ったファイルの拡張子は「.md」「.markdown」です。

公式サイトは「Daring Fireball: Markdown」になります。(英語)

また、以下のページで実際にマークダウンをHTMLに変換し、プレビューすることができます。

Daring Fireball: Markdown Web Dingus

(マークダウンを入力したら「Convert」をクリック)

マークダウンの書き方のまとめ(チートシート)です。

段落を表す方法(pタグ)

マークダウンで段落を表す場合は、空行を入れます。

以下のように1行空ければOKです。

こんにちは。こんにちは。こんにちは。こんにちは。

さようなら。さようなら。さようなら。さようなら。

HTMLに変換すると以下のようになります。

<p>こんにちは。こんにちは。こんにちは。こんにちは。</p>

<p>さようなら。さようなら。さようなら。さようなら。</p>

それぞれの行がpタグで囲まれていて、段落が変わったことがわかると思います。

改行する方法(brタグ)

マークダウンではどれだけ改行しても、最終的な結果(HTMLに変換した結果)では無視されます。

改行したい場合は、行末に半角スペースを2つ挿入しましょう。

こんにちは  
こんにちは

わかりづらいですが、最初の「こんにちは」の後ろに半角のスペースが2つ入っています。これをHTMLに変換すると以下のようになります。

<p>こんにちは <br />
こんにちは</p>

改行を表すbrタグ<br />が挿入されているのがわかると思います。

また、2行に渡っていますが、1組のpタグで囲まれており、1つの段落であることがわかるかと思います。

強調(斜体・emタグ)

文字を斜体(イタリック)にするには斜体にしたい文字をアスタリスク「*」かアンダースコア「_」で挟めばOKです。

*斜体*
_斜体_

これをHTMLに変換すると以下の様になります。

<em>斜体</em>

文字を斜体にするemタグ<em>に変わったのがわかると思います。

強い強調(太字・strongタグ)

文字を強い強調(太字)にする方法もあります。

太字にしたい文字を2つのアスタリスク「*」かアンダースコア「_」で挟めばOKです。ちなみに<b>タグではなく<strong>になります。

**強調**
__強調__

こちらをHTMLに変換すると以下の様になります。

<strong>強調</strong>

strongタグ<strong>で囲まれているのがわかりますね。

引用(blockquotタグ)

引用を表すためには、文の先頭に半角で「>」を入れればOKです。空行を入れなければ、複数行でも問題ありません。

>こんにちは。こんにちは。こんにちは。こんにちは。

マークダウンをHTMLに変換すると、以下のようになります。

<blockquote>
  <p>こんにちは。こんにちは。こんにちは。こんにちは。</p>
</blockquote>

空行を入れたい場合は、全ての行に「>」をつければOKです。

>テキストテキストテキストテキストテキスト

>テキストテキストテキストテキスト
<blockquote>
<p>テキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキスト</p>
</blockquote>

二重引用

「>」の記号を複数つけることで何重にも引用をすることができます(引用した文章内に引用文がある状態)。

>テキストテキストテキストテキスト
>>テキストテキストテキストテキスト
>>>テキストテキストテキストテキスト
>>>>テキストテキストテキストテキスト
<blockquote>
  <p>テキストテキストテキストテキスト</p>

<blockquote>
  <p>テキストテキストテキストテキスト</p>

<blockquote>
  <p>テキストテキストテキストテキスト</p>

<blockquote>
  <p>テキストテキストテキストテキスト</p>
</blockquote>
</blockquote>
</blockquote>
</blockquote>

順序なしのリスト(ulタグ)

マークダウンで順序なしのリストを書くにはハイフン「-」、「+」プラス、「*」アスタリスクを使います。

これらの記号を使って箇条書きに書くと、リストタグに変換されます。

- ハイフン
- ハイフン
- ハイフン

+ プラス
+ プラス
+ プラス

* アスタリスク
* アスタリスク
* アスタリスク

このように書きます。記号の後に半角スペースを必ず入れてください。

このように書いたマークダウンをHTMLに変換すると以下のようになります。

<ul>
<li>ハイフン</li>
<li>ハイフン</li>
<li>ハイフン</li>
</ul>

<ul>
<li>プラス</li>
<li>プラス</li>
<li>プラス</li>
</ul>

<ul>
<li>アスタリスク</li>
<li>アスタリスク</li>
<li>アスタリスク</li>
</ul>

リストの中に文章を入れる

また、リストの中に文章を入れることもできます。

文章の前後に空行を入れ、行頭に半角スペースを1つ入れればOKです。

- りんご
- みかん

 フルーツです。

- ぶどう

わかりにくいですが「フルーツです。」の行頭には半角スペースが1つ入っています。

これでリスト内の項目として字下げされたHTMLに変換できます。

<ul>
<li>りんご</li>
<li><p>みかん</p>

<p>フルーツです。</p></li>
<li><p>ぶどう</p></li>
</ul>

リストの中にリストを作る(入れ子)

リスト内にリストを作る(入れ子)こともできます。

半角スペースを1ついれて、字下げすればOKです。

- りんご
 - 青リンゴ
 - ブレイバーン
- みかん
- ぶどう

この様にマークダウンを書くと、「青リンゴ」と「ブレイバーン」が「りんご」内に入ったリストになります。

<ul>
<li>りんご
<ul><li>青リンゴ</li>
<li>ブレイバーン</li></ul></li>
<li>みかん</li>
<li>ぶどう</li>
</ul>

ちょっとわかりづらいかもしれませんが、以下の様になるということです。

  • りんご
    • 青リンゴ
    • ブレイバーン
  • みかん
  • ぶどう

ちなみに、階層構造は番号なしリストの中に番号付きリストを作ることもできます。

順序ありのリスト(番号付きリスト、olタグ)

マークダウンでは順序ありのリスト(行頭に数字が付いた箇条書き)も書くには、リストの最初に半角数字とピリオドを書けばOKです。

1. 番号
2. 番号
3. 番号

ピリオドの後には半角スペースを必ず入れてください。

これをHTMLに変換すると、以下のようになります。

<ol>
<li>番号</li>
<li>番号</li>
<li>番号</li>
</ol>

なお、数字は以下のように全て同じ数字を使たり、順番がめちゃくちゃでもOKです。

1. 番号
1. 番号
1. 番号
5. 番号

これでも問題なくHTMLに変換できます。

全て同じ数字でリストを作ると、リストに後から項目を足したり、順番を変える際にも番号を振り直さずに済むのでオススメです。

また、こちらも順序なしのリストと同様の方法で、リスト内に文章を入れたり、階層構造(入れ子)にすることができます。

コード(codeタグ)

プログラミング等のコードをシンタックスハイライトでインライン(文中)に記すには、コードをバッククオート(`)で囲めばOKです。

HTMLの例です。`<h1>Hello World</h1>`こんな感じ。
<p>HTMLの例です。<code>&lt;h1&gt;Hello World&lt;/h1&gt;</code>こんな感じ。</p>

また、複数行にわたるコードをシンタックスハイライト(codeタグで囲む)には、タブもしくは4つ以上の空白(半角スペース)を行頭におくか、3つのバッククオートで囲めばOKです。

    function x() {
      return x;
    }
```
function x() {
    return x;
}
```

これらをHTMLに変換すると、codeタグがpreタグで囲まれ、複数行のコードをシンタックスハイライトすることができます。

<pre><code>function x() {
  return x;
}
</code></pre>

画像(imgタグ)

画像を表示するには以下のように書きます。

![image](https://example.com/image.jpg)

![image](https://example.com/image.jpg "画像です。")

角括弧([])の中に書いたテキストがalt属性、ダブルクォーテーションで囲ったテキストの中身がtitle属性になります。

<p><img src="https://example.com/image.jpg" alt="image" title="" /></p>

<p><img src="https://example.com/image.jpg" alt="image" title="画像です。" /></p>

画像をリンクにする

画像を表示するマークアップをリンクを表示するマークアップと組み合わせれば、画像をリンクにすることができます。

[![image](https://example.com/image.jpg "画像です。")](https://example.com)
<p><a href="https://example.com"><img src="https://example.com/image.jpg" alt="image" title="画像です。" /></a></p>

水平線・区切り線(hrタグ)

1行の中に、3つ以上のアスタリスク(*)、ハイフン(-)、アンダースコア(_)だけを並べると水平線になります。

***
---
___
- - -

これらは全て<hr>/に変換されます。

<hr />

なお、ハイフン、アスタリスク、アンダースコアを並べる際は、間にスペースが入っていても構いません(表示は同じです)。

また、ハイフンで水平線を表す時は、その前のパラグラフ(段落)との間に空行を入れないと<h2>の見出しになってしまう場合があるので注意しましょう。

マークダウンの方言

マークダウンは使用するサービスやエディタによってローカルルール(方言)があるため、ここで記載した通りに動かない場合もあります。

この記事の通りに記述してもうまく表示されない場合は、サービスのローカルルールを確認してみてください。

パーマリンクとは?意味やSEOへの影響を解説

パーマリンクとはパーマネントリンク(Permanent Link)の略で、ウェブサイトやブログの各記事やページ毎に設定したURLのことです。

パーマリンクとは、ウェブサイトの各ページに対して個別に与えられているURLのことです。つまりURL自身のことになります。パーマネントリンク(Permanent Link)の略で、ページが増えても恒久的に変わることのないリンクであることから、固定リンクとも呼ばれます。

出典:パーマリンクとは?SEOへの影響や注意点について解説

パーマリンクの「パーマ」は「パーマネント」の略で「長持ち、半永久的」という意味です。髪の毛のパーマと同じですね。

意味どおり、URLが半永久的に変わらないため、パーマリンクと言います。

このパーマリンクを自分で設定できるものだと、URLを見ただけで記事の内容が分かる上、ブログサービスなどを引っ越しても記事のURLが変わらないのでとても便利です。

noteやライブドアブログなど、無料ブログの場合はパーマリンクを自由に設定できませんが、WordPressなどCMSであれば、自由にパーマリンクを設定できます。

最適なパーマリンク

WordPressなどを使用していて、自分でパーマリンクを設定できる場合にはどのような形にするのが良いのか?

基本的には、できる限りシンプルで分かりやすいパーマリンクを設定する事が大切です。

無意味な英数字や長く複雑なパーマリンクは避けるべきです。

また、ニュースサイトや日記ブログであれば日付を入れる(例:https://example.com/2023/0131/apple/)、複数人で展開するメディアであれば記者名を入れる(例:https://example.com/yamada/apple/)など、ウェブサイトに応じて工夫をする事も大切です。

決まった答えがある訳ではなく、ウェブサイトの種類や性質、機能や目的によって最適なパーマリンクの形は変わるという事です。

基本的にパーマリンクは一度決めたら後から変更するべきではありません。

しかし、何らかの理由でパーマリンクを変更する事になった場合は、リダイレクトを行い、過去のパーマリンクにアクセスしたユーザーが新しいURLの記事に移動できるように調整することが大切です。

パーマリンクを変更したままにしておくと、リンク切れを起こし、過去のパーマリンクを使ったリンクが機能しなくなってしまいます。

SEOへの影響

パーマリンクがSEO(検索順位)に影響を与えることは基本的にありません。

しかし、どんなパーマリンクでも良いという訳ではありません。

あまりに複雑なパーマリンクは検索エンジンがサイトを認識する際に支障が出る可能性があるため、SEOにおいて(間接的に)マイナスになる可能性もあります。

Googleはパーマリンクをシンプルに分かりやすいものにすることや、単語を区切る際はアンダーバー(_)ではなく、ハイフン(-)を使うことなどを推奨しています。

参考:Google における URL 構造のベスト プラクティス | Google 検索セントラル

参考

中国でディズニー映画「リメンバー・ミー」上映禁止、しかし検閲官が大感動して上映OKに

中国では国家新聞出版ラジオ映画テレビ総局(SAPPRFT)が定める規定により、幽霊が登場する映画の上映が原則禁止されている。しかし、厳格な検閲をスルリと通り抜けて、見事上映が決定した“幽霊”映画もある。ディズニー&ピクサーによる2017年の映画『リメンバー・ミー』だ。

(中略)

あることをきっかけに『リメンバー・ミー』の上映禁止が覆ったのだという。なんとSAPPRFTの検閲官たちが映画を鑑賞したところ、「その多くが映画の温かみとハッピーエンディングに感動してしまった」というのだ。検閲官たちは当局から定められたルールを破り、中国での上映にゴーサインを出したのだった。

出典:中国で『リメンバー・ミー』上映禁止、しかし検閲官が大感動して上映OKに(THE RIVER)

めっちゃ恣意的な検閲で草

Inoreader:メディアからクラウドストレージまで包括できる

Inoreaderは、コンテンツキュレーターの活発なコミュニティ、ディスカバリーモード、ユーザーが作成した購読バンドルなどを持つRSSリーダーです。

RSSフィードだけでなく、ブログ、ポッドキャスト、Twitter、Facebook、YouTube、メールマガジンなども一緒にチェックする事が可能です。 また、収集した情報は自身のGoogle DriveやEvernote、Pocket、Dropboxなどに保存する事ができます。

Inoreaderのデメリットは、無料版は機能が制限されることです。例えば、無料版では広告が表示され、登録できるフィードは150個まで。SNSはRSSフィードを利用して登録する事しかできません。

SmartNews:バランスのとれた視点を持つニュースアプリはアメリカでも大人気!

日本発のニュースアプリであるSmartNewsはアメリカでも大人気です。

SmartNewsは、毎日何百万もの記事を分析し、世界中のトップトレンドニュースを配信しています。

パーソナライズ(個人に最適化したニュース配信)よりも、読者が新しい情報を発見できる事を優先しています。そのため、特定の興味のある話題だけを追いたい方には少し不便かもしれません。

ですが、ニュースのタブ(カテゴリー)を自分で追加・削除する事ができるため、自分が興味ある分野のニュースだけを効率的に集めることが出来ます。

デザインはシンプルかつカラフル。余計な要素を削る事で、読みやすさを向上させ、回線速度が遅い方にとって便利な「SmartViewモード」を搭載しているのが特徴です。

SmartNewsは筆者も日本版を利用したことがありますが、自分の興味があるジャンルだけを選択する事ができるので、注目している分野の情報だけを収集することができて便利でした。

Reddit:活発な掲示板型のニュースサイト

Redditはニュース速報から可愛い猫の動画まであらゆるネタが流れてくる掲示板とSNSの要素が取り入れられたソーシャルニュースサイトです。

オリジナルのニュースは無く、ユーザーが自由にニュース記事へのリンクや文章、画像や動画などを投稿する仕組みになっています。

月間利用者数は4億3000万人X(Twitter)やLINEよりも多く、欧米では非常に高い人気を誇るウェブサイトです。基本的に英語圏で利用されていますが、誰でも投稿できるオープンなコミュニティなので、日本語の投稿もあります。

Redditは面白いニュースやミーム(ネット上の流行り)、コミュニティのチャット(コメント)を楽しみたい方にオススメです。一方で、中には過激な政治的主張をする人もいます。X(Twitter)や2ちゃんねる(現:5ちゃんねる)と同様、うそはうそであると見抜ける人でないとRedditをニュースサイトとして使うのは難しいでしょう。

無料で利用できますが、広告が非表示になるプレミアム版(月額5.99ドル)もあります。

FBIが公共のスマホ充電スポットを使わないよう警告!

FBIのデンバー支局は、悪意のある人物が公共の充電器を利用して携帯電話やデバイスにマルウェアを感染させる「ジュースジャッキング」について、X(Twitter)で消費者に警告しています

FBIは有効な対策として、消費者はショッピングモールや空港の公共充電器の使用を避け、独自のUSBケーブルと充電プラグを使用してコンセントから充電すべきだと述べています。

FBIやマスコミは煽り過ぎ?

エッチな自撮りで承認欲求満たしたい!!!

これめっちゃ分かる。

自分が美少女とかに生まれてたら絶対にエロ垢作って、”いいね”を集めて承認欲求満たしまくると思う。

実際、効果的らしいし。

これまでの研究により、女性が自分自身を性的対象化する動機として、自己性的化が女性に自信や喜び、自尊心を与えることが示されています。

出典:科学ニュースメディア!ナゾロジー