Cocoon ソースコードを表示させる方法


WordPressテーマの「Cocoon」を使用しているなかで記事内にソースコードを入れる場合に綺麗にコードを表示する方法を説明します。

目次

ソースコードを表示させる方法

ソースコードは「<pre></pre>」タグを、テキストエディタで追加するだけです。

***カテゴリウィジェット**/
#sidebar aside ul li ul li {
background: 0;
padding-left: 0;
}
#sidebar aside li.cat-item a {
display: block;
overflow: hidden;
font-size: 14px;
line-height: 2.3em;
text-decoration: none;
padding: 0 8px;
color: #2098a8;
border-bottom: 1px dashed #ccc;
}
#sidebar aside li.cat-item a:hover {
background: #fff;
color: #C03;
}
#sidebar aside li.cat-item span {
line-height: 1em;
float: right;
margin: 8px 0 0 8px;
padding: 4px 5px;
border-radius: 4px;
color: #545454;
background: #eaf4fc;
}

注意点は「ビジュアルエデタ」に入力してもうまく表示されないので「テキストエディタ」に入力するようにしてください。これでソースコードと通常の文章の区別がしやすく綺麗に表示されるので便利ですね。

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

このサイトでは今までサイト運営を続けてきて困ったことや、これから副業などを始める方に少しでも参考にして頂けたらと思いスタートさせました。体験談でまとめているので間違っている場合も多少はあるかもしれませんが試行錯誤した結果を載せて行きます。

目次