WordPress embed ショートコードで埋め込んだ YouTube 動画のレスポンシブ対応
やりたいこと
- iframeタグの前後に任意のdivを挿入し、CSSでレスポンシブ対応させる
- アスペクト比は16:9のみ対応とする
- 動画の埋め込みには embed ショートコードを使用する
- post_contentにあたる部分を置換するのではなく、embed機能のなにがしかにフックして書き換たい
- 個別投稿かつYouTube動画の埋め込みにだけ効かせる
CSSタグのついた記事一覧
:before と :after の疑似要素を使ってCSSでリボン風見出しを作る方法
Sublime Text 3 に SublimeLinter を導入してHTML5・CSS・JavaScriptのリアルタイム構文チェックをする
SublimeLinterとは
SublimeLinter
http://www.sublimelinter.com/
SublimeText上でコードの構文チェックをリアルタイムで行えるプラグイン
手順
- 「SublimeLinter」本体をインストール
- 言語ごとに必要なプラグインを別途インストール
SublimeText に CSScomb を導入する
CSScombとは
CSScomb is a coding style formatter for CSS.
You can easily write your own configuration to make your stylesheets beautiful and consistent.
GitHub – csscomb/sublime-csscomb: Sublime plugin for CSScomb—CSS coding style formatter
スタイルシートを指定した設定で一括整形できるパッケージ
事前準備
- 動かすにはnode.jsが必要になるので、ダウンロードしてインストールする。
- インストール完了時に以下の案内がでた。
This package has installed:
- Node.js v8.12.0 to /usr/local/bin/node
- npm v6.4.1 to /usr/local/bin/npm
Make sure that /usr/local/bin is in your $PATH.
整列時の設定を変更する
- Preferences > Package Settings > CSScomb > Settings – Default を開き、中身をコピー
- Preferences > Package Settings > CSScomb > Settings – User を開き、ペーストした内容を書き換えて保存