一所懸命に手抜きする

監査の仕事をしています。ITを利用し、良い意味で「手抜き」することは効率化と精度アップに役立つと思うんです。部下への引き継ぎのためにまずは諸々頭から引っ張り出そうとブログを始めました。

[ Main ]  [ 別館 ]
当ブログで取り上げられている事案やデータベース、人物等はすべてフィクションです。

はてなブログのGist貼り付けの体裁を Solarized Light にしてみました

Gistを導入したものの…

 Gistのコードを挿入するのは簡単です。Gist のページで Copy to Clipboard ボタンを押して URL をコピーして貼り付けるだけです。はてなブログなら「Gist貼り付け」機能で選択するだけです。

ただ貼り付けるだけだと長いソースが困る

Gistを貼り付けするとこんな感じです。
f:id:a_habakiri:20161210210112p:plain

ソースが長いと縦長の醜いフレームになります。

縦の長さを制限してスクロール表示

 CSSに下記コードを追加するとソース表示枠の縦の最大の長さを設定して、長いソースはスクロールするようになります。
はてなブログの場合、 デザイン設定 > カスタマイズ > デザインCSS と選んで、一番下にでも貼り付けると良いと思います。

.gist-data {
  max-height : 20em ; 
    overflow : auto ;
}

20emは20文字分つまり20行です。もちろん設定変更可能です。

ソース表示枠の縦の最大行数を設定して、長いソースはスクロールするようにします。
f:id:a_habakiri:20161210230431p:plain

まだ、フレームの上が寂しいですね。

はてなブログの場合、Caption表示

 ソースフレームを枠で囲み、キャプションを付けます。こちらはHTMLで

<div style="padding: 1px 1px; line-height: 100%;font-weight: bold; text-align: left; font-size: 90%">
  Caption(キャプション)をつけます</br>
[f:id:a_habakiri:20161210230432p:plain]
</div>

とします。
すると
f:id:a_habakiri:20161210230432p:plain
のように枠で囲まれ、キャプションが付きます。

カラーテーマ

 白背景は個人的にあまり好きではなく、カラーテーマとしてSolarized Lightを好みます。
f:id:a_habakiri:20161210230435p:plain
こんな感じです。

導入法

 delphinusさんのSyntaxhighlighter にも Solarized を!(あと Gist も) | blog.remora.cxからSolarized LightのCSSをいただきました。そして先ほどと同様にCSSに貼り付けます。

なんとこの方も

 ※ なんとこの方もGitHubにアカウントをunpublicにされたようです。今気づきました。自分だけじゃなかったんだと思うとほっとします。小心者なので。
   ロボットは僕に言った「君は人間じゃない」 | blog.remora.cx

広告を非表示にする