【 大人を遊ぶ。ありきたりな日常を冒険する 】
【 Enjoying adulthood. Adventure at ordinary days. 】
br>
WORDPRESS および CSS や HTML(でいいのかな?)を中心に記述していく。
参考にされるかたがいればさいわいなので逐次公開していく。
CONTENTS
- サイト内に Youtube を埋め込む li>
- ページネーションをカスタマイズする li>
- Font Awesomeを使ってカテゴリをカスタマイズ li>
サイト内に 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 が枠の丸みの度合い。数字が大きいと丸くなり、小さいと四角に戻る。
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の数字。
content: “f21c”がFontAwesomeの数字。