Warning: Cannot modify header information - headers already sent by (output started at /home/fukuro-press/www/fukuropress/index.php:4) in /home/fukuro-press/www/fukuropress/wp-content/plugins/all-in-one-seo-pack/app/Common/Meta/Robots.php on line 87

Warning: Cannot modify header information - headers already sent by (output started at /home/fukuro-press/www/fukuropress/index.php:4) in /home/fukuro-press/www/fukuropress/wp-includes/feed-rss2.php on line 8
HTMLタグ | Fukuro Press https://fukuro-press.com 「できない」を「デキル」に変えるWordPressブログ術 Thu, 14 Mar 2024 08:30:43 +0000 ja hourly 1 https://wordpress.org/?v=4.9.25 https://fukuro-press.com/wp-content/uploads/2018/08/favicon-1.png HTMLタグ | Fukuro Press https://fukuro-press.com 32 32 WordPress投稿内でコメントアウトが消える!?2つの対処法 https://fukuro-press.com/wp-ways-to-keep-html-comment/ https://fukuro-press.com/wp-ways-to-keep-html-comment/#respond Thu, 11 Jul 2019 08:30:40 +0000 https://fukuro-press.com/?p=12420 WordPressは本当に便利で使いやすいツールです。 でも所々「ここが不便だな~」っていう改善点はまだありますね。 その1つが投稿内のHT...

The post WordPress投稿内でコメントアウトが消える!?2つの対処法 first appeared on Fukuro Press.

]]>

WordPress投稿内でコメントアウトが消える!?初心者向け or 中上級者向けの2つの対処法

WordPressは本当に便利で使いやすいツールです。

でも所々「ここが不便だな~」っていう改善点はまだありますね。

その1つが投稿内のHTMLコメントが消える or できない問題

よさげなプラグインも探してみたんですが、全くありませんでした・・・

そこでプラグインを全く使わず、
WP投稿内のコメントアウトができない・消える問題への対処法を紹介します。

WP投稿内のコメントアウトがなぜかできない...

ここでいう コメントアウト は、HTML文章でのコメントアウトのことです。

例えばHTMLだと <!----> で囲めば、その内部を非表示にできます。

<!--
  コメントにしたい文章とか単語とか
  実際のページには表示されない
  ソースを見て初めて確認できる
-->

こんな感じ

コメントアウトは実際のページだと見えないけれど、
HTMLソースを開けば確認できます。(ちなみに Chrome なら Ctrl + U で開ける)

 

ただし、
WordPressの場合だとこのコメントアウトができないんです。

例えば投稿内で テキストエディタ を開き、コメントアウトを使ったとしましょう。

この下の行をコメントアウトしたい

<!-- コメントアウトしたい文章... -->

実際の投稿編集ページの様子

テキストエディタを開いて適当なHTMLコメントを打ってみる...

そしてこの状態から、
「ビジュアル」タブを開いて ビジュアルエディタ に切り替え

HTMLkコメントを打った後にビジュアルエディタに切り替え

そしてもう一度、テキストタブに切り替えてみます

すると・・・

そしてもう1度テキストエディタに戻ると・・・HTMLコメントが消えている・・・

コメントアウトが消えてる!

 

これが WordPress でコメントアウトできないという意味です。

この現象が起きる原因として考えられるのは・・・

  • プラグインとかテーマの影響
  • 自動補完機能が働いてるから

・・・などなど

ちなみに自動補完は wpautop という機能で、
次記事で紹介したように完全に無効化もできます。

WordPressで文章がpタグやbrタグで自動整形されるのを防ぐ方法
WordPressでは文章が勝手にpタグにbrタグが挿入されて自動整形されるのはwpautop機能のせいです。ここではその自動整形機能を停止する方法について詳しく紹介していきます。

WPの自動補完機能 wpautop を無効化する手順

 

自分でHTMLを編集したり、どうしても残しておきたい内容がある・・・

