2023.02.07スポンサーリンクまずはじめに、CSSやHTMLなどのコードは、ブログ記事のなかで普通の文字列のように記述すると、改行などで形が崩れたり、プログラムとして動作したりしてしまいます。ブログ上では基本的にコードを文字列としてそのまま表示させることはできません。エディター画面ではショートコードは即座にコードとして認識され、web上でもプログラムとして動作してしまいます。コードとして認識されて...>>>>...「today_date(今日の日付)」として動作また、CSSは改行などの表示状態が崩れますし...、HTMLは段落内にコピペしようとするだけで弾かれてしまったりもします。ここからは、『ソースコードをweb上でそのまま表示させる方法』です。使用しているWordPressテーマは『Cocoon』です。左パネルの「ブロック」タブから、「コード」を選択します。コードを入力するブロックが追加されるので、枠内にコードを入力(またはコピペ)します。コードが崩れることなくそのまま表示されます。(下画像はCSSの例。)※web上での表示状態も同じです。代表的な方法は「ハイライト表示」です。特定の文字列の色を変えたりして、コードを目立たせるようにする表示方法のこと。コードブロックを選択した状態で、右パネル「ブロック」タブの「言語」から、適切なプログラム言語を選択しておきます。(下画像はCSSの例。)「言語選択」は、このあとハイライト表示にしたときの文字の色分けに関係します。次に、「Cocoon設定」の「コード」で、「ソースコードをハイライト表示」を適用させます。もとの編集画面にもどってプレビューを確認すると、背景と特定の文字の色が変わって表示されているのが分かります。「行番号表示」を適用させれば、左側に番号を表示させることができます。(先ほどと同じ「Cocoon設定」>>「コード」の画面から。)「ハイライトスタイル」にハイライトの種類がたくさんあるので、テーマブロックの外観をまったく違うデザインに変更することも可能です。ブロック内で簡単カスタマイズ編集画面の右パネルの「ブロック」で、テキストと背景を好きな色に変更することもできます。文字が見えづらくならないよう、テキストと背景に使う色の組み合わせには注意!以上、『ソースコードをweb上でそのまま表示させる方法』でした。PCWindowsワードプレスWordPressコクーンCocoon収益化MonetizationPC・機器・ソフトElectronicsガジェット・小物GadgetつぶやきMemo・Tweetプロフィールきゅうり個人塾を経営してます。ブログなんかやってて本業は大丈夫なのかって?いえいえ、ソッチの手は抜きませんよ、プライベートと睡眠を少しずつ削ってるだけでね。やると決めたからには何にでも全力です。defined.")}))})();タイトルとURLをコピーしました。