公安九課

  

やっとの思いで、スマホとPCはスタイルシートとアイコンや背景を書いたりしました。
んーん、大変ですよ。

で、今回技術ブログによくある。ソースコードの表示どうするかって話です。
このBlogはアメブロ等と同じでスタイルシートを追加することは、表向きできない仕組みになっています。
なに、そんなん簡単ですよ！とかって、ここで紹介したりすると、「オイオイ、何してくれてんの！」とお叱りを受けそうなので、とりあえず正統派で行きます。

まず、ソースコードの表示どこまでやるかって話ですが、綺麗にこしたことは無いわけです。ですが、自作もソコソコしんどいので、調べると「SyntaxHighlighter」「google-code-prettify」の二種類があります。

・SyntaxHighlighter
これは、サーバをもっている方用ですね。本当はできるかもしれないですが、チャチャっと調べたところダウンロードしてサーバに配置する形のようです。

・google-code-prettify
これは、どうもダウンロードして配置もできますけど、2行するだけで、あら不思議なことが起こるようですｗ
スタイルシートをよそから読み込むんですけどねｗ

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

<link rel="stylesheet" type="text/css" media="screen" href="https://google-code-prettify.googlecode.com/svn/loader/prettify.css">

あとは、テンプレートのスタイルシートに以下をコピーするだけです。
こちらを「google-code-prettify の使い方」まるっとパッチッちゃいました。ありがとうございますｗ

	pre.prettyprint{

		background-color: rgb(248, 248, 248);

		color: gray;

		margin:20px 0px 20px 0px;

		font-family:"メイリオ", Meiryo; /* ←文字を見やすくする */

		font-size:13px;



		overflow: auto;

	}

	pre.prettyprint strong{

		background-color:yellow; /* ←強調したいコードに使用する */

	}

	ol.linenums li{

		list-style: decimal outside;

		line-height:; /* ←行間に使うものだが、任意でよし */

		border-left: solid 3px #6CE26C;

		padding-left: 10px;

		margin-left: -8px;

		background-color: white;

	}

	ol.linenums li.L1,

	ol.linenums li.L3,

	ol.linenums li.L5,

	ol.linenums li.L7,

	ol.linenums li.L9{

		background-color: rgb(248, 248, 248)

	}

  

去年のことでした。
新人研修の後に、受講者が作成したプログラムを見せてもらったりとかしました。
僕が担当したクラスは、通信もしてるし、アルゴリズムも新入社員にしては、凝った作りでした。
にもかかわらず、他の会場の成果物が発表されると、おーーーとか聞こえてきます。

何が、違ったのか？

それは、プルグラムの作りや、アルゴリズムじゃなかったのです。
音がなる。奇抜なキャラクター、デザインの良さでした。

それで、僕は凄く！スゴーク悔しい思いをしました。
で、少しデザインや効果音に関しての考え方を改めました。

デザインは着る物と同じ、商品の包装紙なのです。
誰かにプレゼントする時は、綺麗な包み紙の方が喜ばれるわけです。
それで、今回はブログを書くにあたって、見た目重視？ではなく、見た目にもテンプレートそのままではなく、自作してみました。

メニューバー、リンク、タイトルとりあえず、ですが少しは、攻殻機動隊の世界をイメージできるデザインになっていますでしょうか？
デザイン専門でやっていらっしゃる方からすれば、どうよ？と思われるかもしれません。
まだまだ、ツメが甘い部分もありますが、しばらくはこんな感じで行ってみようかと思います。

今回参考にさせていただいたのは、こんな感じのところです。
ありがとうございます。

「夜景のフリー写真素材」
「補色/ 対照色/ 反対色」「GIMPで、ヘアライン処理した金属面を描く方法」
「アニメ「攻殻機動隊」の電脳通信インターフェースのようなデザインのブラシセット」
「アメブロ・preタグとcssで本文中にソースコードをきれいに表示 テーマ：アメブロカスタマイズ」
「google-code-prettifyの設置」
「google-code-prettify」

「DOS窓風スタイルシート」
「ClipartLogo.comでDOS窓背景をGet」