そういう時にコメントアウトできないと少し困ります。

WordPressでコメントアウトする2つの方法

何かプラグインがあれば便利なんですが、残念ながらそういうのもありません。

でもプラグインを使わずとも、コメントアウトは残せます。

そのやり方とは次の2つ

1.HTMLコメント全体をcodeタグで囲む

まず1つめがコメントアウトを code タグで囲む方法

とりあえずコメントアウトさえできればいいなら、この方法が一番オススメです。

 

そのやり方はスゴク簡単

非表示にしたいところを、
次みたいに丸々 code タグで囲ってやればOKです。

<code>
  <!-- コメントアウトしたい文章... -->
</code>

これでビジュアルエディタに切り替えても、コメントが残るはず

この後紹介する方法は少し上級者向けなので、
不慣れなことをしたくないなら、こっちの方法を使ってください。

2.コメント用のショートコードを作る

2つめはコメント用のショートコードを作るという方法

こちらはビジュアルエディタ上でも
「あ、ここにコメントがある!」と分かるので、視覚的にも分かりやすいです。

 

ただし テーマ編集・スクリプト追加 が必要なので、少し上級者向け

もし PHP と聞いて「なにそれ?」という状態だったり、
全くのWordPress初心者なら、この方法は "絶対" に試さないでください。

最悪ブログ構成を壊すリスクもあるので・・・

もし大丈夫という方は次の手順を試してください。

 

まず今使ってるテーマの functions.php を開きます。

開き方はどんな方法でもOK。WordPress内で直接編集するなら、「テーマ」ー>「テーマエディター」から開くのが簡単ですね。

もしくはサーバーの WebFTP とか、FTPソフトを使って開いてもいいです。

 

そして functions.php を開いたら、その最後に次のスクリプトを追加

/// コメントアウト用ショートコードを登録
add_shortcode( 'comment', 'comment_shortcode' );
function comment_shortcode( $atts, $content = '' ){
	$params = shortcode_atts( [
		'hide' => 'yes'
	], $atts );
 
	if( $params['hide'] == 'no' ) {
		/// hide="no" ならHTML上にコメント表示
		return '<!--' . $content . '-->';
	}
	else {
		/// HTML上にはコメント出力しない
		return null;
	}
}

これはもう丸々コピペすれば問題ありません。

あとは保存するだけで、コメントショートコードが利用できるようになります。

 

そしてショートコードの使い方ですが・・・

コメントアウトしたい部分を [comment][/comment] で囲むだけです。

コメントショートコードの利用例

[comment]
コメントアウトしたい文章...
もちろん2行以上でもOK!
[/comment]

たったこれだけ

 

もし HTMLソース上にもコメント表示したい場合 は、
ショートコードに hide="no" を設定してください。

[comment hide="no"]
コメントアウトしたい文章...
ソース上にも表示できる
[/comment]

デフォルトだと hide="yes" なので、投稿内でのみコメントが残せます。

以上がコメントショートコードを使ったやり方。

クイックタグとして登録しておくとモット便利

もしショートコードをいちいち打つのが面倒くさい・・・

そういう人はクイックタグとして登録しとくと、もっと便利にできます

 

登録方法は AddQuicktag というプラグインを使うのが楽です。

こういう感じで適当にクイックタグを登録すれば・・・

まず AddQuicktag に作成したコメントショートコードを登録

↓投稿画面から [comment] が挿入できるようになる

登録したコメントクイックタグは投稿編集からワンクリックで挿入可能!

AddQuicktag を使ったことある人なら、おなじみの手順

すぐできるので、余計な手間を減らしたい人は是非お試しあれ

 

あとちなみに、このプラグインの使い方は次記事でも詳解しました。

