Postお問い合わせContactCocoon「ミックスグリーン」利用中。2019.04.11この記事は約6分で読めます。今回は、「Cocoon」のカラム機能を利用してカスタマイズしてみました。」での作成方法になります。目次Cocoonの拡張機能についてブログトップの作り方ブログTOP用のページを新規作成ページ設定で形式を決めるCocoonレイアウトから任意のカラムを選択ショートコードを記述する装飾を整えるカスタマイズしたページをブログトップにする方法まとめCocoonの拡張機能についてCocoonSEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。wp-cocoon.comCocoonの拡張機能は、ブロックエディターのブロックメニューで「Cocoon」が付いているメニューからブロックを選択し利用できます。現在の4種類のメニューがあります。CocoonブロックCocoon汎用ブロックCocoonマイクロコピーCocoonレイアウト今回利用するのは、「Cocoonレイアウト」の「2カラム」「3カラム」のブロックです。ブロックエディターから、「クラッシック」のブロックを呼び出してカラムを作成することも可能ですが、当記事の説明は「Cocoonレイアウト」のブロックを利用する方法です。以下、方法はめっちゃ簡単なので普段からブロックエディターに慣れているのであれば、説明するほどでもないほど、ちょちょいのちょいでトップページのカスタマイズが完成します!ブログトップの作り方どんなトップページにするか、作成する前にイメージを作ってた方が作業もやりやすいかと思いますが、ワタシの場合ぶっつけ本番だったので、その流れでの説明になること何卒ご了承ください。-;)大まかな流れブログTOP用のページを「新規作成」する。ページ設定で形式を決める。固定ページ、投稿ページのどちらかで「新規作成」します。)※ワタシは、固定ページで作成しています。記事タイトルは、とりあえず何でもいいです。表示・非表示の設定をCSSで設定できるのでカスタマイズしながら考えていいと思います。ページ設定で形式を決めるブロックエディターのサイドメニュー「ページ設定」から表示形式を選択します。ページタイプ以下の4種類から選択できます。1カラム(広い)1カラム(狭い)本文のみ(広い)本文のみ(狭い)目次を表示しないCocoonでは、プラグイン無しで記事に目次を表示させる機能がついています。(ON、OFF可)記事ページで基本的に目次を表示させていて、トップページでは表示させたくない場合はここにチェックを入れます。Cocoonレイアウトから任意のカラムを選択ブロックエディター画面から、「Cocoonレイアウト」の「3カラム」「2カラム」を追加します。ショートコードを記述するあとは、Cocoon機能の「ショートコード」をカラム内に入れていきます。カテゴリー新着記事ナビカードショートコードの詳細、その他のショートコードについては、Cocoon公式をご確認ください。記事の本文中に動的な処理を追加することができるショートコードの使い方など。全体のショートコードの使い方をまとめたページがこちら(外部サイト)。Cocoonで使えるのオプションと使い方まとめCocoonで使えるショートコード+オプション一覧と、使い方が掲載されている公式ページへのリンク集的なまとめです。便利な機能がた...wp-cocoon.com装飾を整えるレイアウトが決まったら、後は見出しを入れたり見た目を整えるだけです。通常の記事と同じように、Cocoonの拡張機能も使えるので装飾も楽々です!また、トップページのみで利用するCSSも指定できます。その場合、CSSをエディター画面の下部「カスタムCSS」に記述します。表示・非表示を切り替えるCSSの記述になってます。トップページの場合、やっぱり、その辺非表示にしたいですよね。Cocoon公式の参考記事をそのままコピペさせていただいてます。表示を切り替えるCSS例フロント固定ページで、「非表示にしたいGOが需要が高そうなHTML要素」をCSSで見えなくする方法です。wp-cocoon.comその他、独自のCSSを記述することで記事ページとの差別化もできます。ワタシは、現在、トップページでh1、h2を利用しておらず、独自CSSを追記し、ブロックエディー本体のサイドメニュー「高度な設定」から、見出し枠をCSSしています。(構文的にどうなのかなってところはありますが...汗)なので、エディター画面で見出しが確認できないんですけど特にやりづらいってことはないです。実際の記事ページカスタマイズしたページをブログトップにする方法ブログトップ用のページを作成したら、次はWordpressの設定で作成したページをブログトップに指定する設定にします。これまでトップだった記事一覧ページも別URLで表示させる設定もできます。記事一覧ページにもリンクを貼りたいのであれば、トップ用ページと記事一覧ページを作成します。記事一覧ページは、固定ページ或いは投稿ページで「新規作成」するだけ。記事タイトルもなんでもOK。実際の記事一覧ページに記事タイトルは表示されません。(ダミーみたいなものです。)ブログトップおよび記事一覧ページの指定は、同画面での設定になるのでどっちも表示させたい場合、トップページのカスタマイズが済んだらサクッと作ってしまいましょう。「投稿ページ」のプルダウンから記事一覧表示用に作成したページを選択トップ用ページと記事一覧ページのタイトル名の注意点トップページ用と記事一覧ページを作成する時に、記事タイトルは何でもいいと言いましたが一点だけ注意点はあります。WordPressで、固定ページ、投稿ページ、カテゴリーを一つのページに表示させてサイトマップにしてるカスタマイズを行っている場合...「固定ページ」の記事タイトルがそのまま表示されます。その場合は、見られる事を意識したタイトルにした方がいいと思われます。Cocoonのショートコード機能の「サイトマップ」であれば、固定ページを表示させないようショートコードのカスタマイズも可能です。[sitemap]簡単なサイトマップページを生成できるsitemapショートコードの使い方プラグインを使用せずともサイトマップを手軽に作成できるショートコードの使い方説明です。wp-cocoon.comまとめ以上、ブロックエディター+Cocoonでブログトップのカスタマイズして公開までする方法を紹介しました。♪...2019.11.11Wordpress期待膨らむCocoonの新スキン、「Season」が楽しみ♪...2019.05.09Wordpress【Cocoonスキン】新スキン「Season」が素敵すぎる......2019.05.13Wordpressあぁ、勘違い。Gutenberg「ブロックエディター記事+自動広告」だと広告が減る?...2018.12.15Wordpress「Gutenberg」ブロックエディターが思っていたより、かなりいい感じで衝撃を受けている...2018.12.09WordpressGutenberg:ブロックエディター、下書きをMarkdownで書いてもOKだった!!...2018.12.18コメント欄コメントをキャンセルメールアドレスが公開されることはありません。新しい投稿をメールで受け取るけろら~50代。