How to

AffingerのYouTubeサムネイルを高解像度化させる

AffingerのYouTubeサムネイルを高解像度化させる

このブログはWordpressの有料テーマAffinger(アフィンガー)というものを使っています。ブロガーが御用達で、とにかくいろいろなことができるとても素晴らしい有料テーマです。

そんなAffingerは常にアップデートがあるのですが、僕が望む機能の一つが今の所アップデートされないため、自分で改造することにしました。

今回改造するのは、AffingerのYouTubeサムネイルを改造するというものです。

同様の不満を抱えている人で、実践してみたい人は、function.phpをいじるので自己責任でよろしくおねがいします。

スポンサーリンク

AffingerのYouTubeを高解像度化させたい

通常、Wordpressでは、YouTubeのURLをそのまま乗せると、自動的にYouTubeの動画が埋め込まれます。他にもYouTubeが用意した「埋め込みコード」でYouTube動画をブログで紹介できたりするのですが、Affingerはナイスな感じで装着できます。

↑こんなかんじで、YouTubeサムネイルを表示させて、YouTubeの動画を乗せるれるんです。

PC表示だと、コレをタップするとポップアップでYouTubeが表示されると思います。

こんな感じですね。

これは、Affingerの機能「YouTubeをサムネイル表示で埋め込み」ってのと、Wordpressのプラグイン「Easy FancyBox」を組み合わせてそのようにできています。ちなみにコレの利点は、YouTubeの埋め込みで起きる読み込み時間の解消…つまりサイト表示の高速化が行えるということです。



WordPress表示的にメリットはあるものの「YouTubeをサムネイル表示で埋め込み」がちょっと不満だったんです。

現在はYouTubeのサムネイル表示は僕が思った解像度になってますが、実は、それより前はこんな画像だったんです。

うーん小さい。A

ffingerのデフォルトでは、この小さい画像が表示されます。実際にはこれを更に引き伸ばしたものなので非常に汚い画像に見えます。スマホ表示だとコレでもいいんでしょうけどね。

いちおう写真系ブログのつもりですので、できればサムネイルもしっかりきれいに見せたい。ってことでこの「YouTubeをサムネイル表示で埋め込み」のサムネイル表示を改造しました。

Affingerのfunction.phpを改造

※冒頭でも書きましたがfunction.phpを書き換えるため自己責任です もしやるならバックアップを 治せる自身がないならやらないのが無難

※子テーマが存在すること前提で書きます

まず、Affinger子テーマのfunction.phpにアクセスします。Wordpressからは、「外観」→「テーマエディタ」に入ります。

その後、右側にある「テーマファイル」という欄から「function.php」を選択。

その下部に以下を追加します。

if ( !function_exists( 'st_youtube_img' ) ) {
  function st_youtube_img( $youtube_id ) {

    extract(shortcode_atts(array(
      'id' => '',
    ), $youtube_id), EXTR_SKIP);

    $youtube_link = '<div class="st-youtube"><a href="//www.youtube.com/watch?v='.$id.'" target="_blank" rel="nofollow"><i class="fa fa-youtube-play"></i><img src="//img.youtube.com/vi/'.$id.'/maxresdefault.jpg" alt="" width="100%" height="auto" /></a></div>';

    return $youtube_link;
  }

  add_shortcode( 'youtube', 'st_youtube_img' );
}

こちらのソースコード内の赤文字になっている部分(maxresdefault)を書き換えてあげると思った解像度になります。Affingerのデフォルト(2020年1月公開バージョンの場合)では、YouTubeのサムネイルサイズは「mqdefault」となっているところを、上記コードをfunction.phpに書き込むことで「maxresdefault」サイズを取得します。

なおサイズについては以下のとおりです。

  • default(120×90)
  • mqdefault(320×180)
  • hqdefault(480×360)
  • sddefault(640×480)
  • maxresdefault(1280×720)

自分の思ったサイズを取得できるのでぜひとも改造してほしい。

スポンサーリンク

function.phpの改造は自己責任で

何度もいいますが、たとえ子テーマをいじるにしてもfunction.phpの改造は自己責任でお願いします。上記コードを追加して、何かしら不都合、最悪の場合はWordPressに入れない、サイトが表示されないなんてことになっても自己責任です。それの対処ができない人はいじらないほうが良いと思います。

ただ、今回紹介したものはすぐにでも対応できそうなので、Affinger側で何かしらYouTubeのサムネイルを選べるようにしてほしいなとは思います。

改訂 YouTube 成功の実践法則60

改訂 YouTube 成功の実践法則60

木村 博史
1,580円(07/20 22:24時点)
Amazonの情報を掲載しています

ちょっと宣伝

Momentを手に入れるならこのショップ!

読んでほしい

かっこいいひげ剃り探してないですか?

ドイツ老舗ブランド「MUHLE」のシェーバー

電動とかカートリッジ式の髭剃りに飽きたら読んでみて欲しいです。

LUTを20個ほど配ってます

とりあえずDavinci Resolveで使ってみて欲しいLUT配布中
LUTを20個ほど配布することにしました

LUTを20個ほど配布することにしました

BMPCC似合わせてますが全カメラでも適応可能
  • この記事を書いた人
「喫茶店の部屋」管理者@kissatenのアイコン

喫茶店

「全身性エリテマトーデス」と「両足大腿骨骨頭壊死」という病気をもつハイパー難病人で「フリーランス」しています。 伊勢志摩在住。HP製作や写真撮影、動画撮影なんかを生業にしています。 このブログで撮られている写真はだいたいEOS R5を使っています。(2021年頃より) サイトへのお問い合せやレビューのご依頼はこちらにメッセージをください。 あとYouTubeやってます。もし良かったらフォローしてあげて下さい。

-How to