cocoon | マブログ

【Cocoon】光るボタンの作り方【これでクリック率アップ！】

マー — Sat, 10 Jul 2021 11:43:42 +0000

ブログでよく「光るボタン」をみるのですが、どうやって実現するのですか？
　

　↓こんなやつ

国内最速・高安定の高性能レンタルサーバー【ConoHa WING】

アフィリエイトリンクを「光るボタン」に埋め込む方法も知りたいな。

こういった疑問に答える記事です。

本記事を読めば以下を知ることができ、CSSの追加なしで光ボタンを実装でき、クリック率もアップできます。

マー

管理人のマーです。

本業はITエンジニアで、月150万PV、月17万円、総収入700万円のブログを運営しています。

今回は上記の悩みを解決できる記事を書きました。

「光るボタン」にアフィリエイトリンクを埋め込む方法
1. 前準備
2. 光るボタン作成方法

「光るボタン」にアフィリエイトリンクを埋め込む方法

Cocoonを使ってればCSSの追加なしで簡単に実現可能です。

手順を解説します。

前準備

あらかじめ、ASPでテキスト広告を選定しておきます。

以下はa8.netの例です。

１）
掲載したい「通常の広告リンク」をテキストエディターにコピーしておく。

「広告タイプ」はテキストを使います。

なるほど「広告タイプ」はテキストで検索すればいいですね。

光るボタン作成方法

光るボタンを作成する方法を解説します。

１）
WordPressブロックエディタ（Gutenberg）で「＋」アイコンをクリックする。
２）
「ブロックの検索」に”囲み”と入力すると「囲みボタン」が表示されるのでクリックする。
３）
「囲みボタン」が挿入される。

４）

囲みボタンのブロックで以下を設定する。

リンクタグ・ショートコード	コピーしておいた広告リンクを挿入します。
光らせる	ONにします。
色設定・背景色	好みの色を選びます。例では緑を選択しています。

５）
プレビューしてボタンが光っていれば完成です！

国内最速・高安定の高性能レンタルサーバー【ConoHa WING】

え？

たったこれだけですか？

マー

はい。そうです。

cocoonは高機能ですよね。

ちなみに、他のテーマですとスタイルシートにCSSを追加する必要がありますが、CocoonはCSSを追加する必要はありません。

以上です。

【Cocoon】定型文の使い方【Gutenberg】

マー — Thu, 10 Jun 2021 12:16:33 +0000

記事の冒頭に自己紹介文を入れているのですが、毎回入力するのが面倒です。

修正する時もすべての記事を修正するのも面倒。

なにか良い方法はないかな？

こういった疑問に答える記事です。

本記事を読めば以下を知ることができ、今後のブログ運用が楽になります。

定型文のメリット
Cocoon定型文の作り方
Cocoon定型文の挿入方法
Gutenberg再利用ブロックの作り方
Gutenberg再利用ブロックの挿入方法

マー

管理人のマーです。

本業はITエンジニアで、月150万PV、月17万円、総収入700万円のブログを運営しています。

今回は上記の悩みを解決できる記事を書きました。

定型文のメリット
Cocoonの定型文を使う方法（文章のみ再利用）
1. 定型文の作り方
2. 定型文の挿入方法
Gutenbergの再利用ブロックを使う方法
1. 再利用ブロックの挿入方法
まとめ

定型文のメリット

定型文を使うと以下がいっきに解決です。

　同じような文章を記事を書くたびに入力するのが面倒

定型文を登録しておくと、ショートコード一発で呼び出せる。

　全記事を修正するのが面倒

定型文１か所を修正するだけで、すべてが修正される。

なかなかいいですね。

Cocoonの定型文を使う方法（文章のみ再利用）

定型文の作り方

