Cocoonでは下記の画像がデフォルトで設定されているため、

他の画像を表示したい場合は画像を変更する必要があります。

この記事では、下記の方法でCocoonのトップページのサムネイルを変更する方法をご紹介します！

しゅんご

簡単に変更できるので、ぜひ試してみてください！

cocoonのトップページのサムネイルを変更する方法

「Cocoon設定」の「OGP」タブを開く

まず、「Cocoon設定」 => 「OGP」をクリックします。

ホームイメージを変更する

下までスクロールすると、ホームイメージという項目があります。

デフォルトではCocoonの画像が設定されています。

このホームイメージの画像を変更することで、トップページのサムネイルを変更することができます。

選択を押して、表示したい画像を選択しましょう！

本ブログではプロフィール画像を設定しました。

画像の変更前と変更後

ホームイメージの変更前後です。

OGPのホームイメージを変更することで、トップページのサムネイルを変更することができました！

変更前
変更後

まとめ

トップページのサムネイルは下記の方法で変更できます！

The post 【Cocoon】トップページのサムネイル(ホームイメージ)を変更する方法！ first appeared on shungo blog.

投稿一覧のカードタイプを変更する

Cocoon設定でカードタイプを変更

「Cocoon設定」→「インデックス」をクリックします。

下記の2点の設定を変更します。

• カードタイプ: 縦型カード3列にチェック
• スニペット（抜粋）の表示: チェック外す

これらの設定にすることで、投稿一覧のデザインが縦型カードの3列になります。

追加CSSでカスタマイズ

続いて縦型のカードタイプになった投稿一覧をカスタマイズします。

カードに枠線を追加して少し立体的にしてみます。

「外観」→「カスタマイズ」→「追加CSS」をクリックします。

CSSに下記のコードを追加します。

/* 投稿一覧 カード */ 
.ect-vertical-card .entry-card-wrap {
  max-width: 30%;
  box-shadow: 0 2px 4px rgb(0 0 0 / 25%);
  border-radius: 3px;
}
/* 投稿一覧 スマホ画面では2列 */
@media screen and (max-width:480px) {
  .ect-vertical-card .entry-card-wrap {
    max-width: 46%;
  }
}

The post 【Cocoon】 投稿一覧のカードを立体的にカスタマイズする方法 first appeared on shungo blog.

アイキャッチ画像をホバー時に画像を拡大する方法

追加CSSをカスタマイズ (コピペでOK!)

「外観」→「カスタマイズ」→「追加CSS」をクリックします。

下記のコードをCSSに追加して「公開」を押します。

するとアイキャッチ画像にマウスを乗せると拡大され、外すと元に戻ります。

/* アイキャッチ ホバーエフェクト */
main .card-thumb {
  overflow:hidden;
}
main .card-thumb img {
  transition-duration: 0.5s;
}
main .card-thumb img:hover {
  transform: scale(1.2);
  transition-duration: 0.5s;
}

追加CSSの詳細説明

枠に収まらない部分のアイキャッチ画像は非表示にします。

main .card-thumb {
 overflow:hidden;
}

拡大した画像を縮小するのにかかる時間です。

main .card-thumb img {
 transition-duration: 0.5s;
}

ホバー時に、画像を拡大するのにかかる時間です。

main .card-thumb img:hover {
 transform: scale(1.2);
 transition-duration: 0.5s;
}

The post 【Cocoon】アイキャッチ画像をホバー時に画像を拡大するカスタマイズ方法 first appeared on shungo blog.

この記事では複数行にも対応した、長すぎる文字列を三点リーダー（…）で省略する方法についていくつかご紹介します。

3点リーダーなし	3点リーダーあり

3点リーダーの表示方法 (複数行の場合)

追加CSSで対応

「外観」→「カスタマイズ」→「追加CSS」をクリックします。

下記のCSSを追加します。

「-webkit-line-clamp」の数字を変更することで何行まで文字を表示するかを変更することができます。

例えば「-webkit-line-clamp: 4;」とすると4行目までは文字を表示して、5行目からは3点リーダー(…)が表示されるようになります。

