ホームページ作りの技術を紹介するサイトでは、HTMLやCSSなどのソースコードを表示しています。プラグインを入れる方法もありますが、Elementorではなかなか上手くいきません。そこで、CSSを使ってそれっぽく表示する方法を考えました。

ソースコードをエディタ風に表示するCSS

 まずは、WordPressのテーマフォルダ内のCSSにソースコード用のCSSを追加します。

  1. /*——————————————————–
  2. 5.ソースコード表示枠 CSS
  3. ——————————————————–*/
  4. .code { /* クラス名は任意(以下同)*/
  5. position:relative;
  6. margin-left: 0px;
  7. padding:20px 10px 10px 20px;
  8. border:none;
  9. color: #0a190c;
  10. background:rgba(155, 180, 255, 0.35);
  11. line-height: 1.5em;
  12. }
  13. .code:after{ /* 左上のラベル部分 */
  14. position: absolute;
  15. font-family: FontAwesome,’Quicksand’,’Avenir’,’Arial’,sans-serif;
  16. content: “\f121 code”; /* f121はアイコンの番号 */
  17. position: absolute;
  18. top: 0px;
  19. left: 0px;
  20. padding: 5px 10px;
  21. background: #969998;
  22. line-height: 1;
  23. font-size: 0.9em;
  24. color: #fff;
  25. }
  26. .code li{ /* 行番号とコードの間のライン */
  27. padding-left:15px;
  28. border-left:1.5px solid #676767;
  29. margin-top: 0px;
  30. }

 全て独学で進めてきていますのでプロの方が見たら書き方に問題があるかもしれませんが、このようにCSSで設定しました。参考にしたサイトは次のサイトです。

 Elementorでなければ、行ごとに色を変えたりもできそうですが、そこは少し難しそうです。でも、これで十分かなと思っています。

▶ スポンサードリンク


Elementorでソースコードを表示

 CSSファイルをアップロードしたら、実際にElementorでソースコードを表示してみます。やり方は簡単で、次のような手順で進めていきます。

 まずは、テキストエディターを使い、表示したいCSSを入力します。

 その時に、番号付きのリストを選択しておきます。

 改行しないと1行にすべて収まっているように表示できます。

 もちろん、改行すればすべての行に行番号が入ります。

テキストエディターの詳細設定でCSSクラスに「code」と入力します。これは自分で決めたCSSのクラス名ですので、自由に変更できます。

私と同じ環境で作業している人はこれで以下のようなエディター風のソースコードが表示できます。

  1. .main-conts p{
  2. line-height: 2.2em;
  3. font-size: 1.2em;
  4. color:#000000;
  5. }