【初心者向け】Cocoonの一般ブロック要素まとめ【Ver1.8】

【アイキャッチ画像】cocoon-general-block CODE
のり
のり

WordPressのテーマ「Cocoon」って色々ブロック要素があるけど、どんなものがあるのか一覧で見たい!

そんな質問に答えます。というか学習用です。一覧で何ができるのかわかる記事があったら良いなということで書きました。

本当に色々あるので、今回は一般ブロック要素のみに絞ってまとめていきたいと思います。従来のWordPressエディターであるクラシックの一部の機能が使えるという感じがしています。

基本なことは、Cocoonの公式サイトにまとまっていますのでそちらをご覧ください。

Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。

段落(ショートコード以外)

段落は文章を記載する一番の基本的な機能です。

文章制御

文章は基本左寄せですが、

中央寄せをしたり、

右寄せをしたりも出来ます。

テキスト制御

太字や、イタリック体にしたり、リンクを貼り付けたり出来ます。

よりリッチなテキスト制御として、難しい漢字かんじにはふりがなをつけたり、インライン画像で画像を入れてみたり、打ち消し線で消したり、ソースコードをこんな感じで、document.getElementById("box")表現出来たりします。

文字制御

文字の色赤色赤色太字青色青色太字緑色緑色太字などが出来るほか、キーボードキーを表すのに、「でコピーできます」のように文字を囲うことも出来ます。

文字マーカー

マーカーをつけるのは6種類あり、黄色マーカー黄色アンダーラインマーカー赤色マーカー赤色アンダーラインマーカー青色マーカー青色アンダーラインマーカーのように表示することが可能です。

バッジ

バッジは、オレンジ赤色ピンク紫色青色緑色黄色茶色灰色の9色あります。

見出しなどには使えません。

フォントサイズ

フォントサイズは、12px、14px、16px、18px、20px、22px、24px、28px、32px、36px、40px、44px、48pxまでありますが、標準文字サイズは18pxくらいです。

テンプレート

テンプレートは、テンプレート文(定型文)を登録していればそれをショートコードで利用することができるというものです。

Wordpressのfunctions.phpを編集する前は、編集前に必ずバックアップを取って保存してください。もし編集後、エラーが出るようでしたら、バックアップファイルを元に復元してください。

テンプレート文(定型文)を登録して使い回す方法
テーマ内に定型文を登録してショートコードで何度でも使い回す方法です。

アフィリエイトタグ

アフィリエイトをおこなう時に、アフィリエイト商品をタグとして登録し、それを表示する機能になります。

Simplicity | 内部SEO施策済みのシンプルな無料Wordpressテーマ
アフィリエイトタグの一元管理機能の使い方
アフィリエイトタグのマネージャー機能の使い方です。広告タグを一元管理することで、タグの張り替えや、テキスト修正などを容易に行えるようになります。

その他

段落ブロックでは、ドロップキャップや背景色を変更することもできます。

ドロップキャップ

背景色の変更

ショートコード

以下は、ショートコードのまとめになります。Cocoonの公式ページがある場合にはそちらのリンクを張っています。また、公式サイトではないですが、全体のショートコードの使い方をまとめたページもありましたので、リンクを張っておきます。

Cocoonで使える[ショートコード]のオプションと使い方まとめ
Cocoonで使えるショートコード+オプション一覧と、使い方が掲載されている公式ページへのリンク集的なまとめです。便利な機能がたくさんあって流し見でこんな機能あったのか~!なんて発見もあるかもしれません。ジャンル分けは独断です。すぐに使い方

広告

好きな所にスポンサーリンク(広告)を入れることが出来ます。

スポンサーリンク
[ad]ショートコードで広告を本文中の好きな場所に表示する方法
広告用のショートコードを用いて投稿者が「広告を出したい!」という場所にズバリ広告を表示させる方法です。

新着記事一覧

サイト内の新着記事を一覧で表示することができます。

Lounge Houseオススメ vol.1(Latin House)
Flickr APIの使い方【実装編】
Flickr APIの使い方【基本編】
デモで覚える!Magnific Popupの使い方【オプション編】
デモで覚える!Magnific Popupの使い方【基本編】
新着記事一覧を表示するショートコードの利用方法
新着記事ウィジェットのようなリスト表示を実現できるショートコードの利用方法です。

人気記事一覧

サイト内の人気記事を一覧で表示することができます。

【初心者向け】CocoonのCocoonブロック要素まとめ【Ver1.8】
デモで覚える!Magnific Popupの使い方【基本編】
Flickr APIの使い方【基本編】
【基本編】CodePenの登録方法と使い方、WordPress(Cocoon)への埋め込み方法を解説
【初心者向け】Cocoonの一般ブロック要素まとめ【Ver1.8】
人気記事一覧を表示するショートコードの利用方法
人気記事ウィジェットのようなリスト表示を実現できるショートコードの利用方法です。

プロフィールボックス

プロフィール欄の情報を埋め込むことが出来ます。

nori

