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

2022年5月13日

 

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

 

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

 

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

 

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

 

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

 

本記事の内容

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

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

 

 

\ 当ブログ使用テーマ /

  • 誰でもかんたんにオシャレデザイン
  • インフォトップ月間総合ランキング第1位
  • SEO対策と広告収入UP機能を標準装備!

初心者から有名ブロガーまで愛用されているSEO最強WordPressテーマ。下記のボタンから購入で、今なら5,000円相当のプラグインが無料でついてきます。

AFFINGER6の購入はこちら

 

\ AFFINGERのカスタマイズまとめ /

【徹底的に解説】AFFINGER6の設定・デザインをカスタマイズ方法まとめ

続きを見る

 

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

CSS

 

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

 

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

 

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

 

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

 

 

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

 

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

 

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のプラグインを利用したソースコードの表示方法について紹介したいきます。

 

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

 

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

  • 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」

続きを見る

 

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

 

 

 

 

 

 

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

注意

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

 

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

 

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

 

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

 

メリット

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

 

デメリット

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

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

 

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

 

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

 

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

 

メリット

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

 

デメリット

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

 

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

 

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

 

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

設定作業

 

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

 

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

 

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

 

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

 

 

  • この記事を書いた人

ANZU

ブログで毎日コツコツ積み上げ|ITスキルとライフハックをアウトプット|プログラミングも独学中|より良い学びと習慣のノウハウを発信| 詳細はブログに掲載していきます。

-AFFINGER, WordPress
-, ,