WordPressでカスタム箇条書きを作成する方法

公開: 2013-07-10

箇条書きは、Web上で特定の情報を伝達するための特に効果的な方法です。もちろん、印刷物でも非常に優れていますが、ご存知のとおり、Webでの読書は異なります。人々はもっとスキャンします。彼らは、テキストのよりグラフィックな表現を期待しています。そして、彼らの目は疲れやすくなります。

弾丸を噛む-CSSに入り、弾丸のポイントをスピードアップします。 — 弾丸を噛む— CSSにアクセスして、弾丸のポイントをスピードアップします。

箇条書きの利点の簡単なリストを作成するとしたら、次のように言うかもしれません…

読みやすくする
コピーを分割する
スキャナーの目を引く
ポイント間の統一アイデアを強調する
アイデアをすばやく伝える

そのため、特にテキストの多い投稿では、箇条書きが重要です。箇条書きのスタイルを正しく設定することも重要です。それを嘲笑する人もいるかもしれませんが、自分の言葉を気にする作家なら誰でも、箇条書きが正しく見えないと、コンテンツ自体から離れてしまうように見えることを知っています。

そのため、以下では、箇条書きを希望どおりに表示するために使用できるいくつかの基本原則について説明します。

この記事で取り上げる内容は次のとおりです。

子テーマを作成する
テーマの箇条書きのスタイル
コンテンツのクラス名を見つける
箇条書きのHTMLコード
CSSを使用した箇条書きのスタイル設定

子テーマを作成する

テーマを変更するときは、子テーマを使用するのが最適です。このように、テーマが更新されても、変更を失うことはありません。これが、このチュートリアルで使用するものです（デフォルトのTwenty Twelve WordPressテーマの子テーマ）。ここで子テーマの作成方法を学ぶことができます。

注：一部のより高度なテーマには、カスタマイズ用の特別なスタイルシートがすでに組み込まれている場合があります。子テーマを作成してもうまくいかない場合は、オンラインまたはテーマの作成者と一緒に解決策を探すことができます。特定のテーマで子テーマを作成する際に問題が発生した場合は、他の人も同じ問題を抱えている可能性があります。

テーマの箇条書きのスタイル

箇条書きのスタイルは、テーマによって制御されます。したがって、そのスタイルを変更するには、テーマがスタイルシートでそれらをどのように参照しているかを知る必要があります。

箇条書きのスタイルは、メインコンテンツのスタイルのサブセクションになります。多くのテーマは、おそらくコンテンツ全体を「エントリコンテンツ」として分類します。つまり、「entry-content」という「クラス」を作成し、スタイルシートでその名前（entry-content）を参照します。

ただし、テーマに別の名前が付けられる可能性もあるため、最初に行う必要があるのは、テーマが投稿のコンテンツに割り当てる「クラス」を確認することです。

コンテンツのクラス名を見つける

コンテンツのクラス名を見つけるには、既に公開している投稿に移動して、そのページのコードを確認します。これを行うには、ページを右クリックして、[ページソースの表示]または[ソースの表示]などをクリックします。

次に、投稿から最初のいくつかの単語を選択し、それらの単語をコードで検索します。それらを見つけると、それらのすぐ上に、テーマがページのコンテンツにどのクラスを与えているかを示すコードも表示されます。

私はこれをデフォルトのTwentyTwelveテーマで行いましたが、クラスは「エントリーコンテンツ」であることがわかりました。前述のように、あなたは同じかもしれませんが、異なるかもしれません。コンテンツの上部にあるdiv内の「class」タグを探します。

*注：テーマが上記よりもはるかに複雑である可能性があり、いくつかのクラスが見つかる場合があります。もしそうなら、あなたがあなたのために働くものを見つけるまで、ただそれぞれを試してみてください。

箇条書きのHTMLコード

WordPressの箇条書きのリストは、2つの異なるタグを使用して作成されます。

まず、<ul>タグがあります。「UL」は「順序付けられていないリスト」を表し、<ol>は「順序付けられたリスト」を表します。順序付けされていないリストには番号が付けられません（箇条書きになります）。順序付きリストは番号付きリストです。

箇条書きの次のタグは<li>タグです。これは「リストアイテム」の略です。

WordPressエディターで箇条書きを作成してから「テキスト」ビューに切り替えると、これら2つのタグの動作を確認できます。

CSSを使用した箇条書きのスタイル設定

では、楽しい部分に移りましょう。実際に弾丸リストをカスタマイズします。まだ行っていない場合は、子テーマをアクティブ化することを忘れないでください。次に、子テーマのスタイルシートに移動する必要があります。（外観>エディター>スタイルシート– style.css）

私のテーマでは、私のコンテンツのクラスは「entry-content」という名前でした。これが、以下の例で使用するものです。クラスの名前が別のものであることがわかった場合は、それをで置き換えてください。

まず、TwentyTwelveテーマの箇条書きのデフォルトスタイルを見てみましょう。そこから、徐々に状況を変えていきます。

これがデフォルトの外観です。

フォントの変更

本当にシンプルなものから始めましょう。これにより、状況がどのように変化するかを知ることができます。次のCSSを使用して、フォントを太字にします。

 .entry-content ul li {
 フォントの太さ：太字;
 }

結果は次のとおりです。

そして、この最初のものでは、新しく作成した子テーマのスタイルシートがどのように見えるかを示します。

もちろん色を変えることもできます。劇的な例として、「color：＃00FF00;」を追加して、リストを明るい緑色に変更します。

 .entry-content ul li {
フォントの太さ：太字;
色：＃00FF00;
}

