2013年1月 Archive

今月（2013年 1月）、サイトでカスタマイズした点をまとめたエントリです。

• Vicuna テンプレートの枠にbox shadow を適用

このブログ（Vicuna テンプレート使用）にbox shadow をつけてみました。

• box-shadow－CSS3リファレンス

Vicuna の場合、ヘッダーとフッター、コンテンツと分けられて構成されています。

影のために外枠でラッピングするのもなんですので、今ある要素のままでスタイルを適用したいとおもいます。

そのためには、それぞれ3つの要素ごとにbox shadow をかける必要がでてきます。

これをやると、影の広がりの距離の関係で、水平方向の影が要素の上下で重なって不自然な影のつきかたになってしまいます。

そこで、影の位置をそれぞれずらすことによって（なるべく）不自然につながらないようにみせています。

div#header には

• box-shadow: 0px -6px 10px 4px rgba(0, 0, 0, 0.6);

div#content には

• box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.6);

div#footer には

• box-shadow: 0px 6px 10px 4px rgba(0, 0, 0, 0.6);

今月のカスタマイズは以上です。以下に過去のカスタマイズ記録リストがあります

• 当ブログのカスタマイズ記録

Movable Type 上で使用するエディタに CodeMirror を設定するやりかたです

もともとMovable Type（ここではヴァージョン5.2 以上ということです）に CodeMirror は同梱されているのですが、使えるようにするのにあれこれしないといけなくなるわけです。

探しましたところ、CodeMirror を使えるようにするためのプラグインが GitHub にありました。

• movabletype/mt-plugin-codemirror · GitHub

CodeMirror for Movable Type として提供されています

簡単な導入手順は以下の通りです。システム管理者権限の有る者がおこないます。

1. 前掲のページより master.zip をダウンロードして、展開しておきます
2. plugins 内のフォルダを Movable Type の plugins ディレクトリに入れます
3. mt-config.cgi に SourceEditor CodeMirror を追加します。参考：SourceEditor | 環境変数リファレンス
4. TinyMCE を使わない場合は、システムメニューのプラグイン設定のところで、TinyMCEを無効にします

で、設定後のキャプチャは以下です(ローカルのMTOS v5.2.2で試しています)。

以下は、表示できる補助ボタンをカスタマイズした例で、リンク挿入を入れています。

カスタマイズの参考までに。プラグインの editor.tmpl のコードを追ってみると参考になります。

NASA のサイトからイメージをダウンロードして壁紙にしています。

完全に趣味な世界であるのですが、よさげなので（割と月並みですが）紹介してみます。

デスクトップはこのような感じに

Launchpad を利用したときは以下のような感じです。

壁紙を得るためのページについて

自分が気づいてから、ほんの数日後に NASA のサイトがリニューアルされていて、少々とまどっているのですが、画像アーカイブとして以下のページがあります（ということで、再度リニューアルがおこなわれて内容が違っていたらすみません）

• NASA - Image of the Day - Gallery

適当に画像を選択して、Download Image のところで自分のコンピュータのディスプレイのサイズに近いものか、あるいはフルサイズのものでダウンロードします。

また、ニュース記事内にも画像があります。以下がアーカイブページです（ページ分割されているのでリンク先は1ページ目です）。

• NASA - Archive

記事ページには Pin it ボタンが設置されているので、Pinteresrt アカウントをもっているひとは、Pin it してボードに保存しておくのが個人的におすすめです。

画像の壁紙の設定は、　Mac OSX だと、ブラウザで画像のみ表示したページで右クリックメニューより、「イメージをデスクトップピクチャとして使用」（利用ブラウザで文言が異なります）で設定されます。

個人的な設定方法は、Macの自分のアカウントのピクチャーフォルダ内に、壁紙用のフォルダを作成して、そこへ画像をダウンロードします。

システム環境設定の「デスクトップとスクリーンセーバ」で [ ＋ ] ボタンを押して壁紙用フォルダを追加してから画像を選択します。