第5歩 Cocoonテーマをインストールする 

Word Press 第5歩 Cocoonテーマをインストールする Word Press
この記事は約5分で読めます。

わたしのブログでも、「くるくる」がしたいです。

くるくる?

ブログの最初のページで、絵が少しずつ、左にくるくる回っていくアレがしたいです。

Word Press テーマ Cocoon で、カルーセル(carousel,回転木馬、ピックアップ)を設定する方法

カルーセル(回転木馬)のことですね。 ピックアップと呼ばれるときもあります。

あなたのページと同じやつを、やって欲しい。 お金かかるかなあ?

ワードプレステーマ Cocoon は、無料だよ。 お金はかからないけど時間が掛かったなあ。 方法を覚えたら簡単だけど・・・

簡単かあ! よし! やってくれるよね!

いや、今日は野菜不足なので、自炊するから忙しい。 残念でした。

料理はまかせて! だから、そっちはよろしくね。

うっ。 わかりました。

 

Word Pressブログの始め方を初心者に画像26枚つきで解説します。  無料で最強のCocoonテーマを薦めます。

手順1: ダウンロードする。

Cocoonの作者さんのページの利用規約に同意した上で、感謝の気持ちで利用させて頂きます。(Cocoonの利用規約のリンク)

おとなしく文句を言わずに、自分自身だけで利用することが大事ですね。 それでいい?

私に聞かれても困ります。 各自で、よくお読みください。 同意できない場合は使用しないでください。

ここだけは、あまえさせてくれないみたいですね。 はい、読みます。 (5分経過) はい、大丈夫です。同意します。

Cocoonの作者さんのページ(テーマのダウンロードのリンク)から、次の2つをダウンロードします。

 

Cocoon 親テーマのダウンロード
Cocoon 子テーマのダウンロード

手順2: インストールする。

 親テーマと子テーマの両方をインストールして、子テーマを有効にします。(子テーマを使用します。) こうすると、アップデートがあっても設定が残ります。(Cocoonテーマをインストールする方法のリンク

 

Word Press テーマをインストールする その1

新規追加を左クリックします。

Word Press テーマをインストールする その2

テーマのアップロードを左クリックします。

Word Press テーマをインストールする その3

ファイルを選択まで、ダウンロードした親テーマファイルをドラッグします。

2020年6月9日(火)現在では、cocoon-master-2.1.8.zip が最新です。

Word Press テーマをインストールする その4

今すぐインストールを左クリックします。

Word Press テーマをインストールする その5

テーマのページに戻る を左クリックします。

Word Press テーマをインストールする その6

Cocoon親テーマのインストールができました。

続けて、新規追加を左クリックします。

Word Press テーマをインストールする その7

テーマのアップロードを左クリックします。

Word Press テーマをインストールする その8

ファイルを選択まで、ダウンロードした「子」テーマファイルをドラッグします。

2020年6月9日(火)現在では、cocoon-child-master-1.1.2.zip が「子テーマ」最新です。

Word Press テーマをインストールする その9

今すぐインストールを左クリックします。

Word Press テーマをインストールする その10

有効化を左クリックします。

Word Press テーマをインストールする Cocoon インストール完了

有効:Cocoon Child と表示されていれば完了です。

Word Press テーマ Cocoon を適用したページの見本

Cocoonテーマのおかげで、上のような状態に変わります。

<広告> Word Press ができるレンタルサーバー LOLIPOP ロリポップ

手順3: Cocoonを設定する。

ロリポップレンタルサーバー セキュリティ WAF設定 無効にする

 設定するために、ロリポップサーバーのセキュリティのWAFを無効にします。

 これをしないと、403エラーになって、設定できません。

ロリポップレンタルサーバー セキュリティ WAF設定 無効にした

 ロリポップサーバーのセキュリティのWAFを無効にできたので、ワードプレスのCocoon設定を実行できるようになりました。

Word Press テーマ Cocoon で、カルーセルを設定する その1

 Cocoon設定 の カルーセル の カルーセルの表示 を、フロントページのみで表示 に設定します。 ※お好みでどうぞ。

Word Press テーマ Cocoon で、カルーセルを設定する その2

変更をまとめて保存 を左クリックします。

Word Press テーマ Cocoon で、カルーセルを設定する その3

プレビューに表示されたら完了です。

Word Press テーマ Cocoon で、カルーセルを設定する その4 設定完了

Cocoonでカルーセル(回転木馬)を設定すると、こんな感じの表示になります。 ※ほかのテーマでは、ピックアップと呼ばれていることもあります。

お疲れ様です。 できたかな? あ、いい感じ。 でも、くるくるしてないね。 止まったまま・・・

記事が2個しかないからね。 記事数を10個くらいに増やせば、くるくるするよ。

まずは、私が記事をカクカクしなきゃならないのね。 がんばるぞ! そうそう、ご飯できたよ。

ありがとう。 あと少し設定しないと危ないので、ちょっと待っててね。

 

手順4: セキュリティ WAFを有効に戻しておく。

ロリポップレンタルサーバー セキュリティ WAF設定 有効にする

いま、無効になっているので、有効に戻します。 有効にする を左クリックします。

ロリポップレンタルサーバー セキュリティ WAF設定 有効にした

有効に戻せました。 これで、セキュリティも安心です。

Cocoonでスマートフォン向けの表示もできるよ。

ごちそうさまでした。

ねえ、スマートフォンでも文字が大きくて見やすいけれど、一番下のメニューを、ずーっと表示できないかな? 最後まで見た時にこそ、一番上に戻るボタンが欲しいんだけど。 なんとかしてくれない。

Word Press テーマ Cocoon で、モバイルボタンを設定する その1

Cocoon設定のモバイルタブ モバイルボタン の モバイルボタンの固定表示のチェックボックスにチェックを入れたらOKだよ。

Word Press テーマ Cocoon で、モバイルボタンを設定する その2 設定完了 画面見本イメージ

あ、いい感じ。 ありがとう。

SEO対策のメタ入力も、Cocoonで出来ちゃう。

はやりのSEO対策をしたいです。 プラモインできますか。

いや、プラモイン能力はないけれど、あったら良いね。飛行機変形ロボとか。

?? なんの話をしてるの?

プラモ天才 エスパー太郎 全3巻 のプラモインだけど(リンク

オールインワン パックとかが有るって聞いたけど?

あっ、All in on SEO Pack のこと。 プラグインのことね。

こころ当たり有りますか?

Cocoonの中に、簡単なSEO対策があるので、それを使いませんか? ボクもそれを使っています。

じゃあ、それで行こう。

ぼくは設定タブは使ってなくて、メタ入力だけしています。

Word Press テーマ Cocoon で、SEO設定する 入力画面イメージと入力見本

記事を書くページを一番下までスクロールすると、上のようなSEO設定のページが出ます。 第一段階は、こんな感じに入力すれば良いと思います。

けっこう大変だね。 まあ、ぼちぼちやるしかないか?

大変、お疲れ様でした。

どういたしまして! 貸しを多く作ったので、いろいろと頼みやすくなったよ。 ニヤリ!

記事を書いて疲れた時の気分転換に、手伝ってあげるね。 お皿洗いは、たまると大変だから、たまる前に言ってね!

はい。 早めに依頼させていただきます。

 

ワードプレスでブログを始めたい リンク集

Word Press 第1歩 過去の自分が欲しかった「ど素人むけ

Word Press 第2歩 記事を書こう

Word Press 第3歩 バックアップを取ろう

Word Press 第4歩 検索エンジンに登録する

Word Press 第5歩 Cocoonテーマをインストールする

 

 

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