/* 投稿一覧 タイトル */
.entry-card-content h2 {
  /* 三点リーダー対応 */
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

CSSを追加することで下記のように3点リーダーが表示され、長いタイトルが省略されます。

The post 【Cocoon】投稿タイトルの長い文字列を3点リーダー(…)で省略する方法 first appeared on shungo blog.

この記事では、Cocoonの「カルーセルを表示する方法」「カルーセルのカスタムCSS」についてご紹介します

カルーセルを表示する方法

カルーセルの表示から「表示しない」以外を選択

「Cocoon設定」→「カルーセル」を押します。

最初はカルーセルの表示が「表示しない」になっています。

カルーセルの表示から「表示しない」以外を選択するとカルーセルが表示されます。

種類とカルーセルが表示されるページの一覧です。

カルーセルの表示設定

カルーセルが表示されるようになったので、次は表示設定についてです。

表示内容

人気記事

選択した期間で集計された人気記事も含めて表示されます。

カテゴリー

チェックしたカテゴリーの記事が表示されます。

何もチェックしない場合は、カルーセルが表示されません。

スクショでは「エンジニア」「ブログ」「プログラミング」の3つのカテゴリーを選択しています。

タグ

チェックしたカテゴリーの記事が表示されます。

何もチェックしない場合は、チェックされたカテゴリーの記事が表示されます。

カルーセルの並び変え

ランダム・投稿日（降順）・更新日（降順）から選択します。

最大表示数

カルーセルに表示する最大表示数を設定できます。（デフォルト：18、最小：12、最大：120）

枠線の表示

チェックするとカルーセルのカード枠線がつきます。

枠線あり
枠線なし

オートプレイ

チェックするとカルーセルが自動的に回転します。

オートプレイインターバル

カルーセルが自動で回転する間隔を設定できます。

設定した秒数が経つと自動的に回転します。

カルーセルのCSSのカスタマイズ

カルーセルを表示するだけでもかなり見た目がオシャレなブログになりますが

もっとオシャレにしたい！という方はご覧ください。

カルーセルを下記のように立体的なカードにしてみましょう。

「外観」→「カスタマイズ」→「追加CSS」に下記のCSSを追記するとカルーセルのデザインが変わります。

線の太さ・色やタイトルのフォントサイズなどはお好みで変更してください。

/* カルーセル */
/* カードタイプに変更 */
.carousel-entry-card-wrap {
  box-shadow: 0 2px 4px rgb(0 0 0 / 25%);
  border-radius: 3px;
}
/* タイトルのフォントサイズ・太さを変更 */
.carousel-entry-card-title {
  font-size: 11px;
  font-weight: 600;
}

The post 【Cocoon】 カルーセル(記事スライド)を表示する方法 first appeared on shungo blog.

「Cocoon設定 → モバイル」と「外観 → メニュー」を設定することでモバイル画面にヘッダーメニューを表示することができます。

この記事ではCocoonでモバイル画面にヘッダーメニューをご紹介します。

モバイルにヘッダメニューを表示するための設定

Cocoon設定

モバイルメニューを表示する

Cocoon設定のモバイルを開きます。

モバイルメニューの「ヘッダーモバイルボタン」にチェックを入れます。

するとモバイル画面にヘッダーメニューが表示されます。

表示のあり・なしの違いは下記の通りです。

ボタンを表示しない	ヘッダーモバイルボタン

外観 → メニュー

※ すでにヘッダーメニューを作成している方はこちらの設定は不要です。

Cocoonの設定だけだと「ホーム」のアイコンが表示されるだけなので、

ハンバーガーメニューが表示されるようにする必要があります。

ヘッダーメニューを作成

• 「外観」→「メニュー」→「新しいメニューを作成しましょう」をクリック
• メニュー名: 「ヘッダーメニュー」
• ヘッダーメニューにチェック
• 「メニューを作成」を押す

ヘッダーメニューを編集

左側からメニューに追加したいものを選択して、「メニューに追加」を押します。

すると右側にメニューをして表示されるものとして追加されます。

ここでは「カテゴリー(エンジニア・書籍・ブログ)」と「固定ページ(プロフィール)」を追加しました。

そして「メニューを保存」を押すと、モバイルでもメニューが表示されるようになります！

モバイル画面の表示オプション

こちらはモバイル画面の表示のオプションの設定になります。

ヘッダーメニューの表示とは関係ないので、興味ある方は参考にしてみてください。

モバイルボタンの固定表示

スクロールした際にヘッダーメニューを固定表示するかしないかの設定です。

固定表示する	固定表示しない

サイトヘッダーロゴを表示する

モバイルでヘッダーロゴを表示するかしないかの設定です。

本ブログの場合は「shungo blog」が重複するので表示なしにしています。

ロゴを表示する	ロゴを表示しない

モバイルボタン時コンテンツ下のサイドバーを表示

PC画面のときに右側にあるサイドバーの表示をコンテンツ下に表示するかしないかの設定です。

表示する	表示しない

The post 【Cocoon】モバイル画面にヘッダーメニューを表示する方法 first appeared on shungo blog.

事象: スタイルが表示されない

原因: プラグインのAdvanced Editor Toolsの設定

Cocoonのクラシックエディタでスタイルを表示する手順

旧エディター(TinyMCE)タブをクリックすると、

使用しないボタンのほうにスタイルがあります。

これが原因でスタイルが表示されていないようです。

使用していないボタンにあるスタイルを

クラシックエディター用ツールバーにドラッグ＆ドロップします。

そして変更を保存します。

すると無事に、スタイルが表示されました！

スタイルだけでなく、他のボタンの表示・非表示も同じように設定できるので、

必要なボタンがある場合は同様に追加してみましょう！

The post 【Cocoon】クラシックエディターでスタイルが表示されない時の対処法 first appeared on shungo blog.

ソースコードを入力するpreタグを追加

見出しを選択するタブから整形済みのテキストを選択

下記のようにソースコードをpreタグが表示されるので、ソースコードを入力

ソースコードをハイライトする

上記のままだと、ソースコードがハイライトされていない(色がついていない)ので、

次に、ハイライトの設定をします。

下記の順にクリックしていきCocoonの設定を変更します。

Cocoon設定 → コード →ソースコードをハイライト表示 にチェックをつける

するとこのようにソースコードがハイライトされます！

/* コメント */
#container {
float: left;
margin: 0 -240px 0 0;
width: 100%;
}

The post 【Cocoon】クラシックエディタでソースコードを表示する方法 first appeared on shungo blog.