テーマ | マブログ

【簡単】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ステップで解説します。まとめサイトの戦略やサーバー、ドメイン選び、まとめくすの設定を説明します。

WordPressテーマ SANGOの購入方法、インストール方法を教えて！【26画像】

マー — Sat, 17 Apr 2021 08:21:50 +0000

SANGOの購入方法、インストール方法教えて！

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

マー

実際、SANGOを購入してインストールした経験があります。

WordPressテーマSANGOの購入方法
WordPressテーマSANGOのインストール

WordPressテーマSANGOの購入方法

１）SANGOのサイトにアクセスします。

　　　https://saruwakakun.design/

２）サイトが表示されたら、「ダウンロード」をクリックする。

３）「SANGOの購入の方法」ページが表示されるので、画面を下へスクロールする。

３）「BOOTHで購入」が出てくるので、「BOOTHでSANGOを購入」をクリックする。

４）「BOOTH」の画面が表示されるので、下へスクロールする。

５）「カートに入れる」をクリックする。

６）「このショップのレジに進む」をクリックする。

７）「ログイン」画面が表示されるので、「pixiv IDを使って購入」をクリックする。

８）「pixivアカウントを作成」画面が表示されるので、e-mailアドレス、パスワードを入力し「次へ」をクリックする。

９）「ニックネーム」、「性別」、「誕生日」を入力し、「アカウントを作成」をクリックする。

１０）「お支払い方法を選択してください」画面が表示されるので、「クレジットカード決済」を選択し、「クレジットカードを登録」をクリックする。

１１）「カード情報を入力」画面が表示されるので、「カード情報」を入力して「登録してBOOTHで使用」をクリックする。

１２）「お支払い方法を選択してください」画面に戻るので「ご注文確認へ」をクリックする。

１３）「ご注文内容確認」画面が表示されるので、「ご注文確定」をクリックする。

１４）「お支払い内容の確認」画面が表示されるので、「支払う」をクリックする。このタイミングで「pixivアカウントを作成」で登録したe-mailへワンタイムキーが送信される。

１５）「VISA認証サービス」画面が表示されるので、「ワンタイムキー」を入力する。

１６）「ご注文が完了しました」画面が表示される。これで購入は完了です。引き続き「ダウンロード」をクリックする。

１７）「子テーマ.zip」、「ご案内.pdf」、「sango-theme.2.2.5.zip」、「sango-theme.2.3.0.zip」の４つのファイルをダウンロードします。

ダウンロードまでしました！

WordPressテーマSANGOのインストール

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

２）「テーマ」画面が表示されるので「新規追加」をクリックする。

３）「テーマのアップロード」をクリックする。

４）「ファイルを選択」をクリックする。

５）「ファイル選択ダイアログ」が表示されるので、最新のバージョン（ここではsango-theme.2.3.0.zip）を選択する。

６）「今すぐインストール」をクリックする。

７）「テーマのインストールが完了しました。」が表示されたら完了です。

８）同じように「子テーマ.zip」もインストールする。

９）「外観＞テーマ」をクリックし、SANGOの「有効化」をクリックする。これでインストールは完了です。

インストールできました！

マー

簡単ですよね。

以上です。

WordPressのテーマで無料のものを教えて！

マー — Sun, 15 Nov 2020 09:55:24 +0000

Wordperessテーマで無料のものでいいのないかな？

ブログに使うんだけど、有料のものに劣らいな機能がいいな。

もちろん使いやすいもので！

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

私は広告掲載で月１７万円の収入実績があり、これから紹介する無料テーマを実際に使っています。

本記事では、おすすめの無料Wordpressテーマを紹介します。

WordPressのテーマで無料のものを教えて！
Cocoonを選んだポイントはなに？
Cocoon以外で無料のものはないですか？
無料テーマのデメリットは？
そんなあなたには有料テーマ
どんな有料テーマがあるの？
まとめ

WordPressのテーマで無料のものを教えて！

Cocoonがおすすめです。

無料なのに高機能でとても使いやすいです。

本サイトもCocoonを使っています。

へーそうなんだ。どうしてCocoonを選んだの？

Cocoonを選んだポイントはなに？

Cocoonは以下の機能をみたしているので選びました。

PC、スマホ対応（レスポンシブデザイン）
SEO内部対策
高速化対応（AMP対応）
メタタグ編集
広告コード簡単設置

Cocoon以外ではどんなものがあるの？

Cocoon以外で無料のものはないですか？

無料のテーマは数えきれないくらいありますが、ブログ用途で日本語の説明のあるテーマをピックアップして紹介します。

Xeory Base 「バズ部」

Xeory-無料WordPressテーマ-

Xeoryはコンテンツマーケティングに特化した無料のWordPressテーマです。もちろん内部SEOも最大限まで最適化しているので、このテーマを使って、良質な記事を届けて行けば自然と多くのアクセスを得られるようになっています。

あの「バズ部」さんが提供しているテーマです。ランディングページも簡単に作成可能です。

Xeory はバズ部の運営ノウハウをもとに完成させたコンテンツマーケティングのためのWordPressテーマです。
どなたでもコンテンツマーケティングを行い、WEB上に良質なコンテンツを数多く生み出して頂けるように無料で提供させて頂いております。
https://xeory.jp/

Luxeritas（ルクセリタス）

