hi3103の備忘録

やりたいこと

• iframeタグの前後に任意のdivを挿入し、CSSでレスポンシブ対応させる
• アスペクト比は16:9のみ対応とする
• 動画の埋め込みには embed ショートコードを使用する
• post_contentにあたる部分を置換するのではなく、embed機能のなにがしかにフックして書き換たい
• 個別投稿かつYouTube動画の埋め込みにだけ効かせる

ざっくりした解説

今回は h1 要素を装飾する。左右に配置する砂時計型のブロック要素は、h1 の :before と :after で作る。

SublimeLinterとは

SublimeLinter

http://www.sublimelinter.com/

SublimeText上でコードの構文チェックをリアルタイムで行えるプラグイン

手順

1. 「SublimeLinter」本体をインストール
2. 言語ごとに必要なプラグインを別途インストール

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.

整列時の設定を変更する

1. Preferences > Package Settings > CSScomb > Settings – Default を開き、中身をコピー
2. Preferences > Package Settings > CSScomb > Settings – User を開き、ペーストした内容を書き換えて保存

Emmetとは

Emmet — the essential toolkit for web-developers

https://emmet.io/

HTMLとCSSの記述を効率化するテキストエディタ用のプラグイン

手順

1. Package Controllから「Emmet」をインストール
2. SublimeText自体のSetting – Userにほかの動作との衝突を回避する設定を記述
3. EmmetのSetting – Userに展開時の設定を記述