【WP-Thumbnail-and-Text】WordPressの記事内で簡単に「サムネイル＋説明文」が書けるプラグインを作ったよ！

2月26日に公開した記事「【保存版】ブログでスマホのスクショや縦画像を載せる際に便利なCSSの書き方」を書いていて、「これプラグインにしたら便利かな～」なんて思ったのでシンプルにプラグインを作りました。

上記記事は以下からご覧頂けます。

【保存版】ブログでスマホのスクショや縦画像を載せる際に便利なCSSの書き方

ブログなどでスマホのスクショを載せるとどうしても縦長になってしまい見栄えが良くありません。 特にiPhone Xなんかは今までよりも更に縦長になってますね。 今回はこういった時に「私はCSSでこう書いてるよ〜」という内容の紹...

tips4life.me

2018.02.26

「WP-Speech-Balloon」の時と同様私が個人的にプラグイン化しただけなので、ご利用や改変などはご自由ですが何か不具合があっても一切責任は負いかねますのでその辺りはご了承下さいm(＿ ＿)m

ただ、バグなどがあった場合は可能な限り対応しますので、発見された際は記事最下部のコメント欄かTwitterアカウント「RA’s（らす）@T4L」まで御一報下さい。

※内容によっては対応不可だったり、かなりの時間が掛かる場合もあります。

「WP-Speech-Balloon」に関しては以下からご覧頂けます。

WP-Speech-Balloon

「WP-Speech-Balloon」の記事一覧です。

tips4life.me

［ 2019年02月13日追記 ］

「WP-Thumbnail-and-Text2.2」をリリース致しました。

プラグインファイルを以下のダウンロードページに統一致しました。これに伴い本ページのダウンロードリンクは解除致しました。

「WP-Thumbnail-and-Text」のダウンロード

本ページはWordpressのプラグイン「WP-Thumbnail-and-Text」のダウンロードページです。 「WP-Thumbnail-and-Textの使い方」、「WP-Thumbnail-and-Textのアップデ...

tips4life.me

2018.04.19

「WP-Thumbnail-and-Text」で簡単に記事内へ「サムネイル＋説明文」を挿入！

「WP-Thumbnail-and-Text」を使うと、画像を指定したサイズまで縮小して以下のように「サムネイル」のように見せる事が出来ます。

こんな感じで説明文を書けるよ～
フレームも一応何種類か選べるよ～☆
画像の位置も調整出来るよ～♪

指定したサイズをはみ出た部分は非表示になるので、スマホで撮った縦長写真なども綺麗に見せる事が出来ます。

PCなどの大きな画面（コンテンツ幅601px以上）では画像の右側に説明文（自由テキスト）を書くことが出来るので、画像を使った説明系の記事などにも使えます。

「HTMLやCSSは全然わからない」という方や、「わかるけど書くのが面倒」という方などは、自分でコーディングするよりもはるかに簡単に使えるプラグインです。

「WP-Thumbnail-and-Text」の各ショートコードの役割と一覧

「WP-Thumbnail-and-Text」の対応サムネイルサイズ

執筆現在「WP-Thumbnail-and-Text」が対応しているサムネイルのサイズ一覧です。

※「[wtt_size]」の右へ入れる値（青文字の部分）によってサムネイルのサイズを簡単に変更出来ます。

※【例】[wtt_size]200

「WP-Thumbnail-and-Text」の対応フレーム

執筆現在「WP-Thumbnail-and-Text」が対応しているサムネイルのフレーム一覧です。

※「[wtt_flame]」の右へ入れる値（青文字の部分）によってサムネイルのフレームを簡単に変更出来ます。

※【例】[wtt_flame]01

「WP-Thumbnail-and-Text」の画像位置対応表

執筆現在の画像位置対応表です。

※「[wtt_pos]」の右へ入れる値（青文字の部分）によってサムネイルに表示する画像の位置を調整できます。

※【例】[wtt_pos]top

※デフォルトで縦横中央表示になっていますので、そのままで良い場合は未入力でOKです。

「WP-Thumbnail-and-Text」のショートコードテンプレート

「WP-Speech-Balloon」と同様に、「WP-Thumbnail-and-Text」もショートコードのテンプレートがあります。

ここで言うショートコードテンプレートとは、そのまんまですが「ショートコードのセット」の事で、これらのショートコードが揃ってないと表示が崩れます。

ですので、お使いになる際はメモ帳などにショートコードテンプレートをコピペして保存しておくか、PCのユーザー辞書などにテンプレートを登録しておくと非常に便利で簡単に使えます。

