【Cocoon】記事のタイトル周りをカスタマイズ

WordPressテーマ「Cocoon」のカスタマイズ備忘録です。今回は投稿記事のタイトル周りのカスタマイズです。

カテゴリーとタグを表示するために、PHPのテンプレートもちょこっと編集しているのでカスタマイズ中級編って感じですね。どなたかの参考になれば幸いです。

親テーマからファイルをコピーして編集する

Cocoonは投稿記事と固定ページのタイトルが共通のclass名になっているので、そのままだとCSSの変更が両方に反映されてしまいます。

投稿記事のタイトルだけを変更したい場合は、PHPを少しいじる必要があります。固定ページのタイトルに反映しても良いという方はここは飛ばしてください。

FTPでファイルを子テーマにコピー

FTPクライアントソフトを使って、親テーマのテンプレートファイルを子テーマで編集できるようにします。

今回編集するファイルはtmpフォルダにある「content.php」です。階層はこんな感じになっています↓

子テーマにtmpフォルダがない方は、フォルダも作って一緒にアップしましょう。

FTPクライアントソフトについてよく分からない方は、こちらの記事を参考にしてください。

FTPソフトCyberduckの使い方。親テーマのファイルを子テーマで編集してみよう

今回は親テーマの特定のファイルを子テーマにアップロードして編集するための手順をご紹介します。 STINGER7以外の方でも基本は同じですので、参考にしていただければと思います。

web-ashibi.net

2016.03.11

content.phpを編集してclassを追加

子テーマにコピーできたら管理画面からcontent.phpを編集します。24〜33行目の部分ですが、変更前はこんな感じですね↓

<header class="article-header entry-header">
  <h1 class="entry-title" itemprop="headline">
    <?php
    if (is_wpforo_plugin_page()) {
      echo wp_get_document_title();
    } else {
      the_title();
    }
    ?>
  </h1>

これを以下のように修正します↓

<header class="article-header entry-header">
  <div class="entry-header-categories-tags">
      <span class="entry-header-categories"><?php the_category_links() ?></span>
      <span class="entry-header-tags"><?php the_tag_links() ?></span>
  </div>
  <?php if(is_single()): ?>
      <h1 class="entry-title post-title" itemprop="headline">
  <?php else: ?>
      <h1 class="entry-title" itemprop="headline">
  <?php endif; ?>
  <?php
    if (is_wpforo_plugin_page()) {
      echo wp_get_document_title();
    } else {
      the_title();
    }
     ?>
      </h1>

ハイライトされているのが追加したコードですが、7行目にも「post-title」のクラスを追加しています。

2〜5行目の以下の部分はカテゴリーとタグを表示するためのコードなので必要ない方は削除して大丈夫です。

<div class="entry-header-categories-tags">
    <span class="entry-header-categories"><?php the_category_links() ?></span>
    <span class="entry-header-tags"><?php the_tag_links() ?></span>
</div>

内容としては「if(is_single)」で投稿ページだけを指定して、「post-title」のclassを付与しており、これで投稿ページだけにCSSを反映させることができます。

ここまで出来たらあとはCSSで調整するだけです。

記事タイトルの見た目をカスタマイズ

変更前のCSSはこのようになっています↓

.article h1 {
    line-height: 1.25;
    font-weight: bold;
}
.entry-title {
    font-size: 26px;
    margin: 16px 0;
    line-height: 1.3;
}

「.article h1」は投稿ページ、固定ページ、インデックスページなど共通のclass名ですね。

「.entry-title」が投稿ページ、固定ページ共通のclassなので、両方に反映させたい場合はこのclassで指定すればオッケーです。

今回は投稿ページだけに反映させるため、先ほど新たに追加した「.post-title」を使って、擬似要素でグラデーションのラインをひいてみました。

