フリーランスデザイナーが自由なライフスタイルを実現するための新しいブログの活用法や個性的がほとばしるブログにするためのPhotoshopを使ったデザインのチュートリアルなどを公開中~。

Youtube動画をヘッダーの背景に表示することができるWordPressテーマ【ORION】の感動的な美しさ

YoutubeやMP4動画をヘッダーの背景に表示することができる、Youtuber待望のWordpressテーマORION】は、映像を用いることで体験や感動をダイレクトに伝えることができます

ORION (tcd037)
orion000
販売元デザインプラスデモサイトを見る
価 格12,980円(税込)
形 動レスポンシブ対応
特 徴オウンドメディア

Youtube動画をヒーローヘッダーに設定する方法

WordPressの管理画面を開き、外観 》テーマオプション 》トップページ から【Youtubeの動画を背景に表示する】にチェックを入れて、表示させたい動画のURLを入力するだけでOK!

orion08

Youtube特有の再生マーク icon-youtube-play は表示されず、音が出る心配もありません

orion001

(MP4動画もアップロードして表示させたり、画像をスライダーで表示することもできます。※ここでは動画の動きを表現しきれないのでイメージ画像を表示しています。)


Youtube動画のクイックタグでレスポンシブ対応

TCDシリーズには、ブログ記事にYoutube動画を貼る際に便利な【Youtube動画】のクイックタグが用意されています

orion10

【Youtube動画】のクイックタグを2度クリックし、貼りたいYoutube動画のページから 共有 》埋め込みコード をコピーして、タグの間にペースト。

orion11

すると、自動的にリサイズしてくれるので、記事のカラムサイズピッタリに動画が収まります。

orion12

スマホで確認しても小さすぎたり、飛び出してしまうことなくジャストサイズで収まっています。毎回サイズ指定しなくても済むのでYoutuberには嬉しい機能ですね。

orion14


ORIONには、背景に動画を表示することができるトップページの他に、特別ページ固定ページブログ記事ページ、など用途別にページが用意されているので、多彩な表現を可能にします。

スライダーが美しい特別ページ

orion01


自由度の高いレイアウトの固定ページ

orion04


洗練されたブログ記事ページ

orion03


フォントのカラーやサイズの変更、ドロップシャドウの調整が可能

ORIONは各ページの【ヘッダー画像の上に表示するテキスト】のカラーやサイズの変更、ドロップシャドウの調整ができるので、テキストカラーに依存することなく自由な背景を設定することが可能です

(例えばテキストを白くした際、背景の白い部分と重なる部分も、適切なシャドウを設定することで”見えなくなるのを防ぐ”ことができます。)

orion01

白を基調とした画像を用意し、外観 》テーマオプション 》ブログ からヘッダー画像をアップロードします。

orion02

任意のキャッチフレーズ、サイズを設定後、フォントの色を222222(黒系)にし、ドロップシャドウのカラーをFFFFFF(白)に変更して設定を保存します。

orion03

このように、白いシャドウを設定することで黒のスーツ部分に重なったテキストも可視性を保つことができます

orion04

フォント(ゴシック・明朝)を選択することが可能

黒い背景画像を設定する際には、フォントの色をFFFFFF(白)にしてドロップシャドウは不要なのでそれぞれ0にしてみます。

orion05

外観 》テーマオプション 》基本設定 から、大見出しのフォントタイプのゴシック体にチェックを入れて設定を保存します

orion06

このように、フォントタイプも選択(ゴシック・明朝)できるので、ブログのコンセプトに合わせて変更してみましょう

orion07

マウスオーバーアクションの動きが心地よい

TCDテーマはヘッダーからフッターまで一切手抜きのない洗練されたデザインが魅力ですが、マウスオバーアクションの心地よい動きによって、視覚だけではない体感的なUX(ユーザーエクスペリエンス)も最大限に高めます

orion-g

画像のマウスオーバーアクション

orion07


Youtuberなどの表現者や個性的なセルフプロモーションブログのバリエーションイメージ
バリエーションイメージ.1
orion6

 

バリエーションイメージ.2
orion6

 

バリエーションイメージ.3
orion3

 

バリエーションイメージ.4
orion9

現在では、Youtubeなどの動画を配信することができるプラットフォームが整ったことによって、多くの個人が自由な表現をしながらその才能を開花させ、新しいライフスタイルを体現しています

そして、これまでの”読み物としてのブログ”では表現しきれなかった「体験や感動、楽しさや美しさ、そして衝撃を映像を用いて最大限に伝えたい!

そんなアーティスト達の願いを実現する、Youtuber待望のWordpressテーマの詳細はこちら ⇒【ORION

スリームデザイン無料の公式メールマガジン スリームデザインのメールマガジン

関連記事

Wordpress日本語テーマのまとめ
photoshop日本語チュートリアル
ブログラ

スリームデザインの出版書籍情報

photoshopの本

fotoliaデザインコンテスト大賞受賞作品の解説

tenコレクションデザインコンテスト

スリームデザインおすすめの書籍

本 本本 本

スリームデザインとソーシャルで繋がろう!

 
 
 

カテゴリー