Affinger5でヘッダー背景にYouTube動画ニュースを流すリンクサイトを制作

200degrees / Pixabay

測り知れないAffinger5テーマの可能性

WordPressの最新有料テーマ「Affenger5」を導入してから10日。数えきれないほどの新機能を少しづつウェブページづくりに取り入れてきましたが、その実力の高さに感心するばかりです。ビジュアルエディタのメニューだけでも、見出しの装飾、光るボタン、ランキング、ショートコードの生成、ブログカード、写真枠、会話吹き出し、各種のデザイン性の高いボックスなど、120以上の機能が組み込まれています。それらが、メニューの選択だけで実現できるのですから、うれしい限りです。

Affinger5の管理画面でも、「全体のデザイン」「トップページ」「ヘッダー」「おすすめ記事」「SNS」「SEO」「GOOGLE広告」などのページ別に、さまざまなカスタマイズができるようになっています。これに「カスタマイズ」画面を加えると、本当に覚えきれないほどの機能が用意されています。まだ、全体の10分の1くらいしか使いこなせていないと思います。

トップ画面のヘッダー背景にYouTubeを流してみた

なかでも、「これぞWeBテクノロジーの最先端」と感じさせるのが、ヘッダーの背景にYouTube動画を流せる機能です。これは、Affinger5の管理画面「トップページ」の「YouTube背景」をカスタマイズすることで簡単に実現できます。

ただし、ヘッダー画像をふつうの不透明にしておくと、YouTubeを表示させることはできません。Photoshopなどの画像処理ソフトで、背景が透明の画像をつくって、これを「カスタマイズ」メニューでヘッダー画像に指定する必要があります。

背景が透明の画像をつくるには、Photoshopがいちばん簡単かもしれません。新規ファイル作成のときに、カンバスカラーを「透明」に指定するだけでいいのです。あとは、必要に応じて、文字や装飾ロゴなどの画像を加えたPNGファイルを作ります。

私がきのう、「メディア・リンク」というニュースサイトとメディアへのリンクのページに作ったYouTube動画入りのヘッダーは、下のブログカードをクリックするとご覧になれます。

流したいYouTube動画は、Affinger5の管理画面で、YouTubeの動画ID（URLの末尾=以下の11桁）を差し替えるだけで変更できるので、最新の動画ニュースを背景で流すには最適です。音声を出すこともできますが、うるさいので、映像だけにしておき、音声入りの元動画を見たいときは、画面左の「PLAY NOW」ボタンを押すと、背景で上映中のYouTube動画を完全な形で再生することができます。至れり尽くせりですね。

このように、ヘッダーでYouTubeを流すことのできるWordPressテーマは、Affinger5だけではありません。「TCD」「DigiPress」「EMANON」「isotype」などが対応しているようです。詳しくは、次のサイトをごらんください。