Cocoonでブログを書く時の使い方集

ブログを書いていくにあたって、あんなことや、こんなことが出来たらいいなと思うことないですか？
若しくは、あれってどうやるんだったっけ？？みたいな。

私自身、更新が頻繁でないこともあり、どうやるんだっけ？？となったことが、数知れず。

今回は、そんなCocoonでブログを書く際の基本的な使用方法などを、主に備忘録を兼ねて
書いていきたいと思います。

まずは、便利なテクニックから、

見出しはhtmlで記述する

皆さんはブログを書くにあたって、下書きはしますか？
私は下書きしてコピー＆ペーストで記事をアップします。
このテクニックは、その際にチョットだけ便利になる方法です。

それは、見出しをhtmlで記述すること。

ブログに見出しを付ける際に、皆さんはどんな方法を使いますか？

「ブロックを追加」ボタンを押して、見出しを選ぶ。
見出しブロックに文章を記入し、見出しレベルを変更する。

このような流れが一般的かと思います。

あとから見出しを一つ一つ設定したり、見出しを後から付け足したり。
そんな作業は時間もかかるし、ひと手間ですよね。

ですが、下書きする際に見出しをhtmlで記述すると、そのまま見出しブロックで表示されます。

具体的には、

<h1>タイトル</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>

このようにです。

これをコピー＆ペーストすると、
ほらこの通り。

下書きの段階から、見出しをhtmlで記述すると、あとから見出しを設定しなくてもすむ。
というプチテクニックでした。

下書き派の方は、ぜひ試してみてください。

ここで注意点です。

こちらのテクニックは、コピー＆ペーストは<h1>から順番にすることです。　　　　　　　　　　　　　　　
<h2>だけコピペしようとしてもうまくいきません。

気を付けましょう。

Googleマップを埋め込む

ここからは、私自身の、あれどうだったっけ？？を書いていきますね。

当ブログでも用いていますが、Googleマップをブログに埋め込む方法です。
ご使用のテーマによって微妙に方法が違ったりするようですが、
今回はCocoonのやり方を紹介します。

以上の流れです。

では、具体的に画面を見ていきましょう。

まずは、マップを検索します。今回は、アミュプラザ鹿児島にしましょう。

共有のボタンを押し、地図を埋め込むを選ぶ。
そしてHTMLをコピー。
この際に、サイズを選んでおきます。このブログは、中サイズを選択することが多いです。

Cocoonの投稿画面に戻り、カスタムHTMLブロックにコードを貼り付けます。

プレビュー表示に切り替えると、きれいに表示されていますね？

以上です。

BOX内をリスト表示にする

ここまで読んでくださった皆さんは、もうお気づきのことと思います。
WordPressにおいて、ブログ内に何かを作るときには、それに対応する
ブロックを追加していけばよいわけです。

では、
上記の文章や、下記でも使用している、リスト入りのボックスを作ってみましょう。

では、実際の画面で見ていきましょう。

ブロックを追加で、タブボックスを選び、

タブボックス内で、さらにブロックを追加、リストを選んでOK
リストの種類は、今回は数字で作っています。

ボックスやリストの細かい設定は、歯車のマークから変更できます。

ボックスのラベルや色などを変更できます。

コードを埋め込む

最後にコードを埋め込む方法です。
先ほどの見出しのコードを埋め込んでみます。

はい、それでは見ていきましょう。
ブロックを追加で、コードを選びます。

ブロック内にコードを記述します。
コードは大抵、メモ帳やテキストエディタなどの
別のエディタで記述していることが多いので、それをコピペします。

歯車のマークでブロックの設定です。

今回は、HTMLなので、言語のHTMLを選択して終了します。

結果が以下の通り。

<h1>タイトル</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>

まとめ

今回ご紹介した以外にもいろいろなテクニックがあると思います。
私自身もまだまだ始めたばかりですので、知識もテクニックも
アップデートしていきたいと思います。

新しく覚えたことなどは、記事にしてこれからもご紹介していきますので、
ちょくちょくご訪問して頂ければと思います。
また、コメント等も残して下さるとなおのことうれしいですね。

質問なども受け付けておりますよ。

では、拙い記事ですが、

皆さんのブログ運営の一助となれば幸いです。