初心者用 WordPress教室 Cocoon【クラッシックエディター】

お金・副業

私はワードプレスでブログを書いてます。ワードプレスには、書く土台になるテーマというものがあります。有料のテーマはたくさんありますが、Cocoon(コクーン)は無料です。Cocoonは無料とは思えないほどのたくさんの機能が備わっています。そのCocoonの中にある便利な機能のクラッシックエディターの色の見本と、主なトラブル解決法を紹介します。

【3つのトラブルの解決法】
【囲みボタン】解決!【囲みボタンが表示されない】

【囲みブログカードラベル】解決!【囲みブログカードラベルが表示されない時】

解決!【クラッシックで作った部分が削除できない】

クラッシックエディターの出し方

画面左のダッシュボードから「投稿」→「新規追加」をクリック

画面左上の「+」→「クラッシック」をクリック

出てきたクラッシックが閉じていたらクラッシックの枠内をクリックすると、

クラッシックエディターが登場します!

段落

これが段落です。

見出し1から見出し6そして整形済みテキストです。

見出し1

見出し2

見出し3

見出し4

見出し5
見出し6
整形済みテキスト

スタイル

次はスタイルです。

スタイル→インライン

インライン太字

インライン赤字

インライン赤太字

インライン赤アンダーライン

インライン青

インライン青太字

インライン緑

インライン緑太字

インライン打ち消し線

インラインキーボードキー

スタイル→マーカー

マーカー黄色マーカー

マーカー赤色マーカー

マーカー青色マーカー

マーカー黄色アンダーラインマーカー

マーカー赤色アンダーラインマーカー

マーカー青色アンダーラインマーカー

スタイル→フォントサイズ

フォントサイズ12px

フォントサイズ14px

フォントサイズ16px

フォントサイズ18px

フォントサイズ20px

フォントサイズ22px

フォントサイズ24px

フォントサイズ28px

フォントサイズ32px

フォントサイズ36px

フォントサイズ40px

フォントサイズ44px

フォントサイズ48px

スタイル→ボックスアイコン

補足情報(i)
補足情報(?)
注意喚起(!)
メモ
コメント
OK
NG
GOOD
BAD
プロフィール

スタイル→ボックス(案内)

プライマリー(濃い水色)
セカンダリー(濃い灰色)
サクセス(薄い緑)
インフォ(薄い青)
ワーニング(薄い黄色)
デンジャー(薄い赤色)
ライト(白色)
ダーク(暗い灰色)

スタイル→ボックス(白抜き)

灰色
黄色
赤色
青色
緑色

ボックス(タブ)

チェック色灰
チェック黄色
チェック赤色
チェック青色
チエック緑色
 
 

コメント

コメント灰色
コメント黄色
コメント赤色
コメント青色
コメント緑色
 

ポイント

 
ポイント灰色
ポイント黄色
ポイント赤色
ポイント青色
ポイント緑色

ティップス

ティップス灰色
ティップス黄色
ティップス赤色
ティップス青色
ティップス緑色

ヒント

ヒント灰色
ヒント黄色
ヒント赤色
ヒント青色
ヒント緑色

ピックアップ

ピックアップ灰色
ピックアップ黄色
ピックアップ赤色
ピックアップ青色
ピックアップ緑色

ブックマーク

ブックマーク灰色
ブックマーク黄色
ブックマーク赤色
ブックマーク青色
ブックマーク緑色

メモ

メモ灰色
メモ黄色
メモ赤色
メモ青色
メモ緑色

ダウンロード

ダウンロード灰色
ダウンロード黄色
ダウンロード赤色
ダウンロード青
ダウンロード緑色

ブレイク

ブレイク灰色
ブレイク黄色
ブレイク赤色
ブレイク青色
ブレイク緑色

Amazon

Amazon灰色
Amazon黄色
Amazon赤色
Amazon青色
Amazon緑色

OK

OK灰色
OK黄色
OK赤色
OK青色
OK緑色

NG

NG灰色
NG黄色
NG赤色
NG青色
NG緑色

GOOD

GOOD灰色
GOOD黄色
GOOD赤色
GOOD青色
GOOD緑色

BAD

BAD灰色
BAD黄色
BAD赤
BAD青色
BAD緑色

プロフィール

プロフィール灰色
プロフィール黄色
プロフィール赤色
プロフィール青色
プロフィール緑色

ボックス(付箋風)

灰色
黄色
赤色
青色
緑色

バッジ

オレンジ

レッド

ピンク

パープル

ブルー

グリーン

イエロー

ブラウン

グレー

マイクロコピー

