livedoorブログにソースコードを載せるときに途中でソースコードが見切れてしまうことがあります。
そこで今回はpreタグにoverflowプロパティを設定して、ソースコードが見切れた時にスクロールバーを表示させるようにしていきます。
livedoorブログのマイページから「プログ設定」を選択します。
デザイン/ブログパーツ設定から「PC」を選択します。
カスタマイズを選択します。
これで設定完了です。
「<pre><code>ソースコード</code></pre>」といった感じに記述すると以下のようにソースコードが見切れているときにスクロールバーが表示されるようになります。
そこで今回はpreタグにoverflowプロパティを設定して、ソースコードが見切れた時にスクロールバーを表示させるようにしていきます。
livedoorブログのマイページから「プログ設定」を選択します。
デザイン/ブログパーツ設定から「PC」を選択します。
カスタマイズを選択します。
/* 記事本文
----------------------------------------------- */
というコメントがある部分の下に以下のコードを追加します。
このコードは以下の記事を参考に作成したのですが、white-space: nowrap;という記述が抜けているとスクロールバーが正しく表示されないようです。
cssが記述できたら保存をクリックしてください。----------------------------------------------- */
というコメントがある部分の下に以下のコードを追加します。
.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;という記述が抜けているとスクロールバーが正しく表示されないようです。
これで設定完了です。
「<pre><code>ソースコード</code></pre>」といった感じに記述すると以下のようにソースコードが見切れているときにスクロールバーが表示されるようになります。
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa