スポンサーリンク

コクーン(Cocoon)テーマの2カラムにフレーム枠をつける方法

Cocoonコクーンカテゴリー表示方法コクーン(Cocoon)

このブログはWordPressの無料テーマ「Cocoon」(コクーン)を使用しています。

なぜ利用しているか?

無料なのはもちろんうれしいのですが、なんといってもHTMLタグとかCSSとか全く分からなくても大丈夫って事です。

こんな風に蛍光ペンで下線を入れるもの標準装備。本来CSSを理解していない私にはできなかったことが可能になりました。

まあ、こんなレベルなのでCocoonをインストールしてからも大変。マニュアルを見ながら四苦八苦。

マニュアルの簡単な単語の意味も未だま分からず、笑われてしまうぐらいでお恥ずかしい!だから人一倍疑問が多いので、これらを書いてみました。

スポンサーリンク

2カラム・3カラムをフレーム枠で囲う方法

先ほども書いた通り、CSSやHTMLが全く分からないので、コクーン(Cocoon)の様々な装飾機能(タブボックスやスタイル)にはとても助けられています。

以前このスタイルが突然消えてしまい、非常に混乱しましたが無事復活してブログを書いています。

参考

コクーン(Cocoon)のスタイル(タブボックス)が消えた
コクーン(Cocoon)の文字装飾ができる標準機能、タブボックスがある日突然消えてなくなってしまいました。原因はプラグインのTinyMCE Advancedだった。でもTinyMCE Advancedの設定をすれば簡単に復活できました。

コクーンテーマには左側に画像、右側に本文みたいなレイアウトができるカラムという機能が、本来はCSSやHTMLなどの知識が無いと、できないレイアウトの技なのですが標準装備されています。

使い方は、【タグ】を選ぶと2列になる2カラムと3列の3カラムがあります。

ビジュアルモードでの表示では・・・

コクーンテーマcocoonカラムフレーム枠

初心者には非常に分かりやすく書けるように色と文字で表示されていますが、実際にプレビューをすると味気ないですよね。

プレビューしてみると・・

枠のないコクーンテーマのカラムなんだか寂しいと感じませんか?

そこで、スタイル機能をいろいろ試してみる事を繰り返していたら、フレーム枠をつけられるようになった。

フレームなしの標準機能

三春滝桜

4月中旬の桜観光スポットは樹齢千年の三春町の1本桜へ

東京から車で約3時間、滞在時間90分で日本3大1本桜が見られる。
運が良ければ青春18きっぷ最終日4月10日に間に合うかも?

フレーム付きの標準機能組み合わせ技

三春滝桜

4月中旬の桜観光スポットは樹齢千年の三春町の1本桜へ

東京から車で約3時間、滞在時間90分で日本3大1本桜が見られる。
運が良ければ青春18きっぷ最終日4月10日に間に合うかも?

当然コクーンテーマの標準機能なのでスマホでは画像(左カラム)が上、文字(右カラム)が下になり、フレーム枠も縦長になって表示されます。

2カラム・3カラムをフレーム枠で囲う手順

とても簡単にできる手順をご紹介しますのでぜひ活用してくださいね。

1、【スタイル】から【ボックス(白抜き)】を選びます。

2、灰色・黄色・赤色・青色の4色からお好みを選びます。

赤色を選ぶとこんな感じになりますよね。

3、表示された赤色ボックスにマウスを移動してクリックするとカーソルが点滅します。

4、その状態で【タグ】から2カラムを選択すると、枠の中にカラム表示されます。

コクーンフレーム枠内の2カラム

波乗りアヒル
波乗りアヒル

これで完成です!簡単でしょう!

あとはいつも通り、左側と右側のそれぞれ内容を書けばフレーム枠付きの2カラム・3カラム表示が完成しますよ!

4色あるからバリエーション変えることもできますね。

波乗りアヒル
波乗りアヒル

早く🔰から卒業できるように!日々奮闘中!なので、CSS使わなくてもできるカスタマイズってありがたいですね。

初心者の🔰のあるあるを書き出してみました。

スポンサーリンク

コクーンテーマをひと工夫

コメント

  1. corratec より:

    Thank you for this post. Its very inspiring.