iframeで表示した別コンテンツを横並びに

YouTubeやTwitter、Amazonアフィリエイトなど、様々なコンテンツをワードプレスのブログに埋め込む時に、なかなか思い通りの配置に行かないのではないでしょうか。

今回は、WordPressの追加CSSを使用して、iframeによって埋め込んだCSSを横並びにする方法をご紹介したいと思います。

コード

CSSはこちら

 

続いてブログ側のHTMLはこちら

(iframe)の部分に埋め込みタグが入ります。

 

サンプル

YouTube埋め込みをサンプルに使いました。

 

少しごちゃっとしますが、こんな感じで大丈夫です。

解説

解説は1箇所だけ。

ここの「width:30%」は100%のうちの33%ということで、3つの要素を横に並べることができます。

例えばここを50%とかにすると、半分ずつで2つの要素が横並びになるようになります。

逆に25%にすると4つの要素を横並びにできたりします。

ちなみに、WordPressの編集画面では通常の縦並びのままだと思いますので、確認する際はプレビューにてご確認ください。

 

今回のブログ曲

今回のブログ曲はサンプルで出してしまったので、そちらをご覧ください!

カテゴリー: WordPress

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です