AddQuicktagを使ってWordPressにタグボタンを追加する手順を解説
WordPressの編集画面ではタグを手打ちすることもできますが、「クイックタグ」を使えばワンクリックで挿入することもできます。このクイックタグに自作した独自のタグを追加するには「AddQuicktag」というプラグインを使うのが便利です。ここでは標準のタグを使うだけでなく、自分で定義したタグをクイックタグにしたいという場合に便利な「AddQuicktag」の導入・使い方について解説していきます。

もし AddQuicktag を使ったことない、という方はコチラの記事もご覧ください。

まとめ - WPにもコメントアウト機能が欲しい

今紹介した方法を使えば、コメントアウトができます。

でもできれば、WP標準でそういう機能があると便利ですけどね・・・

もし WP開発者 or プラグイン開発者 の方がこの記事をご覧になっているなら、そういう機能を付けていただくとありがたいです。m(__)m

あと自分もプラグイン開発者の端くれなので、
もし気が向いたらそういうプラグインを作るかもしれません。(需要があれば)

以上、WordPressでコメントアウトする2つの方法でした。

The post WordPress投稿内でコメントアウトが消える!?2つの対処法 first appeared on Fukuro Press.

]]>
https://fukuro-press.com/wp-ways-to-keep-html-comment/feed/ 0
WordPressでよく使うHTMLタグの役割と挿入方法【初心者向け】 https://fukuro-press.com/wordpress-usage-of-html-tags/ https://fukuro-press.com/wordpress-usage-of-html-tags/#respond Tue, 17 Jul 2018 12:00:07 +0000 http://fukuro-press.com/?p=1763 文章メインのサイトやブログの場合、ただ文章を書くのではなくHTMLタグを使って文章を適切に構造化すると読者にとって読みやすくなり、検索エンジ...

The post WordPressでよく使うHTMLタグの役割と挿入方法【初心者向け】 first appeared on Fukuro Press.

]]>

文章メインのサイトやブログの場合、ただ文章を書くのではなくHTMLタグを使って文章を適切に構造化すると読者にとって読みやすくなり、検索エンジンにとっても評価の高いページになります。

逆にいえばタグを適当に使ってしまうと読みにくい文章になり、検索エンジンからも評価されにくいページになってしまうということでもあるのです。

 

そこでここではWordPressで特によく使われるタグの意味と編集画面での挿入方法について初心者向けに解説します。

HTMLタグとは

私たちがWordPressで書いている文章はただの文章ではなくHTMLというマークアップ言語で作られています。

 

その中で文章を構造的に表現するために使われるのが「タグ」で、基本的に次のように開始タグと終了タグで文章を囲って使用します。

<p>こんにちは</p>

この場合は「<p>」が開始タグで「</p>」が終了タグになり、その中の文章がpタグにより構造化されます。

 

ではなぜこのようにタグを使うかというと例えば次のような役割で文章に構造を持たせることができるからです。

  • 見出しや段落を作る
  • 単語や文章を強調する
  • 文章を他のサイトなどから引用する
  • 番号なし・番号付きリストを作る
  • 他のページへのリンクを作る
  • 画像などを貼り付ける

挙げていけばキリがないですが、このように普通の文章では表現できないことを表現するために使われています。

 

そしてさらにタグを適切に使うことによって次のようなメリットもあります。

  • 読者が記事を読みやすくなる
    適切に見出しと段落があり、文章の中に画像やリストや引用があると文章が読みやすくなります。
  • 検索エンジンにページを評価してもらいやすくなる(SEO効果)
    タグはただ文章を見やすくするためではなく検索エンジンにページの構造を正しく伝え、ページを評価しやすくしてもらう役割もあります

このようにタグを使うと読者にとって見やすいページになるだけでなく、検索順位に重要な検索エンジンからの評価も上がります。

 

逆にいえばタグを正しく使っていなければ見ずらいページになり、SEO的にも不利になってしまうという事です。もしあまり意識せずにタグを使っているならタグの使い方を見直した方が良いかもしれません。

WordPressでのタグの挿入方法

タグの正しい使い方を解説する前にWordPressの投稿画面で文章にタグを挿入する方法を紹介します。タグを挿入する方法は次の2つです。

  • ビジュアルエディタ内でタグを挿入
  • テキストエディタ内でタグを挿入

この2つの方法について順に解説します。

ビジュアルエディタ内で挿入

ビジュアルエディタは実際にブラウザで表示される見た目を視覚的に確認しながら記事を編集できるエディタのことです。

 

このエディタ内でタグを挿入するには編集画面で次の画像でオレンジ色の枠で囲った「ビジュアル」と書かれたタブを開きます。

 

そしてタグ付けしたい文章を選択し上の方にあるツールボタンを押すと文章の前後にタグが挿入されます

例えば文字を強調するにはstrongタグが使われますが、文章を強調したい場合は次のように強調したい文章を選択して上のツールボタンの中からBと書かれたボタン(←このボタン)を押します。

 

すると選択した文章が次のように太字に変わります。

 

以上がビジュアルエディターでのタグの挿入方法です。

テキストエディタでの挿入方法

テキストエディタはタグを直接書けるモードのエディタのことです。

 

このエディタ内でタグを挿入するにはまず編集画面で次の画像でオレンジ色の枠で囲った「テキスト」と書かれたタブを開きます。

 

そしてビジュアルエディタの時と同じようにタグ付けしたい文章を選択して上の方にあるツールボタンの中からタグに対応するボタンを押せばタグが挿入されます

例えば文章を選択してstrongタグを挿入するボタン(←このようなボタン)を押すと次のように文章がstrongタグで囲まれます。

 

ビジュアルエディタと違いボタンを使わなくても直接タグを手打ちして挿入することも可能なので、タグの細かい制御をしたい場合にテキストエディタは役に立つと思います。

よく使うタグの正しい使い方

WordPressでよく使われるタグは次の7つです。

  • h1~h6タグ(見出し)
  • strongタグ(強調)
  • ulタグ(番号なしリスト)
  • olタグ(番号有りリスト)
  • tableタグ(表作成)
  • blockquoteタグ(引用)
  • aタグ(リンク)

これらのタグの挿入方法と正しい使い方について解説します。

h1~h6タグ(見出しタグ)

記事を書くときに必ず使うのは見出しタグです。このタグには次のような役割があります。

  • あるまとまりのある文章に対して見出しを作る。
  • この見出しの下にある文章の要約になる
  • 検索エンジンの検索結果に表示される。

このタグは読者に内容を分かりやすく伝えるだけでなく検索エンジンの結果にも一部表示されるので、見出しの下にある文章を要約した分かりやすくて簡潔な内容にする必要があります

 

また見出しの重要さが高い順にh1、h2、h3、h4、h5、h6の6種類のタグがあります。

WordPressではタイトルが記事のトップで自動的にh1タグで囲まれるので、通常はh1タグを使うことはありません。また見出しの階層が深くなりすぎると見ずらくなるのでh5やh6タグはあまり使わない方が良いです

 

ビジュアルエディタ上で見出しタグを挿入するには見出しにしたい文章を選択して次のように左のドロップダウンメニューを開きます。

この中の「見出し1」~「見出し6」がそれぞれh1~h6タグに対応しているのでこの中から文章に適切な見出しを選んでください。

 

見出しのスタイルはテーマによって様々ですが、simplicityというテーマではh1~h6タグは次のように表示されます。

 

文章の構造を表すのに一番重要なタグなので適当につけず、見出しの下にある文章の内容を適切に表す見出しにすると読者にとっても検索エンジンにとっても分かりやすくなります。

strongタグ(強調)

strongタグには次の役割があります。

  • 文字を太字にして重要なキーワードを目立たせる
  • 検索エンジンに大事なキーワードだと伝えることができる

 

strongタグを使うと次のように強調した文章やキーワードが太字で表示されるので重要だと読者に伝えることができます。

またただ見た目を太字にできるだけではなく、検索エンジンにこのキーワードは重要だと伝えることもできます