正方形のショートコードテンプレート

以下のコードをコピペしてから各値を入力すると効率的に使えます。

[wtt_size][wtt_flame][wtt_link][wtt_pos][wtt_url][wtt_width][wtt_height][wtt_alt][wtt_text][wtt_End]

丸型のショートコードテンプレート

正方形テンプレートの「[wtt_flame]」の次に「[wtt_circle]」を入れるだけで丸型のサムネイルに出来ます。

[wtt_size][wtt_flame][wtt_circle][wtt_link][wtt_pos][wtt_url][wtt_width][wtt_height][wtt_alt][wtt_text][wtt_End]

最低限のショートコードテンプレート

以下は「最低限これだけは無いと動かない」という最低限の必須ショートコードテンプレートです。

個人的に全力で非推奨ですので、あくまで参考程度にご確認ください。

[wtt_size][wtt_flame][wtt_link][wtt_pos][wtt_url][wtt_text][wtt_End]

「WP-Thumbnail-and-Text」のインストール方法

まずは以下から「wp-thumbnail-and-text1.1.zip」をダウンロードしします。この時、お使いのPCのデスクトップなどわかりやすい場所にダウンロードするとわかりやすいです。

次に、Wordpressの管理画面から「プラグイン」 > 「新規追加」 > 「プラグインのアップロード」 > 「ファイルを選択」と進みます。

ファイルの選択画面になりましたら、先程ダウンロードした「wp-thumbnail-and-text1.1.zip」を選択して「開く」をクリック。

以下のように「wp-speech-balloon2.1.zip」が選択されていることを確認して、
今すぐインストールをクリック。

インストールが問題なく完了したらプラグインを有効化をクリックして完了です。

「WP-Thumbnail-and-Text」の使い方

「WP-Thumbnail-and-Text」は、前述した「ショートコードテンプレート」をコピペして、右側に各値を入力するだけで簡単に使えます。

ここでは「説明付きテンプレート」と「サンプルイメージとサンプルコード」を紹介します。

説明付きテンプレート

以下のテンプレートの青文字の部分を書き換えて使います。

ただ、画像位置の部分に関しては未入力で中央表示になります。

丸形のサムネイルを使う場合は、以下のように[wtt_circle]を入れてあげるだけで使えます。

いっぱい文字があって大変そうに見えるかもしれませんが、各ショートコードはわかりやすい名前になっているので特にわからないという事はないかなと思います。

サンプルイメージとサンプルコード

執筆現在、サムネイルのフレーム（枠）は6種類あり、それぞれ正方形と丸型のサムネイルを使うことが出来ます。

ここでは「200pxのサムネイル」だけ載せますので、もっと他のサイズなどのサンプルを見たい方は「サンプルページ」を作りましたので以下からご覧ください。

「WP-Thumbnail-and-Text」サンプルページ

このページはWordpressプラグイン「WP-Thumbnail-and-Text」を使ったサンプルページです。 実際に「WP-Thumbnail-and-Text」使ったサンプルを載せてますので、ご利用前にイメージの参考...

tips4life.me

2018.03.02

本項で紹介するサンプルコードの画像情報は以下として書いています。

「サムネイル：正方形」（白背景）

こんな感じで説明文を書けるよ～
フレームも一応何種類か選べるよ～☆
画像の位置も調整出来るよ～♪

サンプルコード

[wtt_size]200[wtt_flame]01[wtt_link]https://tips4life.me/sampleCat01.jpg[wtt_pos][wtt_url]https://tips4life.me/sampleCat01.jpg[wtt_width]800[wtt_height]1732[wtt_alt]サンプル画像01[wtt_text]こんな感じで説明文を書けるよ～<br>フレームも一応何種類か選べるよ～☆<br>画像の位置も調整出来るよ～♪[wtt_End]

「サムネイル：丸型」（ピンク背景）

こんな感じで説明文を書けるよ～
フレームも一応何種類か選べるよ～☆
画像の位置も調整出来るよ～♪

サンプルコード

[wtt_size]200[wtt_flame]01[wtt_circle][wtt_link]https://tips4life.me/sampleCat02.jpg[wtt_pos][wtt_url]https://tips4life.me/sampleCat02.jpg[wtt_width]800[wtt_height]1732[wtt_alt]サンプル画像02[wtt_text]こんな感じで説明文を書けるよ～<br>フレームも一応何種類か選べるよ～☆<br>画像の位置も調整出来るよ～♪[wtt_End]

「サムネイル：正方形」（白背景）

