SHIFT BOX

SHIFT BOX

-シフトボックス- WEBデザイナー備忘録

Amebaでブログを始めよう!
良くブログ記事とかでカッコ良くソースコードが書かれているのを見かける。
このアメブロでも実装してみようと思ったけれど、外部のJavascriptを持ってこようとするとひどく面倒くさい事が書かれていたので一時断念。
そこでCSSで簡易だが装飾してみた。
  • .source {
  • background: #333;
  • counter-reset: count;
  • padding: 0 10px 10px 0;
  • }
  • .source li {
  • text-indent: -3em;
  • margin-left: 3em;
  • border-bottom: 1px dotted #999;
  • }
  • .source li:before {
  • text-indent: 0em;
  • content: counters(count,".");
  • counter-increment: count;
  • width: 3em;
  • text-align: center;
  • display: inline-block;
  • color: #999;
  • }
↑のCSSを追加して、記事編集の"HTML表示"から…
  • <ul class="source">
  • <li>あああ</li>
  • <li>いいい</li>
  • <li>ううう</li>
  • <li>えええ</li>
  • <li>おおお</li>
  • </ul>
と記述すると今使っているような見栄えになります。
  • .skinArticle3,
  • .skinMainArea2 {
  • position: relative;
  • position: relative;
  • #advertising2,
  • #resPointAreaWrapper,
  • #footer_ad {
  • position: absolute;
  • left: -9999px;
  • }
↑このCSSで記事本文付近の広告が吹っ飛んだwww
絶対怒られるので元に戻したよ。
けど、実際目立ちすぎるからカスタマイズして落ち着かせるか・・・