1985年生まれ。セルフプロデュース結婚式をきっかけにブログを開始。本業はSE→IT営業を経て、IT企画/新規事業系へと漂浪中。旅行が好きでプロポーズはアイスランド、新婚旅行はスペイン/イビサ島。小さい頃から音楽を嗜み、今でも時々Jazz系DJと歌ものバンドでSAX/EWIをプレイしています。ミニマリストで、スマホだけで仕事をするのが専らの目標。

noriをフォローする
プロフィールボックスを表示するショートコードの利用方法
ショートコードを用いてプロフィールボックスを記事本文中に表示する方法です。

Amazonリンク

Amazonの商品を紹介するためのリンクです。

Amazon APIのアクセスキーもしくはシークレットキーもしくはトラッキングIDが設定されていません。「Cocoon設定」の「API」タブから入力してください。
Amazon商品リンクショートコードの使い方。サンプルコード満載で解説。
Amazon商品リンク作成ショートコードの使い方を、出来る限り優しく説明しています。便利なオプションもあるので、欲しい見た目をある程度手に入れることができます。

楽天リンク

Amazonの商品を紹介するためのリンクです。

楽天商品リンクショートコードの使い方。サンプルつき。
楽天商品リンクを作成するためのショートコードの使い方を詳しく解説しています。オプションを利用することで、様々な表現を行うことが可能です。

過去日時

過去日時は、自動で何日前、何年前を記載してくれるもので、例えば、この記事を書いたのは「1ヶ月」前で、「0」年前になります。ということが表現できるようになります。

〇年前、〇ヶ月前といった相対的時間経過を表現するagoショートコードの使い方
〇年前、〇ヶ月前、〇週間前、○日前、といった感じの人間感覚的な相対的時間経過を表現するためのショートコードです。記事修正の手間を省けます。
○年前といったような、相対的経過年を表示するyagoショートコードの使い方
○○年前といった表記を自動計算して表示してくれるショートコードの使い方です。

年齢

年齢は誕生日を入れると自動的に計算をしてくれて、「34歳」と表示することが出来ます。

現在の年齢を計算して表示してくれるageショートコードの使い方
誕生日を入力するだけで、現在の年齢を自動的に計算して出力してくれるショートコードの使い方。

カウントダウン

逆にカウントダウンは、仮に僕が90歳で死ぬとすると、あと「20251」日残っていると表示することが出来ます。

~まで○○日!といったような、日にちcountdownショートコードの使い方
「iPhone 100 の発売まで、あと日!!」といったような日付カウントダウンショートコードの利用方法です。何かの発売日や、開演・公開を待ちわびている感じに残りの日にちを表示できます。countdownショートコードショートコードの基本的

評価スター

他には、評価スターというものがあり、以下のような評価を入れる事ができます

4.3
レーティングスター(評価スター)ショートコードの利用方法
レビューページなどで便利な「評価スター」ショートコードのコード入力例です。

ログインコンテンツ

最後に、ログインコンテンツですが、このサイトはログイン機能はないので、こちらをご覧ください。

ログインユーザーのみにコンテンツを表示するログインユーザーオンリーショートコードの使い方
ユーザー登録している人にしか表示されないコンテンツを作成して、ユーザー登録を促すためのショートコードです。

見出し

次に見出しです。↑がH2の見出しになっていて、以下、H2〜H4にスタイルが当てられています。

H3の見出し

H4の見出し

画像

画像と画像にキャプションが付けられます。また、Altテキストや画像サイズ、画像の寸法も調整できる他、リンクをつけることもできます。

夫婦のロゴ
キャプションがつけられます

リスト

リストは、箇条書きリストと順序付きリストの2種類あります。

箇条書きリスト

  • 箇条書きリスト
  • 箇条書きリスト
    • 箇条書きリスト
    • 箇条書きリスト
      • 箇条書きリスト
        • 箇条書きリスト
          • 箇条書きリスト

順序付きリスト

  1. 順序付きリスト
  2. 順序付きリスト
    1. 順序付きリスト
    2. 順序付きリスト
      1. 順序付きリスト
      2. 順序付きリスト
  3. 順序付きリスト
  4. 順序付きリスト

引用

引用は、以下のように引用した文章と引用元が記載できます。

If today were the last day of my life, would I want to do what I am about to do today?

もし今日が人生最後の日だとしたら、今やろうとしていることは 本当に自分のやりたいことだろうか?

Steve Jobs (スティーブ・ジョブズ)

カバー

テキストオーバーレイを含む画像または動画を追加することができます。オーバーレイの色の変更や文字色の変更、背景の透過率も変更できます。

2018.5.19に結婚式を挙げました

ギャラリー

複数の画像をキャプション付きで表示することができます。

音声

学校のチャイム

ファイル

ファイルをダウンロードできるボタンが追加されます。

動画

動画を埋め込むことができます。

レーザーカッターでオリジナルスタンプを作っています

最後に

いかがでしたか?

ほんと色々できてCocoon最高ですね。他のブロック要素については、こちらでまとめていますので参考にしてください!では!

コメント

タイトルとURLをコピーしました