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プライム・ビデオで今見ておくべき作品
  2. [iTunes] Apple Music ライブラリ内の曲を再生したら全く別の曲…
  3. [レビュー] Lenovo Ideacentre 720 使えば手放したくなくな…
  4. プリンター ブラザー DCP-J973N 導入記。お手頃価格でセッティングも取り…
  5. [Amazon]【30日間無料体験】アマゾンで買い物する方はプライム会員が絶対お…

関連記事

  1. Mail

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

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

  2. 『.htaccess』によるログインページ(wp-login.php)へのアクセス制限
  3. Facebook

    Facebook カスタムリストの作成とリストへの友だちの追加

    前回は、リストとはなにか、リストの種類について書きました。今回は新…

  4. Web

    [iPhone] JR東日本アプリが便利!空いてるコインロッカーも一発で発見できる!

    グッドモーニング。ただいま八重洲地下街 @Office…

  5. WordPress

    Web

    WordPress : カテゴリによって異なるランキングバナーを表示させる

    ブログランキングサイトに登録したままでほったらかし状態です。「…

  6. WordPress

    [lolipop] WordPress に ログインしようとしたら 403 エラー

    こんにちは。@OfficeTAKUです。オリジナルドメイン…

最近の記事

  1. Kindle 日替わりセール 22
  2. Kindle 日替わりセール 21
  3. Kindle 日替わりセール 20
  4. Kindle 日替わりセール 19

人気の記事

  1. マンガ『スティーブズ』
  2. ネット詐欺専用セキュリティソフト「詐欺ウォール」
  3. Canva
  4. Photo by Taskin Ashiq on Unsplash
  1. iTunes

    [iTunes] Apple Music ライブラリ内の曲を再生したら全く別の曲…
  2. Scratch 2.0

    Web

    Scratch (スクラッチ)を ちょっとだけ勉強して、かんたんな作品『のっティ…
  3. 日記

    法定相続情報一覧図の作成や申出のポイントについてまとめ
  4. ブラザー DCP-J973N インクのセット

    ハードウェア

    プリンター ブラザー DCP-J973N 導入記。お手頃価格でセッティングも取り…
  5. Lenovo Ideapad 520

    ハードウェア

    [レビュー] Lenovo Ideapad 520 スタンダードな充実ノートパソ…
PAGE TOP