こんな感じで説明文を書けるよ～
フレームも一応何種類か選べるよ～☆
画像の位置も調整出来るよ～♪

サンプルコード

[wtt_size]200[wtt_flame]02[wtt_link]https://tips4life.me/sampleCat01.jpg[wtt_pos][wtt_url]https://tips4life.me/sampleCat01.jpg[wtt_width]800[wtt_height]1732[wtt_alt]サンプル画像01[wtt_text]こんな感じで説明文を書けるよ～<br>フレームも一応何種類か選べるよ～☆<br>画像の位置も調整出来るよ～♪[wtt_End]

「サムネイル：丸型」（ピンク背景）

こんな感じで説明文を書けるよ～
フレームも一応何種類か選べるよ～☆
画像の位置も調整出来るよ～♪

サンプルコード

[wtt_size]200[wtt_flame]02[wtt_circle][wtt_link]https://tips4life.me/sampleCat02.jpg[wtt_pos][wtt_url]https://tips4life.me/sampleCat02.jpg[wtt_width]800[wtt_height]1732[wtt_alt]サンプル画像02[wtt_text]こんな感じで説明文を書けるよ～<br>フレームも一応何種類か選べるよ～☆<br>画像の位置も調整出来るよ～♪[wtt_End]

「サムネイル：正方形」（白背景）

こんな感じで説明文を書けるよ～
フレームも一応何種類か選べるよ～☆
画像の位置も調整出来るよ～♪

サンプルコード

[wtt_size]200[wtt_flame]03[wtt_link]https://tips4life.me/sampleCat01.jpg[wtt_pos][wtt_url]https://tips4life.me/sampleCat01.jpg[wtt_width]800[wtt_height]1732[wtt_alt]サンプル画像01[wtt_text]こんな感じで説明文を書けるよ～<br>フレームも一応何種類か選べるよ～☆<br>画像の位置も調整出来るよ～♪[wtt_End]

「サムネイル：丸型」（ピンク背景）

こんな感じで説明文を書けるよ～
フレームも一応何種類か選べるよ～☆
画像の位置も調整出来るよ～♪

サンプルコード

[wtt_size]200[wtt_flame]03[wtt_circle][wtt_link]https://tips4life.me/sampleCat02.jpg[wtt_pos][wtt_url]https://tips4life.me/sampleCat02.jpg[wtt_width]800[wtt_height]1732[wtt_alt]サンプル画像02[wtt_text]こんな感じで説明文を書けるよ～<br>フレームも一応何種類か選べるよ～☆<br>画像の位置も調整出来るよ～♪[wtt_End]

「サムネイル：正方形」（白背景）

こんな感じで説明文を書けるよ～
フレームも一応何種類か選べるよ～☆
画像の位置も調整出来るよ～♪

サンプルコード

[wtt_size]200[wtt_flame]04[wtt_link]https://tips4life.me/sampleCat01.jpg[wtt_pos][wtt_url]https://tips4life.me/sampleCat01.jpg[wtt_width]800[wtt_height]1732[wtt_alt]サンプル画像01[wtt_text]こんな感じで説明文を書けるよ～<br>フレームも一応何種類か選べるよ～☆<br>画像の位置も調整出来るよ～♪[wtt_End]

「サムネイル：丸型」（ピンク背景）

こんな感じで説明文を書けるよ～
フレームも一応何種類か選べるよ～☆
画像の位置も調整出来るよ～♪

サンプルコード

[wtt_size]200[wtt_flame]04[wtt_circle][wtt_link]https://tips4life.me/sampleCat02.jpg[wtt_pos][wtt_url]https://tips4life.me/sampleCat02.jpg[wtt_width]800[wtt_height]1732[wtt_alt]サンプル画像02[wtt_text]こんな感じで説明文を書けるよ～<br>フレームも一応何種類か選べるよ～☆<br>画像の位置も調整出来るよ～♪[wtt_End]

「サムネイル：正方形」（白背景）

こんな感じで説明文を書けるよ～
フレームも一応何種類か選べるよ～☆
画像の位置も調整出来るよ～♪

サンプルコード

[wtt_size]200[wtt_flame]05[wtt_link]https://tips4life.me/sampleCat01.jpg[wtt_pos][wtt_url]https://tips4life.me/sampleCat01.jpg[wtt_width]800[wtt_height]1732[wtt_alt]サンプル画像01[wtt_text]こんな感じで説明文を書けるよ～<br>フレームも一応何種類か選べるよ～☆<br>画像の位置も調整出来るよ～♪[wtt_End]

「サムネイル：丸型」（ピンク背景）

