【Cocoon】 記事タイトル部カスタマイズ方法一覧

タイトル部分のデザイン変更方法です。タイトル下部の画像とSNSボタンを消しています。

Cocoon設定から簡単にできます。

before

after

【Cocoon】 記事タイトル部カスタマイズ方法

タイトルの下に表示される画像を消す方法

タイトルの下に表示される画像の設定をします。

こちらアイキャッチ画像が自動で表示されるようになってるんですね。便利です。ですが消したい場合もありますよね。

「Cocoon設定」→「画像」→「本文上にアイキャッチを表示する」で設定可能です。

チェックを外すと、画像が表示されなくなります。

タイトルの上にカテゴリ、タグを表示する

タイトル部分のサムネイル画像を消すと、カテゴリが表示されなくなってしまいます。

表示させたい場合の設定方法です。

「Cocoon設定」→「投稿」→「カテゴリ・タグ表示位置」で設定可能です。

「タイトル上」「本文上」お好きな方をお選びください。

カテゴリーの色を変える

「投稿」→「カテゴリー投稿」→「カテゴリーを選択」

「カテゴリ色」で背景色、文字色が変更可能です。

タイトル下のシェアボタン群を消す

本文下部にも表示できますしね、いらないかな？と思った人向けです。

「Cocoon設定」→「SNSシェア」→「メインカラムトップシェアボタンを表示」で設定可能です。

チェックを外すと、画像が表示されなくなります。

タイトルの文字をカスタマイズ

以下からはCSSを変更します。

タイトルを中央寄せにして、上下余白をとる例です。

before

after

以下をコピペしてください。

main h1.entry-title{
  font-weight: 600;
  font-size: 25px;
  color: #7B7B7B;
}
main .article-header.entry-header{
  margin-top: 3em;
  margin-bottom: 3em;
  text-align: center;
}
@media screen and (max-width: 480px){
  main h1.entry-title{
    font-size: 20px;
    padding: .6em .4em;
  }
}

こちら説明です。こちらはコピペしても動きません。

パソコン

スマホ

タイトルすぐ下に画像、見出し（H2,H3など）のすぐ下に画像、が流行ってますけど、私は好きじゃないですね。