のんびり猫プログラマの日常

CSSとSVGで作ったアニメーションがスゴイ

2016-03-31T14:14:00+09:00

CSSとSVGの威力をここまで発揮している作品はなかなかお目にかかれない。その上、可愛いときた。
こういうのを作ってみたいなぁと思うけど、私にその創作性と根性が無いのもよくわかってるんで、とりあえず鑑賞に留めておこう。

早速見てみよう。chromeでしか動かないので注意。
tympanus.net

DIVでパーツを組み立てて、CSSで色や形を指定。
SVGアニメーションでプルプル動かすということらしいが。

詳しい説明はこちら（英語）
tympanus.net

このアニメーションデモ画面を開いたまま
chromeのその他ツール▶デベロッパーツール▶窓が開くのでEscを押す▶
Console窓が開くので左の点々３つをクリック▶Animationを開いてみて欲しい。
Animationが時系列で表示される。

だからなに？と言えばそうなんだけど、これどうやって指定してるんだ？と疑問の嵐。
専門外のことゆえサッパリわからんちん！だけど、面白すぎる。

それにしてもここまで細かく作るのは驚嘆に値する。
SVGアニメーション、ちょっと勉強しようかなぁ～

Webで使える!SVGファーストガイド

作者: 相澤裕介
出版社/メーカー: カットシステム
発売日: 2014/07
メディア: 単行本
この商品を含むブログを見る

Web制作者のためのIllustrator＆ベクターデータの教科書マルチデバイス時代に知っておくべき新・グラフィック作成術 (Web制作者のための教科書シリーズ)

作者: あわゆき,窪木博士,三階ラボ（長藤寛和、宮澤聖二）,松田直樹
出版社/メーカー: インプレス
発売日: 2015/05/22
メディア: Kindle版
この商品を含むブログ (1件) を見る

クリックすると動くアイコンが可愛いすぎる

2016-02-25T15:25:04+09:00

可愛くて使い勝手の良いアイコンを集めるのが趣味だったりしますん・・・
ズラッと並んでると、見てるだけでシアワセになります（変
アイコンに限らずいろいろデザインする人をいつも尊敬の眼差しで見ていますよ（どこから

箱の向こうから。

その不思議な箱であれこれ見てたら発見しました。
アイコンをクリックしたときに可愛く動くアイコン。インパクト大。

どっかで使ってみたいな～

ピンクハート。"お気に入り"ってヤツです。
それ以外の用途もありそう（何

Google Map上によく落ちてるヤツ。
ピュンッ！って動きが気持ち良すぎる。

花火式いいね！

いいね！アイコンはもっとたくさんのバリエーションがありました。
こういうアニメーションは、クリックするのが楽しくなります。
ついウッカリ”いいね！”しちゃうかも？()

↓ここにあります。

tympanus.net

お久しぶりぶりの猫プログラマ(ΦωΦ)です。
仕事が忙しすぎて、一年近く空いちゃったよもう・・・
ネコベッドの洗濯や爪とぎの新調もできないよまったく。

くだらないテーマでブログ書くかもしれませんが、
今後ともよろしくおにゃがいします。
（前もそんなこと書いたような気ががが）

【JavaScript】 toLocaleDateStringで日付の形式変換（和暦もできるよ）

2015-05-06T14:37:53+09:00

日付の形式で使うのは、toLocaleDateString。

これ知らないって残念だったんだ、実は。
西暦から和暦に変換するのに、今までは年をわざわざ計算してたんだもん・・・

ということで、実際に動かしてみよっか。

1　使い方

dateObj.toLocaleDateString( [locales][, options])

dateObjは、例の new Date(なんとか)みたいなDateオブジェクト。
localesはロケール(世界の国々)のコード。
optionsで形式を指定。簡単。

何も指定しない場合はデフォルトのロケールとデフォルトのタイムゾーンで。

　dateObj.toLocaleDateString() →

その国に合わせた出方をしますよ。↑どんな風にでてますか？

詳しくは
toLocaleDateString メソッド (Date) (JavaScript)

細かいパラメータの設定内容についてはここ
Intl.DateTimeFormat オブジェクト (JavaScript)

2　動かしてみる

では、optionsとlocalesを変えて動かしてみよう。
平成にしたい時には、toLocaleDateStringのLocaleを"ja-JP-u-ca-japanese"にするのです。
あ、localesにはいろんな国を入れてみたよ。楽しいっ（読めないのもあるけど）



var date = new Date();

var options = {

   year    : "  ", //年の形式

   month   : "  ", //月の形式

   day     : "  ", //日の形式

   weekday : "  "   //曜日の形式 

};

var result = date.toLocaleDateString("   ", options));


result : 変換された日付

【JavaScript & HTML5 】文字コードに関係なくテキストファイルを正しく読み込む

2015-04-23T17:11:57+09:00

ブラウザ上で編集する「Webテキストエディタ」を作るという案件がありまして。
まず【既存のテキストファイルを読み込む】というところで引っかかったので覚書しとく。

テキストファイルといっても、文字コードがshift-jisだけならまだいいんだけど、
中にはUTF-8だったりEUCだったり、UTF-16とかもうね・・・
そういう様々な文字コードのファイルでも、正しく読み込んで表示しなくては
お話にならないのだ。

そこでググりながら作ったよ、もう。

1　File APIを使ってみる

HTML5になって、ローカルファイルを手軽に扱えるようになったね。
そう、File APIっていうのを使ってみようよ。

JavaScript で File API を使用してファイルを読み取る - HTML5 Rockswww.html5rocks.com

このページに書いてある、ファイル読み込み時のオプション。
これが大切です。以下、そのまま引用。

File 参照を取得したら、FileReader オブジェクトをインスタンス化してコンテンツをメモリに読み取ります。読み込みが終了すると、リーダーの onload イベントが開始され、result 属性を使用してファイルデータにアクセスできるようになります。　
FileReader にはファイルを非同期で読み込むためのオプションが 4 つあります:
FileReader.readAsBinaryString(Blob|File)
result プロパティにはファイル/ブロブデータがバイナリ文字列として格納されます。各バイトは、0～255 の範囲の整数で表されます。
FileReader.readAsText(Blob|File, opt_encoding)
result プロパティにはファイル/ブロブデータがテキスト文字列として格納されます。デフォルトでは、この文字列は「UTF-8」としてデコードされます。オプションのエンコードパラメータを使用すると、他の形式を指定できます。
FileReader.readAsDataURL(Blob|File)
result プロパティにはデータ URL としてエンコードされたファイル/ブロブデータが格納されます。
FileReader.readAsArrayBuffer(Blob|File)
result プロパティには、ファイル/ブロブデータが ArrayBuffer オブジェクトとして格納されます。

