wordpressで使える便利なコードまとめ

ここでは、プログラミング超初心者のwordpress使用者のための、便利で簡単なコードをまとめて紹介をします。
そもそもwordpressは、初心者でも簡単にWEBサイトが作れるように設計されていますが、だんだん使い慣れてくると、どうしても自分でコードを打ってカスタマイズしたくなります。

そこで次第にコード手入力の世界へ足を踏み入れていくわけですが、そもそも素人なので、全部一から調べていかなければいけません。

もちろん勉強にはなりますが、あまりにもここで時間を食ってしまっていては肝心のサイトの構築までかなりの時間を有してしまいますし、目的がずれてしまうこともあります。

ここで紹介するコードは、どれもプロの方から見れば素人レベルのものばかりですが、それでも大変役に立ちますので、ぜひ使ってみてください。

文字の装飾

①見出し

検索エンジンにも効果的な見出し文字。下のは見出し１の中央寄せにしています。
見出しのみはstyle=”text-align: center;”を除けば良いです。

<h1 style="text-align: center;">見出し１センター寄せ</h1>

1	<h1 style="text-align: center;">見出し１センター寄せ</h1>

結果

見出し１センター寄せ

②色

色の種類をざっとあげると、赤色#ff0000、黄色#ffff00、緑色#008000、青色#0000ff、白色#ffffff、黒色#000000。その他は「html カラー」で検索を。

<span style="color: #ff0000;”>赤色</span>

1	<span style="color: #ff0000;”>赤色</span>

結果　赤色

③大きさ

大きさは、いろいろ記述方法がありますが、これは％を調整することで大きさを変更できるやり方です。

<span style="font-size: 200%;">大きさ</span>

1	<span style="font-size: 200%;">大きさ</span>

結果　大きさ

④背景

マーカーで印したような感じにできます。

<span style="background-color: #ffff00;">背景</span>

1	<span style="background-color: #ffff00;">背景</span>

結果　背景

⑤行間

文字の上下の間隔を調整できます。普段はあまり使わないかもしれませんが、文字を大きくした際にモバイルで見ると上下の文字が重なっている時があるので、その時はこちらで調整すると良いです。

<span style="line-height:40px;">行間隔を40ピクセルに指定します</span>

1	<span style="line-height:40px;">行間隔を40ピクセルに指定します</span>

結果　行間隔を40ピクセルに指定します行間隔を40ピクセルに指定します行間隔を40ピクセルに指定します行間隔を40ピクセルに指定します

<span style="line-height:20px;">行間隔を20ピクセルに指定します</span>

1	<span style="line-height:20px;">行間隔を20ピクセルに指定します</span>

結果　行間隔を20ピクセルに指定します行間隔を20ピクセルに指定します行間隔を20ピクセルに指定します行間隔を20ピクセルに指定します

⑥読み

文字に読みや訳を入れたいときにはこれを使います。<rt>~</rt>間が読みの内容になります。

<ruby>鯛<rt>たい</rt></ruby>

1	<ruby>鯛<rt>たい</rt></ruby>

結果　鯛たい

その他小技

①間隔をあける

文字や画像などの間に空間を作りたいときにはコード を使用します。ただし、直接入れるのではなく、最初にその部分同士が別であることをPCに認識させる必要があります。

下は<div>~</div>でひとくくりにして上下に分けています。

<div>Aコンテンツ</div>
&nbsp;
<div>Bコンテンツ</div>

<div>Aコンテンツ</div>

<div>Bコンテンツ</div>

結果

Aコンテンツ

Bコンテンツ

②線を引く

初期で線を引くツール<hr />がありますがこれは線の色、太さなどを調整でき、さらに文字に下線を引くこともできます。

<div style="border-bottom: 2px solid #d08d25 !important; color: #ffffff !important; margin: 1.02em auto!important; width: 100% !important;"></div>

1	<div style="border-bottom: 2px solid #d08d25 !important; color: #ffffff !important; margin: 1.02em auto!important; width: 100% !important;"></div>

結果

「border-bottom」「8px 」「#008000」＝「下線」「太さ8px 」「赤色文字」です。他の要素もいろいろいじってみてください。

<div style="border-bottom: 8px solid #008000 !important; color: #ff0000 !important; margin: 1.02em auto!important; width: 100% !important;">線</div>

1	<div style="border-bottom: 8px solid #008000 !important; color: #ff0000 !important; margin: 1.02em auto!important; width: 100% !important;">線</div>

結果

線

③リンク付き目次を作る

プラグインもありますが、コードでも意外に簡単にできますので、あえてこちらを使うのもアリです。リンク先には間違えて#をつけないように。

※下のサンプルはコンテンツ間隔が近いので、リンクを押してもほぼ移動しません。

目次
<h3 id="list4">目次</h3>
<a href="#list1">日本</a>
<a href="#list2">アメリカ</a>
<a href="#list3">イギリス</a>

<span id="list1">日本</span>
<span id="list2">アメリカ</span>
<span id="list3">イギリス</span>

<a href="#list4">目次へ</a>