fbpx
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. [Amazon]【30日間無料体験】アマゾンで買い物する方はプライム会員が絶対お…
  2. [PPT] あなたのPowerPointプレゼンテーションを劇的に変えてしまうで…
  3. [レビュー] Lenovo Ideacentre 720 使えば手放したくなくな…
  4. [レビュー] 『親子で学ぶ プログラミング超入門 ~Scratchでゲームを作ろ…
  5. Amazonプライム・ビデオで今見ておくべき作品

関連記事

  1. Web

    [WordPress] Jetpackでブログの更新情報をFacebook、Google+、Link…

    こんにちは。@OfficeTAKUです。ブログ記事の更新情…

  2. Facebook

    レビュー:高橋敦彦×またよしれい「Facebookコミュニティ成功の法則」

    こんにちは。歳をとっても新しもの好き@OfficeTAKUです。…

  3. Photo by Hannes Wolf on Unsplash
  4. Web

    スティーブ・ジョブズの言葉を噛みしめながらタイピング練習

    インターネットでタイピング練習ができるサイト e-typing さん…

  5. Photo by rawpixel on Unsplash
  6. Mail

    Windows Live Hotmail で テキスト形式のメールを作成する

    Windows Live Htomail の 拡張バージョンでメールを…

最近の記事

  1. Photo by Estée Janssens on Unsplash
  2. Photo by rawpixel on Unsplash
  3. Photo by rawpixel on Unsplash
  4. Photo by rawpixel on Unsplash

人気の記事

  1. Photo by Marvin Meyer on Unsplash
  2. Photo by freddie marriage on Unsplash
  3. MOS対策テキスト
  4. Photo by rawpixel on Unsplash
  5. Photo by JESHOOTS.COM on Unsplash
  1. Photo by rawpixel on Unsplash

    Security

    【注意!】 三井住友銀行や株式会社アドマックを騙るフィッシン詐欺スパムメールがま…
  2. Security

    [Instagram] インスタグラムで勝手にレイバンサングラスの投稿がされたら…
  3. Webサービス

    [Amazon] AlexaがUruさんを認識してくれないのでフィードバックを送…
  4. Security

    [iPhone] メッセージに「タカヒロ」Ta-KA-1208…からの迷惑メール…
  5. MOS対策テキスト

    Microsoft Office Specialist

    [MOS] Microsoft Office Specialist 試験 自力合…
PAGE TOP