Cocoon初心者のためのエディタ活用の手引き。ブログ見た目いじりはそっちのけ

Cocoon初心者のためのエディタ活用の手引き。ブログ見た目いじりはそっちのけ Cocoon(コクーン)
スポンサーリンク

Photo by Sergey Zolkin on Unsplash

私ごとですが、この記事投稿時点(2019年5月)でブログ公開よりまもなく1年です。

ワードプレスでブログとういものに初めて触れて記事投稿を続けてきました。今のところブログにそれなりのアクセスがあり、ブログ界隈の「ふるい(篩)」に落とされることなく、しがみつきながら生き残れています。

始めることはもちろん、続けることも難しいといわれるブログ運営。幸いなことに無料ながら機能は超がつくほど優良なワードプレステーマ「Cocoon」でブログ1才を迎えられました。

文才があるわけではないので、人から共感をもらえるような文章(エッセイ)は書けません。ということで自分の体験をもとに人に役立つ、共有できる観点で文章を書くことに努めてきました。

企業のブログ参入が増えSEO競争は激化、「ブログはオワコン」といわれる昨今、ブログ後発の私がブログのアクセスを伸ばし、継続するモチベーションをもらう上でコクーンのエディタ機能による「表現力」に助けられました。

この記事投稿時点で、6〜7万pv/月の間くらい。同じ1年でも私より上はたくさんいるでしょう。それでも続けるモチベーションを保てているペースかな、と感じています。

追記(記事投稿から2ヶ月後):相変わらず、見た目はそっちのけで記事投稿を週3ペースで続けています。現在は20%ちょっとうわずみ、10万pvが見えてきたところまで上昇しています。

言わんとしていることは記事を書かないと人も来ないということ。

ブログを継続する上で、PVはモチベーションになります(収益もですが)。

SEOは多少なりとも勉強しましたが、「もうひと工夫」という点でCocoonのエディタの機能を理解し、使い切ることで検索上位に行きやすい記事が少なからず書けているという実感があります。

この記事では、ブログ初心者でCocoon触りたてホヤホヤの方に向けて「エディタ活用の大切さ」を投稿します。

この記事はこんな方に送る記事

HTMLやCSSに明るくなく、ブログの見た目いじりに悪戦苦闘する日々を過ごす方に送りたい。できないことはチャチャっと後回しだ♪

スポンサーリンク

Cocoon初心者はブログの見た目いじりは程々に

エディタのお話の前に。

カスタマイズのイメージ

Cocoonのカスタマイズってプラモデルみたいで楽しいですよね。ブログは自分のお城のようなものなので、ジブン色にしていきたいものです。

でも、やりすぎには注意しましょう。ボタンをCSSで触りだして1週間… jQueryでなんかすごいエフェクトを1ヶ月開発している…ってなると良くない傾向かも。

カスタマイズしていて不毛だな…って感じたらブログを始めた目的に立ち返りましょう。

カスタマイズが目的の方(クリエイター)、片手間でスイスイカスタマイズできる方ももちろんいらっしゃいます。職業柄、または趣味で得意なんだと思います。そうでなければ、カスタマイズをやりすぎた一日はブログを始めた目的に立ち返る。

私の場合、自分の旅行記録をつけること、+αで収益化を目的にしていました。

Cocoonは有能だし、見た目(スキン)やエディタ装飾は次々とリリースされます。自分でCSSとかいじるのが得意ではない方(私も含めて)は、便利な機能や装飾を作ってくれた開発者やクリエイターに感謝しつつ本来の目的に立ち返り、ブログ記事投稿に時間を使う方が良いかも。

と言いつつ私も記事を書きたくない時とかは多少の見た目いじりもしちゃったりして。

スポンサーリンク

集客目線であれば エディタ活用 >>> 見た目いじり

私はブログに早く人を集めたかったので、見た目いじりは後回しにしました。今でもほとんどGUIインターフェースからの設定で、CSSをいじったところなんて数えるほどです。

コクーンってそのままでもシンプルで良い外観です。スキンを活用すればなおさら。

カスタマイズに時間を書けてもブログへの集客という意味では即効性はない。見た目でファンになってくれるかもしれないけれど、まずは記事を投稿して人を集めないとファンになってくるきっかけすら生まれない。

休憩がてらに外観いじり、普段はひたすら記事投稿

こんなイメージで1年、ブログを運営してきました。

初心者はCocoonエディタをよく知る

