ワードプレステーマTwentyfifteenのカスタマイズ

2018年3月14日2018年4月6日

ワードプレスのテーマtwentyfifteenをカスタマイズした際の覚え書きです。

1 記事タイトルの文字サイズを変更する
2 本文の文字サイズを変更する
3 見出しをカスタマイズする
4 本文のリンクの色を変更する
5 フォントを変更する
6 カテゴリ一覧や最新記事が全文表示になっているのを、タイトル+抜粋に変更する
7 サムネイル画像が表示されるようにする
8 サイドバーに人気記事を表示し、画像にタイトルを重ねて表示する

記事タイトルの文字サイズを変更する

.entry-title {
font-size: 2.5rem;
}

.entry-title {

font-size: 2.5rem;

}

本文の文字サイズを変更する

.entry-content p {
font-size: 1.6rem;
}

.entry-content p {

font-size: 1.6rem;

}

何度やってもうまくいかなかったのは「p」がなかったからでした。

見出しをカスタマイズする

h2{
position: relative;
background: #f5deb3;
box-shadow: 0px 0px 0px 5px #f5deb3;
border: dashed 2px white;
padding: 0.2em 0.5em;
color: #800000;
}

h2{

position: relative;

background: #f5deb3;

box-shadow: 0px 0px 0px 5px #f5deb3;

border: dashed 2px white;

padding: 0.2em 0.5em;

color: #800000;

}

h2:after{
position: absolute;
content: '';
left: -7px;
top: -7px;
border-width: 0 0 15px 15px;
border-style: solid;
border-color: #fff #fff #deb887;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}

h2:after{

position: absolute;

content: '';

left: -7px;

top: -7px;

border-width: 0 0 15px 15px;

border-style: solid;

border-color: #fff #fff #deb887;

box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);

}

h3{
color: #800000;/*文字色*/
padding: 0.2em;/*文字周りの余白*/
display: inline-block;/*おまじない*/
line-height: 1.3;/*行高*/
background: #fff0f5;/*背景色*/
vertical-align: middle;/*上下中央*/
border-radius: 25px 25px 25px 25px;/*左側の角を丸く*/
}

h3{

color: #800000;/*文字色*/

padding: 0.2em;/*文字周りの余白*/

display: inline-block;/*おまじない*/

line-height: 1.3;/*行高*/

background: #fff0f5;/*背景色*/

vertical-align: middle;/*上下中央*/

border-radius: 25px 25px 25px 25px;/*左側の角を丸く*/

}

h3:before {
content: '●';
color: white;
margin-right: 8px;
}

h3:before {

content: '●';

color: white;

margin-right: 8px;

}

h4{
font-size:20px;
background: linear-gradient(transparent 85%, #f0fff0 60%);
}

h4{

font-size:20px;

background: linear-gradient(transparent 85%, #f0fff0 60%);

}

h4:before {
content: '◎';
color: #40e0d0 ;
margin-right: 8px;
}

h4:before {

content: '◎';

color: #40e0d0 ;

margin-right: 8px;

}

本文のリンクの色を変更する

リンクの文字色はデフォルトでは黒と黒のアンダーラインなので、これを変更しました。

追加CCSに以下を追記

.entry-content a  {
  font-weight:bold; /* リンク文字を太字 */
  color: #0000ff;  /* リンクの色 */
　order-bottom: 0;  /* リンクの下線を出さない */
}
 
.entry-content a:visited {
  color: #0000cd; /* 訪問済みの色 */
} 
 
.entry-content a:hover{
  color: #b22222;  /* カーソルが乗った時の色 */
}

.entry-content a {

font-weight:bold; /* リンク文字を太字 */

color: #0000ff; /* リンクの色 */

　order-bottom: 0; /* リンクの下線を出さない */

}

.entry-content a:visited {

color: #0000cd; /* 訪問済みの色 */

}

.entry-content a:hover{

color: #b22222; /* カーソルが乗った時の色 */

}

.entry-contentがないと、サイドバーのカテゴリなどの色も変わってしまいます。これを入れることで本文内のリンク色のみが変更できました。

フォントを変更する

追加CSSで追記。

body {
font-family:'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Helvetica, Arial, sans-serif;
}

body {

font-family:'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Helvetica, Arial, sans-serif;

}

カテゴリ一覧や最新記事が全文表示になっているのを、タイトル+抜粋に変更する

こちらを参照→https://def-4.com/twenty-fifteen_top_customize/

サムネイル画像が表示されるようにする

functions.phpに以下を追記する。

add_theme_support('post-thumbnails');

1	add_theme_support('post-thumbnails');

サイドバーに人気記事を表示し、画像にタイトルを重ねて表示する

プラグインWordpress Popular Postsをインストールし、追加CSSに以下を追加。

.wpp-list li {
    position: relative;
}
.wpp-post-title {
position: absolute;
	left:0;
bottom:0;
background-color: rgba(0,0,0,0.0);
    max-width:310px;
}
.wpp-list a{
font-weight:bold;
color: #fff;
padding: 1px;
font-size: 115%;
}