記事タイトル回りをカスタマイズしてみた

皆さんは、投稿記事のタイトル回りがあっさりし過ぎていると思ったことはありませんか？
これから色々調べてみましょう。

テーマにもよるんでしょうが、記事タイトル回りが寂しいのと、投稿日や更新日がアイキャッチ画像の下に表示されるので、今一な感じですね。

そうですね。タイトルのすぐそばに投稿日とかが表示されている方が合理的ですよね！（個人の感想です）
そこで、調べた結果ちょっとしたことで雰囲気が変わりましたよ。

📖 この記事にはこんなことが書いてあるよ ♪

はじめに
親テーマから子テーマへファイルをコピーする
content.php の編集
タイトルのデザインをちょっと
終わりに

はじめに

テーマは「Cocoon」です
スキンは「カラフルライン（y.hiroaki作）」です

こんな環境でのカスタマイズとなります。

親テーマから子テーマへファイルをコピーする

私はこのようにしました。ファイルを直接弄るので注意して行ってください。

FTPソフトなどを使ってワードプレスのディレクトリへ移動する
/themes/cocoon-child-master/ へ移動
この中に、tmpフォルダーを作成する
/theme/cocoon-master/tmp/ へ移動
この中にある、content.php をPCへダウンロードし編集する
編集した content.php を /theme/cocoon-child-master/tmp/ へUPする

content.php の編集

編集といっても、投稿日付等の表示位置を変えるだけです。オリジナルでは、アイキャッチ画像の下に日付が表示されるようになっているので、該当箇所を入れ替えます。

このように、アイキャッチ挿入の前に移動すればよいです。

タイトルのデザインをちょっと

タイトル回りのデザインもカスタマイズしてみました。

少しばかり目立つ感じで
タイトル文字がふわっと上にフェードインするような感じで

という思いの元、追加CSSへ次のように書き加えました。

/* 見出しカスタマイズ */
/* H1  */
.article h1 {
  border-bottom: double 5px #ffcc99;
  padding: 0.5em;/*文字周りの余白*/
  color: #494949;/*文字色*/
  background: #fffaf4;/*背景色*/
  border-left: solid 8px #ffaf58;/*左線（実線 太さ 色）*/
}

.entry-title {
  animation-name: fadein;
  animation-duration: 2s;
}
@keyframes fadein {
from {
  opacity: 0;
  transform: translateY(20px);
}
to {
  opacity: 1;
  transform: translateY(0);
}
}