.post-title {
    font-size: 26px;
    margin: 16px 0;
    line-height: 1.3;
    padding: 0 0 10px 0;
    position: relative;
}
.post-title::after { /* グラーデーションラインをひく擬似要素 */
    content:"";
    display: block;
    position: absolute;
    bottom: -10px;
    height: 4px;
    width: 100%;
    background: -webkit-linear-gradient(left, #72c7e6 0%,#8ae2d7 100%);
    background: linear-gradient(to right, #72c7e6 0%,#8ae2d7 100%);
}

こんな感じになります↓

下にボーダーをひくだけなら擬似要素がなくても「border-bottom: 1px solid #◯◯◯;」みたいな感じで大丈夫ですし、サイトに合わせて「color: #◯◯◯;」と文字色を変えたりするだけでも雰囲気は変わると思うのでお好みでどうぞ。

カテゴリーとタグの見た目を調整

「content.php」を編集して追加したカテゴリーとタグのCSSを調整します。

.cat-link { /* カテゴリー */
    color: #fff;
    text-decoration: none;
    display: inline-block;
    margin-right: 5px;
    padding: 2px 8px;
    font-size: 12px;
    background-color: #72c7e6;
    border-top-right-radius: 10px; /* 右上の角だけ丸く */
    border-bottom-left-radius: 10px; /* 左下の角だけ丸く */
    word-break: break-all;
}
.cat-link:hover { /* マウスホバー時 */
    opacity: 1;
    background: #49add1;
    transition: all .5s ease; /* ふわっと変化するアニメーション */
    color: #fff;
}
.tag-link { /* タグ */
    color: #fff;
    text-decoration: none;
    display: inline-block;
    margin-right: 5px;
    padding: 2px 8px;
    font-size: 12px;
    background-color: #72c7e6;
    border: none;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    word-break: break-all;
}
.tag-link:hover {
    background: #49add1;
    transition: all .5s ease;
    color: #fff;
}

「border-top-right-radius」と「border-bottom-left-radius」で右上と左下だけを角丸にしてみました。全部の角を丸くする場合は「border-radius」だけで指定すればオッケーです。数字が大きくなるほど丸みも大きくなります。

上記のCSSは記事下にカテゴリーやタグを表示している場合は同じように適用されるので、タイトル部分だけに反映させるには先ほどPHPで追加したclass名も追加します。こんな感じ↓

.entry-header-categories .cat-link {
}
.entry-header-categories .cat-link:hover {
}
.entry-header-tags .tag-link {
}
.entry-header-tags .tag-link:hover {
}

投稿日・更新日もカスタマイズ！

最後に投稿日と更新日もカスタマイズしてみました。CSSは以下の通り。

.date-tags {
    line-height: .8;
    position: relative;
    color: #aaa; /* 文字色を薄くする */
    display: flex;
    flex-direction: row;  /* 左揃えにする */
}
.post-date {
    order: 1; /* 投稿日の表示順を1番目に */
}
.post-update {
    order: 2; /* 更新日の表示順を2番目に */
}
.post-date, .post-update {
    padding: 2px;
    display: inline;
    font-size: .8em; /* 少しだけ文字サイズを大きく */
}
.post-update .fa-history, .post-date .fa {
    display: none; /* Cocoon バージョン2以降のデフォルトアイコンを非表示に */
}
.post-date::before { /* 投稿日のアイコンの変更 */
    font-family: FontAwesome;
    content: "\f040";
    padding-right: 3px;
}
.post-update::before { /* 更新日のアイコンの変更 */
    font-family: FontAwesome;
    content: "\f021";
    padding-right: 3px;
}

右揃えだったのを左揃えにしたのと、文字のサイズを少し大きくして色も薄めにしてみました。

それとFontAwesomeのアイコンを変更しています。投稿日のアイコンはデフォルトが時計マークですが、あんまり見かけない鉛筆マークにしてみました。
更新日の方はグルグル？みたいなアイコンにしてます。

アイコンを変えると記事一覧で表示されるアイコンも変わります。

FontAwesomeは他にもたくさんアイコンがあるのでお好みで変えてみてください。CocoonのFontAwesomeはバージョン4なので、下記ページの中から好きなアイコンを使うことができます。

Font Awesome Icons

Font Awesome, the iconic font and CSS framework

fontawesome.com

好きなアイコンをクリックするとコードが分かるので、それを先ほどのCSSの「content: “\f040“;」の赤字の部分に置き換えるとアイコンも変わります。

Font Awesome 5の場合

Cocoon バージョン 2.0.0からFont Awesome 5を使えるようになりました。「Cocoon設定 ＞ 全体」で4と5の切り替えができます。

Cocoonは4のコードを自動で5に対応してくれるので、先ほど紹介した下記のコードは設定でFont Awesomeを5にしていてもそのまま使えます↓

.post-date::before { /* 投稿日のアイコンの変更 */
    font-family: FontAwesome;
    content: "\f040";
    padding-right: 3px;
}
.post-update::before { /* 更新日のアイコンの変更 */
    font-family: FontAwesome;
    content: "\f021";
    padding-right: 3px;
}

アニメーションを入れる

2018年3月現在、当ブログがやっているのと同じようなアニメーションを加える方法も紹介しておきます。ボーダーの上からふわっとタイトルが出てくる感じです↓

アニメーションについての詳しい解説はこちら。

【CSS】ページ読み込み時にフワっとスライドフェードインするアニメーション

...

web-ashibi.net

2018.07.30

ボーダーの指定方法

タイトルのCSSクラスでボーダーも指定していると、アニメーションを適用した時にボーダーも一緒に動いてしまいます。

そこでタイトル直下の要素にボーダーを指定してあげます。

当ブログの場合はタイトル直下に「更新日」があるので、この部分にボーダーを指定しています。コードはこちら↓

.date-tags::before {
  content:"";
  display: block;
  position: absolute;
  top: -16px;
  height: 4px;
  width: 100%;
  background: -webkit-linear-gradient(left, #72c7e6 0%,#8ae2d7 100%);
  background: linear-gradient(to right, #72c7e6 0%,#8ae2d7 100%);
}

上記はグラデーションのボーダーを指定する場合なので、普通のボーダーを引くだけなら「.date-tags」にコードを追加するだけでオッケーです。paddingで位置を調節します↓

.date-tags {
  border-top: solid 4px #000;
  padding-top: 10px;
}

注意点はタイトル直下の要素はサイトによって違うということです。

当ブログでは「投稿日・更新日」がタイトル直下にありますが、「タイトル下のウィジェット」を使っていたり、「SNSシェアボタン」を表示している場合などはタイトル直下の要素が変わってくると思います。

どんな要素であったとしても、使用されている「idやclass」にボーダーを指定するだけなので、ブラウザの開発ツールを使って「idやclass」を調べましょう。

Chromeならサイト上で「右クリック＞検証」、Firefoxは「右クリック＞要素を調査」などで開発ツールを開くことができます。

開発ツールの使い方が分からない方はこちらの記事を見てみてください。少し違うツールですが使い方はほとんど同じで、Wordpressのカスタマイズをする方には役に立つ内容だと思います↓

脱初心者！WordPressのカスタマイズが捗る「Firebug」の使い方

WordPressのカスタマイズをする時に上手くいかないことってよくあると思います。 参考コードをコピペしても反映されない、なんか表示がおかしい、みたいなことって誰もが経験あるんじゃないでしょうか。 そんな時に役立つのが「Firebug」というFirefoxの拡張機能です！ 「Firebug」はWeb開発者用のデバッグツールで、Web制作の仕事をしている人にとっては定番なんですけど、コピペだけでなんとかWordPressをカスタマイズしているような初心者の方にもオススメのツールです。 これを使えるようになればあなたも脱WordPress初心者！ 使い方は簡単なのでぜひ試してみてください♪

web-ashibi.net

2016.08.11

アニメーションのコード

ボーダーが引けたらタイトル部分にアニメーションを適用します。当ブログはこんな感じのコードになっています↓

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

ボーダーとタイトルの距離を調整したい場合は「.post-title」に margin-bottom: 0px; など追加してあげるとオッケーです。これでボーダーからふわっとタイトルが出てくる感じになると思います。

ということでタイトル周りのカスタマイズをご紹介しました！皆さんも色々試してみてくださいね。ではまた〜♪