Tweet

Pocket

アドセンスを非表示にする記事を書こうとしたら、
説明のためのタグを入れると、
そのタグが有効になってしまって困りました。

説明のためにタグを記載して、
・タグが機能しないように
・しかもコピペができるように
するにはどうすればいいのかな。

良く見る　こういった状態にしたい。　↓

<div class='non-ads'>
 
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- レクタングル中０１ -->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-4232461656474788"
     data-ad-slot="061698734"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
 
</div>

そこでいろいろ調べて、こちらも時間をかけてやっとできましたので忘れないように記事にしておきます。

ソースコードをエディタのように表示できるプラグイン

SyntaxHighlighter Evolvedをインストールする

Word Press の管理画面　ダッシュボードに行きます。
プラグイン　→　 新規追加　を選択します。

次に　 キーワード　の覧に　SyntaxHighlighter Evolvedと入力します。

SyntaxHighlighter Evolved　の　 今すぐインストール　をクリックします。

インストールができたら、 有効化　をクリックして有効化します。

これで　SyntaxHighlighter Evolved　が有効化されました。

SyntaxHighlighter Evolvedの設定をする

左側のメニューの　 設定　→　 SyntaxHighlighter Evolved　を選び、SyntaxHighlighter Evolved　の設定画面に移動します。

SyntaxHighlighter Evolvedのバージョンを選ぶ

SyntaxHighlighter Evolvedのテーマを選ぶ

私は　Django　を選んでいます。
表示スタイルは、設定画面の下のほうに　 プレビュー　が表示されていますので、そちらで確認ができます。

規定の設定をする

これで、 投稿の編集　画面を閉じて、各記事の画面に移動します。

SyntaxHighlighter Evolvedの使い方

記事の中でショートコードを設置する

表示したい記事の投稿ページにいきます。

そこで　表示したいソースコードを　[　　]ソースコード[/　　]　で囲みます。

例えば、下記のようにすると

このように表示されます。

<div class='non-ads'>
 
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- レクタングル中０１ -->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-4232461656474788"
     data-ad-slot="061698734"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
 
</div>

ソースコードの種類によって　[　　]　の中を変更します。

これで完成です。

Tweet

Pocket