【たった2ステップのみ】ワードプレスの記事内にタグを埋め込む方法！

2016.12.16

 

ワードプレスとかを編集していて、勉強出来た！ってなったときに、それを読者さんに伝える際、タグを記事内に入れた方が分かりやすいですよね。

 

ワードプレスのテーマ編集で

#container #header #header-in #h-l h1 {
font-size: 12px;
color: #666;
font-weight: normal;
display: none;
}
と入力するとサイトタイトルが表示出来ない様に出来ますよ！ってワードプレスの記事内にタグを埋め込むよりも、

 

 

#container #header #header-in #h-l h1 {
	font-size: 12px;
	color: #666;
	font-weight: normal;
display: none;
}

この様にタグを記事内に埋め込んだ方が分かりやすいですよね。

 

そんなワードプレスの記事内にタグを埋め込む方法をご紹介します。

 

 

1ステップ：プラグイン導入

 

 

#container #header #header-in #h-l h1 {
	font-size: 12px;
	color: #666;
	font-weight: normal;
display: none;
}

 

↑このように記事内にタグを埋め込む為には、ワードプレスにあるプラグインを導入する事で簡単に出来る様になります。

 

%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3__cd%e3%81%9b%e3%81%a9%e3%82%8a%e3%81%a7%e6%9c%88%ef%bc%92%ef%bc%90%e4%b8%87%e5%86%86%e3%82%92%ef%bc%91%e6%97%a5%ef%bc%91%e6%99%82%e9%96%93

 

ワードプレスの管理画面から、「プラグイン」→「新規追加」をクリックします。

 

 

 

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2016-12-16_22_04_54

プラグイン新規追加から「Crayon Syntax Highlighter」と検索して行きます。

 

 

%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e3%82%92%e8%bf%bd%e5%8a%a0__cd%e3%81%9b%e3%81%a9%e3%82%8a%e3%81%a7%e6%9c%88%ef%bc%92%ef%bc%90%e4%b8%87%e5%86%86%e3%82%92%ef%bc%91%e6%97%a5

僕は既にインストールしているので「インストール済み」と表示されますが、まだインストールしていない方は、「今すぐインストール」と表示されるので、クリックして有効化して行きます。

 

プラグインの導入は以上で、特に設定する必要もありません。デフォルトのまんま記事内にタグを埋め込む事が出来ますので、次から実際にタグを記事内に埋め込んで行きたいと思います。

 

タグを記事内に埋め込む方法

 

タグを記事内に埋め込むと言っても、特にする事はなくって、普段通りワードプレスで記事を投稿する様にブログを書いていきます。

 

%e6%96%b0%e8%a6%8f%e6%8a%95%e7%a8%bf%e3%82%92%e8%bf%bd%e5%8a%a0__cd%e3%81%9b%e3%81%a9%e3%82%8a%e3%81%a7%e6%9c%88%ef%bc%92%ef%bc%90%e4%b8%87%e5%86%86%e3%82%92%ef%bc%91%e6%97%a5%ef%bc%91

タグを埋め込みたくなったら、「ビジュアル」モードでブログを書いている場合、「＜＞」みたいなマークが、上方に表示されます。

 

%e6%96%b0%e8%a6%8f%e6%8a%95%e7%a8%bf%e3%82%92%e8%bf%bd%e5%8a%a0__cd%e3%81%9b%e3%81%a9%e3%82%8a%e3%81%a7%e6%9c%88%ef%bc%92%ef%bc%90%e4%b8%87%e5%86%86%e3%82%92%ef%bc%91%e6%97%a5%ef%bc%91

「テキスト」でブログを書いている場合は、「crayon」と表示されます。タグを記事内に埋め込みたい場合は、「crayon」をクリック。

 

 

 

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-16-22-26-32

するとこんな感じでソースコードを入力する事が出来る窓が開きました。

 

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-16-22-26-57

ここのソースコードを入力出来る窓に、タグを記入すると、記事内に埋め込む事が出来ます。

ソースコードを入力し終えたら、右上にある挿入をクリック。

 

 

通常ビジュアルやテキスト内にタグを書き込んでも

#container #header #header-in #h-l h1 {
font-size: 12px;
color: #666;
font-weight: normal;
display: none;
}

 

と普通に表示されてしまうのが、

#container #header #header-in #h-l h1 {
	font-size: 12px;
	color: #666;
	font-weight: normal;
display: none;
}

この様に、ソースコードをきちんと表示させれる様になりました。

 

 

普通に記事を書く時と、記事内にソースコード等のタグを埋め込む事と、やる事は変わらないので、遥かに見やすく記事内に挿入する事が出来ます。

 

ワードプレスで外観を編集したのを、誰かに伝えたい！なんて言う方は、わずか２ステップで導入出来るので、是非試してみて下さい。。

 

 

まとめ

  • プラグインを導入する
  • 記事にブログを書く時と同様にタグを挿入する

 

以上がまとめです。

 

本当に「ぎゅっと」まとめると、特定のプラグインを導入するだけのなので、1ステップ？かもしれませんが、本当に簡単にタグを埋め込み出来る事は一緒だからいいかな？と想い２ステップにしました。

 

文字としてタグを入れてしまうと、読者の方に対して分かりづらかったり、どこのタグを編集したの？と迷わせてしまう結果になりかねないので、ソースコードを表示させる際には、分かりやすく見える様にすると、読者の方のためになると思います。