トマトジュース買ってね

2013年12月26日

Blogger に SyntaxHighliter を導入してみる

SyntaxHighlighter なんていうステキなものを発見。
こんな感じにソースコード書いてあるサイト、よくありますよねぇ。

#!/usr/bin/python
# -*- coding: utf-8 -*-
print("Hello World")

Bloggerって、HTMLテンプレートをかなり柔軟にイジっていいみたいですね。

[テンプレート] [HTML編集]をクリック
<head>の中に、SyntaxHighliterのスタイルとスクリプトを追加する。

<head>
    <meta charset='utf-8'/>
    <meta content='width=device-width, initial-scale=1.0' name='viewport'/>
    <!-- Syntax Highlighter Scripts Generator -->
    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
    <script language='javascript' type='text/javascript'>
      SyntaxHighlighter.config.bloggerMode = true;
      SyntaxHighlighter.all();
    </script>
    <style>
      .syntaxhighlighter {
        overflow: auto !important;
        overflow-y: hidden !important; }
     .syntaxhighlighter .toolbar{ display:none !important }
    </style>

<pre>タグ中に使えない文字(<>"'など)をエスケープするには、preタグメーカーを使えばいいみたい。

2013年12月7日

クリスマスの曲を用意するもに

もうじきクリスマスなので、簡単に路地演奏できるソロ曲を準備してみたもに。

クラビネットやホンキートンクで演奏すると雰囲気が出るので、演奏楽器は各自工夫するといいもに。

こちらは、２人合奏曲になります。

ABC楽譜置き場はリンクしておこぉ～

古の楽譜置き場

2012年11月23日

ABC楽譜をちょっとだけ公開

Midiから変換したABC楽譜を公開しますねぇ。MoE内での演奏に使ってね。

ラグタイムのMoE-ABC楽譜が増えてきたので、すこし分類。

2012年11月10日

ジャズやるべ！

11月10日のFS音楽祭用に作成したABC楽譜を公開します。
元のMidi音源は数十人での演奏で素晴らしいものでしたが、MoEゲーム内で演奏することもあり、数人で演奏できるように楽譜を修正してあります。
(MoE世界では、一人でサックス４本同時演奏が可能！)

In the Mood (midi試聴)

Ceddjin Deden (midi試聴)

これはジャズじゃないねぇ？

シャハナーイの楽譜はオーボエで、管楽器はオーボエやトランペットなどで、演奏してください。

他にも作成した楽譜がありますが、そちらは欲しければゲーム内にて。

謝辞：もえといろさんには、大変おせわになりました。

2012年8月28日

Bloggerをスマホ対応にする

スマホ用のデザインを設定して、綺麗なBloggerが見えるようにしましょう。
まずは、モバイルテンプレートを無効にして、画面縮小率を調整します。

[テンプレート > HTMLの編集]
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width, initial-scale=1.0' name='viewport'/>
　<b:else/>
- <meta content='width=640' name='viewport'/>
+ <meta content='width=device-width, initial-scale=1.0' name='viewport'/>
</b:if>

width=device-width を設定すると100%表示ってことだけど、ちょっと拡大しすぎね。

スタイルシートを小画面用にカスタマイズしたのがこちら。
スマホ専用じゃないから、普通のブラウザでも画面を狭くすると適用されます。
(デザインを確認するのに、スマホをいちいち持ち出さなくてもいいので、楽だったりします。)

[カスタムCSSの追加]
@media only screen and (max-width: 480px) {
body { min-width: 0; max-width: 480px; }
.content-outer, .content-fauxcolumn-outer, .region-inner {
min-width: 0; }
.content-inner { padding: 5px }
.main-inner .columns { padding-right: 0px }
.main-inner .column-center-inner .section {
margin-right: 5px; }
.Header .descriptionwrapper { display: none; }
h3.post-title { margin-right: -15px; }
.post-footer { display:none }
.fauxcolumn-outer{ display:none }
.main-inner .column-right-outer {
position: relative; margin-right: 0px;
width: 100%; border: 1px solid;
}
}

2012年8月26日

Google Bloggerって、テンプレートの種類が少なくて寂しいので、わたし好みの色に染めてみました～
スタイルを変更するとカスタムCSSが消えちゃうので、ここに書いておきます。

スタイル編集にはFirefoxやChromeがお勧め。
FirefoxのFirebug拡張はとっても便利ですが、プロでもない私にはちょっと重すぎるので、最近はChrome + Stylish愛用しています。
css3やhtml5標準に対応してないIE(Internet Explorer)は論外。きゃー、IE9が、影や角丸、グラデーション対応してない～

[CSSを追加]
body { padding:0 4px 4px 4px }
.content-outer, .content-fauxcolumn-outer, .region-inner {
max-width:none !important; }

.main-inner {
padding-top: 10px }
.main-inner .column-center-inner {
padding: 0; }
.main-inner .column-center-inner .section {
margin: 0 0 0 15px;
}

.section { margin: 0 0 0 10px; }
.widget { line-height:1.2; margin: 0 0 10px 0; }
blockquote {
border: 1px dotted #f66;
margin: 10px 0 10px 20px; padding:2px 4px;
white-space: nowrap; font-family: monospace;
overflow: hidden; text-overflow: ellipsis;
}
.titlewrapper {
padding:8px 15px 0 !important; }
.header-inner .Header .descriptionwrapper {
padding: 0 15px 4px; margin: 0;
}
.Header .description {
margin: 0; font-size: 50%;
}

.header-outer {
margin: -4px -4px 0 -4px;
border-radius:8px;
box-shadow: 2px 2px 10px rgba(0,0,0,0.8);
background: #e60004 url() !important;
background: -ms-linear-gradient(top, #FF6666 0%, #E60004 10%, #E60004 90%, #AA0000 100%), #e60004 url();
background: -moz-linear-gradient(top, #FF6666 0%, #E60004 10%, #E60004 90%, #AA0000 100%), #e60004 url();
background: -webkit-linear-gradient(top, #FF6666 0%, #E60004 10%,
#E60004 90%, #AA0000 100%), #e60004 url();
background: linear-gradient(to bottom, #FF6666 0%, #E60004 10%, #E60004 90%, #AA0000 100%), #e60004 url();
background-clip: padding-box;
}
.Header h1 { margin-bottom: 0; font-size: 24px;}

h2.date-header { margin-bottom: 4px; }
h3.post-title { margin-top: 4px; font-weight:bold;
text-shadow: 0 0 1px #fff,
2px 2px 4px rgba(0, 20, 0, 0.6);
margin: 0 5px 0 -15px;
padding: 2px 8px;
background: -ms-linear-gradient(top, rgba(230,0,4,0.1) 0%, rgba(230,0,4,0.3) 100%);
background: -moz-linear-gradient(top, rgba(230,0,4,0.1) 0%, rgba(230,0,4,0.3) 100%);
background: -webkit-linear-gradient(top, rgba(230,0,4,0.1) 0%, rgba(230,0,4,0.3) 100%);
background: linear-gradient(to bottom, rgba(230,0,4,0.1) 0%, rgba(230,0,4,0.3) 100%);
border-radius:8px;
}

.post-body { line-height:1.2 !important }
.main-inner .column-right-inner {
padding: 0 2px; }

.footer-inner { padding:0 }
.post-footer {
margin:0 !important;
}

IE9で角丸や影が使えないのは、BloggerのテンプレートがIE7用であるためでした。
グラデーションは表示できないのね。

[テンプレート > HTMLの編集]
- <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
+ <meta content='IE=9' http-equiv='X-UA-Compatible'/>

テンプレートを修正して対応。スマホ対応も必要ですねぇ。

2012年8月19日

ペペロンチーノを作ってみよう

MoEでペペロンチーノを1000個作るのに、必要な材料を確認してみた。