テキスト(左)側
テキスト(上)中央
テキスト(右)右側
テキスト(下)左側
テキスト(下)中央
 
テキスト(下)右側
吹き出し(上)左側
吹き出し(上)中央
吹き出し(上)右側
吹き出し(下)左側
吹き出し(下)中央
吹き出し(下)右側

ボタン

レッド(小)

レッド(中)

レッド(大)

ピンク(小)

ピンク(中)

ピンク(大)

パープル(小)

パープル(中)

パープル(大)

ディープパープル(小)

ディープパープル(中)

ディープパープル(大)

クラッシック→スタイル→ボタン→インディゴ(紺色)(大)

クラッシック→スタイル→ボタン→インディゴ(紺色)(中)

クラッシック→スタイル→ボタン→インディゴ(紺色)(大)   クラッシック→スタイル→ボタン→インディゴ(紺色)(大)

ブルー(小)

ブルー(中)

ブルー(大)

ライトブルー(小)

ライトブルー(注)

ライトブルー(大)

シアン(小)

シアン(中)

シアン()大

ティール(緑色かかった青)(小)

ティール(緑色が飼った青)(中)

ティール(緑色がかった青)(大)

グリーン(小)

グリーン(中)

グリーン(大)

ライトグリーン(小)

ライトグリーン(中)

ライトグリーン(大)

ライム(小)

ライム(中)

ライム(大)

イエロー(小)

イエロー(中)

イエロー(大)

アンバー(琥珀色)(小)

アンバー(琥珀色)(中)

アンバー(琥珀色)(大)

オレンジ(小)

オレンジ(中)

オレンジ(大)

ディープオレンジ(小)

ディープオレンジ(小)

ディープオレンジ(大)

ブラウン(小)

ブラウン(中)

ブラウン(大)

グレー(小)

グレー(注)

グレー(大)

【囲みボタン】解決!【囲みボタンが表示されない】

レッド(小)

表示されませんでした。

囲み部分の位置にカーソルを入れたあと、画面上部の「点3つ」→「HTMLとして編集」

文字のすぐ横に<a>と</a>を入れます

表示されました!

レッド(小)

【囲みブログカードラベル】解決!【囲みブログカードラベルが表示されない】

反応しませんでした。

ブログカード内にカーソルを入れて、点が縦3つをクリック「HTMLとして編集」をクリックします。

<P>と</P>の位置を変えます。リンク先のアドレスのすぐ横にはさみます。

できました!

それでもダメだったら「ダッシュボード」→「ブログガード」→「ブログガード表示を有効にする」「コメント欄のブログガード表示を有効にする」にチェックを入れてみてください

その他の機能

太字

イタリック

  • 番号なしリスト
  1. 番号付きリスト

引用

左よせ

中央揃え

右寄せ

リンクの挿入
初心者用 WordPress教室 Cocoon【吹き出し】

リンクの解除

「続きを読む」タグを挿入

取り消し線

横ライン


テキスト色

テキスト色テキスト色テキスト色テキスト色テキスト色テキスト色テキスト色テキスト色テキスト色テキスト色テキスト色テキスト色テキスト色テキスト色テキスト色テキスト色テキスト色テキスト色テキスト色テキスト色テキスト色テキスト色テキスト色テキスト色テキスト色テキスト色テキスト色テキスト色テキスト色テキスト色テキスト色テキスト色テキスト色テキスト色テキスト色テキスト色テキスト色テキスト色テキスト色テキスト色

【ConoHa WING】

吹き出し

男性(左)

女性(右)

ビジネスマン(左)

ビジネスウーマン(右)

悩むおじさん(左)

悩むおばさん(左)

右だけど

男性医師(左)

女性医師(右)

ドヤ顔男性(左)

どや顔女性(右)

その他にも自分で吹き出しは作れます
あわせて読みたい
初心者用 WordPress教室 Cocoon【吹き出し】

解決!【クラッシックで作った部分が削除できない】

クラッシックの部分がバックスペースでも削除できないときがあります。

そういう時は、削除したいところにカーソルを置いて、画面上部の点が縦に3つ並んでるところをクリックして、「HTMLとして編集」をクリックします。該当部分のHTMLソース(アルファベットの羅列)を削除して「下書き保存」。枠が残っていたら、削除したいところにカーソルを置いて、画面上部の点が縦に3つ並んでるところをクリックして、「ブロックを削除」。消えてるかどうかプレビューで確認しましょう。やっているうちにHTMLソースも覚えてきます。

困った時には「HTMLで編集」です(笑)。

失敗しながら覚えていきましょう!

ブログ村に参加してます

PVアクセスランキング にほんブログ村

コメント

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