AFFINGER WordPress 投稿記事のカスタマイズ

【AFFINGER6とプラグイン】WordPressでソースコードを表示させる方法を紹介

2022年5月13日

当サイトのコンテンツには、広告を記載している場合があります。＜景品表示法に基づく記載＞

 

AFFINGERを使っているけど、ソースコードを綺麗に表示させるにはどうすればいいの？？

 

あと、コピペできるコードの表示方法も知りたい…

 

WordPressなどでブログ運営している方の中には、デザインの変更を加えるCSSコードの編集やプログラミのソースコードを触る機会はあるかと思います。

 

本ブログ同様ですが、AFFINGERの機能を活用している方はソースコードの表示を簡単に行えますので、ぜひ参考にしてみて下さい。

 

Web系ブログやプログラミング系ブログを運営されている方はには、特に参考になるかと思います！

 

本記事の内容

AFFINGERの機能を活用している方はソースコードの表示方法

プラグインを活用したソースコードの表示方法

 

この記事を書いた人

 

＼ 当ブログ使用テーマ ／

  • 誰でも簡単オシャレなデザイン！
  • インフォトップ月間総合第１位！
  • SEO対策と収益UPを標準で搭載！

有名ブロガーに愛用されているSEO最強WordPressテーマ。本ブログも使用中のカスタマイズ性が抜群のテーマです！

AFFINGER6の購入はこちら

 

AFFINGER6の機能でソースコードを表示させる方法

CSS

 

それでは、AFFINGERの機能を使った方法でCSSなどのソースコードを表示する方法について紹介していきます。

 

AFFINGER6では、デフォルトでかなり便利な機能が備わっており、それの一つでソースコードも簡単に表示することが可能です。

 

他にも、さまざまな機能が搭載されていますので、AFFINGERに関する他の記事もぜひ参考にしてみて下さい。

 

それでは、AFFINGERのデフォルト機能を使った表示方法を順番に紹介していきます。まずは、投稿画面を開いて下さい。「タグ」→「ボックスデザイン」より、以下の赤枠のような「pre」「pre:terminal」「pre:shortcode」があると思います。

 

 

その３つの項目の中で、適切なものを選べばあとはコードの貼り付けだけです。

 

次は、使い分けの説明をしていきます！

 

1. pre

「pre」を使ったソースコードの挿入は、プログラミングのコードを表示させたい時に活用できます。

 

実際に挿入したプログラミングのソースコード

 html
import React from "react";
import AddTodo from "./components/AddTodo";
import TodoList from "./components/TodoList";
const Main = () => {
　　return (
　　　<div>
　　　　　<TodoList />
　　　　　<AddTodo />
　　　</div>
　　);
};
export default Main;

 

2. pre：terminal

「pre：terminal」では、、ターミナルに入力するコードを表示させたい時に、使用するのがオススメです。

 

画面の配色なども背景色がブラックなので、デフォルトのターミナルと同じような感じで表示させることが可能です。

 

実際に挿入したターミナルのソースコード

 command
source ~/.bash_profile

 

 

3. pre：shortcode

「pre:shortcode」では、WordPressなどで編集するCSSコードなどを表示させたい時にときに使用することがオススメです。

 

実際に挿入したCSSコードのソースコード

 shortcode
.st-mybox {
　　width: 90%;
　　background-color: #ebf4fe;
　　padding: 5px 50px 5px 20px;
　　color: #000;
　　border: 2px dashed #5D99FF;
}

 

ポイント

表示させるソースコードのタイトルを編集したい場合には、「Text=" 〇〇 "」の箇所をお好みのものにしましょう。

 

AFFINGER6の標準機能でソースコードを表示させる方法は以上です！

 

プラグインを活用したソースコードの表示方法

 

続いては、WordPressのプラグインを利用したソースコードの表示方法について紹介したいきます。

 

ソースコードを表示させるプラグインはいろんな種類がありますが、おすすめは以下の２つです。

 

ソースコードが挿入できるおすすめのプラグイン

  • Enlighter – Customizable Syntax Highlighter
  • Crayon Syntax Highlighter
  • Simple Code Highlighter

 

どのプラグインもプログラミングなどで使用するソースコードの挿入が可能です。

 

本ブログでは「Enlighter – Customizable Syntax Highlighter」を使用しています。

 

実際にこのプラグインを使って挿入したソースコードは以下の通り。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <title>React Redux App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

 

簡単にソースコードが挿入でき、使い勝手もバッチリなので、ぜひ活用してみて下さい！

 

せなお
インストールや使い方に関しては以下の記事を参考にしてみて下さい

 

【WordPress】ソースコードを埋め込むプラグイン「Enlighter – Customizable Syntax Highlighter」

続きを見る

 

またソースコードの導入できるプラグインの公式サイトは以下の通りです。

 

[blogcard url="https://ja.wordpress.org/plugins/enlighter/"]

 

 

[blogcard url="https://wordpress.org/plugins/crayon-syntax-highlighter/"]

 

 

[blogcard url="https://ja.wordpress.org/plugins/simple-code-highlighter/"]

 

メリット・デメリットについて

注意

今回紹介したソースコードを表示させる方法を２つご紹介しました。

 

どちらも簡単に使え、使い勝手としても問題ありませんが、どちらを使うべきなのでしょうか？

 

最後にそれぞれのメリット・デメリットを解説しておきます。

 

まず初めにAFFINGER6のデフォルト機能のメリット・デメリットについてです。

 

メリット

  • シンプルに使える
  • オシャレに表示ができる
  • 使い勝手が良い

 

デメリット

  • 配色カラーがシンプルすぎる
  • インデント（空白）が無い

プログラミングのソースコードを表示させる場合には、「インデント」がないとかなり見辛くなってしまいます。

 

プログラムのソースコードを頻繁に表示させる人にとっては、AFFINGER6のデフォルトの機能だけでは、大きな欠点に…

 

こちらの場合には、シンプルなCSSコードやターミナルのコマンドなどを使うようにしましょう。

 

続いて、「Enlighter – Customizable Syntax Highlighter」のメリット・デメリットについてです。

 

メリット

  • 配色カラー・テーマが豊富にある
  • 使い勝手が良い
  • 長いソースコードの表示ができる

 

デメリット

  • 初期設定が必要
  • ソースコードの種類の設定が必要

 

こちらも、使い勝手は良いですが、使い慣れておく必要があります。

 

ただ、細かい設定を行うことで、かなりおしゃれ表示させることができるので、プラグイン機能の活用はおすすめです！

 

まとめ：自分に合った方法でソースコードを表示させよう

設定作業

 

以上、AFFINGER6とプラグインを各種機能を活用してソースコードを表示させる方法の紹介でした。

 

シンプルなデザインやお好みの配色カラーなどもあると思います。

 

また、プラグインを活用することでお好みの配色テーマが設定でき、痒いところにも手が届くようにもなりますので、

 

あなたが使っているサイトやブログにあったものを使ってみることをオススメします！

参考トップページのカスタマイズに関する記事かこちら

 

参考アップデートやインストール・プラグインに関する記事はこちら

 

参考投稿記事のカスタマイズも関する記事はこちら

 

参考Gogleアドセンス×AFFINGERのカスタマイズについての記事はこちら

 

 

  • この記事を書いた人

せなお

ブログ月間1.6万PV｜YouTubeチャンネル登録者数1000達成！｜最新のITスキルとAIに関する情報発信｜ガジェットレビュー｜Webデザイン｜ 動画編集スキル｜X, Instagramでも情報発信｜本業の3倍稼ぐことのが目標

-AFFINGER, WordPress, 投稿記事のカスタマイズ
-, ,