前のめり.com
今日も前進をあきらめない、アウトドアな男たちのためのサイト
ブログを作る

超初心者(私)でもできた!WordPressにAddQuicktagが便利すぎ!

CSSとHTML。
私はそれが何の事かさっぱり分かりません。
そんな私でも、
こんな事!(太字にしました)こんな事!(赤文字にしました)
ましてや

こんな事!!こんな事!こんな事!こんな事!こんな事!こんな事!こんな事!こんな事!こんな事!こんな事!こんな事!こんな事!こんな事!こんな事!こんな事!こんな事!(よく使う枠線)

までなんとか使えるようになりました。本当最近までたくさんの方のブログやサイトを拝見していて、「この表現はどうやっているんだろうな?」とか、「このアイコンみたいなのはどこからひっぱってきているのかな?」とか、とにかく疑問に残る事ばかりでした。

サイト作成で良しとされているホームページ作成ソフト「WordPress」。「WordPress」という名前なのだから、文章を書くソフト「Word」と同じように使えるような兄弟ソフトなんでしょ?と思っていた位で、パソコン知識については全くもってド素人でした。

文字を赤くするのにはこういう「<font color=”red”>」文字列を入れないとダメな事や、
文字のサイズを変えるのには「<font size=”5″>」を入れなければいけない事なんてまったく無知。知りませんでした。Wordだと色変更やサイズ変更はあんなに簡単にできるのにっ!

そう、この赤い下線も文字列が使用されています。
とにかく分からない。チンプンカンプンという言葉がぴったりのレベルでした。

そんなパソコンアホな私をなんとかここまでしてくれたのは、【AddQuicktag】というWordPressプラグインでした。

スポンサーリンク
 



AddQuicktagとは?

文章を書いていると、ここは重要だから赤文字にしよう!とかサイズを大きくしよう!っていう時ありますよね?

ブログでよく使われているWordPessを使用している場合、文字の装飾をする時にはHTMLCSSという物を使います。「何それ食べられるの?」という感じですよね?私も最初はそうでした。

ざっくり言うと・・・

  • HTML・・・文字や背景の骨格の様なもの
  • CSS・・・HTMLに色などを加えて鮮やかにするもの

 

とてもざっくりとですが、色々装飾をするにはHTMLとCSSが必要という風に今は覚えておけば結構です。

赤い文字
を書きたい。
ワードやエクセルの場合、画面上の方に色を変えるアイコンがあって色を選べば赤い文字になってくれますが、WordPressは違います。

赤い文字
を書く場合には、

<font color=”red”>赤い文字</font>

という風に、赤下線の文字列を入れてはじめて赤い文字にする事ができます。

しかし、この文字列HTMLを毎回入れるのってすごく大変で、キーボードを打ち慣れていない私なんて、【<】とか【>】とか、日本語を打つ場合にはほぼ使わないのではないかという文字(暗号)を打つ必要が出てきてしまいとっても大変です。font-color-redと打てば終了じゃないんです。

<font color=”red”></font>と打つんです。【<】とか【>】とか【”】とか【”】とか・・・。
一体その暗号は今目の前に手を置いているキーボードのどこにあるのだ!!

そんなのとにかく大変!そもそもこの記号どこにあるのか分からない!

その悩みを解決してくれるのが【AddQuicktag】です。
【AddQuicktag】は、ボタン一つで様々な装飾を加える事ができるプラグインなんです。

AddQuicktagをインストールする

WordPressからAddQuicktagを検索する

さっそく【AddQuicktag】をインストールしましょう。

WordPressのテーマ編集画面から、【AddQuicktag】を検索します。

AddQuicktag インストール手順AddQuicktag インストール手順
手順説明

  1. プラグインをクリック
  2. 新規追加をクリック
  3. プラグイン選択画面になるので右上の検索窓に【AddQuicktag】と入力
  4. 【AddQuicktag】がヒットする
  5. インストール後、インストールボタンが有効ボタンになったら有効をクリック

これで【AddQuicktag】のインストールは完了です。

ショートコードをインポートする

AddQuicktagのショートコードAddQuicktagのショートコード

【AddQuicktag】はショートコードをインポートすればボタン一つで装飾が可能になります。一つ一つ入力するのもいいですが、コビトブログさんが、太っ腹にもほどがあるっていう位のインポートファイルを置いてくれているので、ぜひこちらからファイルをインポートしてみて下さい(๑╹ω╹๑ )
コビトブログさんへのリンクサイトからファイルをダウンロード後AddQuicktagにファイルをインポートすると上記の画面赤枠のボタンが追加されます。

check【最新版】「STORK」で使えるショートコードを、全部・サクッと、便利に登録!

コビトブログさんはとてもサイト構成が分かりやすく、私自身この装飾はどうすればできるのかな?っていう問題をほぼ解決に導いてくれたサイトさんです。とても参考になります。

ショートコードをインポートする手順

ショートコードファイルのインポートショートコードファイルのインポート

手順説明

  1. テーマ編集画面の設定をクリック
  2. AddQuicktagをクリック
  3. AddQuicktagの設定画面が開くので下までスクロールしてファイルを選択する
  4. 選択したファイルをインポートする

以上でAddQuicktagのセッティングは終了です。好みに応じて、枠線のショートコードを追加したりして、自分好みのAddQuicktagを作ってみて下さい。

[aside type=”warning”]注意
私が使用しているWordPressテーマは「ハミングバード」です。

上記で紹介しているコビトブログさんのショートコードは、WordPressテーマ「ストーク」
のためのショートコードになるため、残念ながらハミングバードでは★【ボックス】ラベル系一部対応できないショートコードがあります。

これらの★【ボックス】ラベル系ショートコードはハミングバードの場合現状使用できないため非表示に設定しても問題ありません。
[/aside]

checkAddQuicktagの使い方はこちらから
[kanren postid=”2665″]

スポンサーリンク