ワードプレスを最近始めた方は戸惑っているかもしれない。現在、ワードプレスのエディタはクラシックエディタからブロックエディタ移行の過渡期です。

ワードプレスをインストールすると、ブロックエディタがデフォルトになります。でもググって調べるとたくさんのブログがクラシックエディタの画像でノウハウ共有されています。

ドンちゃん
ドンちゃん

これは困惑するわ

そろそろブロックエディタでいきなりワードプレスを初めても案外いいのかもしれない。でもクラシックエディタも知っていると困ったときの「引き出し」として使えるので私は2つ覚えることを薦めます(今は)。

2種類のエディタと活用ロードマップ
  • ステップ1
    基礎的なHTMLタグは抑える

    ブログ投稿するくらいなら少しのタグを抑えればOK

  • ステップ2
    始めはクラシックエディタで始める

    覚えておけば困った時の助けになるはず。

  • ステップ3
    投稿に慣れたら少しずつメンドウなこともやる

    何気にこれ重要。

  • ステップ4
    ブロックエディタに移行する

    いいか、本丸はここだ!

  • ステップ5
    力がついたらトップページを工夫する

    いいか、これはおまけだ!

基礎的なHTMLタグは抑える

1冊ですべて身につくHTML & CSSとWebデザイン入門講座
Mana
¥ 2,441(2019/07/25 14:48時点)
個人的にはこの手の本は評判の良いものをトコトン読む。何冊も買うのはおすすめできない。

Cocoonのエディタ機能を活かすためや、SEO的に有利な記事を書く上で初歩程度の知識を身につけることを薦めます。どの程度か。次の意味と使いどころがわかる程度に。

知っておくべきHTMLタグ
  • 見出しタグ
  • 段落タグ
  • 強調タグ
  • リンクタグ
  • リストタグ
  • テーブルタグ

Cocoonのエディタも上記のタグを理解しているのと、していないのでは活用の幅が異なります。ブログ投稿しながらでもよいので少しずつ覚えることを薦めます。

テーブルについては次の記事を投稿しています。

始めはクラシックエディタで始める

ドンちゃん
ドンちゃん

器用な方は、すっ飛ばしてもブロックエディタでも良いとは思うわ

クラシックエディタは以前のもので、Microsoftワードを使うイメージに近い。

クラシックエディタから始めることを薦めるのは、引き出しを増やすという意味合いと、あとはブロックエディタが今までにないインターフェース過ぎるので単純に困惑しやすい。

人は慣れないインターフェースを嫌う。

何年か前ですが、Vistaだったっけ?Windows OSの左下にいつも鎮座していた「Windowsボタン」が消えたことがありました。突然のインターフェース変更に人は騒ぎ、クレームの嵐。

結局、マイクロソフトはWindowsボタンを復活させました。Windows 10でもちゃんとボタンありますよね。ちょっとした変更でも人はインターフェース変更を嫌います。

その分、クラシックエディタはワードの使い勝手に似ている(全部ではないが)部分があるのでとっつきやすい。ブログ初期は継続をはばかる要素は一つずつ潰していった方が良い。

ドンちゃん
ドンちゃん

ワード?って人は先入観ない分それは得、ブロックエディターからはじめちゃえと。

装飾系の機能はすべてやってみる

Cocoonクラシックエディタの装飾系機能
Cocoonクラシックエディタの装飾系機能

ブログ記事投稿をしながらで良いので、装飾系の機能は全部試してみましょう。その中で自分のお気に入り、よく使う表現が見つかります。

投稿するたびに、1つ、2つ試すといったムリのないペースでも10記事にたどり着く頃には大体すべての装飾機能を理解しているはず。

投稿に慣れたら少しずつメンドウなこともやる

ここで言うメンドウなこととは、記事が単調にならないようにするための工夫です。段落要素(P要素)のみで書き続けると、読み手が疲れちゃう。

Cocoon関連の記事は50%以上はPC経由でのアクセスと認識しています。それを考えてスペースだったり、強調スニペット、スタイルを読み疲れしないように試行錯誤しています。

読み手の負担を軽減する工夫
  • 記事の構成は見出しを使って作っておく
    • 見出しには投稿したいトピックのキーワードを散りばめておきます
    • 同じキーワードばかりだと目次が気持ち悪くなるので程々に
    • ここまでを読んだところでこの記事の目次を見返すと、大体どういうキーワードを狙っている投稿しているか推測ができると思います。
  • 狙っているキーワードには読み手に自然な形で強調タグも入れておく
  • リスト(箇条書き)を使って言いたいことを整理して伝える
  • 画像や図を入れる(できればオリジナル)
  • さらに複雑なことはテーブル(表)で表現する
  • ワンポイントで吹き出しを使う
    • 吹き出し連発のブログを見かけるのですが個人的には読みづらい。休憩程度に使うのが好み。

