トップページに表示される記事のタイトルや、記事中のタイトルになにかアクセントを付けたいと思ったことってありませんか？
当サイトでも実装しているのですが、おすすめなのがキラッと見出しや記事タイトルを光らせるカスタマイズです！
人間は動きのあるものを無意識に目で追ってしまうので、見出しや記事タイトルに動きを付けると自然と目に留まり、読者に注目してもらうことができます。
そこで今回は、WordPressで実装できる見出しと記事タイトルのカスタマイズ方法を共有します！
ぷぷんた見出しや記事タイトルをキラッと光らせるカスタマイズをしたときの動き
トップページの記事タイトルの場合
記事中の見出しの場合
ぷぷんた見出しや記事タイトルをキラッと光らせるカスタマイズする方法
両方のカスタマイズに共通する点は、どちらもテーマエディターで子テーマの編集を行うことです。
それぞれ実装するCSSの記述が違うので、必要な方をコピペして実装完了です！
あとは実装する部分のコピペ内容を記述していきます。
トップページの記事タイトルの場合
下記の内容をコピペしてファイルを更新すれば完了！
.archive h2 a
{
position: relative;
overflow: hidden;
}
.archive h2 a:before {
position: absolute;
transform: rotate(45deg);
animation: shine-title 3.8s ease-in-out infinite;
background-color: #fff;
content: " ";
opacity: 0;
top: -180px;
left: 0;
height: 100%;
width: 30px;
}
@keyframes shine-title {
0% {
-webkit-transform: scale(0) rotate(45deg);
opacity: 0;
}
80% {
-webkit-transform: scale(0) rotate(45deg);
opacity: 0.5;
}
81% {
-webkit-transform: scale(4) rotate(45deg);
opacity: 1;
}
100% {
-webkit-transform: scale(50) rotate(45deg);
opacity: 0;
}
}
記事中の見出しの場合
下記の内容をコピペしてファイルを更新すれば完了！
.content h2
{
position: relative;
overflow: hidden;
border-top: 2px solid;
border-bottom: 2px solid;
border-left: 5px solid;
border-right: 2px solid;
background: #E6FEFF;
}
.content h2::before
{
position: absolute;
transform: rotate(45deg);
animation: shine-title 3.8s ease-in-out infinite;
background-color: #fff;
content: " ";
opacity: 0;
top: -180px;
left: 0;
height: 100%;
width: 30px;
}
@keyframes shine-title {
0% {
-webkit-transform: scale(0) rotate(45deg);
opacity: 0;
}
80% {
-webkit-transform: scale(0) rotate(45deg);
opacity: 0.5;
}
81% {
-webkit-transform: scale(4) rotate(45deg);
opacity: 1;
}
100% {
-webkit-transform: scale(50) rotate(45deg);
opacity: 0;
}
}
- border-top: 上部のラインの太さを変更
- border-bottom: 下部のラインの太さを変更
- border-left: 左側のラインの太さを変更
- border-right: 右側のラインの太さを変更
- background: 背景色の変更
このカスタマイズを行う時の注意点
ぷぷんたこれで簡単にトップページのタイトルや記事中の見出しの雰囲気が華やかにすることができました。
少しずつブログをカスタマイズしていくと記事更新のモチベーションも高まり、一石二鳥ですね！
