《発展編》記事執筆テクニックまとめ

ショートコードまとめ

システム上でいくつかショートコードを設定しており、記事内で使えそうなものを紹介します。記事内では基本的にはショートコードというブロックで利用しますが、現状ではそのまま打ち込んでも反映されます。

ショートコードは[ショートコード]のように[]で囲んで記述することで、各コードに紐付けられた役割が発動します。

homeurl

そのサイトのホーム（トップページ）URLが挿入されます。

homeurlを[]で囲って記述した場合

https://neouniv.com

が挿入されるので結果的に

NeoUniversity｜みんなのオンライン大学型情報サイト

ネオユニバーシティ（NEO大学・ネオ大）は様々な分野の各種専門家が集まり講師となって有益な記事を執筆・投稿しあうプラットフォームという「オンラインだからこそ」の総合大学型情報サイトです

neouniv.com

と、ブログカードが表示されるでしょう。

Cocoonショートコードリスト

Cocoonで使えるショートコードの一覧は以下の記事をご覧ください。非常に詳しくまとめてくれています。

特殊クラスまとめ

ブロックには記事編集画面右サイドバー上ブロック>高度な設定>追加CSSクラスで別途別個クラスを適用させることができます。クラスとは特別なスタイルを事前に定義しているもので、こちらでも編集画面上の各種ツールやボタン以外に、いくつか執筆に役立つクラスを用意して使えるようにしてあるのでご紹介します。基本cxから始まるコードを追加CSSクラスに入力してみてください。

クラスがうまく反映されない場合は、入力する場所が違っているケースが多いです。ブロックにはレイヤー（階層）があり、例えば親ブロックの下に子ブロック、その下に孫ブロックが存在する場合が多いです。そしてcxから始まるこれらのコードは基本大本（親ブロック）の追加CSSクラスに入力され機能するように設定してあるので、スタイルを適用させたいブロックの大本となっているブロックが選択されている状態でサイドバーの高度な設定へ進めているかどうか、確認してみてください。

cx-en

全体的に日本語を重視したフォントバランスなため、英語用に調整したクラスです。通常は両端揃えになっていますが、左寄せにしてバランスを調整しています。

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

上が通常、下がツールバーでただ左寄せにしたもの。

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

こちらがクラスcx-enを付与したもの。

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

cx-img

画像ブロックで画像を埋め込むと幅や高さを設定できますが絶対値pxでしか指定できず、環境や画面幅に合わせて可変させることができません。例えば以下の通りです。

そこでサイドバーのブロック>高度な設定>追加CSSクラスに以下のクラス名を記入することで、紐付けられた可変横幅で表示できるようにしました。

cx-img-★

横幅を★に入力した%値で表示

このときpx値で指定していた横幅は上書きされます。エディタ上ではクラスが反映されませんので実際の表示を確認しながら編集作業をおこなってください。
全幅（横幅いっぱい100%）はクラスを使わずともツールバーの全幅や幅広で実現可能です。

cx-listhead

cx-listdash

cx-table-st

cx-vidwid

cx-vidtop01

cx-vidtop02

cx-btn01-comment

cx-btn01-amazon

cx-spicon

cx-h2-frontia-ai

カスタムCSSまとめ

記事編集画面の下にSEOカスタムCSSカスタムJavaScriptといった欄があります。基本的にこの辺りに触れる必要はないでしょうが「カスタムCSS」に関してはいくつかご紹介したい機能があります。

アイキャッチ画像を非表示

.article header .eye-catch-wrap {
display: none;
}

アイキャッチ画像に関してはサイト内外で大きな役割を持つため「設定必須」ですが、記事内のレイアウトやデザイン等の関係上あえて表示させたくない場合は上のコードをカスタムCSSに記入してください。

PR表記を非表示

.article header h1::before {
display: none;
}

記事内に広告がなくヘッダー（記事タイトルの右下）の「PR」表記を非表示にしたい場合は、上のコードをカスタムCSSに記入してください。

その他テクニック

アンカー

記事内の任意の場所にリンクを飛ばすことも可能です。アンカーと呼ばれる手法で、飛ばしたい先のブロック>高度な設定>HTMLアンカーに任意の文字列を入力してください。その後その文字列の頭に#を付けたURLをリンクとして貼ると、その箇所に飛ばすことができます。

例えば、以下のようになります。

https://neouniv.com/neounivcom/sample-article/#cocoonblock

ブログカード化無効

ウェブサイト記事執筆中の有効機能として、URLの自動ブログカード化がありますが、時と場合によってはURLをそのまま表示させたいということもあるでしょう。

https://neouniv.com

https://neouniv.com

上のように整形済みテキストや詩を利用することで実現することもできますが、PHPにおいてnotを意味する「!」をURLの先頭に付けることでもブログカード化を無効にできます。以下入力例（詩）と出力例です。

!https://neouniv.com

https://neouniv.com

!<a href="#">https://neouniv.com</a>

https://neouniv.com

ブログカードスタイル均一化

たとえば「はてなブログ」など一部のブログサービスURLを埋め込んだ際に、独自のスタイルが適応されてしまうことがあります。それを避けて通常通りのブログカードスタイルを適応させたい場合は、URLを[]で囲って記述してください。ラベルを付けることができるCOCOONのブログカードでも同様なので[URL]とすると正しく適応されます。

この「ショートコード[]で囲う」というテクニックは、例えばエディタ上でのブログカード化を防いでスッキリさせることができるなど使い方によって副産物があるので、お好みで使い分けてみてください。

以上です。