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