【PR】

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

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

ORION (tcd037)

デモサイトを確認する

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テーマの詳細はこちら↓

デモサイトを確認する

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

ピックアップ記事

  1. 柔軟な思考を大切にしたいクリエイター必読の5冊。私の頭をグニャングニャンに柔らか…
  2. photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…
  3. フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…
  4. WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…
  5. WordPress日本語有料テーマの決定版っ!TCDシリーズのまとめ

関連記事

  1. コピーライティング

    《書籍レビュー》脳科学マーケティング100の心理技術がおもしろい

    《顧客の購買欲求を生み出す脳と心の科学》という副題を付けているだけあっ…

  2. キュレーション

    WordPress日本語テーマOpinion (tcd018)を使用した参考になるオーソリティな6サ…

    情報量の多いニュースサイトやポータルサイトなど汎用性が高くオーソリティ…

  3. webデザイン

    TENコレクションシーズン3:デザインコンテスト第3弾 Surf in the Cityで受賞を頂い…

    私は現在、企業や組織に属することなく個人が創造性を発揮することで社会的…

  4. ワードプレス

    「放置しちゃダメっ!」WordPressの不要なテーマを削除する方法

    Wordpressブログで新しいテーマをインストールすると、新しい部屋…

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

よく読まれている人気の記事

最近の記事

  1. 「いつも締め切りに追われてしまう」そんな人がミッションを成し…
  2. Photoshop CCのメニュー文字やツールバーが異常に小…
  3. 思わずクリックしてしまう画像でアクセスアップ!2番目に簡単な…

思考系のおもろい記事

ブログラ
  1. キュレーション

    必読!安易に起業ブームに乗っかる前に…絶対に読んでおきたい【おすすめのビジネス書…
  2. フォトショップ

    見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  3. キュレーション

    WordPress日本語有料テーマの決定版っ!TCDシリーズのまとめ
  4. SEO

    WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…
  5. 3分の話

    フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…
PAGE TOP