WordPressCocoon

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

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

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

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

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

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

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

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

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

wp-content > themes > cocoon-master > tmp > content.php

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

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

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

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>

ハイライトされているのが追加したコードですが、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; /* 文字色を薄くする */
    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-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

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

アニメーションを入れる

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

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

ボーダーの指定方法

タイトルの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のカスタマイズをする方には役に立つ内容だと思います↓

アニメーションのコード

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

.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; など追加してあげるとオッケーです。これでボーダーからふわっとタイトルが出てくる感じになると思います。

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

WordPress
\記事が役に立ったらシェアしてね/
うぇぶあしび

comment

  1. やながみ より:

    はじめまして。DICEさん。

    ブログを作りたいなと思って色々ネットで調べていた中、DICEさんのこの web-ashibi に出会いました。
    美しいデザインに惹かれ私もCocoonで作ろうと決めて、大変お世話になっております。
    CSSなど全く分からない初心者ですが、DICEさんが書いている内容を参考にしてなんとか自分でもある程度きれいなサイトが作れているなと感じています。
    ですので、きれいなサイト作成になれるように素晴らしい内容を公開して下さっていることにめちゃくちゃ感謝しています。
    宜しければですが、
    どうしても分からない&できない箇所がありますので、教えて頂けると嬉しいです。

    を参考に、
    同じ設定になれるようにまではできました。
    でも、も取り入れようと頑張りましたが、
    何故か「記事のタイトル」だけじゃなく「下にひいたボーダー」も一緒にアニメーション化されてしまって一緒に動いてしまうのです。
    DICEさんのように「下にひいたボーダー」は動かず、そこから「記事のタイトル」が上がってくる感じにはなりません。
    どこをどうすれば良いのでしょうか。教えて頂けますでしょうか?
    宜しくお願い致します。

    • DICE DICE より:

      やながみ様

      遅くなってすいません!コメントありがとうございます。
      記事の後半にアニメーションについて追記しましたので参考にしてみてください。

      • やながみ より:

        DICEさん、ありがとうございました。
        ご親切に追加記事で詳しく説明して頂けて本当にありがとうございました。
        でも、初めてWPの作成に挑むドのつく素人なので、DICEさんの記事をもとに色々やってみましたが、やっぱりボーダーも一緒に動いてしまいます。
        きっとDICEさんが言及した「タイトル直下の要素はサイトによって違う」ということが関わってくるのだと思い、仰っていたChromeのデベロッパーツールで調べてみました。
        DICEさんのボーダーには、
        ::before
        となっていて、
        私の場合は、
        ::after
        となっていました。
        なので、
        書いて下さったcssの方の「.date-tags:before {」のところを「entry-title post-title:after {」と書き換えてみましたが、何も変化は起こりませんでしたw

        諦めずにこれから色々検証しながらやってみたいと思います。

        あれほど詳しく説明して頂いたのに、再現できないって最低だと思ってしまいますw

        お忙しいところ本当にご親切にありがとうございました。
        頑張ってDICEさんのこれまでの記事を参考にきれいなサイトを作りたいと思っています。
        ありかとうこざいました。

        PS)今まで色々なcocoonをテーマにした(DICEさんも話していたJINとかSANGOも含め)サイトを見ましたが、DICEさんほどシンプルで読みやすくきれいなサイトはないと思いました。
        これからも勉強していきたいので、今後の記事も楽しみにしています。
        宜しくお願いします。

        PPS)あともう一つだけ質問してもいいでしょうか?(汗)
        web-ashibi のトップページのサムネイル画像のことですが、
        Cocoon 設定の「(地デジ・YouTube比)デフォルト」でも「(黄金比)」でもないですよね?
        記事のアイキャッチは「デフォルト」で、トップページの大きさをDICEさんのようにするためには、
        これもcssで変更するのでしょうか?

        • DICE DICE より:

          嬉しいお言葉ありがとうございます!カスタマイズまだまだ途中なので他の記事も追加していきますね。

          ボーダーの件ですが、「.post-title」はタイトル部分のクラス名なので、このクラス名にボーダーを指定していると、タイトルと一緒にボーダーもアニメーションしてしまいます。

          「.post-title」や「.entry-title」にはボーダーの指定をせず、タイトルの下にある要素(タイトル直下に投稿日があれば.date-tags)にボーダーを指定すればタイトルと一緒にアニメーションすることはないと思います。

          ボーダーを指定しているクラス名を確認してみてください。

          トップページのサムネイルは普通に16:9で、デフォルトの設定です。作成時には17:9(1000×525px)で作ってるので、記事ページでは少しだけ横長になっています。

  2. やながみ より:

    DICEさん、ありがとうございました。

    またまたご返答を頂けたおかげで半ば諦めていましたが、再度やってみたいと思いました。
    (.date-tags)と教えて下さったのに、
    (.post-title)は書き換えず、(.post-title::after)のとこだけを(.date-tags::before)に変えたり…
    何時間も格闘しましたが、ようやく仰っていることの意味を分かり、両方書き換えなゃいけないんだと気づき、なんとかタイトルだけがDICEさんのサイトのようにボーダーから上がってくるようになりました。
    いや、マジで嬉しいです。ありがとうございました!
    知っている人と知らない人の差って怖いものです。そして、素人の怖さは思い込みだと思います。「記事タイトルの見た目をカスタマイズ」するのだから、(.post-title)はいじってはいけない。と、思い込んでいましたw
    だから、何事に対しても自己流ではなく、最初はプロのやり方を徹底的に真似ることから始めることが大切だと思います。
    なので、DICEさんのブログに出会えて本当に良かったですし、
    DICEさんの仰っていた「カスタマイズを楽しめる方や、デザインにあまりこだわらない方にとっては最高のテーマですが、手間をかけずに綺麗なサイトを作りたい!っていう方は有料のテーマの方が幸せになれる」というフレーズに出会えたことにも感謝感謝です。
    「作るのなら、少しは勉強も兼ねてDICEさんの書いていることを参考にやってみよう」と思えたからです。
    1万ちょっとの有料テーマを買ってやっていたら、こういう「やったー、できた」って感覚は味わえなかったと思うからです。

    数日タイトルのアニメーションのことで格闘しましたが、有り難いお返事を頂いて、解決しました。
    アニメーション化に成功したら、今度は今まで表示に何の問題もなかった「投稿日・更新日もカスタマイズ」が崩れて文字がデカくなったり、トップページの表示もやたらと小さくなったりしましたが、
    (font-size: .8em)の方をいじってなんとかしました。

    あとはタグクラウドと広告リンクのカスタマイズだけ残すのみとなりましたが、
    それが終わったらあまりにもそっくりだとDICEさんに迷惑だと思いますので、背景とか色とかグローバルメニューとかヘッダーとか色々「アレンジ」していきたいと思います。

    貴重な情報を公開して下さったこと再度感謝致します。

    これからも宜しくお願い致します。

    PS)どう有り難い気持ちをお伝えすれば良いのか分からず、書いていたら無駄に長くなってしまいました。本当にご親切にお返事下さってありがとうございました。

    • DICE DICE より:

      無事にできたようで良かったです!
      初心者さんに分かりやすく伝えることについて僕も勉強になりました。ありがとうございます。

      CSSに慣れてくると色々と応用もできるようになるので、最初は大変だと思いますが頑張ってください(^^)

  3. HANAKO より:

    はじめまして DICE様

    CSSが書けないにも関わらずカスタマイズするにあたりとても参考にさせていただいています。

    「投稿日・更新日もカスタマイズ!」のCSS利用させていただき、
    デフォルトのアイコンから好みのアイコンに変えれたり、
    文字もいい感じに薄くなってとてもうれしく思っていたのですが、

    .date-tags {
    line-height: .8;
    text-align: left; /* 左揃えにする */
    color: #aaa; /* 文字色を薄くする */
    }

    のところで左揃えにするが効かないようです。

    アイキャッチの写真とのバランスで左にあるほうがいいのですが、
    ご教授いただければ幸いです。
    お忙しいところ恐れ入りますがどうぞよろしくお願いいたします。

    • DICE DICE より:

      HANAKO様

      Cocoonのアップデートで親テーマのコードが少し変わってたみたいですね。気付かせていただいてありがとうございます。

      記事内のコードを修正しましたので試してみてくださいませ。

      • HANAKO より:

        DICE様

        早速ありがとうございます。
        思い通り仕上がって感謝です♡

        コードが書けなくてもDICE様はじめ皆さんのご尽力で素敵なサイトに仕上がってきてワードプレスが楽しくなってきました。

        私ももうちょっと勉強したいと思いました。

        DICE様ありがとうございました。

タイトルとURLをコピーしました