１）
WordPress管理画面にログインする。
２）
「Cocoon＞テンプレート」メニュー選択
３）
「テキストテンプレート」画面が表示されるので「新規追加」をクリックする。
４）
「タイトル」と「内容」を入力し、「保存」をクリックする。
５）
「テキストを新規作成しました。」と表示されるので「一覧ページへ」をクリックする。
６）
追加した定型文が表示されていればOKです。

この定型文を呼び出すには
これはCocoon定型文の例です。
を使います。

定型文の挿入方法

１）
記事作成でショートコード
これはCocoon定型文の例です。
をコピペします。
２）
プレビューして定型文が入っていれば完成です。

できました！簡単ですね。

Gutenbergの再利用ブロックを使う方法

Cocoon定型文では文章だけでしたが、Gutenbergの再利用ブロックを使うとブロックごと流用できます。

吹き出しを再利用ブロックにする例です。

１）
記事作成の中で吹き出しを作成します。
２）
ブロックの「再利用ブロックに追加」をクリックする。
３）
引き続き「再利用ブロックを管理」をクリックする。
４）
再利用ブロック一覧が表示されるので、「編集」をクリックする。
５）
タイトルを修正し、「更新」をクリックする。
６）
タイトルが変更されていればOK。

再利用ブロックの挿入方法

１）
記事作成で「＋」アイコンをクリックする
２）
ブロック検索が表示されるので、”再利用”と入力すると、先ほど登録した「再利用ブロック例（吹き出し）」が表示されるのでクリックする。
３）
再利用ブロックが挿入されれば完成です。

まとめ

定型文を登録しておくと、ショートコード一発で呼び出せる。
定型文１か所を修正するだけで、すべてが修正される。
文章の流用ならCocoon定型文を使用
ブロックの流用なら再利用ブロックを使用

以上です。

【初心者向け】マナブログ風チェックマーク、ボックスを表示する方法【Cocoon＋Gutenberg】

マー — Sun, 23 May 2021 08:46:26 +0000

マナブログ風チェックマークやボックスはどうやって実現するの？

CocoonとGutenbergを使った方法だといいな

こういった疑問に答える記事です。

本記事を読めば以下を知ることができ、見た目をマナブログ風のカッコいいブログにすることができます。

マナブログ風チェックマークの実現方法

マナブログ風ボックスの実現方法

マナブログ風リストボックスの実現方法

本記事の信憑性は、月17万円、総収入600万円以上のブログを運営しており、実際にマナブログ風チェックマーク、ボックス、リストボックスを利用しています。

マナブログ風チェックマークやボックスとは？
マナブログ風チェックマークを実現する方法
マナブログ風ボックスを実現する方法
マナブログ風リストボックスを実現する方法
1. マナブログ風ボックスにリストを挿入する方法
2. マナブログ風リストボックスを実現する方法（css class定義）
  1. 前準備
  2. マナブログ風リストボックスの挿入方法
まとめ

マナブログ風チェックマークやボックスとは？

マナブログ風チェックマークは

　こんなやつです。

マナブログ風ボックスは

こんなやつです。

マナブログ風リストボックスは

こんな
やつ
です

そうそう。

これこれ。

マナブログ風チェックマークを実現する方法

Cocoon＋Gutenbergで操作方法で解説します。

１）
Gutenbergエディターを開く
２）
「＋」アイコン（ブロックを追加）をクリックする。
３）
「ブロックの検索」に”html”と入力すると「カスタムHTML」が表示されるのでクリックする。
４）
「カスタムHTML」ブロックが表示されるので、以下の文字を入力する
```
　マナブログ風チェックマーク
```
５）
画面右上の「プレビュー＞新しいタブでプレビュー」をクリックする
６）
マナブログ風チェックマークが表示される。

できました！簡単ですね。

マナブログ風ボックスを実現する方法

Cocoon＋Gutenbergで操作方法で解説します。

前準備から説明します。

Step1 前準備

マナブログで使用している背景色（#f8f9ff）と境界線色（#4865b2）を拡張カラーパレットに登録します。

