youtube動画の紹介に特化したWPテーマでサイトを作りました

2014年9月7日

WPのコーディング・構築・カスタマイズに関してはドがつく素人の岩垣ですが、
当ブログも色々いじっているうちに、WP色々試してみたい！となり

新しいサイトを一つ作ってみました。
作ったサイトは「虫の声」を紹介するサイト。
→虫の声

ひょんなことから、最近虫の音が素敵だなあと思うようになり、
寝る前に聞こえてくる虫の音を
「リリリ　高い音」とかでググってみたりして
youtubeの動画などで虫の名前を探し当てるのが日課です。

虫の音をまとめたサイトは多いのでそちらも利用しますが
鳴く虫を愛でるのはご年配が多いという噂は多分本当で、

残念ながら、ウェブサイトの技術が10年前…？というサイトが多い…。
音を再生する技術がOS、ブラウザ、アプリで限られてしまっていたり
iPhoneじゃ再生できーん！なんてことも多々ありました。

それならいっそ
youtubeにあがっている虫の音の動画を
まとめて紹介するサイトがあったら便利なのでは、
というのがサイト制作の発端です。

似たことをしている人が見つからなかったので
やってみようかなー
WPの練習・勉強の一環で
なおかつ虫の音にも詳しく慣れそうだしっていう一石二鳥を狙いました。

さて実際作るにあたっては
「動画　youtube テーマ　無料」なんかでググって
「fullby」というテーマにあたりました。

紹介していたサイト
今回の要件は
・トップページは投稿をカードのように紹介するグリッドデザイン
・トップページのグリッドにも動画のサムネイルを挿れたい。楽に
・投稿の際、動画を楽に挿れたい
このあたり。

これを全て叶えてくれて
なおかつそれ以上はあんまりごちゃごちゃしてないビギナー向けWPテーマとして、fullbyは良いです。

今回のように、本文よりも動画が中心の場合は、
なかなかおりこうさんなテーマです。

youtubeに限りますが、
動画の紹介は投稿欄の下にyoutube専用フォームがあり
そこにyoutubeのIDを入れるだけで動画を埋め込んでくれます。

ただし、フォームを見てもらえると分かる通り、
1投稿1動画です。
2動画挿れたい場合は本文に埋込みソースを入れていくのがいいでしょう。

でもレスポンシブ対応とか、投稿した動画がトップページでもサムネイルで見れたりするのは
このID欄を使った方法になりますので

1投稿1動画ルールでサイトを構築したい場合はぴったりだと思います。

言わずと知れた、
ブラウザや見る機器の幅によってサイトが柔軟な横幅でレイアウトしてくれるサイト、ということです。
仕事上も最近レスポンシブコーディング案件ばっかりなので
個人的にはレスポンシブ大好き。
幅でぬるぬるグリッドが動く感じは、気持ちいいですね笑

ちなみに、上記以外はあまりプラスアルファの機能は無いように思いますので
（最低限メニューとかヘッダーの設定はある）
詳しくは私が作ったサイト虫の声をみていただけると
最低限できていることが確認できると思います。

Posted by killamaru