カミジン@ファンタの平穏な日常 Blog

パソコン・カメラ・アニメがないと3日持ちません。そんな学生のダラダラ日記。

イラスト:con_cen_t

カテゴリ:デザイン

2ブログデザイン変えたよ!

カテゴリー:WEB,デザイン

どうもカミジンです。
ブログのデザインかえました。

CSSはTwitterBootstrapベースに作りました。
iPhoneとかの端末で見てもいい感じに縮小されると思います。

 

作業時間は5時間くらい? ワカンネ

じゃあバイバイ!

0IEでJavaScript/jQuery動かないときのメモ

カテゴリー:Java Script,WEB,デザイン

他のブラウザでは動くのに、
IEでJavaScriptとかjQueryがエラーで動かないときは

オプションとかで書くオブジェクトの最後に注目

// エラーの例
$.ajax({
     url: "http://",
     type: 'GET',
     dataType: 'json', // この最後の,が原因
});

以下のようにするとOKです

// 正解の例
$.ajax({
     url: "http://",
     type: 'GET',
     dataType: 'json'
});

{ foo, bar, }はNGだけど、{ foo, bar }はOKってことだそうです。

0ブログデザイン変更中…

カテゴリー:デザイン

久しぶりのブログデザイン変更です。
文字サイズや色、コメント欄とかまだですがこんな感じでまとまりました。

しっかしWPのテンプレート作りやすいです。

もう少ししたら見やすくなるのでお待ちを

まぁこれだけです。
じゃぁノシ

0新ななみアイコン

カテゴリー:デザイン

窓辺ななみのアイコンを作って今回で7回目

ということでTwitterに設定した後、Pixivに上げました。

http://twitter.com/kamijin_fanta

http://www.pixiv.net/member_illust.php?mode=medium&illust_id=19054161

細かいとこ適当でスミマセン;

どうぞこれからもよろしくです!

0ヒナギク誕生日おめでとう!!

カテゴリー:アニメ・漫画,デザイン,日記

なんとか今日中に書き終わったぜ・・・・・・っ!

しかし下手ですいませんねぇ(´・ω・`)


http://www.pixiv.net/member_illust.php?mode=medium&illust_id=17105229

 

ぴくしぶ見れない人向け↓

ヒナギク-誕生日

イラレでの試行錯誤の結果です・・・・!

間に合ってよかった・・・ヒナギクさん

改めて誕生日おめでとうです!!

 

◆追記:眉毛忘れてたorz

0Index Library Data Base beta 作成中…

カテゴリー:HTML/CSS,PHP,サーバ,デザイン

PHPの勉強として作っているサイトがちょっと出来てきたので上げようと思いまして

御坂美琴のキャラ詳細がでますね?
そんな感じで全てのキャラのデータを入れていき、一部をWikiとして公開しようと思っています。
まだログインもできない・デザインが完成ではないのでbetaよりも前のバージョンかもしれませんがw
なので、、、、 出来上がったらキャラのアイコン募集するかもしれませんのでその際はよろしくですorz
付けてほしい機能などあればtwitterでリプください
では

0iPhone向けサイトのHTML/CSS まとめ

カテゴリー:HTML/CSS,iPhone,Java Script,WEB,デザイン

iPhone/iPod対応のサイトを作りには少々コツが必要です。せっかくなので調べた内容を書いていきたいと思います。

・CSSの振り分け

まずiPhoneとパソコンなどに別々のCSSを読み込ませるのがサイト作りの一歩です。

<link media=”only screen and (max-device-width:480px)” href=”iphone.css” type=”text/css” rel=”stylesheet”/>
<link media=”screen and (min-device-width:481px)” href=”pc.css” type=”text/css” rel=”stylesheet”/>

このように<head>内に記述すると、「iPhoneのディスプレイの横幅は最大480px→iphone.cssを読み込む」 「横幅の最大が481px以上あるパソコン/iPad→pc.css」が読み込まれます。
この機能は確かCSS3.0の機能だったと思います。JavaScriptなどを使用しないため容易に実装できるのがありがたいですね!
iPhoneだけに表示させたくない所(ファイルアップロードなど)を「display:none;」指定し、それをiphone.cssに記述するとiPhoneだけが表示されないということも可能です。

・サイズ/ズームの指定

ここでは、iPhone3GとiPhone4の画面解像度は同じと考えてください。(320×480)
通常のサイトを見るとiPhoneでは「縦の時:三分の一 横の時:2分の一」に縮小されています。 その時のサイズの変更をやめる
また、つまんだ時の縮小/広げた時の拡大などを禁止する方法は以下です。<head>内に書き込みましょう。

例:<meta name=”viewport” content=”width=480, user-scalable=no, maximum-scale=0.6667″ />
上の例では横幅が320pxのiPhoneに480pxのサイトを押しこめ、拡大/縮小を禁止しています。

他の詳細は以下です この画像で分かるでしょか?(クリックして拡大です) 単位は無しで「, 」で区切ってくださいね~

viewport

設定項目 説明 標準値 設定範囲
width ページの横幅 980px 200px ~ 10,000px

device-height(デバイス値をセット)

height ページの縦幅 自動 223px ~ 10,000px

device-height(デバイス値をセット)

initial-scale 標準の拡大率 1 0 ~ 10
user-scalable ユーザーへの拡大縮小の許可 yes yes もしくは、 no
minimum-scale 拡大率の下限 0.25 0 ~ 10
maximum-scale 拡大率の上限 1.6 0 ~ 10

 

・JavaScriptで表示するページを振り分ける

下のコードで対応します。アドレスを書き換えてください。
useragentを取得して順に検索をしていますね。コードを変えれば様々なことに応用できそうです。

<script type=”text/javascript”>
// iPhoneまたは、Androidの場合は振り分けを判断
if ((navigator.userAgent.indexOf(‘iPhone’) > 0 && navigator.userAgent.indexOf(‘iPad’) == -1) || navigator.userAgent.indexOf(‘iPod’) > 0) {
if(confirm(‘ようこそ。€このサイトにはスマートフォン用のサイトがあります。€表示しますか?’)) {
location.href = ‘http://kamijin_fanta.info/phone/';
}
}
</script>

 

iPhoneのサイトを作るときは以上のことを頭に入れておくとスラスラとかけると思います。

それとiPhoneなどは「クリックではなくタップ」とのことも頭に入れておきましょう。つまりリンクなどが小さすぎるとタップしにくいということです。小さなボタンにもボーダーなどを設定し、範囲を広くすることも大切です。

では、健闘を祈ります! 質問あればコメント/ツイッターで待ってますのでb

 

最後に忘れていた画像

iPhone-size

0超電磁砲OVA OP曲 future gazer

カテゴリー:アニメ・漫画,デザイン

future-gazer-2

fripSideのfuture gazerがMステランクインしてたねw やっぱ超電磁砲強いね~ 歌詞とか載せておきますよ!

CD買いたいんだけどどうせだったらメイトで特典欲しいじゃないですか (何があるか調べてないけど

歌詞カードつくってみたけど適当ですみませんね!wwww Photoshopちょいちょいいじったところに歌詞載せただけですよー!

 

future-gazer-kasi

 

ova-2

とある科学の超電磁砲OVAの発売も10月27日 いよいよ近づいてきましたね!あーなんか楽しみだわぁ 親が買ってくれる可能性がwww

本編のブルーレイ揃えてるわけじゃないけどいいよね?うん

今回もまた都市伝説繋がりとか聞いてるけどどんな感じだろ?OPはよかったなー!本編のOPとは違って明るい感じで