2018.02.15Simplicityでは、記事タイトルの下に「日付」と「カテゴリ」が表示されます。今回は、デフォルトよりも表示を小さくして、すっきり見やすくしてみましょう。具体的には、次のようなカスタマイズをします。文字(フォント)のサイズを小さくする文字(フォント)の色を変えるカテゴリの下の線を消す日付とカテゴリの主張を控えめにして、見た目をすっきりとさせるのがねらいです。文字を小さく&薄くして、カテゴリの下の腺を消すとこんな感じになります。フォントサイズやフォントの色、背景色はお好みでカスタマイズできますよ。手順をみていきましょう。手順は簡単、紹介するコードをコピペするだけですよ!コードを貼る場所は、子テーマの「style.css」になります。「style.css」は、WordPressのダッシュボード画面から「カスタマイズ」→「テーマの編集」にすすむとありますよ。コードは、特別な理由がない限り、後ろに追加していけばOKです。文字(フォント)サイズ、色を変えるでは、文字の大きさや色をかえてみましょう。CSSのコードをコピペする手順1次のコードをコピーします。#777777;}手順2コピーしたコードを子テーマの「style.css」に貼りつけます。これで、文字のサイズと色が変わります。文字(フォント)のカスタマイズのヒント各項目の設定を解説します。お好みでアレンジしてみてくださいね。文字(フォント)について「font-size:」の後ろにある数字が文字サイズを表しています。数字を小さくするほど、文字のサイズが小さくなります。「color:」の後ろにあるのが、文字の色です。色は「WEB色見本」を参考にすると、選びやすくなります。バーの背景色も変えられます上で紹介したコードに少し書き加えると、バーの背景色を変えることができます。background-color:#ffffff;}「background-color:」の後ろが、背景の色になります。この例では、背景を白にしています。「WEB色見本」を参考にすると、決めやすいですね。カテゴリの下の線を消す今度はカテゴリの下の線を消してみましょう。ポインタをのせた時に色が変わるようにしてみましょう。CSSのコードをコピペする手順1次のコードをコピーします。#CC0033;}手順2WordPressのダッシュボード画面から「カスタマイズ」→「テーマの編集」とすすみます。コピーしたコードを子テーマの「style.css」に貼りつけます。これでカテゴリの下の線が消え、さらに、マウスのポインタを乗せると色が変わるようになります。カテゴリのカスタマイズのヒント各項目の設定を解説します。お好みでアレンジしてみてくださいね。a」のところにある「color:」は、リンクをクリックしたあとに、どんな色にするかを指定しています。上のコードでは、クリック後も色が変わらないように、フォントの色と同じにしています。a:hover」のところにある「color:」は、カテゴリの部分にポインタをのせた時の色です。ポインタをのせた時に下の線も出したい時は、次のようにします。underline;}これで、ポインタをのせると、色が変化&下の線が出るようになります。まとめ今回は、Simplicity2の記事タイトルの下に表示されるメタ情報、「日付」や「カテゴリ」のカスタマイズでした。お好みでアレンジしてみてくださいね。Simplicity、こんなカスタマイズもありますよ!【Simplicity2】スマホでみた時の「ヘッダー下の空白」を消す方法Simplicity2で作ったサイトをスマホやタブレットでみると、ヘッダー画像の下に広めの空白ができていることがあります。上の画像では、ヘッダー画像とパンくずリストの間に、広い空白ができていま...yuzuyu3.com【Simplicity2】記事やサイドバーの枠線を消す、色を変えるカスタマイズ今回は、WordPressテーマ「Simplicity2」の枠線部分のカスタマイズ方法です。Simplicity2は、デフォルトだと記事のまわりに枠線が入ります。この枠線を消し...yuzuyu3.comSimplicity2の固定ページで日付(投稿日・更新日)を非表示にする方法Simplicity2の固定ページの日付表示(投稿日・更新日)を消してみました。消したのはこの部分です。いうわけで、その方法を書いてみます。カスタマイズTwitterFacebookはてブPocketLINEコピーゆずゆをフォローするこの記事を書いた人ゆずゆ読むと、ちょっぴり役に立つ&たのしくなるコンテンツを発信しています。