１）
WordPressの管理画面で「Cocoon設定」をクリックする。
２）
「エディター」をクリックする
３）
「エディター」タブが開くので、「拡張カラーバレット色」のところまでスクロールし、「拡張色E」をクリックする。
４）
マナブログ風ボックスの背景色を設定するため、カラーコードに#f8f9ffを入力し、「Select Color」をクリックする。
５）
「拡張色F」をクリックする。
６）
マナブログ風ボックスの境界線色を設定するため、カラーコードに#4865b2を入力し、「Select Color」をクリックする。
７）
「拡張色E」と「拡張色F」が設定される。「変更をまとめて保存」をクリックすればOKです。

Step2マナブログ風ボックスの挿入方法

記事にマナブログ風ボックスを挿入します。

１）
Gutenbergエディターを開く
２）
「＋」アイコン（ブロックを追加）をクリックする。
３）
「ブロックの検索」に”box”と入力すると「白抜きボックス」が表示されるのでクリックする。
４）
「ボーダー色」に拡張色Fを選択し、「背景色」に拡張色Eを選択し、”マナブログ風ボックス”と入力します。
５）
画面右上の「プレビュー＞新しいタブでプレビュー」をクリックする
６）
マナブログ風ボックスが表示される。

「カスタムHTML」を使わなくてもできるんですね！

線をもう少し細くしたい、点線にしたい人

テーマエディタで「Cocoon Child: スタイルシート (style.css)」にcssを追加します。

手順を説明します。

１）
WordPressの管理画面で「外観＞テーマエディター」をクリックする。

２）

一番下に以下をコピペし、「ファイル更新」をクリックする。

※線種や線の太さは好みによって修正する。

/*---------------------------------
白抜きボックス（線種、太さ）

線種
  solid  実線
  dashed 破線
  dotted 点線
  double 二重線
  groove くぼみ
  ridge  浮きだし
  inset  立体くぼみ
  outset 立体浮きだし
--------------------------------*/
.blank-box {border: dashed 1.5px;}

マナブログ風リストボックスを実現する方法

2通り説明します。

マナブログ風ボックスにリストを挿入する方法

ボックスの中にリストを挿入する方法です。

１）
「マナブログ風ボックスを実現する方法」で「白抜きボックス」を挿入します。
２）
「白抜きボックス」を選択し、「＋」アイコン（ブロックを追加）をクリックする。
３）
「ブロックの検索」に”list”と入力すると「リスト」が表示されるのでクリックする。
４）
「白抜きボックス」に・が挿入されますので、文字を入力する。
５）
プレビューするとマナブログ風リストが表示される。

できました。

ボックスの中にリストを入れるんですね。

マナブログ風リストボックスを実現する方法（css class定義）

テーマエディタで「Cocoon Child: スタイルシート (style.css)」にclassを追加する方法です。

手順を説明します。

前準備

１）
WordPressの管理画面で「外観＞テーマエディター」をクリックする。

２）

「Cocoon Child: スタイルシート (style.css)」の一番下に以下をコピペし、「ファイル更新」をクリックする。

余白（padding）は自分の好みで調整してください。

/************************************
** マナブログ風リストボックス
************************************/
.manablog-listbox
{
    background-color: #f8f9ff; /* 背景色 */
    border          : dashed 1px #4865b2; /*境界線の設定(線種 線幅 線色)*/
    padding-top     : 20px;    /* 余白(上側) */
    padding-bottom  : 10px;  　/* 余白(下側) */
    padding-left    : 20px;    /* 余白(左側) */
    padding-right   : 10px;    /* 余白(右側) */
}

マナブログ風リストボックスの挿入方法

１）
Gutenbergエディターを開く
２）
「＋」アイコン（ブロックを追加）をクリックする。
３）
「ブロックの検索」に”html”と入力すると「カスタムHTML」が表示されるのでクリックする。

４）

