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. プリンター ブラザー DCP-J973N 導入記。お手頃価格でセッティングも取り…
  2. [Amazon]【30日間無料体験】アマゾンで買い物する方はプライム会員が絶対お…
  3. [iTunes] Apple Music ライブラリ内の曲を再生したら全く別の曲…
  4. Scratch (スクラッチ)を ちょっとだけ勉強して、かんたんな作品『のっティ…
  5. [レビュー] Lenovo Ideapad 520 スタンダードな充実ノートパソ…

関連記事

  1. Cooliris iPhone

    iOS

    InstagramとFacebookへ投稿した写真を閲覧できるビューワー「Cooliris」

    こんにちは。新米が届いて嬉しい@OfficeTAKUです。…

  2. Web

    読書に専念するならやはりKindle

    こんにちは。密林好き @OfficeTAKUです。…

  3. Mail

    ビジネスメール実態調査2010

    ビジネスメールについて詳しく解説されているサイトビジネスメールの教…

  4. Web

    2018年7月 の人気記事はこれだ!月間 アクセス数 ベスト10

    こんにちは。@OfficeTAKUです。2018年も8月に…

最近の記事

  1. Photo by Perfecto Capucine on Unsplash
  2. Photo by Chris Abney on Unsplash

人気の記事

  1. Photo by Perfecto Capucine on Unsplash
  2. Photo by Szűcs László on Unsplash
  3. Photo by Samuel Zeller on Unsplash
  1. タウンページ2018.9『北陸とらいあんぐる』

    電子書籍

    『北陸とらいあんぐる』が表紙に描かれたNTTタウンページが昨日届いたので無料で読…
  2. Word

    [Word]「均等割り付け」ボタンを押したらいきなり文字列が右端まで広がってしま…
  3. Security

    [mixi] ミクシィ乗っ取られ記。放置している方は至急確認を!オークリー サン…
  4. 日記

    サマータイムは亡霊か?何度も呼び戻されてくる愚策に対抗するために知っておくべきこ…
  5. 書籍

    集中して仕事を消化するためのメソッド、ポモドーロ・テクニックに使えるタイマーを探…
PAGE TOP