備忘録 HTML, CSS, WORDPRESS

IT
【 大人を遊ぶ。ありきたりな日常を冒険する 】
【 Enjoying adulthood. Adventure at ordinary days. 】

WORDPRESS および CSS や HTML(でいいのかな?)を中心に記述していく。
参考にされるかたがいればさいわいなので逐次公開していく。

CONTENTS

サイト内に Youtube を埋め込む

[Youtube] → [目的のページ] → [共有] → [埋め込むをクリック] → [コピー] → [エディターの任意の部分にペースト]

ページネーションをカスタマイズする

ページの下部にある次ページへを加工する。
[外観] → [カスタマイズ] → [追加CSS] → [以下を記述]

.pagination-next-link {
 background-color: rgba( 0, 139, 151, 1.0 );
font-weight:bold;
border: 2px solid #008b97;
border-radius: 20px;
}

.pagination-next-link というのがページネーション。
background-color は背景の色。
border-radius が枠の丸みの度合い。数字が大きいと丸くなり、小さいと四角に戻る。

.pagination-next-link:hover {
background-color: rgba( 0, 139, 151, 0.8 );
color: #ffffff;
border: 2px solid #008b97;
}

hover はマウスオーバーとかホバー時と呼ばれる状態で、指マークが乗っている状態。

.page-numbers {
color: #95CE4B;
border: 1px solid #008b97;
}

.pagination .current {
background-color: #008b97;
color: #ffffff;
}

.page-numbers.dots {
opacity: 1;
background: none;
}
.pagination a:hover {
background-color:#5fb7bb;
color: #ffffff;
}

.page-numbers は下の数字の部分を指している。

Font Awesomeを使ってカテゴリをカスタマイズ

[カテゴリー] → [任意のカテゴリに矢印を乗せると左下に数字が出てくるので記憶] → [外観] → [カスタマイズ] → [CSS] → [Font Awesomeのページから好きなフォントを選ぶ。下の例ではf21c]

.widget_categories ul li.cat-item-6 > a::before {
font-family: FontAwesome;
content: “f21c”;
}

item-6 のところに記憶した数字。
content: “f21c”がFontAwesomeの数字。
最新情報をチェックしよう!