そして、これがどのように見えるかです。

異なるスタイルを追加する

OK、今度は弾丸自体を変更し始めます。次のCSSコードを追加して、塗りつぶされた円を空の円に変更します。list-style：circle;

私のCSSコードは次のようになります。

 .entry-content ul li {
 フォントの太さ：太字;
 list-style：circle;
 }

そしてこれが結果です。

変更することで、これらの空の円を正方形に変更することもできます

list-style：circle;

に

list-style：square;

そして、これが結果です。

円で塗りつぶされた「ディスク」スタイルもあります。

 .entry-content ul li {
フォントの太さ：太字;
リストスタイル：ディスク;
}

結果は次のとおりです。

「list-style」プロパティで使用できる値は他にもあり、その多くは数値（順序付きリスト）の使用に適用されます。これらの詳細については、こちらをご覧ください。

箇条書きとしての画像の使用

箇条書きとして画像を追加することもできます。これを行う方法は、CSSコードの次の行を追加することです。

 list-style-image：url（url-of-your-image）;

したがって、たとえば、フォントを太字のままにすると、CSSコードは次のようになります。

 .entry-content ul li {
 フォントの太さ：太字;
 list-style-image：url（http://mysite.com/images/bullet-16x16.png）;
 }

アップロードした画像を見てみましょう。見た目はかなり良いですが、画像の配置が少しずれていることに気付くでしょう。画像が少し高すぎるようです。

それがあなたに起こった場合、あなたは画像を使用するために別のアプローチを取ることができます。「list-style-image」プロパティを使用する代わりに、画像を背景として使用できます。これにより、画像を動かして見栄えを良くすることができます。

画像を背景として使用しているため、「通常の」箇条書きが必要ないことを示す必要があります。そのために、「list-style-type：none;」を使用します。バックグラウンドCSSコードに加えて。

最終的にCSSファイルに挿入したコードは次のようになりました。 5pxの数字は、正しく見えるまで私が遊んだものです。もちろん、あなたの画像はおそらく私のものとまったく同じように消えることはないでしょう、それであなたはそれが正しく見えるまであなた自身で物事をいじる必要があるでしょう。

 .entry-content ul li {
フォントの太さ：太字;
list-style-type：なし;
背景：url（http://mysite.com/bullet-16x16.png）no-repeat 7px 5px;
マージン：0;
パディング：0px 0px 3px 35px;
垂直整列：中央;
}

そして、これが結果です。

Unicode文字の追加

箇条書きで試してみたいと思うかもしれない他の何かはUnicode文字です。 Unicode文字は……✽のようなものです。

前述のように、「list-style-type：none;」を入力します。通常の箇条書きを削除します。そして、それがあなたがここでする必要があることです。（繰り返しになりますが、通常の箇条書きは表示されたくありません。これらをUnicode文字に置き換えます。）

また、キャラクターがリストアイテムの前に配置する必要があることを示す別のプロパティを追加します。

∅文字を箇条書きとして使用する方法を次に示します。

 .entry-content ul li {
list-style-type：なし;
フォントの太さ：太字;
}
.entry-content ul li：before {
内容："∅";
パディング-右：5px;
}

そして、これがどのように見えるかです。

文字をテキストとは異なる色にしたい場合は、上部のセクションにcolorプロパティを追加してテキストの色を変更するか、下部のセクションにcolorプロパティを追加して箇条書きの色を変更します。または、もちろん、両方にカラープロパティを追加することもできます。

この例では、両方にcolorプロパティを追加しました。

 .entry-content ul li {
list-style-type：なし;
フォントの太さ：太字;
色：＃2E89FF;
}
.entry-content ul li：before {
内容："∅";
パディング-右：5px;
色：＃FFA62F;
}

そして、これが結果です。

ご覧のとおり、Unicode文字を取得するためにCSSファイルで特別なコードを使用することはありません。 Unicode文字自体をコピーして、CSSコードに貼り付けるだけです。

これらの記号のリストはここにあります。これは長いリストなので、矢印、ボックス描画、ブロック要素、幾何学模様、その他の記号、絵記号など、人気のあるものをいくつか紹介します。

WPMUDEVの箇条書きリスト

そして最後に、これで終わります。お気づきかもしれませんが、WPMUの箇条書きリストには、水色の箇条書きと濃い青色のテキストがあります。これは、上記のUnicode文字で行ったように、箇条書きをテキストから分離することによって作成されます。

箇条書きとして使用する小さな青いボックスは、CSSを使用してボックスを作成することによって作成されます（これは、以下に表示される2つの5px値です）。これは、スタイルシートでのコードの設定方法とは異なりますが、以下で同じ効果が得られるはずです。

 .entry-content ul li {
パディング-左：30px;
色：＃3D5365;
フォントサイズ：90％;
位置：相対;
list-style-type：なし;
}
.entry-content ul li：before {
コンテンツ： '';
位置：絶対;
左：10px;
上：9px;
幅：5px;
高さ：5px;
背景色：＃7AA8CC;
}

そして、もちろん、これはそれがどのように見えるかです。（画像を変更する場合に備えて、ここに画像を含めます。後日、これを読んでいます。）

弾丸を噛む時間

あなたの箇条書きはあなたが望むように見えますか？そうでない場合は、弾丸を噛み、スタイルシートを掘り下げて、スピードを上げる時が来たのかもしれません。

写真提供者：D。Sharon Pruitt