今回はテキストファイルなんで、FileReader.readAsText　を使えばいいじゃん！
UTF-8ならそのまんまでいいし、shift-jisなら、パラメータに
　FileReader.readAsText(fileオブジェクト, 'shift-jis');
と設定すれば読み込めそうだ。
しかし、文字コードの判定はいつやるの？読み込んだあとだよね・・・もしかして。
読み込もうとする命令に文字コードを指定するなんて、透視能力でもない限りできない。

甘い考えは脆くも崩れ去ったのだった・・・

2　バイナリで読み込んで変換かけるしかない

File AIPの　FileReader.readAsArrayBufferでファイルを読み込んで、
ArrayBufferオブジェクトとして内容を受け取るのだ。
これで、ファイルの中身をバイナリで扱えることになる。

3　文字コードを判定して変換をかける

こういうライブラリを作ってくれる人がいるなんて、ホント神！

JavaScriptで文字コード変換ライブラリ作ってみた | 圧縮電子どうのこうの

神コード変換ライブラリ、encoding.jsをソースにかませてみよう。

　得体のしれない文字コード
　　　　　　↓
　とにかく何でもUNICODEに変換する　(encoding.jsのconvert関数を使う）
　　　　　　↓
　文字列(string)に変換する（encoding.jsのcodeToSting関数を使う）

という処理を作る。

4　読み込みボタンを作る

普通に input type="file" を使ってもいいんだけど、
ブラウザによって形状が全く違うんだよ。
そこでボタンを新たに作ってみることにした。

まず見た目が普通のボタンを作るよ。

<button class="filebtn-show">読み込むボタン</button>

見えるボタンの裏に　input tyle="file"　を搭載した隠しボタンを作るよ

<input type="file" class="filebtn-hide" accept=".txt">

accept=".txt" で、拡張子が"txt"のファイルを選択表示すると親切。

隠しボタンは、cssで非表示にするなり透明にするなりして
とにかく見えないようにしておこう。

あとは、CSSで2つのボタンをうまーく重ねるか、
見えるボタンをClickしたら隠しボタンをClickするようにスクリプトを書くか。
どちらかお好きな方やってください。（私はスクリプト書いた）

CSSで重ねるのはIEでハマるらしいので、
スクリプト書ける人はそっちの方が手軽。

$('.filebtn-show').on('click', function(e){	
  $('.filebtn-hide').click();
});

5　完成

テキストファイルの改行をHTMLの改行（brタグ）にreplaceするなど
一手間加えて、完成。

ローカルのテキストファイルを読み込ませてみてにゃ。
サーバーにUPされるわけじゃないから、警戒しなくても大丈夫。
あくまでブラウザの中だけのお・は・な・し　だよん。

See the Pen File API Test by catprogram (@catprogram) on CodePen.

ファイルの中身は文字化けしてないだろうか？
shift-jis, utf-8, utf-16, eucは確認済み。

滅多に使わない特殊な文字コードについては変換無理っぽいにゃ。
まぁ、実用に耐えうるということでこんな感じです、いじょ。

【JavaScript】splitの使い方

2015-04-20T16:45:08+09:00

JavaScriptで文字列を扱う時によく使われる　split　についてお話するよ。
唐突にどうしたのって？
自分でもすぐ忘れてしまうのと、実際に動かして確認したいからだよ。

長い文字列をある決まった文字で分割して、配列に格納してくれるという
使い方によってはとても便利な関数。

例えば・・・

　aaa,bbb,ccc,ddd,eee

こういったカンマ区切りの文字列は、CSVファイルの中身などで良く使われる。
それをカンマ(,)でバラバラにして、

aaa →　配列[0]
bbb →　配列[1]
ccc →　配列[2]
ddd →　配列[3]
eee →　配列[4]

こういう風に格納したいなんてことがよくある。

では早速動かしてみよう！

1　普段使い

枠に実際に入力して確認してみよう。

1行目 charは文字列。日本語もOK。ここでは25文字まで入れられるようにしてあるよ。
2行目 char.split("　")←この文字列で分割される。まず -(ハイフン)を入れてみよう。

var char = " ";
var result = char.split( " " );

純粋に、split()で設定した値で分かれて配列resultに格納されたね。
面白いにゃぁ・・・

ちなみにバラバラにしたものを再びくっつけたい時には、

var kuttuita = result.join(",");

ってやると、またカンマで繋がった文字列(kuttuita)になるよ。

2　正規表現使い

split(正規表現)でも分割することができるなんて嬉しい。
2行目は正規表現の記法で入力してね。

あと、g (グローバル)と i (大文字／小文字を区別しない)の選択もやってみよう。
splitでは、g の時と何も設定しない時とで同じ結果になるんだね。
（他のmatchやreplaceでは違うから注意）

var char = " ";
var result = char.split( / / );

例えば /./ の場合と /\./ とでは、結果(result)が全く違う。
上の「1.普段使い」のところで . を入れても全く違う結果。
不思議だにゃぁ・・・

正規表現を使いこなせるようになると、プログラミングも楽しくなるよ。
↓ここで細かい使い方を見てね。

正規表現developer.mozilla.org

正規表現クックブック

作者: Jan Goyvaerts,Steven Levithan,長尾高弘
出版社/メーカー: オライリージャパン
発売日: 2010/04/15
メディア: 大型本
購入: 4人クリック: 197回
この商品を含むブログ (13件) を見る

詳説正規表現第3版

作者: Jeffrey E.F. Friedl,株式会社ロングテール,長尾高弘
出版社/メーカー: オライリージャパン
発売日: 2008/04/26
メディア: 大型本
購入: 24人クリック: 754回
この商品を含むブログ (85件) を見る

お一人様開発者と初心者さんへのオススメソフト

2015-04-13T14:57:36+09:00

ご立派な開発ツールも世の中にはたくさんあるし、どんどん便利になっています。
でもそういうのをインストールして設定する時間や使い方を覚える時間が勿体無い。
チーム開発じゃないし、自分の仕事だけキチンと管理すればいい、という感じです。

開発環境をシンプルにすることで、もしかして効率が悪くなることがあるかも知れません。
そうなったら考えればいいのです、便利なツールを導入することを。

そんなお一人様開発者、プログラミングを新たに始めたい人、勉強したい人に必要な
最低限のソフト　という意味合いでご紹介します。
（基本、Windows7マシンを使ってます。）

1　エディタ

ソースを書くのに必要なエディタ。
コイツに接している時間が最も長いかも知れません。だから大切。

Sublime Text 3

使いやすいです。左の白いところはツリー状のファイル/フォルダ一覧、
右端のミニマイズ表示を掴んで動かすと、何千行のソースでも一気にスクロールします。
背景や色分けは自分でカスタマイズできます。
各種プラグインを入れるともっと便利になりますよ。例えば。

Mac - SublimeText3を2年以上使って、生き残ったPluginを紹介します。 - Qiitaqiita.com

使ってるうちに増えてく一方のプラグインたち。
必要になった時に追加した方がいいですね。最初から入れなくてもおｋ。

vim

玄人向け。プログラムに慣れたら使ってみるという感じです。
気合の入ってる人は、最初からこれにトライするのもいいでしょう（頑張れ

独特の使い方をします。マウスを使わずに何でもできます。
コマンド入力に慣れてる人だと、快適そのもの。
使い方に慣れている方が、将来的には良い結果を生むかも知れません。

というのも、サーバー構築や設定をする時に、黒い画面ｗでコマンドを打ち込むのは当たり前。
その上、vi（vimの元）でちょっとファイルの中身を修正することもあるでしょう。
その時に「何これ？？」とならないためにも。

2　仮想環境

パソコン2台のうち1台を仮のローカルサーバーにしてもいいのですが、
1台の中に別のサーバーを設定できてしまう仮想環境を作る方がハッキリ言って楽です。
スペックのあるパソコンをお持ちなら、なおさら。
お一人様なら、VMwareかVirtualBoxのどちらかになるでしょう。

VMware
VMware Playerなら「商用に使わないで」という縛りしかありません。
買うととてもお高いソフトも、これなら無料です。
ただし、Windowsでは64Bit版しかありません。
もしマシンが32Bitなら、下のVirtualBoxになります。

VirtualBox
フリーでお手軽にローカル開発環境を作ることができます。

開発環境構築はドットインストールにコースがありますね。
(*´ω｀*)わかりやすい・・・ぜひどうぞ。ローカル開発環境で検索した結果 - プログラミングならドットインストールdotinstall.com

Android Studio
Android用アプリ開発をしたい人はこれ。
導入方法については、とても丁寧に解説してくれてるここを。初心者でもできる！「AndroidStudio」を使ったAndroidアプリ開発環境の構築方法techacademy.jp

Xcode
Apple提供のiPhone用アプリを開発するツール。
これMacでしか動きません。気をつけましょう。

アプリ開発の勉強がしたい、Windowsしかない、という人は
いちいち開発ツールを入れなくても、こういったサービスを使ってもいいと思います。
MonacaMonaca - HTML5ハイブリッドアプリ開発プラットフォームja.monaca.io

3 ブラウザ

Web開発では各種ブラウザでテストする必要があります。
それなりのテスト用無料サイトやツールもあります。
古いバージョンのブラウザは、そういうところでテストせざるを得ません。

しかし最終的に、「ちゃんとインストールしたブラウザで動くか？」を確認することになります。
Google Chrome, Internet Explore, FireFox, Opera, Safariぐらいは入れておきましょうよ。

スマホアプリ開発だったら、最低タブレット1台とスマホ1台があればいいです。
様々なデバイスでの動きを確認できるシミュレーションツールはいっぱいあります。

4　バージョン管理

お一人様開発でも、ちゃんと管理しましょう。
手抜き管理しててあとで泣くのは、あ・な・た(*´ω｀*)ですよ。

基本はGitですよね～Git(*´ω｀*)お一人様でも大丈夫。
NUIで敷居が高いですが、GUIソフトでも入れれば楽に使えるでしょう。
ミスも減りますし。
SourceTree
他にもいろいろなクライアントソフトがあります。
自分に合ったものを探してみるのも良いですね。

あ、Gitそのものが初めての人はこういうとこ見てね。サルでもわかるGit入門〜バージョン管理を使いこなそう〜 | どこでもプロジェクト管理バックログwww.backlog.jp

5　その他

Explzh
圧縮解凍ソフトの有名どころ。
tarとか7zとか、開発中に軽く出てきます。解凍できないとお話にならない。

秀丸ファイラーClassic
Windows Exploreがゴミ　使いにくいから導入。
なんか知らないが便利で、いつの間にか馴染んだ。

BunBackup
自動バックアップソフト。
いろいろとカスタマイズできるし、自動で圧縮・暗号化もしてくれます。
バックアップしないと怖いです。いつ何があるか分かりませんから。
あ、仕事用ファイルをもしクラウドに置く場合は、念のため暗号化した方が安全安心ですよ。

以上、これだけあればどうにかなるかな。
ま、仕事してる間にどんどん増えてくんだからぁ～♪

【はてなブログ】CodePenをはてなに貼る方法

2015-04-11T10:00:00+09:00

CodePenって何だか知ってる人は多いでしょう。

Web上でJavaScriptを書いて、即座に実行できる環境を提供しているサイト　です。CodePencodepen.io

コードをシェアしたりブログに貼ることも可能です。

もうね、はてなブログ上にコードを書くのが面倒なので、
CodePenに書いたソースとリンクを貼ることにしました。
その方が楽ですよ。利用できるものは利用しなくちゃ！

1　ユーザー登録しよう

CodePenにユーザー登録しないとお話にならないので、とにかく登録。
GitHubアカウントでもログインできます。
英語しかないので、アレルギーを起こさないように頑張りましょう。
膨大な量のコードを書かない限り、Free Planで充分です。

2　何かコードを書いてみよう

ログインしたら、誰かがすでに作った素晴らし～いコードの数々を見ることができます。
あれこれ見て回るのも楽しいですし、おべんきょーになります。

とにかく何でもいいのでコードを書くことにしましょう。
画面の一番上にある[New Pen]ボタンを押します。
HTML・CSS・JSの３つの画面と白い背景の実行結果画面が出てきます。

実際にコードを書いてみました。HTMLだけでもいいですよ。
[Save]ボタンを押して保存しましょう。

3　リンクを作成しよう

画面上の[Share]ボタンを押すと、こういう画面がでます。

TwitterやFaceBookなどでもShareできます。やりたい人はどうぞ☆

ここでいよいよ本題です。
ブログに貼るには[Enbed]ボタンを押して

画面右上のCopy & Paste Code:のコードをコピーします。
はてなの「編集モード」上にペーストします。
Enbed This Penの画面で、テーマを自由に設定できます。
ブログカラーに合わせて色を変えてみてもいいかも。
（あとでやってみよう）

4　完成！

See the Pen wBLKmy by catprogram (@catprogram) on CodePen.

5　JavaScriptの外部参照を選択

上のJavaScriptはjQueryのスタイルで書いています。
どうやって設定するかというと、JavaScriptコードを書く欄の
[JS]の左のネジをポチ。

こういう画面が開くので、

好きなコンポーネントなり何なり設定しましょう。
便利すぎるぜ☆

【自作パソコン】マシンが壊れた！→作った

2015-04-09T12:47:32+09:00

ずーーーっと放置状態で、文章をアウトプットするのも久しぶり。

そう、アウトプットといえば、ひたすらひたすらプログラムの半年。
日本語そのものが変になっていると思います　(ΦωΦ)許して

本題。５年間使った自作マシンが3月末の納期とともに壊れました。
いつものように仕事メールを読んでたら、

ひゅぅぅぅぅぅぅぅぅ～

と電源落ち。二度と復活することはありませんでした。
命を削ってまで私の仕事を助けてくれて、ありがとうありがとう・・・（涙）

と感傷に浸りつつ、納品した余裕からか、こんな一言。

これでしばらく仕事しなくて済む・・・ｳﾋ

1 　直るのか？旧マシン

壊れたマシンを抱え、近所の某パソコン屋へ。

★旧マシンのパーツをまとめて買った時のレシートが出てきたので、
　それを持って行ったら話がとても早かった。

店員のお兄さんに旧マシンを見てもらう。

「どこが壊れたのか調べる検査に１万円かかる。一週間預かる。
　もし壊れた箇所を特定できても、代わりになるパーツがジャンク以外にない。」

と残念なお言葉。だったら新しいの作るか！ということになりました。
ちなみに再利用可能なパーツはメモリとDVD Driveだけ・・・orz

★メモリは滅多に壊れないらしい。

2　パーツを揃える

・予算10万円以内。
・グラフィックボードは最低限でいい。でもモニター２面繋ぐ。
・仮想（VMWare）使うんで、メモリとCPUはそこそこ積みたい。

という　~~ワガママ~~　控え目な要求を、嫌な顔ひとつせず、楽しそうにパーツを選んで下さったお兄さん、ありがとう。
そして、こんなパーツを揃えてもらいました。

マザーボード ASUS H97-PLUS 　H97-PLUS - 概要www.asus.com

ケース　ZALMAN Z3
http://www.zalman.com/jpn/product/Product_Read.php?Idx=820www.zalman.com

CPU Intel CORE i7 4790 (3.6GHz 8M)ARK | Intel® Core™ i7-4790 Processor (8M Cache, up to 4.00 GHz)ark.intel.com

この際なんで、SSDまで追加。

SSD Intel 530シリーズ 240GB ARK | Intel® SSD 530 Series (240GB, 2.5in SATA 6Gb/s, 20nm, MLC)ark.intel.com

総額 68,500円(税抜き）余裕で10万円以内に収まりました。

★円安でパーツの価格が数年前に比べてかなり上がっているそうです。

「あの～グラフィックボードは？」と訊いたら、「マザーボードに元々付いてますよ」ってなにそれすごい。
ゲームや動画編集するんだったら追加でグラフィックボードが必要だけど、最低限モニターを2つ繋げればいいので、これで充分らしい（進んでる）
それとメモリは古いの（よくわかんないメーカーのDDR3×2枚）だけど、相性悪かったり重かったりしたらってことで今回は見送り。

3　そして組み立て・起動

途中で写真撮るの忘れました。熱中しすぎました。

古いHDDはちゃんと生きているので、スロット２にそのまま設置。
スロット１は新しいSSD♪

それより何より、BIOSがなんとカラー表示してるのと日本語が出るのにビックリ。

これは別のシリーズのマザボのBIOS画面だけど、ほぼこんな感じ（進んでる）
あとはOS入れて完了。

結果、早い。とにかく早い。インストールも早い。
電源入れて10秒でデスクトップが開く。あり得ない。
いつもは、
　電源ポチ→キッチンでのんびりコーヒー入れる→パソ前に戻る→やっと開く
という状態だったのに。
ま、これから初期起動するソフトをいろいろと入れ込んで行くとどうなるか。
楽しみです。

古いデータはスロット２に入れたHDDがEドライブとして認識されるので、そこから直接Cドライブへ持って来ることができます。
（管理者権限でファイルをいじることが可能）
データをCドライブにコピーしたら、古いHDDはバックアップ用として使ってもいいですね。

それにしてもゴツイPCケース・・・と思ってたら、こんな使い方ができるなんて。

USBコネクタが上向いてるって、意外と刺しやすくて良いですよ。
そして上部のアミアミのところから中の熱気が出てくるので、とても通気性が良いです。
上に積もりがちなホコリまで吹き飛ばしてくれます。

新しいマシンくん、末永くお付き合いヨロシクね♪

海外の人が作った日本語フォントが面白いことになってる

2014-08-22T13:06:37+09:00

海外のフォントサイトで個人的に良く使っているMy Fontの中で、

もしかして日本語のものはあるのだろうか・・・

と半信半疑に「Japanese」で検索してみました。

そしたら出るわ出るわ、得体の知れない文字や漢字が・・・

これは楽しすぎなので、いくつかご紹介しますｗ

1　頑張って書いた！毛筆系

Katsuji Tai - Webfont & Desktop font « MyFonts

筆運びが素直で素晴らしい～。なんか違う感を除いて。

2　雰囲気は合ってる系(その１)

Electroharmonix™ - Webfont & Desktop font « MyFonts

うん・・・雰囲気だけ合ってる。
「ごめんなさい」のイラストが物悲しい。

3　雰囲気は合ってる系(その２)

Faux Japanese - Webfont & Desktop font « MyFonts

読めない。というか、あくまで雰囲気なんだよね、うん。

4　ペン書き系

Kurosawa Japanese - Webfont & Desktop font « MyFonts

やっとマトモなのが。ちゃんと読める！
手書きフォント感がいいですね。油断するとこういう字を書いちゃいそう、みたいな。
「日本」といえば「クロサワ」なのも好印象（違

5 アルファベットのフォントだけど日本風（その１）

Onigiri - Webfont & Desktop font « MyFonts

ｶﾜ(・∀・)ｲｲ!!　おにぎり好きにはたまらないフォント。
いつ使うんだろ・・・

6 アルファベットのフォントだけど日本風（その２）

Brushwork™ - Webfont & Desktop font « MyFonts

草書っぽいアルファベットもなかなかいい。
のびのびした毛筆の線が爽やかですね～
海外で発行された観光パンフレットで見る（多分

7 アルファベットのフォントだけど日本風（その３）

Shinobi BB - Webfont & Desktop font « MyFonts

その名も「SHINOBI」。忍者とベストマッチなフォント。

8　【番外編】日本人書道家(自称)の書

Art Of Japanese Calligraphy - Webfont & Desktop font « MyFonts

ザ・書！です。
　（褒めてます）

こういうのは上手なのか下手なのかよく分からない。
というか、フォントなんだよねこれ。

【jQuery】はてなブログでソースコードをタブBOX表示するテスト

2014-08-18T02:21:18+09:00

はてなで各種ソースコードを表示しようとした時、
普通にSyntaxHighlighterを使ってもいいんだけどね。
なーんかブログと見た目が合わないというか・・・
オリジナリティが無いというか・・・

そんなこんなで試作品を作ってみました。
まだ色や形は味気ないです（今はCSSまでやる気力なし）
BOX全体の色味をブログに合わせたり、一行置きにバックグラウンドの色を変えたり。
その上でプラグインっぽくスクリプトを外部呼び出しにすると完璧ですね（課題）

☆注意　完全にはてな用ってことで他の用途には使えません。
（弄れば使えるかなｗ）

あとChromeでしか表示確認してないっす（おぃおぃ
もちっと時間ができたらプラグイン化するので待っててにゃ☆

とにかくタブをポチポチして遊んでみてくださいｗ

$(function() {
  $('.src_box').each(function(){
    var tab = $('<ul>').attr('class',"src_tab");
    var content = $('<ul>').attr('class',"src_content");
    $('pre',this).each(function(){
      tab.append($('<li>').html($(this).attr('data-lang')));
      var pre = $('<li>').append($(this).clone());
      content.append(pre);
    });
    $(this).html('');
    tab.children().first().attr('class','select');
    content.children().first().css('display','block');
    $(this).append(tab).append(content);
  });

  $('.src_tab li').click(function() {
    var parent = $(this).parent().parent();
    var index = $('.src_tab li').index(this);
    $('.src_content li',parent).css('display','none');
    $('.src_content li').eq(index).css('display','block');
    $('.src_tab li',parent).removeClass('select');
    $(this).addClass('select')
  });
});

.src_box{
  margin:20px 0;
  border:none;
　box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
}  
.src_tab{
  overflow:hidden;
}
ul.src_tab{
  list-style:none;
  margin:0;
  margin-left:-40px;

} 
.src_tab li{
  background:#eee;
  padding:5px 25px;
  float:left;
  margin-right:1px;
  -webkit-border-top-left-radius: 10px;  
  -webkit-border-top-right-radius: 20px;  
  -moz-border-radius-topleft: 10px;  
  -moz-border-radius-topright: 20px;  
  box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
}
.src_tab li.select{
  box-shadow: 5px 5px 5px rgba(0,0,0,0.2) inset;
}

ul.src_content{
 width:550px;
 height:300px;
 list-style:none;
 margin:0;
 margin-left:-40px;
 overflow:auto;
} 
.src_content li{
 display:none;
 background:#eee;
 padding:0px;
 margin:0;
}
.src_box pre{
  margin:0;
  padding:20px;
　
}
.hide {display:none;}

src_boxクラスを設定したdivでソースコード群を囲む。
その中に、はてな記法（スーパーpre記法）でソースコードを書く。
＞｜言語｜の言語名は必ず設定！　これがタブになります。
以下、サンプル。
はてなが反応しちゃうｗので記号は全角にしています。実際は半角です。

<div class="src_box">
＞｜javascript｜
　ソース
｜｜＜

＞｜css｜
　ソース
｜｜＜

＞｜html｜
　ソース
｜｜＜
</div>

上から順番にタブが作られて行きます。
はてな記法で使える言語なら対応可能。

うぁぁぁぁ～！！これ欲しいよぉぉぉぉ↓↓↓

箱の中身は付いてるの？付いてるの？

ミュー (mju:) にゃんボールみかん箱

出版社/メーカー: エイムクリエイツ
メディア: その他
この商品を含むブログを見る

【JavaScript】ちょっとこなれた書き方（演算子編）

2014-08-16T14:01:04+09:00

と言っても、そんなに大したことでは無いのです。
でもしばらくJavaScriptから離れていると忘れるのでメモ的に。

1 　条件演算子

JavaScriptを習いたての人はこう書く。if文はこれが基本。

var age = 18; //ageに18を代入
var text;

if(age >= 18){ //もしageが18歳以上なら
  text = "大人"; //textに"大人"をセット
}else{
  text = "子供"; //textに"子供"をセット
}

他の言語でも大概通用するif文の書き方です。

これをこなれた風に書くと・・・

var age = 18;
var text = (age >= 18) ? "大人" : "子供";

こんな感じで行数も少なくなりますね。

2 　論理演算子

これは確実に忘れる（＝混乱する）ので書いておきます。
例の「論理AND(&&)」とか「論理OR(||)」とか、疲れてると確実に間違う。

まずはこういう書き方が基本ですよね。

//aの値が3～10の範囲内にあればbにtrue、無ければfalse 
var a = 5;
var b;

if(a >= 3 && a <= 10){ 
  b = true; 
}else{
  b = false;
}

こなれた風だと

var b = (a >= 3) && (a <= 10);

それに派生して、突然ですが問題です。

var a = true && false;    

var b = true || false;

aとbに入ってる値はそれぞれ何でしょう？って咄嗟に訊かれても・・・(´Д｀)ね
（答）aはfalse、bはtrue

じゃこれは？

var a = "cat" && "mouse";    

var b = "cat" || "mouse";

ネコとネズミの共通点ってなに？っていう話じゃなくて・・・
（答） aは"mouse"、 bは"cat"

・・・って、なんでそうなるの？

"cat"とか"mouse"は、trueと同等と考えると分かりやすいです。
そして式は、左側の値から評価して合致したらそれで終わりになるのです。

つまり必ず

false　&&　なんでも　→ false
true　||　なんでも　 → true

になるわけです。

【確認】いろいろと値を変えてみてね（動くかな

var a = 　&&　　→　false
var b = 　||　　→　false

とても久しぶり（１年ぶり？）にブログを更新したけど、
自分自身全く進歩してないのが痛い。
もっと気軽に書けるといいんだけどにゃぁ。

JavaScript本格入門　?モダンスタイルによる基礎からAjax・ｊQueryまで

作者: 山田祥寛
出版社/メーカー: 技術評論社
発売日: 2010/11/27
メディア: 大型本
購入: 29人クリック: 673回
この商品を含むブログ (48件) を見る

【jQueryプラグイン】intro.jsでいろいろ試してみた

2013-06-04T14:01:12+09:00

intro.jsというプラグインの動きを確認してみました。

それぞれの要素でどうなるのか・・・
とりあえず下のボタンを押してみてにゃ。

intro.jsについては元サイトをご参考に。

span要素
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
リンクだよ

div要素
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

p要素
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

ID ：
パスワード：
所属：	人事総務営業経理
年齢：	10代 20代 30代 40代 50代
添付ファイル：

blockquote
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

h1見出し

大体のタグには対応していそうですね！

あと噴出しの中のボタンは、自分で勝手に日本語化しています。オリジナルは英語です。

【jQueryプラグイン】絵本みたいにめくれるシンプルなUI

2013-06-02T18:38:46+09:00

絵本とか画集だったらこういうUIで読みたいです。雰囲気あるなぁ。

Bookblock Revised

ページの端からにょろってめくれるタイプではなく、
絵本のように堅い紙でできたページをパタっとめくるタイプです。
とにかくシンプル。Demo4がまさにそんな感じですね。

プラグインの中身はまだ観ていないですが、拡張して色々と遊べそうです。

ページの読み込みをAjaxにして、ページ数の多い書籍でもいけるようにしたり、
どこかにページ数を表示できるようにしたり。
こういうUIの絵本や美術本専門の電子書籍サイトがあると嬉しいな・・・と。

え、作れってか？(´Д｀)

カレンダーのデモもアイデアが出てくるな。

ブログのウィジェットとして搭載しても面白いね。
自分用のTodoリストに載せても良い雰囲気。

と、いろいろ夢が広がるプラグイン。

jQueryプラグイン徹底活用プロのデザインアイデアとテクニック

作者: MdN編集部
出版社/メーカー: エムディエヌコーポレーション
発売日: 2012/07/03
メディア: 単行本
クリック: 14回
この商品を含むブログ (2件) を見る

ドットインストールはじめました

2013-05-29T18:29:21+09:00

孤独なフリーランスだからこそ必要なサイトだと思ったのです。

ドットインストール

開発の合間で時間に余裕があるので、何か勉強しておかないと。いつもそんな余裕がないし。今でしょ！（痛っ

あ、ドットインストールで今勉強中なのは「CakePHP入門」というコース。こういったWebアプリケーションフレームワークって使ったことないんですよ。いつも剥き出しのソースをサクサクちまちま手作りしている状態なので、ヨサゲなフレームワークがあれば個人でも使ってみたい。

その「ヨサゲ」っていうのは、あくまで自分の感覚だけど。

あとはJenkinsとか使ってみたい。テストが楽になるっていうけどどうなのかなぁ・・・なるべく徹夜したくないので、仕事をちょっとでも効率化するツールが何か必要だと感じているのですよ。

そう、徹夜イヤです。

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

いつも感じていること。

日々職場へ通っていれば自然と入ってくるような情報やスキルが、自宅中心だとなかなか手に入らない。それも自分から手を伸ばさない限り...

何か判らないことがあれば”ぐぐる先生”を頼りにしていますよ。ただそこで見つかる散らばった知識を無理にかき集めて、どうにかこうにかしている...というのではどうもイケナイような気がしています。どこかでちゃんと系統立てて勉強してないと、そのうちボロが出るような、そんな恐怖心もあります。

そういった点で嬉しいサイトなのではないでしょうか。まぁ学びっぱなしじゃなくて、ちゃんと自分の開発環境にインストールし、実際に何か作ってみないとお話になりませんね、うん。

日々是勉強。

VMware Toolsの共有ファイル設定をしてラクラク開発

2013-05-22T00:15:41+09:00

VMware Toolsの共有ファイル設定を使ってなかったのは大きな失敗でした。え？こんなの当たり前だろ？というような事を全く知らなかった・・・なんてことは孤独なフリーランスにはありがちです。だって何もかも一人で調べて一人で開発するんだもん。誰も教えてくれないよ。

と、愚痴はここまで。

ここではメインマシンをWindows7(64bit)とし、そこにVMware Playerを入れてあります。
最新版ダウンロードはこちら（2013.5.21現在）

やりたいことは、

　VMware中のLinuxのソースを、Windows側で直接編集したい！

これに尽きます。vim使えないんだも～ん（ユルく開き直り）・・・いや勉強します、はぃ。

1　VMware Toolsでの共有ファイル設定

VMwareを立ちあげて、開発OSまで起動。
　左上のPlayerから[管理]→[仮想マシン設定]を選択する。

　[オプション]→[共有フォルダ]を選択。
　右側の[フォルダの共有]はとりあえず[常に有効]にしておく。そして追加！

共有フォルダ追加ウィザートが開くので、ビビらずに次へ。　

　共有フォルダを指定。　

　ホストパスは、ここではcatフォルダを指定してみる。
　その下にphpとかcssとかjsファイル一式が入ってるんだよ。
　名前はフォルダ名が勝手に指定される。とりあえずこのまま次へ。

　共有フォルダ属性の指定をする。[この共有を有効化]に✔しよう。
　そして完了。

　おお、共有できてるらしい・・・

2　お好きなディレクトリにマウントする

　共有フォルダ設定したばかりだとどうなっているのだろう。
　Linux側を検索してみると、catフォルダは/mnt/hgfsにマウントされている模様。

　ここにあっても仕方がない。サーバールートの下に置きたいんだよね。
　ということで、空のcatwebディレクトリをルートの下に作っておこう。
　ここにマウントするのだ。
　そうすることによってhttp://(LinuxのIP)/catweb以下のサイト＠開発中にアクセスできる。

　いよいよターミナルからマウントコマンドを入れる。

　VMware Tools固有のvmhgfsカーネルを使うので覚えて置こう。
　コマンドの詳細は、VMwareのローカルヘルプを探してね。
　　ヘルプ：[仮想マシンの共有フォルダの設定]→[Linux ゲストでの共有フォルダのマウント]

　Windows側のcatフォルダ(.host:/cat)と /home/httpd/html/catwebがマウントされた。
　catwebディレクトリの下にちゃんとソースがあるよ！

　あとはWindows側でcatフォルダ内のソースをいじり倒すだけ。

　うにゃ～ラクラク。　

【CSS3】画像に自動で連番を振るCSS

2013-05-19T00:39:28+09:00

元ネタはここです。CSSをダウンロードして使ってみました。

デモもありますよ。

Automatic Figure Numbering with CSS Counters

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

まずhtmlソースから見ていこう

articleで囲まれた部分にあるfigureクラスの画像がどんどんカウントされていくことになる。
画像の右寄せ・左寄せは、figure-right, figure-leftをfigureクラスに重ねて定義する。
キャプションはfigcaptionで定義する。

<article class="article">
  //articleで囲まれている部分から連番が始まる

  //---Fig.1  デフォルト--------------------
  <figure class="figure">
    <img src="にゃ～ん.jpg" />　
    <figcaption>キャプション</figcaption>
  </figure>

  //---Fig.2  figure-leftクラスで左寄せ-----
  <figure class="figure figure-left">
    <img src="ビックリ.jpg" />
    <figcaption>左寄せ</figcaption>
  </figure>

  //---Fig.3  figure-rightクラスで右寄せ----
  <figure class="figure figure-right">
    <img src="ニッコリ.jpg" />
    <figcaption>右寄せ</figcaption>
  </figure>

</article>

<article>
　//---またFig.1から始まる------------------
  <figure>
    
  </figure>
  ・・・・・・・
</article>

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

次にCSSを見ていこう

counter-resetで変数をリセットするんだね。

・Pattern-1 変数（figures）が1にリセットされる。
・Pattern-2 変数＋半角スペース＋初期値で変数が初期値（ここでは0）にリセットされる。

//Pattern-1 
.article {
  ・・・
  counter-reset: figures;
}

//Pattern-2
.article {
  ・・・
  counter-reset: figures 0;
}

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

キャプションが現れるたびにcounter-incrementで要素のカウンタの値を進めている

.figure figcaption {
  ・・・
  counter-increment: figures;
}

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

contentで、キャプションの直前にカウントした変数を入れている。

'Fig.' を 'No.' にしたり '図' にしたりしてもいいですね。

.figure figcaption:before {
  content: 'Fig. ' counter(figures) ' - ';
}

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

そして実際の見え方はこうなります。モダンブラウザで見てね。

デフォルト　幅100%

FIG.1が採番されてる。デフォルトだと画像幅が100%だね。

左寄せ

左寄せされてるよ！FIG.2だね。

そうそう、寄せるのにfloatを使ってるので、clear="both"してから次の段落へ行こう。

右寄せ

右寄せ。FIG.3になってる。

(・∀・)ｲｲﾈ!!

CSSだけでこういうことができるのは、とてもありがたいです。
スクリプト書く手間が省けるね～。

【JavaScript】複数のJavaScriptファイルを1つにして読み込む

2013-05-15T14:01:56+09:00

はてなブログのソースを眺めてて、気が付いたんですよ。なんでこういうことができるかな・・・と。

1つのscriptタグで、jQueryなどなどの多数のプラグインをカンマで区切って書いて、1つにまとめているのですよよよ。

<script type="text/javascript" src="http://hatenablog.com/.shared.js:a9XXXXXXa9:/js/jquery-1.9.0.min.js,/js/empty.js,/js/jquery-ui-1.10.0.custom.min.js,/js/jquery.cookie.js,・・・/js/locale-all.js"></script>

ふと見たら、CSSまでこうやってるじゃないっすか。

<link rel="stylesheet" type="text/css" href="http://hatenablog.com/.shared.css:aXXXXXXa9:/css/theme/base.css,/css/prettify.css,/css/globalheader.css" />

こりゃ便利だ！こういう記述方法は知らんかったわ~

と思ったら、ミドルウェアをシッカリ挟んでたんですにゃぁ。
それも、はてな住人さん作成だなんて、素晴らしい。

Plack-Middleware-StaticShared

自前のサーバーには、ぜひともこれを入れたい。特にjQueryを駆使したサイトを作るんだったら、プラグインだらけになるでしょうね（多分）。それらを一つ一つ読み込んでたら結構遅くなると思う。1つのファイルとして読み込んだ方が、もちろん早くなるよね。

最初から１ファイルに結合してサーバーに置いておいてもいいんだけど、その中のあるプラグインのバージョンが変わるたびに、また結合し直さなくちゃならない。面倒くさい。
その点、サーバーにバラバラにファイルが置いてあっても、そのたびに結合してくれるんだから、これはありがたいよ~

そもそもはてなでjQueryが書けるんだろうか？と思ってソースを調べてたところで発見した。
jquery-1.9.0.min.jsだのjquery-ui-1.10.0.custom.min.jsだの読み込んでることが判明したので、これからjQueryで何か書いてみたいです、HI (ﾟ∀ﾟ)ﾉ

ハイパフォーマンスJavaScript

作者: Nicholas C. Zakas,水野貴明
出版社/メーカー: オライリージャパン
発売日: 2011/03/20
メディア: 大型本
購入: 9人クリック: 1,176回
この商品を含むブログ (31件) を見る

【JavaScript】文字列切り出し（slice, substr, substring）の違い

2013-05-13T23:14:57+09:00

引っ越し前のサイトから移植しました。

文字列の切り出しっていつも迷うよね。

実際にスクリプトを動かして確認してみよう。

slice

文字列.slice(開始位置 [,終了位置] )

開始位置と終了位置を指定。終了位置は省略可能。
省略すると最後まで切り出す。
終了位置は、末尾が0になる。
開始位置をマイナス値にすると、後からの桁数になる（右端のみ切り出せる）。

<例>
str.slice(3); //"3456789"
str.slice(-2); //"89"
str.slice(3, -1)); //"345678"

var str = "0123456789";
str.slice( , );
strの内容 : 結果

substr

文字列.substr(開始位置 [,切り出す長さ] )
開始位置と切り出す長さを指定。長さは省略可能。
省略すると最後まで切り出す。
開始位置をマイナス値にすると、後からの桁数になる。
<例>
str.substr(3); //"3456789"
str.substr(1,5); //"12345"
str.substr(-5,3)); //"567"

