別ブログのワードプレステーマを、Cocoonに変えました
別ブログ、ミニサイトを昨年から運営してます。「社会人ためのボールペン字上達法」といいます。
こちらをワードプレスのテーマ（無料ブログでいうところのスキン）を、Cocoonに変えましたのでその方法を書きます。
社会人のためのボールペン字上達法
Cocoonってどんなテーマ
Simplicityのわいひらさんの、新しいテーマ
このサイトは寝ログのわいひらさん作成の、Simplicityを使っています。Simplicityの良い点は、
フォーラムで質問が出来る。
一度深夜に、2カラムの表示が1カラムになって大慌て、慌ててフォーラムに質問しました。直後にクロームを拡大表示していたと分かりました。ちゃんと私のサイトを見ていただき、「おかしな所はないですよ。」と書きこんでくれました。大慌てで私の方から謝りました。初心者のアホな質問にも答えてくれるのは、心強い。
マメにヴァージョンアップがある。
フォーラムに寄せられた不都合情報と、時々のトレンドに併せて、よくヴァージョンアップしてくれます。ほんと大助かり。
何のに、無料で使えます。
ｃｓｓもいじれない、初心者の私には心強い味方なんです。わいひらさんが新しく配布をはじめたテーマがCocoonなのです。
モバイルファーストのテーマ
寝ログでわいひらさんは、Cocoonのことをこのように紹介しています。
ただ、もちろん「内部SEOが整ってないテーマ」よりは、整っていた方が良いとは思うので、以下のような内部SEO施策を行っています。
- ページ高速化機能搭載（テーマ機能だけでPageSpeed Insights90点後半が取れる）
- モバイルファースト（モバイルフレンドリー）
- ワンクリックでAMP対応
- PCとモバイルでソースコードが100％同じ完全レスポンシブ
- W3CのHTML5バリデーションのエラー0
- W3CのCSSバリデーションのエラー0
- 基本的な構造化データタグの記入
- 構造化データエラー0
- 投稿ごとにメタディスクリプション記入欄の設置
- HTMLアウトラインの最適化
https://nelog.jp/cocoon
ここで注目なのは「モバイルファースト」なのです。このところSEO業界の人が、googleがモバイルファーストのサイトを検索上位にしていると、話題にしていました。ネット弱者の私にはどうしようもなく、テーマの方でやってくれないかなと思っていたのでした。
高速化もgoogleが重視しています。こればかりは諸条件次第でしょうか。
今までどのテーマを使っていたのか。
ちょうど一年前ですが、ミニサイトを作って放りっぱなしで収益を上げる、ということに注目が集まりました。わかったブログを運営している、有名ブロガーのかん吉さんのブログを参考に作りました。
誰でも作れる！無料WordPressテーマを利用した、ミニサイトの具体的な作り方
こちらでお薦めされていた、ｍicataを使いました。有名なstingerの姉妹版で、会社案内のサイトに特化したテーマでした。サイトのテーマカラーを決めて自動的に配色できる機能もあり、ボックスの種類も設定されていたり、電話番号を載せるウジェットがあったりと。会社とお店に特化しているなと感心しました。管理ページでかなりの設定ができるのも、分かり易すかったです。
子テーマでカスタマイズしていたのですが、一度設定が飛んでしまいました。これには困りました。
micataの更新情報が入手しづらかったのですが、micata自体が更新終了となってしまいました。
「社会人のためのボールペン字上達法」は旧ブログで人気のあったシリーズでした。このブログでの公開も考えたのですが、別サイトにしました。大人になっても字が上手くなりたいと、思っている人へ。ノウハウを伝えたいと思ったからです。ミニサイトにして良かったと思っています。
社会人のためのボール上達法 以前のキャプチャー
テーマ変更手順
今回はCocoonで細かい設定はしないで、スキンのお任せしてしまおうかと、思っています。あーでもないこーでもないと、カスタマイズするのは楽しいですが、普通に見易くしてみたいので。スキン選択にします。
大掛かりなサイトでは、カスタマイズ作業が公開されないよう、プラグインを使いますが、もとよりミニサイトなので、一瞬のことなので、やめます。
カスタマイズ中に見た人は、アハ体験が出来るのだ！
手順
すでにwordpreesをサバーにダウンロードしているので、テーマ変更です。
ドメイン取得からサーバ設定はCocoonのサイトが詳しい
サーバーを借りて、ドメイン取って、サイト開設のところはCocoonのサイトに出ています。
ムームードメインで独自ドメインを取得する方法
https://wp-cocoon.com/muumuu-domain/
MixHost（ミックスホスト）でサイトの始め方。WordPressのインストール。
エックスサーバーでサイトの始め方。WordPressのインストール。
JETBOY（ジェットボーイ）でサイトの始め方。WordPressのインストール。
手順1 Cocoonで使うプラグインのインストール
Cocoonで使うプラグインを洗い出し、不足しているプラグインをインストール、有効にします。
Cocoonテーマとあわせて使用するのにお勧めなプラグインまとめ
このサイトは、放りぱなしサイトなので、コメントお問い合わせありません。定番のContact Forem ７と画像管理のプラグインなどインストールしませんでした。
感想
昨年サイト開設をした時と、トレンドが進んでいるな。
手順2 Cocoonと子テーマの、ダウンロード。
Cocoonのテーマをインストールします。2018年7月現在CocoonはVer1.02で、β版からα版に上がっています。少し待った甲斐がありました。方法はCocoonのサイトを読んでください。
テーマのダウウンロード
https://wp-cocoon.com/downloads/
親テーマと子テーマと背景画を、今回はダウウンロードしました。背景画は結局いらなかったです。
インストールしました。ディスプレー。
手順3 インストール
サーバーにインストールします。こちらもCocoonのサイトを参考に、
Cocoonテーマをインストールする方法
https://wp-cocoon.com/theme-install/
Zipを解凍しなくてもインストールできるのか、以前は解凍していたんだけれど、進化しています。作業は簡単。サイトの表示を見たら、広告が崩れてない、目次が自動設定されて2つ表示されていました。
テーマをインストールした管理画面 子テーマを有効にしました。
手順4 スキン決め。楽しい！
お手軽にしたかったので、今回はスキンを使いました。ボールペンの字上達という、成功したい、ということで、色は青を使いたいです。青は成功の色です、青色のスキンから選びました。空のイメージのm-soraを選択しました。管理画面から選ぶだけです。
グローバルナビゲーションの設定と、ヘッダーの題字などが黒で地味でしたので、空の青色の補色で朱色#EF454Aにしました。和の色も探せるcolor-sample.ocnを利用しています。
管理画面 Cocoonのスキン管理
手順5 ウイジェットで、広告の再設定
Cocoonの テーマ利用マニュアル
https://wp-cocoon.com/manual/
テーマを変えたら、ウイジェットで設定していた広告は、飛ぶかなとちょっと心配していました。維持されていました。googleアドセンスはそのままにしておきます。Amazon・楽天のくるくる広告をどう配置するか検討します。どんなお手本があるの？人気のボールペンは何に？と思ったときにすぐ飛べるようにします。読者の利便を図りたいです。本当はロハコのくるくる広告もつけたいが、どうもないらしい。
Cocoonではアドセンスの自動設定と、従来通りのウイジェットとテキスト中に簡単なコードだけで設定できる方法があります。
手順6 いらなくなったプラグインを削除
micataでお世話になったプラグインを削除します。管理画面のキャプチャ―は取ってあるので、復活する場合も大丈夫です。
手順7 目視で確認
ボックスとか拡張スタイルが使えるようになりました。思い切り装飾しましょう。テーマ変更でテキスト崩れがないかも含めて目視で確認！ついでに。誤字脱字、理論崩壊している文章をみつけたら、訂正です。
目視、これ大事！
あれやこれや思ったこと。
わいひらさんが作ったCocoonは、私のようなｃｓｓに弱い人に取って、コードを書かなくて助かります。吹き出しには、ブロガーに人気のいらすと屋さんの、イラストが無料でついていて、思いついたらすぐ使える、かゆいところに手が届くテーマです。よくブロガーの需要が分かってます。
設定しながら、このブログもCocoonにしようかなと思いました。近頃ｃｓｓの勉強をしないと思っています。スキンを公開できるスキルが持てたらな、考える日々です。
今後の社会人のためのボールペン字上達法
社会人のためのボールペン字上達法のサイトは、あと3エントリー書かないと完成しないのです。数か月前から決まっているので、書き上げたいのです。ＰＤＳの作成もある～やってしまえば数時間で終わるのだけれど。
サイトの内容を、ピンポイント過ぎる、大人がボールペンで字を書くことから。社会人の独学・独習を支援する内容に幅を広げてられたら、とも考えています。
放りぱなしサイトなのでコメントも連絡も受付ません。拡散のために、twitterでbotをやりたいです。100語ほどサイトから文言を選びbotでツイートします。botをいくつかフォローしているのですが、仕事系のbotの言葉で気が引き締められたりしています。
あと3エントリーなら、さっさと書きなさい！
