はてなブックマーク

【更新情報】2017年6月7日文言等を追記・修正しました。 前回、アイキャッチ画像の表示方法を紹介しましたが、 今回は、アイキャッチ画像の上にカテゴリ名を表示させてみたいと思います。 ※前回記事：【WordPress アイキャッチ画像の追加方法】 画像の上に文字を重ねて表示する方法 画像の上に文字を重ねて表示するには、 CSSのpositionプロパティのrelativeとabsoluteを使います。 順を追って説明します。 【step1】 アイキャッチ画像の下に出力させたい文字を書く アイキャッチ画像は、前回のブログ（WordPress アイキャッチ画像の追加方法）で説明したように、the_post_thumbnail()で出力します。 したがって、まずは、the_post_thmbnail()の下に出力させたい文字を書きます。 この段階では、まだ画像の上に文字は出力されません。 【st

こんにちは、koheiです。 WordPressのカスタマイザーってご存知でしょうか？ WordPressの管理画面から、色や画像をリアルタイムに確認しながら編集できる機能です。 これを使いこなせば、汎用性のあるオリジナルテーマを作ることができます。 そこで今日は、オリジナルのカスタマイザーの作り方をご紹介します。 WordPressカスタマイザーとは？ カスタマイザー画面に入るには、 WordPress管理メニューの「外観」⇒「カスタム」を選択します。 以下のような画面が表示されます。 ここで、色、画像などをリアルタイムに確認しながら編集を行える便利な機能です。 今回は、ここにオリジナルのカスタマイズメニューを追加していきましょう。 オリジナルのセクションを追加する 早速、オリジナルのセクションを追加してみましょう。 セクションとは、以下のようなカスタマイズ画面に表示されるメニューのこと

【更新情報】2017年6月7日文言等を追記・修正しました。 前回記事で、アイキャッチ画像の上にカテゴリ名を表示させましたが、 今回は、カテゴリ毎にラベルを色分けする方法をご紹介します。 ※前回記事：【WordPress アイキャッチ画像の上にカテゴリ名を表示】 カテゴリー毎に色分けする方法 前回の記事（WordPress アイキャッチ画像の上にカテゴリ名を表示）では、カテゴリー名のp要素に”eyecatchlabel”というクラス名をつけ、 CSSでスタイル指定していました。 これだと、それぞれのカテゴリーがすべて同じ色になってしまいます。 そこで、クラス名にカテゴリーのスラッグ名を指定し、それぞれのスラッグ名のクラスに対して、CSSで色を指定をしてやればカテゴリー毎に色分けすることができます。 ※スラッグ名とは、カテゴリーページを開いた時のURLに使われる文字列のことです。 スラッグ名は