ただしstrongタグで強調したからと言って劇的なSEO効果があるわけではないですが、検索エンジンに重要なキーワードを伝えることができるので使って損はありません。

 

テキストをstrongタグで強調するにはテキストエディタ上で次のように強調したいキーワードを囲むだけです。

<strong>強調したいキーワード</strong>

 

重要だと思うキーワードはこのタグを使って強調しましょう。

ulタグ(番号なしリスト)

ulタグには次の役割があります。

  • 重要な項目を順序なしで箇条書きしてリスト表示する
  • 検索エンジンにリストだと伝えることができる

 

ulタグは順序がないただのリストを作るためのタグで作られたリストは次のように複数の項目の横にドットがついた形で表示されます。

ただ左にドットがついて見やすくなるだけでなく検索エンジンにもこれがリストという構造を持っていると重要な点をはっきり伝えることができます。

 

ビジュアルエディタで番号なしリストを作るにはまずリスト項目を1行に1つずつ書いてそれらを全て選択し()、上のツールボタンからリストを作るボタンを押します()。

 

すると次の画像のように1行ずつに区切られたテキストがリストに変換されます。

 

リスト項目を新たに追加するには各項目の最後でエンターキーを押すと新しく項目を追加することができます。

逆に項目を消すには項目に表示されているテキストを全て消し、もう一度削除キーを押せば項目が削除されます。

olタグ(番号つきリスト)

olタグは次のような役割を持ちます。

  • 順番のある項目を番号付きで箇条書きしてリスト表示する
  • 検索エンジンにリストだと伝えることができる

 

リスト表示する点はulタグと同じですが、olタグを使ってリストを作った場合は次のように各項目の前に「1.」や「2.」のような番号が割り振られた番号つきのリストになります。

ulタグと似ていますがolタグは順序のある物事に対して使われるので、どちらを使ってもいいという訳ではなくしっかりと使い分けが必要です。

 

ビジュアルエディタで番号付きリストを作るにはまずリスト項目を1行について1つずつ書きそれらを全て選択し()、上のツールボタンからリストを作るボタンを押します()。

 

こうすると次の画像のように1行区切りのテキストが番号付きリストに変換されます。

 

リスト項目の追加や削除についてはolタグで作られるリストと操作方法は同じです。

tableタグ(表作成)

tableタグは次のような役割があります。

  • 記事内に表(テーブル)を作成する
  • 表内で行や列を管理する

 

このタグを使うことで例えば次のような表を記事中に表示することが可能です。

 

このような表はタグを1つ1つ打つことで作れますが、さすがに手入力で作るのは労力がかかりすぎるのでおすすめしません。

代わりにWordPressでは「Tiny MCE Advanced」というプラグインを導入することで編集画面のツールボタンから表が挿入できるのでそちらを使いましょう。

次の記事でその詳しい手順や挿入方法について解説してあります。

テーブル(表)をWordPressのビジュアルエディタから挿入する方法
WordPressの記事編集画面でテーブル(表)を作りたい場合、テキストエディタ内でtableタグなどを手打ちして作成することもできますが、プラグインを導入するとビジュアルエディタから簡単操作で表を挿入することが可能です。ここでは「TinyMCE Advanced」というエディタ機能を拡張できるプラグインを使ってタグ打ちを全くせずに表を作成する方法について解説します。

blockquoteタグ(引用)

blockquoteタグは次のような役割を持ちます。

  • 他のサイトや文献からの文章などを引用する
  • 読者や検索エンジンに引用した文章だと伝える

 

このタグは他サイトからの文章の引用だと伝えるために使われ、引用部分はマージンが空いたり、ダブルクォーテーションマーク('')などで囲まれたりして引用だと分かりやすく表示されます。次の画像はsimplicityというテーマでの引用の表示例です。

このblockquoteタグは文章を引用するときには絶対に使うべきタグです。

