WordPressとElementorでソースコードをハイライトしてみた

こんにちは。

WordPressの人気プラグインElementorの「コードハイライト」ウィジェットを使って、ソースコードをハイライトしてみましたので共有です。

 

 

Elementorでソースコードをハイライトする方法

まずはソースコードのハイライト方法をステップ・バイ・ステップで説明します。

 

●Step1:ウィジェットの追加

Elementorの編集画面からレイアウトを選択し、「ソースコード」ウィジェットをドラッグ&ドロップで追加します。

 

 

●Step2:コードの入力

左側のボックス内にソースコードを入力します。

すると、右側のキャンバス上に入力したソースコードが表示されます。

 

 

●Step3:フォントや設定を修正

必要に応じて、ソースコードの言語を選択します。

下図のようにプルダウンボックスがありますので、その中から選択します。

 

全体のデザインに関しては、「Theme」から選択して好みのデザインを選びます。

 

完成です。

 

 

Elementorを使うメリット・デメリット

以下、実際に使ってみた感想です。

Elementorを使うメリットとデメリットに分けて書いてみます。

 

●メリット

・CSSをいじったり、余計なコードを書かずとも、簡単にデザインできる

・行頭に番号が付いていて、これを表示・非表示に切り替えられる等、機能性が高い

・ハイライト部分のフォントの調整も好みのものに柔軟に調整できる

 

 

●デメリット

・この機能を使うために、Elementorを立ち上げて編集しなければいけない(Wordpressの投稿画面からは使えない)

 

WordPressを日記等で使う場合、記事を書く度にElementorを立ち上げるのは結構面倒なので、プログラミングに特化したブログでは使いずらいかもしれません。

ただ、たまに記事内でコードを書くことがある場合は、他のプラグインを追加したり、CSSをいじる手間が不要なので、便利かなと感じました。

 

Elementorには他にも色々な機能があるので、興味があれば、Elementorで作られたサイト(テンプレート一覧)をまずは見て参考にして下さい。

それでは、また。

 

 

 

MotionElements - ロイヤリティフリー 動画素材マーケット、音楽、アフターエフェクト テンプレート

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です