シェアする

超簡単に表を作ることが出来るプラグイン「Jetpack Markdown」が簡単でイイ

シェアする

超簡単に表を作ることが出来るプラグイン「Jetpack Markdown」が簡単でイイ
超簡単に表を作ることが出来るプラグイン「Jetpack Markdown」が簡単でイイ00
「Jetpack Markdown」はその名の通り、WordPressでMarkdownが利用できるようになるプラグインです。

いつまでたってもHTMLの綴りをど忘れする私には待ち焦がれていたプラグインかもしれません。

スポンサーリンク

Markdownとは

早い話がHTMLの命令文をもっと短縮してサイトに表示できる命令文です。

WordPressにはデフォルトでボタン一つで簡単に文字の装飾ができたりする機能がありますが、用意されている装飾ボタン以外も利用できるので、使いこなせればより理知的な感じのサイトが簡単にできるようになれそうですよ!

さっそくインストール

「プラグイン」⇒「新規追加」で、「Jetpack Markdown」で検索すると「JP Markdown」というのがでてきます。

はじめ名前が微妙に違うので私も戸惑いましたが、この「JP Markdown」で大丈夫です。
超簡単に表を作ることが出来るプラグイン「Jetpack Markdown」が簡単でイイ01

Markdownで表作りに挑戦

インストールが完了したら有効化されましたので、さっそく表作りいってみます。

HTMLだと簡単な表でも

<table>
 <thead>
  <tr>
   <th>タイトル1</th>
   <th>タイトル2</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>列1行1</td>
   <td>列2行1</td>
  </tr>
 </tbody>
</table>

こんな感じでかなりの手間だったりするテーブル作りですが…

「Jetpack Markdown」を有効化したあとだと

◎書き方

|タイトル1|タイトル2|
|-|
|列1行1|列2行1|


◎結果

タイトル1 タイトル2
列1行1 列2行1

…と随分視覚的にも見やすく簡単に作成できました!

セル内の文字の色変更や太字などは、HTMLとの複合技でなんとかなるようです。

◎書き方

|タイトル1|タイトル2|
|-|
|<span style="color:#FF0000;">**列1行1**</span>|列2行1|
|列1行2|列2行2|


◎結果

タイトル1 タイトル2
列1行1 列2行1
列1行2 列2行2

色々試してみたんですが、どーもセル内の色変更はスタイルシートへの記述が必要そうです。うむむ。

Markdownの命令文紹介

他にも便利そうなMarkdown命令文をいくつかご紹介します。
注意点としてMarkdown命令文は全部半角表記で行って下さい。

 

hタグ(見出し)

#とスペースを利用します。
#の数がhタグの数字に比例します。
◎書き方

# h1
## h2
### h3
#### h4
##### h5


◎結果(h1~h3はサイトの表示上省略してます)

h4

h5

 

<strong>(強調・太字)

**で両端を挟みます。
◎書き方

**てすと**


◎結果
てすと

 

<a href=””></a>(リンク命令)

◎書き方
[]と()を使います。
別窓でリンク先を開く『target=”_blank”』は残念ながらできませんでした…
過去記事に飛びますのでバックスペースキーで戻ってきて下さいい~

[ここが表示される文字](http://wordpressteku.info/?p=117 "マウスを重ねると表示されるコメント")


◎結果
ここが表示される文字

 

リンク命令応用文

別の行にリンク先を管理することで、リンク先の変更で記事更新が頻繁な時に作業がぐっと楽になります。
◎書き方

[過去記事に飛びます・その1][1]
[過去記事に飛びます・その2][2]




[1]: (http://wordpressteku.info/?p=117)
[2]: (http://wordpressteku.info/?p=615)


◎結果
過去記事に飛びます・その1
過去記事に飛びます・その2

 

下の解説に飛ぶリンク

Wikipediaなどでみられる同じページ内リンク方法ですね。
◎書き方

右の数字をクリックで下の解説文に飛びます⇒[^1]
右の数字をクリックで下の解説文に飛びます⇒[^2]

[^1]: 右のボタンで上にお戻りください⇒
[^2]: 右のボタンで上にお戻りください⇒


◎結果
右の数字をクリックで下の解説文に飛びます⇒1
右の数字をクリックで下の解説文に飛びます⇒2

 

<DL>(定義リスト)

◎書き方

: 文字が少し後ろに下がる
◎結果
文字が少し後ろに下がる

 

<ul>(並列列挙リスト)

…なんですけどなぜか機能するときとしない時があって、原因が良く分かりませんでした…
◎書き方

* 左に黒い点が表示されるリスト


◎結果
* 左に黒い点が表示されるリスト

 

<pre>(サイトにHTMLを表示させたい時など)

◎書き方
~x4は両端ではなく上下で挟めてください。

~~~~
<strong>てすと</strong>
~~~~


◎結果

<strong>てすと</strong>

 

 

まとめ

HTMLで打ち込んだりすると大変な作業が短い文でできるのはありがたいですね。
覚えておくとサイトの表現が大いにパワーアップしそうです。


  1. 右のボタンで上にお戻りください⇒ 
  2. 右のボタンで上にお戻りください⇒ 
スポンサーリンク

シェアする

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)