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. 法定相続情報一覧図の作成や申出のポイントについてまとめ
  2. [Facebook] プレビュー機能の脆弱性でトークン流出!アカウントの乗っ取り…
  3. [PPT] あなたのPowerPointプレゼンテーションを劇的に変えてしまうで…
  4. [Amazon]【30日間無料体験】アマゾンで買い物する方はプライム会員が絶対お…
  5. Scratch (スクラッチ)を ちょっとだけ勉強して、かんたんな作品『のっティ…

関連記事

  1. http://facebook.com/kasagi

    Facebook

    Facebook:Change Your Profile スパムアプリにご注意!

    こんにちは。缶詰のスパムやコンビーフは大好きな@OfficeTAK…

  2. hulu
  3. Web

    第11回 Facebook勉強会 at AVOSA

    第11回 Facebook勉強会のご案内です。初心者の方、これ…

  4. Mail

    たまってるメールの大掃除!Hotmailのクリーンアップ機能が便利!

    メールはGmailに全て統合しています。フリーメールの老舗とも…

  5. Facebook

    Facebook : Facebookページのアップデートを逃さずキャッチする方法

    こんにちは。@OfficeTAKUです。自分のニュースフィ…

最近の記事

  1. Photo by Ray Hennessy on Unsplash
  2. Photo by rawpixel on Unsplash
  3. Photo by Burst on Unsplash
  4. Photo by rawpixel on Unsplash

人気の記事

  1. Photo by rawpixel on Unsplash
  2. Photo by Ben Hershey on Unsplash
  3. Lenovo Mirage Camera with Daydream
  4. Photo by JESHOOTS.COM on Unsplash
  1. Windows

    Surface Go予約開始 !でも、 搭載されているOS Windows 10…
  2. 電子書籍

    [Kindle] 翔泳社さんの毎月25日〜10日まで最大55%OFFセールを見逃…
  3. Microsoft PowerPoint MVP 河合浩之

    PowerPoint

    [PPT] あなたのPowerPointプレゼンテーションを劇的に変えてしまうで…
  4. Excel

    あなたはいくつ知っている? エクセルで連番を作成する7つの方法
  5. WordPress

    [WordPress] いまさらですが、ワードプレスで会話風吹き出しを簡単に作れ…
PAGE TOP