Cocoonを使ってみよう
レンタルサーバのlolipopでWordPressの設定をするのはとても簡単な反面、構築されたWordPressの画面のショボさにはびっくりします。
![](http://runningdog.mond.jp/blog/wp-content/uploads/2023/03/uroko-1-150x150.png)
ブログって、、ふつうはもっとセンスの良い画面だよねえ…
それもそのはず、WordPressは、ブログのデータやユーザの管理をしてくれるものの、スタイル(見栄え)の定義はWordPress本体が持っている訳ではなく、様々なサードパーティーが提供する「テーマ」がスタイルの定義を提供しています。もう少し正確に言うと、WordPressは、スタイルのカスタマイズが可能な機構を提供するから、スタイルを定義するテーマは自分で作成して良いよ、ということなのです。更に言えば、テーマを多くの人が提供することで、様々なスタイルのブログをカスタマイズできるということです。だから、Webデザインの得意なベンダーが、WordPressのテーマを提供・サポートするというエコシステムが出来上がっていて、著名なテーマのひとつが「Cocoon」です。エコシステムとは書きましたが、有償のサポートやカスタマイズはあるものの、Cocoonのテーマ自体はGPLなので無償で利用することが可能です。Cocoonはエックスサーバー株式会社が提供するテーマであり、詳細についてはCocoonのサイトで確認することができます。
今使っているテーマに落ち着くまで、Cocoon以外のテーマを使っていた時期もあるのですが、マイナーなテーマだったり、英語でしか説明のないテーマだと、インターネットで分からないことを検索したときに、解決方法が見つからない(正確に言うと、解決方法を日本語で書いたページが見つからない)のですよ。Cocoonなら国内で最も著名なテーマでもあるので、Cocoonを選択した理由はそこにあります
テーマの導入は簡単にできる
lolipopで構築したWordPressなら、テーマの導入は簡単にできます。
WordPressの「管理メニュー」の「外観」の「テーマ」を選択すると、様々なテーマが用意されていることが分かります。Cocoon以外のテーマも選択することができます。
![](https://runningdog.mond.jp/blog/wp-content/uploads/2023/07/cocoon1-1024x557.png)
マウスをそれぞれの画像イメージの上にもってくると、「有効化」と「ライブプレビュー」というボタンが表示されます。「有効化」をclickすると、そのテーマを自分のブログに反映することができますし、「ライブレビュー」をclickすると、反映する前にスタイルを確認することができます。
私のブログでは、Cocoon Child(Cocoon子テーマ)というテーマを有効化しています。Cocoonと書いてあるテーマはCocoon親テーマというものらしいです。Cocoonでは親テーマと子テーマの両方をインストールすることを奨励していますが、lolipopのWordPressでは両者が最初からインストールしてある状態になっています。
これが初期の状態だ!
Cocoon Childを有効化した後に、自分のブログのフロントページを参照すると、こんな感じでした。まさに純真無垢ってところでしょうか。
![](https://runningdog.mond.jp/blog/wp-content/uploads/2023/07/cocoon2-1024x632.png)
画面から分かる通り、見栄えを確認するために、ブログのタイトルや、2件の投稿、1つのカテゴリー(ITという名前)を作成した上でテーマを反映しています。たぶん、スタイルをカスタマイズする上でそのほうが効率よいと思います。
ここでは2件の投稿をしていますが、キャプション画像がない記事となっているため、薄いグレーの背景に「NO IMAGE」という文字が表示されています。ちょっち、寂しいですね。
NO IMAGE画像を登録する
投稿毎にキャプション画像を設定しない場合に表示するデフォルトのキャプション画像、すなわち「NO IMAGE画像」を登録してみることにします。
管理メニューの「Cocoon設定」を選択すると、Cocoon設定の中に多くのタブがあることに気がつきます。この中から「画像」タブを選択して下さい。
![](https://runningdog.mond.jp/blog/wp-content/uploads/2023/08/wp_cocoon1-1024x598.png)
画面を下のほうにスクロールすると「NO IMAGE設定」という箇所があります。
![](https://runningdog.mond.jp/blog/wp-content/uploads/2023/08/wp_cocoon2-1024x598.png)
「選択」をclickすると、upload済のメディアライブラリからNO_IMAGEに指定する画像を選択することもできまし、「ファイルをアップロード」のタブからイメージファイルをuploadして選択することもできます。以下の例ではメディアライブラリの中からイメージを選択して、「画像の選択」をclickしています。
![](https://runningdog.mond.jp/blog/wp-content/uploads/2023/08/wp_cocoon3-1024x583.png)
はい、これでNO IMAGE画像が設定できました。
![](https://runningdog.mond.jp/blog/wp-content/uploads/2023/08/wp_cocoon4-1024x583.png)
最後に「変更をまとめて保存」をclickして設定を保存します。
このブログの関連リンク
広告主へのリンク
![](https://www19.a8.net/0.gif?a8mat=3Z56RH+BDM8Z6+2HOM+BS629)
コメント