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

シェアする

Facebook にシェア
このエントリーをはてなブックマークに追加
このエントリーを Google ブックマーク に追加
LINEで送る
Pocket

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

lgf01a201408060200

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

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

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

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

スポンサーリンク

文字の装飾

①見出し

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

結果

見出し1センター寄せ

②色

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

結果 赤色

③大きさ

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

結果 大きさ

④背景

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

結果 背景

⑤行間

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

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

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

⑥読み

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

結果 たい

その他小技

①間隔をあける

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

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

結果

Aコンテンツ

Bコンテンツ

②線を引く

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


結果

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


結果

③リンク付き目次を作る

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

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

結果
目次
日本
アメリカ
イギリス

日本
アメリカ
イギリス

目次へ


とりあえず基本は大体こんな感じです。
他にもいろんなものがありますが、まだ僕自身使いこなしていないので、後からまたたまった分を紹介します。

Facebook にシェア
このエントリーをはてなブックマークに追加
このエントリーを Google ブックマーク に追加
LINEで送る
Pocket

スポンサーリンク

シェアする

フォローする

スポンサーリンク