デフォルトのテーマからの変更
無料で使える、WordPressのテーマ【cocoon】
デフォルトのテーマから変えてみたら、
むっちゃ良かったので、
変えた方法を記事にしておきます。
変えた順番と項目に分けてみましたので、
目次から、必要なところへ飛んでください。
| ※最初はデフォルトのテーマで書いていて、
途中から、cocoonに変えていますので、 おなじケースなら、参考になると思います。 ☆いじくった部分が出てきたら、このまとめ記事で更新・加筆していきます☆ |
|
▼独自ドメイン取得はここがおすすめ▼ ▼独自ドメインとったらレンタルサーバーここで決まり▼ |
そもそも、なんでテーマを変えた方がいいの？
ところで、テーマってなに？
|
ひとことで言うと、デザイン集合体のぜんぶ入り。 テンプレートやひな形の集合体。 |
と、考えると、そう遠くはないです。
ところで、
デフォルトで付いてくるテーマでも、とりあえずブログは書けます。
ではどうして、有料のテーマや、
cocoonのような無料テーマがいいのでしょうか？
少し考察してみます。
デフォルトのテーマには最低限の機能しかない
残念ながら、デフォルトのテーマには、
必要最低限の機能しか付いていません。
ただし、プラグインという、
「追加でくっつけられる拡張プログラム」があるので、
欲しい機能の拡張は可能です。
しかしながら、
同じ機能のプラグインが、たくさんあってりして、
どれがいいのか、最初は分かりません。
使ったことが無かったら、わからないのが普通です。
そして、管理やメンテナンスしていくことを考えると、
プラグインごとの管理って大変そうです。
ってことで、作者目線のぜんぶ入り、
無料や有料のテーマの出番となります。
| ※テーマの更新があった時について。
cocoonなどのテーマだと、 親テーマ・子テーマというのがあって、 更新ごとの、変更箇所の再設定が不要で、便利です。 ここは、少し先で、解説を書いています。 |
cocoonは無料のテーマだけどプラスアルファの機能が付いてて便利
無料のテーマの、代表格がcocoonです。
他にも、たくさんあるのですが、
|
人気があって、評価の高いテーマを選んでおくと、 なにかしら、詰まったときに、 ググれば、必要な情報がいっぱい出てきます。 |
このことだけでも、選ぶ理由になるのですが、
肝心な、付いてくる機能は？
ということで、ちょっぴり紹介です。
全部の機能を使っているわけではないので、
使っているところの紹介です。
●インストールすると、サイドメニューに、「cocoon設定」が現れます。
ほとんどが、ここから設定できてしまいます。
タブ形式で、項目が分かれていて、
感覚でも、ある程度のことが、
分かりやすく作ってあります。
| スキン(いっきに全体の模様替え)、全体、タイトル、広告、
目次、おすすめカード、ボタン、ウェイジェット…などなど、 いろいろな設定項目があります。 ※すべてを設定しなおす必要はないので、安心してください。 ☆Googleアドセンス広告などの、設定もあります。 ※「広告」と「認証」の２つを設定するのですが、 長くなるので、別の記事にしています。 |
目次機能などは、設定をいじらなくても、
記事に段落を入れると、勝手に作ってくれます。
この記事も、目次の設定は、デフォルトのままです。
他の有料テーマでもOK
有料のテーマは、使ったことがないのですが、
ググって調べたところ、
| 作者ごとの、個性や特徴・こだわりがありそうで、
気に入ったテーマが見つかったら、 好みで選んでOKと思います。 |
ぼくは無料がいいので、cocoonにしました♪
シンプルで読みやすそうですし♪
テーマを変える前の準備
cocoonがいい！となったら、さっそく変えて…、
| ちょっと待って！
ちょっぴり準備をしときましょう。 念のために、いじくっている部分の、 バックアップは取っておきましょう。 ※記事自体や、データベースなどのバックアップも、 取っておいてくださいね。 |
ぼくが取っておいた、バックアップ部分です。
広告タグの保存
ここは、各広告サイトから、あらためてもらってくることもできるのですが、
タグってぱっと見ぃ、どれがどれだか、わからなくなりそうなので、
| テキストエディタで、○○広告のタグ、で保存していました。 |
サイドバーなどのテキスト部分の保存
ここも、並べ方や表示を、いじくっていたので、
広告のタグと同じように、
| テキストエディタで、○○広告のタグ、で保存していました。 |
ブログのデータのバックアップ
記事とデータベースのバックアップ。
|
ツールのエクスポートと、BackWPupでのバックアップを取りました。 BackWPupも、プラグインです。 ※念のために、これで復旧できるか？を、 試しておくのが、いいようです。 …ちなみにですが、クラウドのデータ共有サービスを使って、 バックアップしています。(使ってみたかったからだけなのですが。) |
手順の確認と明確化
ここ、大事です。
インストールなどの途中で、迷子にならないためにも、
| 手順は、明確にしておいたほうが良いです。 |
ぼくは、リアルに書いて、進めてみました。
進めたところを、赤線で消していきました。
| スマホのマインドマップで整理する。って手もあります。
マインドマップって？なんぞや？ ここは、別の記事にしています。 スマホ版のXMindなら、ツリー形式のテンプレもあるので、 ツリー形式のほうが、手順を分かりやすく整理できるかもです。 |
cocoonのダウンロードとWordPressへのインストール方法
こちらから、ダウンロードできます。
親テーマと子テーマの２つを、ダウンロードします。
| 【WordPress無料テーマCocoonのサイト】
わいひらさん♪ありがとうございます♪ |
子テーマもダウンロードするのはなんで？
親テーマと、子テーマがあるのですが、
| ☆テーマ自体の更新があると、
・親テーマで、いじくっていると、 変更箇所が消えてしまうことがあります。 ・子テーマを使っていると、 更新部分だけが、親テーマから適応されるので、 変更したところが、残るので安心です。 |
へ～そうなんだ。便利じゃん♪、
というのが、最初の感想でした。
２つともアップロードする
ダウンロードできたら、
WordPressにアップロードします。
| 親テーマと、子テーマの、両方をアップロードします。 |
使うのは子テーマのほう
| ２つのcocoonをインストールしますが、
有効にして使うのは、子テーマのほうです。 |
・親テーマを使うと起こってしまう不便なこと
| ☆テーマ自体の更新があると、
・親テーマで、いじくっていると、 変更箇所が消えてしまうことがあります。 |
子テーマを使うと良いこと
| ☆テーマ自体の更新があると、
・子テーマを使っていると、 更新部分だけが、親テーマから適応されるので、 変更したところが、残るので安心です。 |
cocoonの設定方法
cocoonを、WordPressにインストールすると、
サイドのメニューに「cocoon設定」が追加されます。
ここで、ほとんどの設定ができてしまいます。
設定の手順
タブから設定していく
cocoon設定の画面にいくと、
各設定画面が、タブ形式になっていて、
ここから、各タブごとに、設定していきます。
メニューとサイドバー
| ここは、cocoon設定ではなくて、
「外観」の「メニュー」と「ウィジェット」です。 |
ここで設定したのが、トップにあるメニューと、
同じくトップにある、４つのカードの設定。
そして、サイドバーの設定。です。
実は実は、ここのとこは、
ヒトデさんのYouTubeから教わりました♪
ヒトデさん♪ありがとうございます♪
| ※変更前のテーマで使っていた、サイドバーのあるところ
テーマを変えたとき、元のテーマのサイドバーがなくなっていて、むっちゃ焦りました。 でも、大丈夫です。ちゃんと保管されています。 ウィジェット画面の左の下のほうにある、 「使用停止中のウィジェット」か「使用停止中のサイドバー」に、 保管されています。 これをドラッグして、「サイドバー」のところに持っていったら、復活しました。 どきどきです。 |
アドセンス広告の設定・貼りかた
アドセンス広告に合格したら、していたら、
「広告」と「アクセス解析・認証」で、
アドセンス広告の設定ができます。
長くなるので、別の記事にしています。
【Googleアドセンス広告をWordPressで貼る。審査後のcocoonでの設定方法。】
小技集
投稿日と更新日の表示
・投稿日は、デフォルトの設定で表示されますが、
| インデックスのタブから、更新日の表示の設定ができます。 |
・カテゴリーごとですが、トップやサイドバーの、
一覧表示の有無も、設定できます。
| ※インデックスと、サイドバーのウィジェットの両方で、設定できるのですが、
トップのページとサイドバーの、両方で適応するようです。 |
※更新時のエラーについて。
| ※テーマの更新のときに、４０３エラーが出る時がありますが、
サーバーのセキュリティ設定の変更で、可能になります。 こちらの記事で、まとめています。 |
ちょっとの記事の手直しで、更新日を変更しない方法
すぐ上に書いた【投稿日と更新日の表示】の応用です。
そのままだと、
ちょっとだけ手直ししただけの、
記事の更新日も、変更されてしまいます。
そして、トップにどんどん表示されてしまいます。
ここの改善方法です。
| 記事の新規追加の画面にありました！
右のサイドバーの、わりと上のほうに、 「更新日の変更」という箱をみつけました。
ここで、選択できます。 |
サイドバーに追従目次を表示させる方法
目次の作り方と、サイドメニューに、
下スクロールについていく、目次の設定方法を書いてみました。
長い記事とかだと、これがあると読むのに便利です。
| 【サイドバーに追従目次を表示させる方法】 |
フッターに文字やバナーを入れる方法【WordPressのCocoon】
ブログの一番下にある「フッター」部分。
地味な部分なのですが、
ブログの情報やらを、いろいろ入れて、
カッコよく！それらしく！してみましょう！
| 【フッターに文字やバナーを入れる方法【WordPressのCocoon】】 |
モバイルでも。フッターに文字やバナーを入れる方法【WordPressのCocoon】
スマホ用のブログにも、
フッターにいろいろ入れてみましょう！
【モバイルでも。フッターに文字やバナーを入れる方法【WordPressのCocoon】】
まとめ
目次に沿って、まとめます。
| デフォルトのテーマから変更しています。
・デフォルトのテーマには最低限の機能しかない。 ・cocoonは無料のテーマだけど、プラスアルファの機能が付いてて便利。 ・気に入ったテーマが見つかったら、他の有料テーマでもOK。 テーマを変える前の準備 ・広告タグの保存 ・サイドバーなどのテキスト部分の保存 ・ブログのデータのバックアップ ・手順の確認と明確化…マインドマップが便利かも。 cocoonのダウンロードとWordPressへのインストール方法 ・親テーマと子テーマを、ダウンロードする ・２つともアップロードする ・使うのは子テーマのほう cocoonの設定方法 ・タブから設定していく ・メニューとサイドバーは、 「外観」→「メニュー」と「ウィジェット」から設定する。 ・アドセンス広告の設定・貼りかた |
▼独自ドメイン取得はここがおすすめ▼
▼独自ドメインとったらレンタルサーバーここで決まり▼
WordPressを使うならロリポップ！
簡単インストール完備で楽々スタート！
さいごに
cocoonなどの無料や有料のテーマのことは、
WordPressを導入したときから、知ってはいたのですが、
WordPressのさわりはじめでしたので、
どこに何があって、どこをいじくるとどうなる？
という部分がまったくわかりませんでした。
少しずつ設定したりしていくうちに、
ちょっとずつ、ちょっとずつ、解明していきました。
ようやく、なんとか、テーマのことが、少しはわかりだしてきたので、
今回の、cocoon導入に挑戦してみました。
けっこうハードに試行錯誤したので、
まとめ記事にすることに。
これから、cocoon導入する！というかたの、参考になればうれしく思います。
あわせて読んでみる
早い！安い！うまい！ロリポップのレンタルサーバーを選ぶ３つの理由
