【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. 必読!安易に起業ブームに乗っかる前に…絶対に読んでおきたい【おすすめのビジネス書…
  3. photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…
  4. WordPress日本語有料テーマの決定版っ!TCDシリーズのまとめ
  5. 「特訓Photoshopプロのテクニック教えます!」という本のWEB版を『無料』…

関連記事

  1. 3分の話

    「なんの関係があるの?」ボーリングでスコア246叩き出し、ブログで314万PVを達成するための…

    「今月の数字、ペース割ってるけど大丈夫か?見込み客はあと何人?ちゃんと…

  2. 【PR】

    女性の美を追求したエステ・サロン・スパなどの店舗集客に最適化されたWordPressテーマ【LOTU…

    ホットペッパービューティーなどのポータルサイトでは広告料がかかるため、…

  3. ブログ

    WordPressで複数の画像を横並びにしたいならWPCanvasプラグインが便利すぎた!

    Wordpressでブログ記事を書いていると、複数の画像を横並びにして…

  4. 3分の話

    「ブログが続かないのはどーして・・?」挫折しない具体的なコツと目的、そして○○な都市伝説について

    ブログを続けてるけどぶっちゃけしんどい、これから始めようと思っているけ…

  5. 【PR】

    こんなWordPressテーマなんて初心者には絶対に使って欲しくないっ!TCDテーマ「VIEW」に一…

    投稿記事のアイキャッチ画像まで、スライドショーで読者をもてなすTCDテ…

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

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

最近の記事

  1. 「特訓Photoshopプロのテクニック教えます!」という本…
  2. 「いつも締め切りに追われてしまう」そんな人がミッションを成し…
  3. Photoshop CCのメニュー文字やツールバーが異常に小…

思考系のおもろい記事

ブログラ
  1. webデザイン

    「特訓Photoshopプロのテクニック教えます!」という本のWEB版を『無料』…
  2. コピーライティング

    「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…
  3. 3分の話

    柔軟な思考を大切にしたいクリエイター必読の5冊。私の頭をグニャングニャンに柔らか…
  4. キュレーション

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

    見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
PAGE TOP