「カスタムHTML」ブロックが表示されるので、以下の文字を入力する



マナブログ風リストボックスA
マナブログ風リストボックスB
マナブログ風リストボックスC

５）
プレビューするとマナブログ風リストボックスが表示される。

この方法だと好きな場所だけにマナブログ風リストボックスを使えますね！

まとめ

マナブログ風にカスタマイズする方法を解説しました。

マナブログ風チェックマーク
マナブログ風ボックス
マナブログ風リストボックス（ボックスにリストを入れる方法）
マナブログ風リストボックス（Class定義する方法）

以上です。

【簡単】WordPress テーマCocoonをカスタマイズしてマブログのようにしたい！【7ステップ】

マー — Sun, 25 Apr 2021 03:58:02 +0000

マブログのような画面にしたいのですが、どうすればいい？

WordPress Cocoon のカスタマイズ方法が知りたい！

こういった疑問に答える記事です。

本記事を読めば以下の設定方法を知ることができ、初心者でも本サイトのような画面にすることができます。

スキン設定
トップメニュー
おすすめカード
インデックス
サイドメニュー
シェアボタン、フォローボタン

本記事の信憑性は、私はブログ4サイト運用しており、本サイトはCocoonで構築しています。

Step1 スキン
Step2 ブログのタイトル、サブタイトル
Step3 トップメニュー
Step4 おすすめカード
Step5 インデックス
Step6 サイドメニュー
Step7シェア、フォローボタン
まとめ

Step1 スキン

スキンを変更することにより、本サイトのような水色基調に画面イメージが変わります。

１）
「Cocoon設定＞スキン」　タブをクリックする。
２）
スキン一覧で「tecurio earth」を選択する。
３）
画面下の「変更をまとめて保存」をクリックする。

Step2 ブログのタイトル、サブタイトル

サイト名、サブタイトルを設定します。

１）
「設定＞一般設定」　をクリックする。
２）
「サイトのタイトル」、「キャッチフレーズ」を入力する。
３）
画面下へスクロールし、「変更を保存」をクリックする。

Step3 トップメニュー

トップメニューを設定します。

１）
「外観＞メニュー」をクリックする。
２）
「メニュー名」を入力、「ヘッダーメニュー」をチェックし、「メニューを作成」クリックする。
３）
「カテゴリー」で「メニュー」に追加したいものを選択し、「メニューに追加」をクリックする。
４）
表示する「メニュー」の順番を変更するのは、ドラッグ＆ドロップで順番を変更する。
５）
「メニューを保存」をクリックする。

Step4 おすすめカード

おすすめカードを設定します。

１）
「外観＞メニュー」をクリックする。
２）
「メニュー」画面で「新しいメニューを作成しましょう」をクリックする。
３）
「メニュー名」に”おすすめカード”と入力し、「メニューを作成」をクリックする。
４）
「メニュー項目を追加」の「投稿」から「おすすめカード」に表示したい記事を選択し、「メニューに追加」をクリックする。
５）
画面右下の「メニューを保存」をクリックする。
６）
「cocoon設定＞おすすめカード」タブをクリックする。
７）
「おすすめカード」を設定する。

項目名 設定値
おすすめカードの表示全ページで表示
メニュー選択おすすめカード
表示スタイル画像下段を黒背景にしタイトルを重ねる
８）
「変更をまとめて保存」をクリックする。

Step5 インデックス

インデックスを設定します。

１）
「Cocoon設定＞インデックス」タブをクリックする。
２）
下記の項目を選択する。

項目名 設定値
表示形式タブ一覧
表示カテゴリー表示したいカテゴリを
選択する。（３つまで）

あとは初期値のまま
３）
「変更をまとめて保存」をクリックする。

Step6 サイドメニュー

サイドメニューを設定します。

１）
「外観＞ウィジェット」をクリックする。
２）
「検索」の▼をクリックする。
３）
「サイドバー」を選択し、「ウィジェットを追加」をクリックする。
４）
同様に、「[C]人気記事」の▼をクリックし、「サイドバー」を選択し、「ウィジェットを追加」をクリックする。
５）
同様に、「[C]プロフィール」の▼をクリックし、「サイドバー」を選択し、「ウィジェットを追加」をクリックする。
６）
同様に、「カテゴリー」の▼をクリックし、「サイドバー」を選択し、「ウィジェットを追加」をクリックする。
７）
同様に、「カテゴリー」の▼をクリックし、「アーカイブ」を選択し、「ウィジェットを追加」をクリックする。

Step7シェア、フォローボタン

記事の下にシェアボタン、フォローボタンを設定します。

１）
「Cocoon設定＞SNSシェア」タブをクリックする。
２）
「トップシェアボタンの表示」の「メインカラムトップシェアボタンを表示」のチェックをはずす。
３）
「ボトムシェアボタンの表示」の「メインカラムボトムシェアボタンを表示」をチェックする。
４）
「変更をまとめて保存」をクリックする。
５）
「Cocoon設定＞SNSフォロー」タブをクリックする。
６）
「フォローボタンの表示」の「本文下のフォローボタンを表示する」をチェックする。
７）
「変更をまとめて保存」をクリックする。

まとめ

７ステップで完成です！

Step1 スキン
Step2 ブログのタイトル、サブタイトル
Step3 トップメニュー
Step4 おすすめカード
Step5 インデックス
Step6 サイドメニュー
Step7シェア、フォローボタン

ありがとうございます。
設定できました！

マー

Cocoonって無料なのに高機能ですよね。

あとは自分好みにカスタマイズしてください！！

【まず初めに読んでね！】ブログ初心者がネット広告で月1万円稼ぐ！

マブログのスタートページです。ブログ初心者がネット広告で月1万円稼ぐ方法を順を追って説明しています。まず初めに読んでね！　

【初心者】2chまとめサイトの始め方を教えて！【10ステップで解説】

2chまとめサイトの始め方を10ステップで解説します。まとめサイトの戦略やサーバー、ドメイン選び、まとめくすの設定を説明します。

Cocoonカテゴリのフォント、行間をカスタマイズする方法

マー — Sat, 08 Aug 2020 04:33:02 +0000

Cocoonカテゴリのフォントを小さく、行間を狭くする方法を教えて

ゆずゆろぐ。さんのサイトを参考にさせて頂きました。

Cocoonカテゴリのフォント、行間のカスタマイズ
Cocoonカテゴリにアイコンや線を入れて見やすくする方法

Cocoonカテゴリのフォント、行間のカスタマイズ

・ゆずゆろぐ。さんのサイトを参照して下さい。

【Cocoon】カテゴリーの行間や文字サイズを変えて、コンパクトにするカスタマイズ

WordPressテーマ「Cocoon」のサイドバーにカテゴリーを表示させると、行間が広いことが気になる方もいるかと思います。カテゴリー数が少ないうちはよいのですが、増えてくると縦に間延びしてみえることがあります。そこで今回は、ちょっとした

Cocoonカテゴリにアイコンや線を入れて見やすくする方法

・ゆずゆろぐ。さんのサイトを参照して下さい。

【Cocoon】カテゴリーにアイコンや線を入れて見やすくするカスタマイズ

WordPressテーマ「Cocoon」のサイドバーのカテゴリー表示は、非常にシンプルなデザインになっています。が、区切り線などがないため、カテゴリーの数が増えてくると、見づらくなることがあります。そこで今回は、ちょっとしたカスタマイズでカ

以上です。

項目名	設定値
おすすめカードの表示	全ページで表示
メニュー選択	おすすめカード
表示スタイル	画像下段を黒背景にしタイトルを重ねる

項目名	設定値
表示形式	タブ一覧
表示カテゴリー	表示したいカテゴリを選択する。（３つまで）