もし引用せずそのまま文章を書いた場合、パクリだと読者から疑われるだけでなく検索エンジンからも重複コンテンツだとみなされるのでペナルティを受けてしまう恐れがあります。

なので他サイトから文章を引用するときは必ずこのタグを使うように意識しましょう。

 

ビジュアルエディタで文章を引用するにはまず引用したい文章をコピペで貼り付け全選択し()、上のツールボタンから引用ボタンを押します()

 

すると次のように文章がblockquoteタグで囲まれ、引用部分だと分かりやすく表示されます。

 

以上がblockquoteタグの挿入方法です。引用部分だと読者に伝え、検索エンジンに重複コンテンツでないことを示すために絶対必要なタグです。

aタグ(リンク)

aタグは使用頻度が高く、次の役割を持ちます。

  • 内部や外部サイトへのリンクを作る
  • 読者に他のサイトを紹介できる

 

リンクは他のページへの外部リンクや自分自身のページへの内部リンクを張るために使われるタグで、次のようにaタグを使って書かれます。

<a href="https://wordpress.org/">WordPress公式</a>

 

リンクしたときに飛ぶ先は「href="リンク先のURL"」のように指定し、aタグで囲まれた文章は「アンカーテキスト」と呼ばれています。

そしてブラウザ上では次のようにアンカーテキストに下線が引かれて表示されます。

このタグは自分のサイト内で他のページを見て欲しい場合や他のサイトを紹介したい場合によく使われるタグです。

 

 

WordPressでのリンクの貼り方は次の通りです。

まずビジュアルエディタ上でアンカーテキストにしたい単語や文章を選択し()、上のツールボタンの中からリンク作成ボタンを押します()

 

ボタンを押すと次のようにURLを入力するスペースが出てくるのでそこにURLを入力し()、右のエンターキーのようなマークのボタンを押します()。

 

すると選択した文章が次のようにリンクに変換されます。

 

もしリンクを解除したい場合は編集画面でリンクをクリックしたときに表示されるメニューから解除ボタン(←このようなボタン)を押すと解除されます。

まとめ

ここで紹介したWordPressでよく使うタグは次の7つです。

  • h1~h6タグ(見出し)
  • strongタグ(強調)
  • ulタグ(番号なしリスト)
  • olタグ(番号有りリスト)
  • tableタグ(テーブル作成)
  • blockquoteタグ(引用)
  • aタグ(リンク)

タグを正しく使うことによって読者にとって分かりやすいページになり、さらに検索エンジンも文章の構造を把握しやすくなるのでタグの役割を理解したうえで正しく文章をタグ付けしていきましょう。

 

以上ここではWordPressでよく使うタグの役割と挿入方法について解説しました。

The post WordPressでよく使うHTMLタグの役割と挿入方法【初心者向け】 first appeared on Fukuro Press.

]]>
https://fukuro-press.com/wordpress-usage-of-html-tags/feed/ 0
記事作成が捗る!マークダウン記法をWordPress編集画面で使う方法 https://fukuro-press.com/wordpress-plugin-jp-markdown/ https://fukuro-press.com/wordpress-plugin-jp-markdown/#respond Mon, 16 Jul 2018 12:00:09 +0000 http://fukuro-press.com/?p=246 マークダウン記法とは・・・ HTMLの基本タグ(見出し、太字、リンク、etc…) を簡単な記号で置き換えたもの タグ打ちをなくすことで記事更...

The post 記事作成が捗る!マークダウン記法をWordPress編集画面で使う方法 first appeared on Fukuro Press.

]]>

マークダウン記法とは・・・
HTMLの基本タグ(見出し、太字、リンク、etc…) を簡単な記号で置き換えたもの

タグ打ちをなくすことで記事更新にかかる時間を短縮することができます。

それで最近、マークダウン系でいいプラグインを見つけました。

ここではそのプラグインの導入とマークダウンの書き方について解説します。