Luxeritas Theme | SEO最適化、レスポンシブ、高カスタマイズ性、とにかく速い、無料の WordPress テーマ

Luxeritas はSEO最適化済み、レスポンシブデザイン、高カスタマイズ性にも関わらず、Webページを高速に表示するための仕組みを満載した、無料の WordPress テーマです。

Luxeritas WordPress Theme は、SEO 最適化済み、レスポンシブ、高カスタマイズ性を持つ無料の WordPress テーマです。
また、多機能であるにも関わらず、Webページを高速に表示するための仕組みが満載されており、非常に高速に動作します。
https://thk.kanzae.net/wp/

STINGER8

STINGER8 - STINGER史上最高にシンプルなテーマ

原点回帰としてSTINGER史上最高にシンプルなテーマ「STINGER8」を公開しました。DEMOSTINGER8サンプルページ前バージョンの「STINGER Plus+」や公開中の「AFFINGER

「STINGER8」では、可能な限りのファイルや機能を減らし、イチからカスタマイズしていきたい方の為に最低限の構造のみ残した非常にシンプルなテーマとなっています
https://wp-fun.com/post-1343/

無料テーマ比較

無料テーマの機能を比較しました。

○は対応。△はプラグイン導入するかソースに手を入れる必要があります。

	Cocoon	XeoryBase	Luxeritas	STINGER8
SEO	○	○	○	○
高速	○	○	○	△
AMP	○	○	○	△
メタタグ編集	○	○	○	○
レスポンシブ	○	○	○	○
広告コード簡単設置	○	△	○	△

へー。いろいろあるんですね。

どれにしようかな。迷うなぁ。

だけど、無料テーマを選ぶデメリットってないのかなぁ？

無料テーマのデメリットは？

無料には無料なりの理由があります。

すべて自力で解決する必要がある。
テーマ動作は100％保証されていない。
技術的な不明点はすべて自分で調査する必要がある。
自分が望むデザインにカスタマイズするには、時間がかかる
html、cssの基礎知識は持っていたいところ

すぐにでもブログを立ち上げたいので、手間ひまかけるのはイヤだなぁ。

カスタマイズに自信がないし。

なるべく記事作成に時間をかけたいな。

そんなあなたには有料テーマ

無料テーマを使って1か月かけてテーマをカスタマイズする時間はない！

すぐにブログを立ち上げたい！

カスタマイズに自信がない．．．

という人は、有料テーマがおすすめです。（お金で時間を買うイメージです）

有料テーマは

完成されたデザイン
広告掲載対応
マニュアル・サポート充実
実績あり

の特徴があるので、安心ですね。

どんな有料テーマがあるのか教えてー

どんな有料テーマがあるの？

紹介する有料テーマは１万円から２万円程度のものです。

正直なところ、機能的には同じレベルです。

あなたは、どんなイメージのブログにしたいですか？

有料テーマにはデモ画面も公開されていますので、あなたのイメージにマッチしたものを選べばいいでしょう。

賢威

【賢威】

価格：24,800円

賢威は、松尾が代表を務める、京都のWebマーケティングチーム「ウェブライダー」が開発している商品です。
ウェブライダーは、被リンクを「売らない」「買わない」というポリシーの元、徹底した内的SEOとコンテンツプランニングによる外的SEOによって、数多くのサイトを上位表示させています。
【賢威】

THE・THOR(ザ・トール)

THE・THOR(ザ・トール)

価格：14,800円

トールなら煩わしいデザイン設定は不要。
デザインソフトを使用しなくてもプロが仕上げたようなサイトが手に入ります。
THE・THOR(ザ・トール)

Diver

Diver

価格：17,980円

Diverは、初心者でも簡単に利用することが可能な高品質高機能なハイスペックワードプレステーマです。
Diver

STORK19

STORK19

価格：11,000円

これまでに20,000人以上のユーザーに使われたWordPressテーマ”STORK”の最新バージョン「STORK19」です。
ストークにしかない洗練されたデザインはそのままに、機能追加や表示スピードの改善を行っています。
STORK19

AFFINER5

AFFINER5

価格：14,800円

見やすく、伝わるデザイン。「カワイイ」から「信頼感」溢れるサイトまで。
変幻自在の万能テーマ
AFFINER5

SANGO

SANGO

価格：11,000円

心地よいWordPressテーマ。
SANGOはユーザーフレンドリーを追求したWordPressテーマです。
SANGO

JIN

JIN

価格：14,800円

読む人も、書く人も　すべてを考え抜いたデザイン。
真の使いやすさを追求したWPテーマ『JIN』
JIN

有料テーマ価格比較

有料テーマの価格を比較してみました。

テーマ名	価格	おすすめ
賢威	24,800円
THE・THOR(ザ・トール)	14,800円	○
Diver	17,980円	○
STORK19	11,000円
AFFINER5	14,800円
SANGO	11,000円
JIN	14,800円

有料テーマでおすすめは、THE・THOR(ザ・トール)、Diverあたり。

まとめ

無料テーマのおすすめはCocoon
無料テーマのデメリットは自力で技術的課題を解決する必要あり。
記事作成に注力したい人は有料テーマも視野にいれたほうがいい。
有料テーマでおすすめは、THE・THOR(ザ・トール)、Diverあたり。

以上です。

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

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