livedoorブログにソースコードを載せるときに途中でソースコードが見切れてしまうことがあります。

そこで今回はpreタグにoverflowプロパティを設定して、ソースコードが見切れた時にスクロールバーを表示させるようにしていきます。

livedoorブログのマイページから「プログ設定」を選択します。

キャプチャ

デザイン／ブログパーツ設定から「PC」を選択します。

キャプチャ

カスタマイズを選択します。

キャプチャ

/* 記事本文
----------------------------------------------- */

というコメントがある部分の下に以下のコードを追加します。

.article-body-inner  blockquote
, .article-body-inner  pre {
    white-space: nowrap;
    overflow: auto;
    background-color: #303030;
    padding: 5px 15px;
    margin: 5px 0;
    color: #595d68;
}

このコードは以下の記事を参考に作成したのですが、white-space: nowrap;という記述が抜けているとスクロールバーが正しく表示されないようです。



cssが記述できたら保存をクリックしてください。

これで設定完了です。

「<pre><code>ソースコード</code></pre>」といった感じに記述すると以下のようにソースコードが見切れているときにスクロールバーが表示されるようになります。

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa