こんにちは！Cocoonテーマの使いやすさを検証するコクーンサンプルページです。
無料テーマCocoonで記事を書いてみます。上記文章はショートコードで書かれています。
投稿時のテーマバージョンは以下の通りです。
- Cocoonバージョン: 2.4.7
- Cocoon Childバージョン: 1.1.3
見出しの練習【h2タグ】
見出しはh1タグがタイトルタグ、h2タグが各項における見出しを示します。
h3タグは1つの内容をさらに分類する際に使用する小見出しです。
h4タグ以降はあまり細かく設定しすぎるとレイアウトがごちゃごちゃしてしまい読みづらいため、あまり利用をお勧めしません。
h3タグ以降のサンプルは以下の通りです。
これがh3タグ
小見出しとして利用しましょう。
これがh4タグ
h4タグはh3タグよりもさらに細分化するタグです。
h4タグ以下を頻繁に使用すると読みにくいため、h3タグ程度で分類ができるよう、構成を見直しましょう。
h5タグ
h5タグのサンプルです。基本的に使用することはほぼないと思われます。
h6タグ
h6タグです。基本的に使用することはほぼないと思われます。
基本的なブロック
どのテーマでも利用できるブロックをご紹介します。
リスト
- みかん
- ばなな
- りんご
引用
吾輩わがはいは猫である。名前はまだ無い。
吾輩は猫である|青空文庫
画像
画像を25%、50%、75%表示できます。
表
| 名称 | 価格(円) | 在庫(個) |
| ばなな | 250 | 10 |
| りんご | 150 | 20 |
SNS挿入-Twitter
SNSのリンクをコピペすれば簡単に表示できます。
SNS挿入-YouTube
YouTubeも共有リンクを貼るだけで表示可能です。
アフィリエイトリンク挿入方法
ショートコードを用いてアマゾンや楽天などのアフィリエイトリンクを挿入できます。
Cocoon独自のアフィリエイト設定を利用する場合
(独自プラグイン付)いちばんやさしいWordPressの教本 第6版 6.x対応ショートコードを利用します。上記リンクはアフィリエイトリンクですが、以下のショートコードを利用しています。
[affi id=2]ブックマークレットを利用する場合
ショートコード利用するまでにはアマゾンアソシエイトや楽天の登録、設定、ブックマークレットの設定などいくつか関門がありますので、説明記事を読みながら落ち着いて設定しましょう。
Cocoon独自のブロック
Cocoon独自のブロックを確認していきましょう。
吹き出し
吹き出しの設定は記事毎でも可能ですが、全体的なデザインは設定画面で行った方が修正作業が楽でしょう。
見出しボックス
補足説明を提示する場合によく使います。枠、文字の色、見出しの色、ボックス内の背景色は変更可能です。タイトル部分のアイコンは選べます。
ボックス内にさらにボックスを入れられます。例えばリストや段落を入れてみます。
【段落のサンプル】
- みかん
- ばなな
- りんご
タブ見出しボックス
上記のボックスと異なるのはレイアウトです。ボックスの中にさらにブロックを挿入できます。
使い道は人によりけりですが、例示や関連リンクの提示などでしょうか。
色やアイコンの変更は上記見出しボックスと同等です。
ラベルボックス
見出しの部分がラベルのように表示されるボックスです。用途は上記のタブ見出しボックスと似ており、補足や例示などに使うといいでしょう。
ブロックを挿入できます。今回は画像を挿入してみましょう。
FAQ(寄付後使用可能)
製作者へ1000円寄付をすると使用可能になるブロックです。
よくある質問をブロック化したもので、悩みを解決したい読者にとって必要不可欠な表現方法の一つと言えます。
FAQ
よくある質問を簡単に作成できます。
- Qばななはおやつに入るかな？
- A
入りません！
続けてブロック挿入も可能です。
- ５円玉チョコ
- 飴
- スナック菓子
コメント