Cocoonのテーマを使っている場合に、VSCodeでブログ記事の原稿を書いていると、効率よく文字やブロックの装飾を行いたいということがあると思います。
Cocoonの装飾デザインをVSCodeで簡単に使えないかな。。。
VSCodeのユーザースニペット
VSCodeには、提携文章を一発で入力するための機能として、ユーザースニペットがあります。このユーザースニペットを使えば、面倒な長い設定用のHTMLを入力しなくても簡単に、必要なデザインを入力できます。
ユーザースニペットの使い方、設定方法に関しては、以下の記事で詳しく説明しているので、そちらを確認してください。
その設定方法については、こちらの記事で詳しく説明していますので、あわせて確認してみてください。
Cocoon 文字装飾スニペット
ここでは、Cocoon特有の便利なスニペットを紹介します。
まずは、文字の強調や赤文字、黄色い線などの装飾に関するスニペットです。
"Red Text": {
"prefix": "red",
"body": [
"<span class=\"red\">$TM_SELECTED_TEXT</span>"
],
"description": "赤文字を挿入"
},
"Bold Red Text": {
"prefix": "bred",
"body": [
"<span class=\"bold-red\">$TM_SELECTED_TEXT</span>"
],
"description": "太い赤文字を挿入"
},
"Red Underline Text": {
"prefix": "redline",
"body": [
"<span class=\"red-under\">$TM_SELECTED_TEXT</span>"
],
"description": "赤いアンダーラインを挿入"
},
"Yellow Marker Text": {
"prefix": "ymarker",
"body": [
"<span class=\"marker\">$TM_SELECTED_TEXT</span>"
],
"description": "黄色マーカーを挿入"
},
"Yellow Underline Marker Text": {
"prefix": "yline",
"body": [
"<span class=\"marker-under\">$TM_SELECTED_TEXT</span>"
],
"description": "黄色アンダーラインマーカーを挿入"
},
"Strikethrough Text": {
"prefix": "strike",
"body": [
"<span class=\"strike\">$TM_SELECTED_TEXT</span>"
],
"description": "打ち消し線を挿入"
},
ショートカットを登録
スニペットだけでもいいですが、選択範囲にサクッとタグをつけるには、ショートカットを登録しておくとさらに便利になります。
ショートカットの登録については、こちらの記事で詳しく説明していますので、あわせて確認してみてください。
例として、私が登録しているのは以下のショートカットになります。
例えば、redと入力してTabかEnterで赤文字の装飾をできます。
{
"key": "ctrl+shift+q",
"command": "editor.action.insertSnippet",
"when": "editorTextFocus",
"args": {
"snippet": "`$TM_SELECTED_TEXT`"
}
},
{
"key": "ctrl+r",
"command": "editor.action.insertSnippet",
"when": "editorTextFocus",
"args": {
"langId": "markdown",
"name": "Red Text"
}
},
{
"key": "ctrl+r ctrl+b",
"command": "editor.action.insertSnippet",
"when": "editorTextFocus",
"args": {
"langId": "markdown",
"name": "Bold Red Text"
}
},
{
"key": "ctrl+r ctrl+u",
"command": "editor.action.insertSnippet",
"when": "editorTextFocus",
"args": {
"langId": "markdown",
"name": "Red Underline Text"
}
},
{
"key": "ctrl+shift+y" ,
"command": "editor.action.insertSnippet",
"when": "editorTextFocus",
"args": {
"langId": "markdown",
"name": "Yellow Marker Text"
}
},{
"key": "ctrl+y ctrl+u",
"command": "editor.action.insertSnippet",
"when": "editorTextFocus",
"args": {
"langId": "markdown",
"name": "Yellow Underline Marker Text"
}
},
{
"key": "ctrl+shift+s",
"command": "editor.action.insertSnippet",
"when": "editorTextFocus",
"args": {
"langId": "markdown",
"name": "Strikethrough Text"
}
},
デザインボックスのユーザースニペット
続いて、デザインボックスについてのユーザースニペットを紹介します。
ここではよく使うもののみ紹介します。
それぞれどのようなものか詳細については、こちらの記事で詳しく説明していますので、あわせて確認してみてください。
また、新しく自分でユーザースニペットを登録する場合には、デザインのHTMLがわかれば、簡単に登録できます。
デザインのHTMLの取得方法については、こちらの記事で詳しく説明していますので、あわせて確認してみてください。
それでは、よく使うデザインボックスのユーザースニペットを見てみます。
"Strikethrough Text": {
"prefix": "strike",
"body": [
"<span class=\"strike\">$TM_SELECTED_TEXT</span>"
],
"description": "打ち消し線を挿入"
},
"Info Box": {
"prefix": "info",
"body": [
"<div class=\"information-box\">$TM_SELECTED_TEXT</div>"
],
"description": "補足情報ボックスを挿入"
},
"Question Box": {
"prefix": "question",
"body": [
"<div class=\"question-box\">$TM_SELECTED_TEXT</div>"
],
"description": "質問用ボックスを挿入"
},
"Alert Box": {
"prefix": "alert",
"body": [
"<div class=\"alert-box\">$TM_SELECTED_TEXT</div>"
],
"description": "注意喚起ボックスを挿入"
},
"Memo Box": {
"prefix": "memo",
"body": [
"<div class=\"memo-box\">$TM_SELECTED_TEXT</div>"
],
"description": "メモ用ボックスを挿入"
},
"Comment Box": {
"prefix": "comment",
"body": [
"<div class=\"comment-box\">$TM_SELECTED_TEXT</div>"
],
"description": "コメント用ボックスを挿入"
},
"Primary Box": {
"prefix": "primary",
"body": [
"<div class=\"primary-box\">$TM_SELECTED_TEXT</div>"
],
"description": "重要な情報ボックスを挿入"
},
"OK Box": {
"prefix": "ok",
"body": [
"<div class=\"is-style-ok-box\">$TM_SELECTED_TEXT</div>"
],
"description": "OKボックスを挿入"
},
"NG Box": {
"prefix": "ng",
"body": [
"<div class=\"is-style-ng-box\">$TM_SELECTED_TEXT</div>"
],
"description": "NGボックスを挿入"
},
"Dashed Box": {
"prefix": "dashed",
"body": [
"<div class=\"is-style-border-dashed\">$TM_SELECTED_TEXT</div>"
],
"description": "破線ボックスを挿入"
},
"light background": {
"prefix": "light",
"body": [
"<div class=\"is-style-light-background-box\">$TM_SELECTED_TEXT</div>"
],
"description": "薄い背景色"
},
"Tab Box": {
"prefix": "tabbox",
"body": [
"<div class=\"blank-box bb-tab bb-point bb-yellow\">$TM_SELECTED_TEXT</div>"
],
"description": "タブボックス"
},
"sticky": {
"prefix": "sticky",
"body": [
"<div class=\"blank-box sticky st-yellow\">$TM_SELECTED_TEXT</div>"
],
"description": "付箋ボックス"
},
"Badge": {
"prefix": "badge",
"body": [
"<span class=\"badge badge-red\">$TM_SELECTED_TEXT</span>"
],
"description": "バッジを挿入"
},
基本的には、設定のクラスタグをつけるだけのため、bodyのclass=の部分をデザインに合わせて変更すれば、他のデザインでも簡単に作れます。
吹き出しを挿入
最後に吹き出しについても見ておきます。
こちらは少し長くなりますが、例えば、次のようなスニペットです。
"Balloon": {
"prefix": "balloon",
"body": [
"<div class=\"wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box not-nested-style cocoon-block-balloon\"><div class=\"speech-person\"><figure class=\"speech-icon\"><img src=\"https://〇〇.com/wp-content/themes/cocoon-master/images/man.png\" alt=\"\" class=\"speech-icon-image\"/></figure><div class=\"speech-name\"></div></div><div class=\"speech-balloon\"><!-- wp:paragraph --><p>$TM_SELECTED_TEXT</p><!-- /wp:paragraph --></div></div>"
],
"description": "吹き出しを挿入 sbp-r(右)sbp-l(左) sbs-stn(デフォルト)sbs-think(考え事)"
},
簡単にアレンジの際に編集すべき部分を紹介しておきます。
アイコン
アイコンを変更したい場合は、img src=\"https://〇〇.com/wp-content/themes/cocoon-master/images/man.png\"のURLを対象のアイコンのURLに変更してください。
吹き出しの左右の変更
左右のどちらからアイコンと吹き出しを出すかは、sbp-l部分が該当します。
左はsbp-l、右は。sbp-rです。
吹き出しの形式
sbs-stnを変えると吹き出しの形式を変えることができます。考え事のような吹き出しにしたい場合は、sbs-thinkになります。
まとめ
これらの設定を行っておけば、VSCodeでのブログ記事作成は非常に効率的になります。ぜひ設定してみてください。
