ビジュアルエディタでJINのショートコードを挿入しようとして思った事。
毎回確認するのがめんどくさくて、先日全部表示したものをまとめました。
そして、次につまづいた事。
こういうやつです。
実はこの表示の仕方に苦戦しました。
同じく悩んでいる方いませんか？
なんと、JINだったら簡単に解決できますよ(^-^)
Contents
ショートコードを表示前の設定
シンタックスハイライター機能追加
シンタックスハイライター機能って知ってますか?
プログラムコードに色を付けて、表示してくれます。
ここまでたどり着くのに時間を要しました。
JINのサイトでちゃんと説明してくれてました。
JINテーマ搭載の「シンタックスハイライター機能」を使う方法
JINのサイトと説明が重複しますがスムーズに進めるために、画像も入れておきます。
まずビジュアルエディター上に「コードサンプルを挿入／編集」というアイコンを表示させなければいけません。
①ダッシュボードの「サイトをカスタマイズ」をクリック。
②「その他設定を」をクリック。
③「コードのシンタックスハイライターを利用する」にチェック。
はい、これでOKです。
シンタックスハイライター機能を使って表示してみる
では、実際やってみましょう。
※ショートコード →アイコン→チェックとクリックした時に表示される[jin_icon_check color="#e9546b" size="18px"]
を記事内に表示させたかったわたしの例です。
①「コードサンプルを挿入／編集」をクリック。
②この画面になるので、ショートコードを入力（貼り付け）してOKをクリック。
※この時ショートコード をさらに角括弧[ ]で囲むのを忘れないでください。
③するとビジュアルエディタ上と記事内の表示はこうなります。
[[jin_icon_check color="#e9546b" size="18px"]]
はい、できました(^-^)
JINショートコード に色を付けないで記事内に表示させる
シンタックスハイライターを使用しない
「コードサンプルを挿入／編集」を押さずに、そのままショートコード を表示させたら角括弧[ ]で囲むだけです。
そうすると、下記のように記事内に表示されます。
色が付いてないですね。
[jin_icon_check color="#e9546b" size="18px"]角括弧に気づかず延々とググりまくったわたしの話
ググって調べた方法で何回やってもショートコード がコードのまま表示されず、解決するまでにすごく時間がかかりました。
でもこれでまた一つ覚えたのでレベルアップです。
まだまだ勉強しないとですね。
また何か発見したら 記事にします。