マークダウンをWordPressで使う利点

例えばWordPressの投稿画面でタグを挿入する場合。

次の2つの方法があります。

  • エディターのテキスト装飾ボタンを押す
  • HTMLエディターでタグを手打ちで入力

ボタン操作する場合はキー入力をやめるから ムダな時間が生まれます。

あとタグを手打ちするのも、やっぱり時間の無駄です。

 

そこでマークダウン記法の出番

例えば見出しを定義する場合マークダウンでは・・

##見出し

・・と書きます。

これは次のような h2タグ を書いたのと同じです。

<h2>見出し</h2>

わざわざh2タグを打つ必要がないし、
ボタン操作も必要ないので手間と時間が省けて便利ですよね。

 

特にスマホのような画面が小さい端末だとマークダウン記法はこの上なく役に立ちます。

それから編集画面上の移動量を少なくできるから、PCユーザーにもメリットあり。

マークダウンを使えるプラグインがこれ!

WordPressでマークダウン記法を利用できるプラグインは色々あります。

個人的には「JP Markdown」プラグインが超便利でオススメ

次に紹介するみたいに、マークダウンを扱うのに重宝してます。

 

ではまずインストール方法から。

メニューから「プラグイン」ー>「新規追加」からプラグイン名で検索。

すると ↓ こういうのが出てくるので、インストールしてみてください。

JP Markdown - WordPressの投稿画面でマークダウン記法が使えるようになるプラグイン

※ ダウンロードして使う場合は次URLからダウンロードも可。

https://ja.wordpress.org/plugins/jetpack-markdown/

 

インストールして有効化すると、
すぐに編集画面でマークダウンが使えるようになります。

例えば見出しをマークダウンから挿入するやり方

例えば見出しだったら、こういう感じでボタン操作なしで挿入できる

一部のタグでは編集画面でマークアップ入力するとタグに変換されます。

ただし太字や斜体字などのテキスト装飾タグだと、編集画面上ではタグに変換されません。
(おそらく修正しやすくするため・・・??)

マークアップ記法でよく使うタグ一覧

ここからが肝心なところ

マークダウンで頻繁に使うタグの書きかたを紹介します。

これさえ覚えとけば、編集効率が何倍にもなるはず

見出し(h1~h6)

見出しを定義する場合は文字列の前に # を書きます。

# の数によって次のように見出しの種類も変わるんです。

記法 対応するタグ
# h1タグ
## h2タグ
### h3タグ
#### h4タグ
##### h5タグ
###### h6タグ

見出しの大きさは最大6つまで定義可能。

箇条書きリスト(ul、ol、dl)

HTMLのリストには 並列列挙型(ul)、順序型(ol)、定義型(dl)の3つがあります。

それぞれの作り方は以下の通り。

並列列挙型リスト(ulタグ)

列挙型リストは文字列の前に *(アスタリスク) または -(ハイフン) を置くことで自動的にリスト項目が作成されます。

マークダウン例

* HTML
* CSS
* JavaScript
* PHP

表示結果

  • HTML
  • CSS
  • JavaScript
  • PHP

これは使いこなせるとカッコいいです。

アスタリスク(*)⇒⇒ ドット(・) に変換されるイメージ

順序型リスト(olタグ)

項目の前に数字が振ってあるリストは項目の前に数字.(ドット)を置くことで作成できます。

マークダウン例

1. HTML
2. CSS
3. JavaScript
4. PHP

表示結果

  1. HTML
  2. CSS
  3. JavaScript
  4. PHP

「これって使う意味あるの??」

とか思ってしまいますが、タグ打ちの手間がなくなるので大ありです。

定義型リスト(dlタグ)

定義型リストはリスト項目の下にその説明が来るようなリストのこと。

マークダウンでは次の形式で定義できます。

リストアイテム
: アイテムの説明

 

マークダウン例

HTML
: Hyper Text Markup Language

CSS
: Cascading Style Sheets