それと、読み手向けではないですが画像に説明文章(ALT属性)を入れておきましょう。これを丁寧に入れた記事は検索で上がりやすい感覚があります。最近ではこの作業を最後の仕上げにして、記事に魂を吹き込んでいます。

チャンビア
チャンビア

読み手に優しく+Googleからも高評価をもらっちゃいましょう。

ブロックエディタに移行する

Gutenbergのブロックたち
Gutenbergのブロックたち

ブロックエディタは2018年12月にリリースされた。編集領域がブロック単位となり、分かれたブロックはそれぞれ独立するので部分編集が容易です。

クラシックエディタに慣れて、ワードプレスでの記事投稿への理解が進んだらブロックエディタに移行しましょう。クラシックエディタで使い慣れた表現があれば、そこに絞って使い始めることができます。

なぜ移行するか。なぜブロックエディタをメインに使うか。

なぜならCocoonではブロックエディタの表現力や機能面がクラシックエディタのそれをすでに上回っているから。

すでに装飾系の機能では「ブロックエディタ >>> クラシックエディタ」になっています。加えて、Gutenberg本来のブロック単位での編集領域の管理は慣れると便利。

こんなところは良いブロックエディタ
  • ブロックの入れ替えが簡単。意外に読み返すと段落を入れ替えたいことがたまにある
  • 使える装飾が豊富。
  • テーブル(表)が苦手な方でも簡単に表が作れる。
  • 編集領域を分割できるので、ASPのコード埋め込みとかを他の編集領域と分離させやすい。
    • 消去も簡単になった。クラシックの場合は、GUIのみだと余計なコードが残ることがあり、ソースをみながら削除していた。
  • あまりやらないけど、スマホやタブレットでも編集しやすくなった。
  • (追記)画像のALT属性が超入れやすい

Cocoonのブロックエディタで作るカラムレイアウト
Cocoonのブロックエディタで作るカラムレイアウト

▲ カラムレイアウトもすぐできちゃう。

▲ 上はGutenberg機能のギャラリー表示です。画像をクリックすると拡大してスライドできます。ついでにクラシックエディタにはないCocoonのリスト表現を画像にしています。

Cocoonのブロックエディタの吹き出し機能は2つある
Cocoonのブロックエディタの吹き出しEXなら編集画面でアイコン追加できる

▲ 吹き出しはクラシックエディタからの後継と拡張機能が用意されている。通常はCocoon設定配下であらかじめ使う吹き出しを定義するのですが、吹き出しEXを使うと記事編集画面で追加のアイコン吹き出しを使えちゃう。

Gutenbergエディタで作るテーブル(表)

▲ Gutenberg機能のテーブル作成機能。わりと苦手な方も多いのではないでしょうか。

画像のALT属性!

これ、超大事です!これをやるかやらないかで全然、記事の評価が異なる(あ、いやちゃんと数値的に調べていないけど

ブロックエディタは依然として嫌われているけど、コクーン利用者は移行しよう(少なくともこの記事読んだ方は。

力がついたらトップページを工夫する

記事投稿を繰り返し、クラシック+ブログエディタに慣れてきたらトップページを工夫してみましょう。記事数が数十になったころにはエディタで色々さわるアイデアが湧き出してきますよ。

以下はご参考まで。当ブログにおけるカスタマイズ方法(記事が増えてきた方向け)。

ドンちゃん
ドンちゃん

記事投稿が進んでいない段階でやるのはオススメできないわ。わりとエディタの総合力が求められるのよ。

まとめ

「Cocoon 初心者」をキーワードにした記事といえばCSSとかのハック系ですがあえてそれをそっちのけにして、基礎的な情報を記事にしてみました。CSSでのハックも好きなのだけど、まだ後回しにします(去年も言っていた…)。

Cocoon(コクーン)
スポンサーリンク
ご覧いただき感謝です。記事の品質がブースト的に向上するボタンは次の通りです。
スポンサーリンク
スポンサーリンク
cocoon-affiliate-tag-bannerblog-icon-banner
バジェットな旅行記ロク
タイトルとURLをコピーしました