いっちゃんのラジオやってます(Anchor.fm)

【CSS不要】Cocoonのエントリーカードをボックスで2分割するスキル

cocoonのカスタマイズ
エントリーカードをボックス2分割にする方法

WordPressのCocoonのエントリーカードをボックスタイプにして横に2分割する方法をお教えします。

 

こんにちは。

いっちゃんです。@hi_icchan_jp

 

Cocoonの設定は素晴らしいです。ただ、機能が多すぎて使いこなすのに時間がかかるので参考にして頂けたら幸いです。

 

Cocoon(WordPress)のエントリーカードの外観を変えるスキル

Cocoon(WordPress)のエントリーカードをボックスタイプの2分割にするには以下のスキルを使います。

 

いっちゃん
いっちゃん

まず、【前提条件】があります。

 

Cocoonテーマ(WordPress)をブログ投稿型に設定してる場合を想定しています。

設定確認方法は管理画面→設定→表示設定→最新の投稿にチェックが入っている事。

 

Cocoonの初期設定とWordPressのアイキャッチ画像の作り方
Cocoonの初期設定とアイキャッチ画像を魅力的に作る方法

 

 

Cocoon(WordPressテーマ)のエントリーカードはデフォルトではシンプルな枠線の入った文章型のボックスですが、設定により、アイキャッチ画像がメインのボックス形式で2分割にできます。

 

いっちゃん
いっちゃん

Cocoon(WordPressテーマ)の設定は独特です。

 

手順①:WordPressの管理画面で①Cocoon設定→②Cocoon設定を押す。

 

手順③cocoon設定→インデックスを選択する。

cocoon の設定(WordPress)

インデックスを選ぶ

 

手順④:Cocoon設定インデックスのカードタイプの項目で縦型カード2列を選択する。

 

 

手順⑤:一番左下の変更をまとめて保存するボタンを押す。

【Cocoon設定→インデックス→上記の設定→変更をまとめて保存する 

 

Cocoonの初期設定とWordPressのアイキャッチ画像の作り方
Cocoonの初期設定とアイキャッチ画像を魅力的に作る方法

 

 

Cocoon(WordPress)のエントリーカードをスマホで1ボックスにするスキル

【Cocoon設定→インデックス】(上記の設定と同じページです。)で設定します。

 

上記の設定後、Cocoon(WordPress)テーマのスマホ画面をワンボックス表示にするには、以下の項目にチェックを入れます。

 Cocoonのエントリーカードのスマホ設定

 

①スマホのエントリーカードを1ボックスにする。

②カードの枠線を表示する

 

③アイキャッチ画像下の自動生成文数を決める。

④省略していることを文字で表す。

 

最後に、左下にある色の付いた変更をまとめて保存ボタンを押します。

 

以上がCoocoon(WordPress)のエントリーカードのカスタマイズでした。

 

WordPressのCocoonテーマなどのカスタマイズの記事はまだ少ないですが、徐々にアップしていきます。多くの方の参考になれれば幸いです。

 

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