noteで小説、漫画、掲載してます!

ぴぃこのnoteはコチラ

Simplicty2からCocoonにテーマを変更する方法【エックスサーバー】

Wordpress

デザイン がイマイチなんだよなー。

自分のブログがなんだか面白くないでも何から手をつけて面白くしていけばいいのか全くわからない。

そう思ってブログのイメージを一新しようと決意。

いろいろ調べているうちに見つけてしまったんです。

えっ!Cocoonってなに?

Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。

そんで、どうせデザイン全部変えるなら、テーマも一新してみようと思ったのです。

スポンサーリンク

テーマ変更の前準備

まず、テーマ変更の前準備が必要です

参考サイトのご紹介

今回、コチラのブログ記事を参考にテーマ変更に成功しました。

WordPressテーマを変更する時の注意点!不安をなくす事前準備【Cocoon】
こんにちは!何も考えずSimplicityからCocoonにWordPressテーマを変更しちゃったはまちゃん…

島根で婿養子として生活されているはまちゃんさんの「島根移住ブログ」。はっきり言ってCocoonの変更は「島根移住ブログ」だけで十分です。

ですが、初心者の初心者が「あれ?」と立ち止まってしまうところにスポットを当てているので補足的に見ていただけたら幸いです。

データのバックアップ

テーマ変更など、ワードプレスの大きな変更にはバックアップが必須。プラグインを使う方法もありますが、私はエックスサーバー から直接バックアップを取りました。

「テーマ変更でレイアウトが崩れてしまうのでは?」と心配ですが、Simplicity, Simplicity2からの変更なら全く問題なかったです。バックアップを取ってから思い切って変更していました。

どんなブログにしたいか考える

デザインにとにかくこだわりたい!!

そんな人は事前に作りたいブログのイメージを具現化しておくことをお勧めします。

私はPhotoshopで見本っぽいものを作りました。

色鉛筆で紙に描くでも全然構いません。

いざ!!テーマ変更

いよいよ本題のテーマ変更へ!!

公式サイトよりダウンロード

公式サイトから親テーマと子テーマを両方ダウンロードします。

テーマのダウンロード
Wordpressテーマ「Cocoon」の親テーマと子テーマのダウンロードページです。

ダウンロードする際は普通のフォルダになりますが、自分のワードプレスにアップロードするときは圧縮させてからにしましょう。

あとは下記のはまちゃんさんのブログに従って設定をするだけ!

Simplicity2からCocoonへ変更!最初にしたい10の初期設定作業
こんにちは!Simplicity2&Cocoonを超おすすめしているはまちゃん(@wakuwakuke…

絶対に子テーマを使おう

親テーマ、子テーマ両方ダウンロードを終えたら、子テーマの方を有効化してください。

CSSをいじるなど、カスタマイズしていくこと、将来的にCocoonのバージョンアップに伴って親テーマを更新するときに非常に役に立ちます。詳しくは下のサイトをご覧ください。私なんかよりよっぽどわかりやすく説明してくれていますよ。

子テーマを作ってWordPressの既存テーマをカスタマイズする方法
いまやブログだけではなく、会社紹介のWebサイトやポートフォリオサイト、ECサイトに至るまで、様々なタイプのWebサイトで利用されているCMS、WordPress。すでにデザイン・コーディングが済み、自由に利用できる既存

必要な画像デザイン 

必要な画像は次の通りです

カスタマイズ参考文献

初期設定をしたらあとはコツコツとオシャレにカスタマイズしていくだけです。参考サイトはたーーーくさんありますので、ご参考までに

Cocoonスライドイン(モバイル下固定メニューボタン)をCSSだけでカスタマイズ!
Cocoonのスライドイン(footer下にあるモバイル専用固定メニューボタン)はスマホ・タブレットでは画面下にずっと固定された部分です。自分のサイトカラーやイメージに合わせてスライドインをカスタマイズすると、訪問者さんの印象に残る可能性が
【Cocoon】プロフィールボックスをオシャレにカスタマイズしてみたッ!!
CocoonでプロフィールボックスのデザインをTwitter風にオシャレにデザインするCSSカスタマイズです。コピペで使えます。
WordPressテーマ「Cocoon」カスタマイズまとめ!初心者でもCSSコピペでおしゃれに
こんにちは!無料WordPressテーマ「Cocoon」を超おすすめしているはまちゃん(@wakuwakuke…

Cocoonの感想

大満足です。めっちゃ便利。

ブログ以外の活動をしている私には、アピールスペースを簡単に作れたことが特によかったです。

あと、Gutenbergとの相性もいいのではないかと思います。これについても後ほど書く予定です。では!読者の皆さんのワードプレス生活に幸あれ!

コメント