こんな感じで説明文を書けるよ～
フレームも一応何種類か選べるよ～☆
画像の位置も調整出来るよ～♪

サンプルコード

[wtt_size]200[wtt_flame]05[wtt_circle][wtt_link]https://tips4life.me/sampleCat02.jpg[wtt_pos][wtt_url]https://tips4life.me/sampleCat02.jpg[wtt_width]800[wtt_height]1732[wtt_alt]サンプル画像02[wtt_text]こんな感じで説明文を書けるよ～<br>フレームも一応何種類か選べるよ～☆<br>画像の位置も調整出来るよ～♪[wtt_End]

「サムネイル：正方形」（白背景）

こんな感じで説明文を書けるよ～
フレームも一応何種類か選べるよ～☆
画像の位置も調整出来るよ～♪

サンプルコード

[wtt_size]200[wtt_flame]06[wtt_link]https://tips4life.me/sampleCat01.jpg[wtt_pos][wtt_url]https://tips4life.me/sampleCat01.jpg[wtt_width]800[wtt_height]1732[wtt_alt]サンプル画像01[wtt_text]こんな感じで説明文を書けるよ～<br>フレームも一応何種類か選べるよ～☆<br>画像の位置も調整出来るよ～♪[wtt_End]

「サムネイル：丸型」（ピンク背景）

こんな感じで説明文を書けるよ～
フレームも一応何種類か選べるよ～☆
画像の位置も調整出来るよ～♪

サンプルコード

[wtt_size]200[wtt_flame]06[wtt_circle][wtt_link]https://tips4life.me/sampleCat02.jpg[wtt_pos][wtt_url]https://tips4life.me/sampleCat02.jpg[wtt_width]800[wtt_height]1732[wtt_alt]サンプル画像02[wtt_text]こんな感じで説明文を書けるよ～<br>フレームも一応何種類か選べるよ～☆<br>画像の位置も調整出来るよ～♪[wtt_End]

使い方次第で以下のように「WP-Speech-Balloon」と組み合わせて使ったりも出来ます。

こんな感じになるのね(^^)♪

T4L管理人
らす

てかネコ可愛すぎ❤

T4L管理人
らす

また、本項では「正方形のフレームでは白背景の猫の画像」、「丸型のフレームではピンク背景のネコ画像」を使用していますが、特に画像の制限などはありません。

次項では「WP-Thumbnail-and-Text」で使う「ショートコード」について書きます。

「WP-Thumbnail-and-Text」について

本プラグインは当サイト管理人（私）が個人的に作ったものを他の人にも使えるように一般公開しているプラグインです。

なので自由にお使い頂いて結構ですし改良して頂いても結構ですが、本プラグインを使って起きたトラブルなどに関しては一切責任は負いかねます。

バグやご要望に関しては可能な限り対応させて頂こうとは思っておりますが、基本的に本業が終わった後の寝る前などにブログ運営をしているので、対応に恐ろしく時間が掛かる場合があります。

また、ご希望に添えない場合も多々あるかと思いますのでその点は何卒ご理解頂けますようお願い致します。

当プラグインの使用に関してはクレジット必須ではありませんが、使ってみて良かったらご紹介頂けると喜びます♪

バグの報告やご質問などありましたら「お問合わせ」か本記事下部にあるコメント欄、Twitterのアカウント「RA’s（らす）@T4L」からお願い致します。

WP-Thumbnail-and-TextのAMP対応について

WP-Thumbnail-and-Textは一応AMPに対応させています。

ですので当プラグインを有効にしても基本的にAMPエラーは出ないと思いますが、当然ですが絶対とは言い切れません。

ただ、個人的には当プラグインが原因でAMPエラーが出るという事はまず無いと思います。

検証済みのテーマ

本記事公開時点で検証済みのテーマに付いては以下になります。

※全て本記事公開時点での最新バージョン、プラグインなどは入れていない状態での検証となります。

WP-Thumbnail-and-Text自体、かなりシンプルなので上記以外でも基本的に問題ないとは思いますが、一応未検証なのでご質問など頂いても回答出来かねると思います。

まとめ

「WP-Thumbnail-and-Text」を使えば、必要な値をちょこちょこ入力するだけで簡単に「サムネイル＋説明文」を使えるので「HTMLやCSS初心者さん」などは便利に使って頂けるかなと思います。

前述しましたが、バグの報告やご質問などありましたら「お問合わせ」か本記事下部にあるコメント欄、Twitterのアカウント「RA’s（らす）@T4L」からお願い致します。