WordPress

Web

WordPress HTMLタグの入力を楽にする「Wp Zen Coding」プラグイン

WordPressブログの記事を欠く時、タグの入力とか面倒なので以前はエディタで書いて貼り付けていたこともありました。
しかし、最近はめんどうなのでWordPressで直接書くことが多くなりました。

ただ、そうするとHTMLタグやCSSの記述は面倒…

入力支援してくれるWordPressプラグインを本気で探さなきゃ、と思っていたのですが、ゴールデンウィークとやらなのでようやくとりかかりました。

ググってみたところ、AddQuicktagWp Zen Coding が目にとまりました。

Wp Zen Coding

AddQuicktagの方が簡単そうでしたが、汎用性が高い Wp Zen Coding をインストールしてみました。

Zen codingなるもの、そういえば、以前ちらっと見たことがあったようだったのだが…

こちらの

と、いうブログエントリを参考にして、まず、Web担の下記のエントリ

を読んで、ざっとZen Codingとはどんなものかお勉強。

HTMLタグやCSSの入力支援ツール。
テキストエディタのプラグインとして開発されたものが、いまではDreamWeaverやWordPressなどのプラグインも開発されているとのこと。

その上で 「Wp Zen Coding」 をインストール。
プラグインの新規追加で Wp Zen Coding で検索、インストールをクリックするだけで、簡単に終了。

h1タグを入力する場合は、
h1 と入力し 直後に [コマンド]キー+[E]キーを押します。

そうすることで、

<h1></h1>

というワンセットのタグが入力できます。

CSSのクラスが入ったタグを挿入する場合は、
h2.size-l などと入力し、 [Tab]キー([コマンド]キー+[E]キー) で、

<h2 class="size-l"></h2>

というタグが挿入されます。

先に文章を入力した場合は、範囲選択し、[コマンド]+[Shift]+[A] で入力のダイアログがでてくるので、タグを入力、です。

記法、ショートカットキーさえある程度覚えれば便利に使えそうです。

参考にさせてもらったサイト

ピックアップ記事

  1. 3.11復興とは?問うドキュメンタリー:メディアが語らない真実「被災地の水産加工…
  2. [Instagram] インスタグラムで勝手にレイバンサングラスの投稿がされたら…
  3. Amazonプライム・ビデオで今見ておくべき作品
  4. 災害時に役立つTwitterアカウント、情報サイト等まとめ
  5. [レビュー] Lenovo Ideapad 520 スタンダードな充実ノートパソ…

関連記事

  1. Facebook 日本語の姓と名が逆に表示される

    Facebook

    Facebook : 日本語の姓と名が逆に表示されてしまう

    こんにちは。けっこう飽きっぽい @OfficeTAKUです。…

  2. Greplin

    Facebook

    これはすごい!「Greplin」で、Facebookやクラウドサービスの自分の情報を一気に検索

    Facebookの投稿を検索する方法について紹介してきました。…

  3. WordPress

    WordPressサイトで突然HTTP500エラー

    こんにちは。@OfficeTAKUです。WordPress…

  4. BookLive!「ブラックジャックによろしく」
  5. Google Chrome で LEGO

    Google

    Google Chrome で レゴ(LEGO)ブロック楽しいです!

    こんにちは。レゴブロックより二つ年下 @OfficeTAKUです。…

  6. Facebook

    Facebook : お知らせのメールがうざい!という場合の対処法

    イベントに招待した方から、「イベントのウオールに誰かが投稿するとメール…

LINE公式アカウント:OfficeTAKU

OfficeTAKU Line公式アカウントバナー

最近の記事

  1. Lenovo Chromebook S330
  2. cheero USB-C PD Charger 18W mini
  3. 国立天文台市民天文学プロジェクトGALAXY CRUISE
  4. Instagram(インスタグラム)へMacのブラウザSafariから投稿する方法

人気の記事

  1. Lenovo Chromebook S330
  2. cheero USB-C PD Charger 18W mini
  3. 国立天文台市民天文学プロジェクトGALAXY CRUISE
  4. Instagram(インスタグラム)へMacのブラウザSafariから投稿する方法
  1. Mac ハングル入力

    Mac

    [Mac] Mac でハングルを入力する方法-macOS High Sierra…
  2. Photo by JESHOOTS.COM on Unsplash

    Excel

    [Excel] エクセルで「名前」を使ってみよう! Vol.5 数式に[名前]を…
  3. Photo by freddie marriage on Unsplash

    Microsoft Office Specialist

    [MOS] Microsoft Office Specialist 試験 自力合…
  4. ハードウェア

    [Amazon] 手軽に楽しめるスマートスピーカーAmazon Echo Ale…
  5. リボルテック ダンボー ミニ

    玩具

    リボルテック ダンボー ミニ (REVOLTECH DANBOARD mini…
PAGE TOP
Secured By miniOrange