JS
: JavsScript

PHP
: Hypertext Preprocessor

表示結果

HTML
Hyper Text Markup Language
CSS
Cascading Style Sheets
JS
JavsScript
PHP
Hypertext Preprocessor

実を言うと定義型リストなんて滅多に使わないです。

なのでムリに覚える必要はありません。

テキスト装飾(em と strong)

強調(em)や太字(strong)は次のように記述できます。

マークダウン例

*強調*
_強調_

**太字**
__太字__

表示結果

強調
強調

太字
太字

これは結構使うこと多いですね。

わざわざボタンを押さなくていいから楽です。

テキストリンク(aタグ)

リンクは次のような書きかたで定義します。

[アンカーテキスト](URL "タイトルテキスト")

それぞれの意味は次を見てください。

  • [アンカーテキスト]
    ⇒ リンクとして表示されるテキスト。
  • URL
    ⇒ その名の通り、リンククリックで飛ぶ先のURL
  • "タイトルテキスト"
    ⇒ マウスを重ねた時とかに表示される補足説明

ただし新規タブで開く設定( target="_blank" )は、タグに記述する必要があります。

 

マークダウン例

[リンク](https://wordpress.org/ "WordPressの公式サイト")を開く

表示結果

リンクを開く

これもWordPressに限らず、ブログを書くときはよく使うはずです。

文章の引用(blockquoteタグ)

引用はタグ打ちだと blockquote タグで作れます。

そのタグで表される引用は、マークダウンだと次のように定義します。

>引用テキスト

引用テキストを入力してエンターを押すと、自動的に引用タグに変換される感じ

 

マークダウン例

>Markdown(マークダウン)は、文書を記述するための軽量マークアップ言語のひとつである。本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。

表示結果

Markdown(マークダウン)は、文書を記述するための軽量マークアップ言語のひとつである。本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。

引用元を書くのは情報発信するときの最低限の義務

頻繁じゃないけどそこそこ使うから、覚えておくとグッド👍

1行のコード表示(codeタグ)

マイナーだけどコード表示には codeタグ を使います。

それを表示したい場合は ' (シングルクォート) で文字列を囲みます。

マークダウン例

`#button{border: none;}`

表示結果

#button{border: none;}

まあ普通の人はあんまり使わないですが・・・

複数行のコード表示(codeタグ)

複数行のコードを表示するなら、
次のように記述することでコードのハイライトができます。

```[ハイライト言語クラス]

ソースコード
```

[ハイライト言語クラス]はプラグインなどで定義されているハイライト用のクラス名に置き換えてください。

例えばPrism.jsを使っていてCSSコードをハイライトしたい場合は language-css と書くとCSSとしてハイライトされます。

 

マークダウン例 (Prism.jsをインストールしている場合)

```language-css
#button 
{ 
    font-size: x-large;
    border: none;
}
```

表示結果

#button
{
font-size: x-large;
border: none;
}

 

ちなみに Prism.js についてはコチラ

コードをハイライト表示できるプラグイン Prism For WP の使い方
WordPressでコードをハイライトするのに便利なのが Prism For WPというプラグイン。Prism.jsというライブラリを使ってコードをきれいに色付けすることができます。ここではその使い方やカスタマイズについてまとめました。

上記事で紹介したみたいに、色々な言語のハイライトができるプラグインです。

なんか後半は普通の人が使わないタグばかりだった・・・

まとめ

最後にマークダウンについて一言。

使いこなせれば、記事の作成スピードアップ間違いなし!

記法を覚えるまでは少し大変かもですが、
一度習得してしまえば後はスラスラ~と書けるようになるはずです。

以上、WordPressでもマークダウンが使えるようにする手順でした。

The post 記事作成が捗る!マークダウン記法をWordPress編集画面で使う方法 first appeared on Fukuro Press.

]]>
https://fukuro-press.com/wordpress-plugin-jp-markdown/feed/ 0