はてなブログ"Afternoon"デザインテーマ用preでにょーんとソースとかのエリアが伸びるCSS３コード片

はてなブログのAfternoonデザインテーマのコンテンツにおける本体領域のwidthは860px、右のasideを含まない本文用の領域のwidthは580px。ソースやCUIの操作結果など張るには少々幅が狭い。かといってscrollにしてもどうも見苦しい。と、いうわけでCSS3の:hover擬似セレクターでにょーんと伸びるpreにしてみました。

pre
{
    white-space: pre;
    overflow-x: scroll;
    width:100%;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    background: hsl(0,0%,0%);
    color: hsl(0,0%,50%);
    opacity: 0.88;
    border: dotted hsla(0,0%,100%,0.8) 3px;
}
pre:hover
{
    width:148.275862%;
    opacity: 1;
    border: dotted hsla(0,100%,85%,1) 3px;
}

#container-inner
{ position: relative; }

#wrapper
{
    position:relative;
    z-index:1;
}

にょーん。

使い方

はてなブログのダッシュボード→ブログごとの「設定」→デザイン→カスタマイズ→デザインCSS

効果の分かり易いサンプル

javascriptの一行が長くなってる部分の表示例:

function effect(px_, py_, part_, split_){
  if(arguments.length < 4)
    split_ = Math.floor(Math.random() * (conf.split_range.max + 1)) + conf.split_range.min;
  this.objects = [];
  var split_radians = 2 * Math.PI / split_;
  var rotation_radians = Math.random() * Math.PI * 2;

C++な例

#include <random>
#include <iostream>
#include <limits>

int main(){
  std::linear_congruential_engine<uint64_t, 13579, 24680, 9876543210> rne(123456789);
  size_t n;
  std::cout
    << "how many generate?\n"
    << "(you don't input negative value or charactor if you are not understood)\n"
    << " input [0-" << std::numeric_limits<size_t>::max() << "] > ";
  std::cin >> n;
  while(n--)
    std::cout << rne() << std::endl;
}

れがしーぶらうざーが寂しそうにこちらを見ている

爆発すればいいと思うよ＾－＾