var str = "0123456789";
str.substr( , );
strの内容 : 結果

substring

文字列.substring(開始位置 , 終了位置)
開始位置と終了位置を指定。終了位置は省略できない。
開始位置＞終了位置の場合は、引数が逆になる。
<例>
str.substring(3,7); //"3456"
str.substring(2,14); //"23456789"
str.substring(3, -1)); //"012"

var str = "0123456789";
str.substring( , );
strの内容 : 結果

すごーい！はてなブログはスクリプトが動くんだね。
HTML編集モードにしないとスクリプトが書けないのがちょっと面倒だけど。

いろいろ実験できそうだぞ(*´ω｀*)

追記
スクリプトが何かの拍子に動かなくなっていたようです。修正しました。

HTML+JavaScriptによるプログラミング入門

作者: 古金谷博,藤尾聡子
出版社/メーカー: 日経BP社
発売日: 2014/08/06
メディア: 単行本
この商品を含むブログを見る

【はてなブログ】 CSSカスタマイズ手法（自己流）

2013-05-13T15:43:16+09:00

予め出来上がったソースをカスタマイズするのは、プログラマとしてはよくある作業。もっと効率の良い手法があるのかも知れないけど、はてなブログに関してはこうやって作業した。
今回はCSSを大改造するので、ソースをローカルに保存しておいて、それをいじり倒すことにしたのだ。

