【THE THOR】見出しや記事タイトルをキラリと光らせるカスタマイズ方法

ぷぷんた
こんにちは!あるいはこんばんは!ぷぷんた(@pupuntasan)です!

 

トップページに表示される記事のタイトルや、記事中のタイトルになにかアクセントを付けたいと思ったことってありませんか?

当サイトでも実装しているのですが、おすすめなのがキラッと見出しや記事タイトルを光らせるカスタマイズです!

人間は動きのあるものを無意識に目で追ってしまうので、見出しや記事タイトルに動きを付けると自然と目に留まり、読者に注目してもらうことができます。

そこで今回は、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: 背景色の変更

このカスタマイズを行う時の注意点

コピペだけで簡単に出来るカスタマイズですが、CSSを編集するので、ファイルを更新する前には必ずバックアップを取ってから行うようにしましょう!
ぷぷんた
万が一どこかにミスがあった場合は元に戻すのが面倒なので気を付けましょう。

これで簡単にトップページのタイトルや記事中の見出しの雰囲気が華やかにすることができました。

少しずつブログをカスタマイズしていくと記事更新のモチベーションも高まり、一石二鳥ですね!

ぷぷんた
この記事があなたのブログ運営に少しでも力になれれば幸いです!最後までお読みいただきありがとうございましたっ!

徹底的に表示速度にこだわった革新的なWordPressテーマ

当ブログでも採用している、高機能なのに初心者でも扱いやすく、かつスタイリッシュでカッコいい。
しかもSEOの対策も完璧な強力なテーマ。

ブログで収益を得ようと考えているのであれば、候補から外せない革新的なこのテーマを、あなたのインターネットビジネスに活用してみませんか?

詳しくはこちらをクリック!

最新情報をチェックしよう!