«前の日記(Thu, 02 Sep 2010 (平成22年)) 最新 次の日記(Sat, 04 Sep 2010 (平成22年))» 編集 RSS with tsukkomi RSS without tsukkomi

実験的「実験的日記」


Fri, 03 Sep 2010 (平成22年) [長年日記]

_ gustav テーマをベースにして簡単テーマ編集

設定画面で gustav をベースにしてアレンジできるプラグインを書いてみようとまだ思ってはいるのだけど、append-css.rb に下の CSS 断片を使うと、ひとまず背景画像(三種類 - 1024x300 程度のものとそれを縮小した 480x141(スマートフォン用)、273x80(編集画面用))をどこかにアップロードしさえすれば gustav テーマをアレンジしたものができる。 → 実際に使ってみた例

/* overwrite 'gustav' */
body { /* ヘッダ部の画像 */
	background-image: url(「1024px 幅の画像の URL」);
}
h1 {
	padding-top: 200px; /* 画像の高さによって調節 */
	text-align: right; /* タイトル文字の位置 */
}
body.update h1 { /* 編集画面の画像 */
	background-image: url(「273px 幅の画像の URL」);
}
/* 色の設定 */
body {
	background-color: #fff; /* ページ全体の背景色 */
}
div.day, div.sidebar-item {
	background-color: #F4EEEE; /* 本文部分などの背景色 */
}
div.day h2, div.sidebar-item h3 {
	background-color: #C3BDB8; /* 日付部分などの背景色 */
}
.sanchor { /* 段落アンカーの色 */
	color: #2D2634;
	background-color: #2D2634;
}
div.adminmenu {
	background-color: #2D2634; /* ページ上下のメニューの背景色 */
}
div.footer {
	background-color: #2D2634; /* ページ最下部の背景色 */
}
/* スマートフォン向け設定 */
@media screen and (max-device-width: 480px) {
	body {
		background-image: url(「480px 幅の画像の URL」);
	}
	h1 {
		padding-top: 80px; /* 画像の高さによって調節 */
		font-size: 100%; /* 日記タイトル文字の大きさ */
	}
}

/* others */
/* 左カラムのリンク文字装飾 */
div.day h2 a,
div.day h2 a:visited,
div.day h2 a:hover {
	text-decoration :none;
	color: #442E31;
}
div.section a,
div.section a:visited,
div.section a:hover {
	text-decoration: none;
	border-bottom:1px dashed #ccc;
	color: black;
}
div.section hr {
	border-style: outset;
	width: 80%;
	color: #555;
	margin-left: 10%;
	margin-right: auto;
}
div.section h4 {
	clear: both;
}
div.section h3 {
	margin-bottom: 1em;
}

/* サイドバーのリンク文字装飾 */
div.sidebar-item, a,
div.sidebar-item, a:visited,
div.sidebar-item, a:hover {
	text-decoration: none;
	color: #442E31;
}
div.section h3 a,
div.section h3 a:visited,
div.section h3 a:hover {
	text-decoration: none;
	border-bottom:1px dashed #ccc;
	color: black;
}
div.sidebar-item h3 {
	padding-bottom: 8px;
}

_ 色に悩んだら

画像で使われている色を配色として抽出してくれる colr.org というサイトを知ったので今回使ってみた。最終的には自分のセンスが問われるけど……

使い方を解説してくれている記事 → 画像で使われている色を配色として抽出してくれる「colr.org」

_ 縮小画像を用意するのが面倒だったら

flickr を使ってしまうという手がある。1024x300 サイズのものをアップロードすると今回使いまわせるような縮小画像を勝手につくってくれるので。

アップロードした写真のページが http://www.flickr.com/photos/ntee/4950861517/ だとすると、末尾に sizes/l/ を付けると 1024x300 サイズのダウンロードページに、sizes/m/ だとか sizes/s/ だとかすればそれぞれ 500x146 と 240x70 のページになる。

flickr なら直リンクしても怒られないだろうし、と思ったけど、調べてみたら「画像に直リンクはダメ」ということになってたらしい。となると、ダウンロードして自分のサーバにアップロードしなおすか、image.rb を使えるようにしてアップロードするかしないといけない。だとすると、手元で画像編集ソフトで縮小画像を作成するほうが楽かもしれない。

_ Microsoft、「DLL 読み込み」の脆弱性で対策を強化

なんとなく現在の状況が理解できた。今度はうちの事務所だとどう対処すべきかを考えないといけない、と。

ツールをインストールした後に「Fix-it」ボタンをクリックすると、Microsoft の推奨設定が自動的に適用され、システム全体でネットワークベースの攻撃を遮断する措置が有効になる。

ここまでしてしまうとみんなが使っているソフトウェアで動かないものが出てくるはずなので。

関連記事: マイクロソフト、安全でない DLL ロードの脆弱性を回避する「Fix It」公開

目次

«前の日記(Thu, 02 Sep 2010 (平成22年)) 最新 次の日記(Sat, 04 Sep 2010 (平成22年))» 編集