1　気に入ったテーマを探す

テーマストアというのができたらしい。そこから今イメージしているものに似たテーマをとにかく見つける。

カラム割り（１～３列）
各要素の配置（サイドバーが右か左かなど）
各要素の大きさ

というところに着目して探してみて。背景色とかフォントはどうでもいいのだ。そして、とりあえず自分のブログにデザインを反映してみよう。

のちのちテーマストアでテーマを公開したい場合は、他人のテーマを元にしちゃダメらしいので注意が必要。

2　CSSを手に入れる

管理画面の[デザイン]→[カスタマイズ]→[デザインCSS]でCSSが表示されるので、ざざーっとコピー。これもローカルに保存。(sample.css)
このCSSを編集するのだが、とにかく長い！全部読み解くのがめんどくさい！
最も楽なのは、

CSSの最後にカスタマイズ分をどんどん付け足して行く方法。

後の方に付け足した設定は、それより前の分を上書きしていくからだ。

3　HTMLソースを手に入れる

公開設定を一時的に「自分のみ」にしてから、はてなブログテーマ制作の手引きにあるサンプルエントリーをコピペして、新規記事として投稿。むしろ自分だけに公開している別のはてなブログの方がGOOD。みんなに公開すると、なにこれ？になるヨ！

ブラウザでサンプルエントリーを開いてみよう。右クリックしてソースを確認したら、全部コピペしてローカルにソースを保存。（sample.html)
記事を削除して公開設定を「すべての人に公開」に戻す。

ローカルのCSSファイルをリンクするように修正しておく。

<link rel="stylesheet" type="text/css" href="/style/fe7...c"/>
     ↓
<link rel="stylesheet" type="text/css" href="sample.css"/>

4　ここから本職さんの技（と本猫は思っている）

FireFoxかChromeにWeb Developerアドオンを入れておく。いつの間にか日本語で表示されるようになってるので、オススメしておこう。
他人の作ったソースは、IDやclassのお名前が全然わからないので、これを見て把握するのだよ。

[Divの幅と高さを表示] を✔すると、Div要素の範囲が赤線で囲われて見えるぞ。

[id属性とclass属性を表示] の✔は欠かせません。

[要素の情報を表示] を✔すると、該当の要素のCSS定義が下に表示されるぞ。

それらを見ながらsample.cssを改造していくのだ。最後の方に追加していくのね。

--sample.cssの最終行--
/*ここから上は触らない*/

/*ここから下にカスタマイズ分を書く*/
body{
  background:url('http://背景画像.png') repeat;
}

#blog-title {
  margin: 15px 0 10px 0;
  background:url('http://タイトル画像.png') no-repeat;
}
・・・・・・

5　オンラインに反映させる

管理画面の[デザイン]→[カスタマイズ]→[デザインCSS]で開いたCSSの最後に、sample.cssの付け足し分をコピペ。微調整はオンラインでね。

背景画像等のWeb素材は、フォトライフにでもUPしておけば簡単です。画像のURLを取得して、CSSにコピペしてやってください。

いじょ、おわり

もっと効率の良い方法があったら、ぜひぜひ教えてください。

はてなへ引っ越ししました

2013-05-12T14:58:58+09:00

最近やっと時間ができたので、ブログの引っ越しをしました。

以前のブログはレンタルサーバーに置いてありますが、もうすぐ消えます。皆様の参考になった記事があったみたいで、とても嬉しかったです。

コメントやトラバをありがとうございました。

さて今後はここが新居になります。

とりあえずページデザインを自分好みにカスタマイズしてみました。大好きな文房具たちで埋め尽くされたデザインにしよう！と思っただけのヤッツケ仕事です。開いたノートが左右均等じゃないのはしょーがないか・・・Webデザイナーじゃない私が頑張っても、まぁこんなもんですｗ　

文房具素材は、全てヒバナさんのところからお借りしました。どの素材もステキ過ぎ。目移りして大変ですわ。

　こういうのとか

これからも使ってみたい素材が・・・(*´ω｀*)

何はともあれブログを書かないとお話にならないわけで。

しょーもないネタが多いと思いますが、これからも宜しくお願いします。

のんびり猫プログラマの日常

CSSとSVGで作ったアニメーションがスゴイ

クリックすると動くアイコンが可愛いすぎる

【JavaScript】 toLocaleDateStringで日付の形式変換（和暦もできるよ）

1 使い方

2 動かしてみる

【JavaScript & HTML5 】文字コードに関係なくテキストファイルを正しく読み込む

1 File APIを使ってみる

2 バイナリで読み込んで変換かけるしかない

3 文字コードを判定して変換をかける

4 読み込みボタンを作る

5 完成

【JavaScript】splitの使い方

1 普段使い

2 正規表現使い

お一人様開発者と初心者さんへのオススメソフト

1 エディタ

2 仮想環境

3 ブラウザ

4 バージョン管理

5 その他

【はてなブログ】CodePenをはてなに貼る方法

1 ユーザー登録しよう

2 何かコードを書いてみよう

3 リンクを作成しよう

4 完成！

5 JavaScriptの外部参照を選択

【自作パソコン】マシンが壊れた！→作った

1 直るのか？旧マシン

2 パーツを揃える

3 そして組み立て・起動

海外の人が作った日本語フォントが面白いことになってる

1 頑張って書いた！毛筆系

2 雰囲気は合ってる系(その１)

3 雰囲気は合ってる系(その２)

4 ペン書き系

5 アルファベットのフォントだけど日本風（その１）

6 アルファベットのフォントだけど日本風（その２）

7 アルファベットのフォントだけど日本風（その３）

8 【番外編】日本人書道家(自称)の書

【jQuery】はてなブログでソースコードをタブBOX表示するテスト

【JavaScript】ちょっとこなれた書き方（演算子編）

1 条件演算子

2 論理演算子

【jQueryプラグイン】intro.jsでいろいろ試してみた

h1見出し

【jQueryプラグイン】絵本みたいにめくれるシンプルなUI

ドットインストールはじめました

VMware Toolsの共有ファイル設定をしてラクラク開発

1 VMware Toolsでの共有ファイル設定

2 お好きなディレクトリにマウントする

【CSS3】画像に自動で連番を振るCSS

【JavaScript】 複数のJavaScriptファイルを1つにして読み込む

【JavaScript】 文字列切り出し（slice, substr, substring）の違い

slice

substr

substring

【はてなブログ】 CSSカスタマイズ手法（自己流）

1 気に入ったテーマを探す

2 CSSを手に入れる

3 HTMLソースを手に入れる

4 ここから本職さんの技（と本猫は思っている）

5 オンラインに反映させる

はてなへ引っ越ししました

1　使い方

2　動かしてみる

1　File APIを使ってみる

2　バイナリで読み込んで変換かけるしかない

3　文字コードを判定して変換をかける

4　読み込みボタンを作る

5　完成

1　普段使い

2　正規表現使い

1　エディタ

2　仮想環境

4　バージョン管理

5　その他

1　ユーザー登録しよう

2　何かコードを書いてみよう

3　リンクを作成しよう

4　完成！

5　JavaScriptの外部参照を選択

1 　直るのか？旧マシン

2　パーツを揃える

3　そして組み立て・起動

1　頑張って書いた！毛筆系

2　雰囲気は合ってる系(その１)

3　雰囲気は合ってる系(その２)

4　ペン書き系

8　【番外編】日本人書道家(自称)の書

1 　条件演算子

2 　論理演算子

1　VMware Toolsでの共有ファイル設定

2　お好きなディレクトリにマウントする

【JavaScript】複数のJavaScriptファイルを1つにして読み込む

【JavaScript】文字列切り出し（slice, substr, substring）の違い

1　気に入ったテーマを探す

2　CSSを手に入れる

3　HTMLソースを手に入れる

4　ここから本職さんの技（と本猫は思っている）

5　オンラインに反映させる