I aim to creator.

最近ではスマートフォン端末もよく利用される様になってから、
Web業界でもレスポンシブルデザインを取り入れるサイトが増えて来ました。

そして最近では可変グリッドレイアウトと言うカードを並べた様な形のデザインも増えています。



そこで、簡単にグリッドレイアウトを使える様にしたjQueryを紹介したいと思います。



必要な物はライブラリーだけ!!



以下のサイトから2つのJavaScriptファイルをダウンロードして下さい。

1. jQuery
2. jQuery Masonry

ダウンロードが完了したらこれで準備は完了です。

後はソースを入力していくだけ、



JavaScriptファイル読み込み

jQueryコードを書く

$(function(){
  $('#main_container').masonry({
     itemSelector: '.box',
     isFitWidth: true,
     isAnimated: true
  });
});

※
[$('#main_container')]ではHTMLのグリッドレイアウトのボックス全体を囲む要素です。
[itemSelector: '.box',]レイアウトする対象要素

HTMLを書く

    
        

            


Box1



Box2



Box3



Box4



Box5



Box6



Box7



Box8



Box9

CSSをお忘れなく!!

            body{ background-color: #808080; }
            #main_container{ margin: 0 auto; width: 900px; }
            .box{
                background-color: #fff;
                float: left;
                width: 200px;
                margin: 10px;
                padding: 10px;
                border-radius: 5px;
            }

多分以下の表見たら一発で分かると思います。

イラストサイト向けのレスポンシブデザインのテンプレートを配布開始!!

☆☆※現在テンプレートがダウンロード出来ない問題が発覚したので現在新規で制作を速急に進めております。大変ご迷惑をお掛けして申し訳御座いません。速急に対処致しますのでいましばらくお待ちください。※☆☆


New

レスポンシブデザインに対応しました。
スマートフォン・タブレット端末の対応を致しました。

「こうして欲しい!!」っと言ったリクエスト等ございましたら気軽にコメントしてください。





久々のテンプレート配布です(´∀｀*)


　今回作成したテンプレートは、イラストサイト向けで、今まではほとんど写真などを紹介する様なテンプレートが多かったですが、「イラスト」と「写真」は全く違うと私は思います。なのでイラストサイト向けのテンプレートを作ろうと思い今回作成させて頂きました。

デザインセンスは全然良くないのですが、一応作ったので是非使ってもらいたいです。







イメージとしてはアニメのウェブサイト的な感じです。
絵師であれば、イラストを一番見てもらいたいはずなのでお気に入りの描いた絵をトップページに載せてアピール出来る様にアニメの公式サイトの様な感じに絵を大きく表示出来る様にしました。


「イラストページ」も、イラストをクリックすると大きく拡大して表示出来る様なjQueryを使わせて頂きましたので更に自分の描いたイラストをアピール出来る様になります。


フッターの部分には自分がお勧めするサイトのバーナーを貼るのもいいです。



完全フリーのテンプレートなので著作を書き換える事もいいです。
是非ご利用下さい。



※初期で使われている画像は使用する前に必ず削除して下さい。
ニコニコ静画やGoogle+で拾ってきたイラストなので。^^;





以降このテンプレートの拡張版も配布する予定ですので、期待して下さい。( ^ω^ )


[イラストサイト向けテンプレートのサンプルを見に行く]

[早速イラストサイト向けテンプレートをダウンロードする]

今回偶然知ったのですが、
世の中には、子供ホームページコンテストと言う物があるのですね
今日始めて知りました。

"子供ホームページコンテスト"では、小学生が作ったホームページを
審査して順位を付ける物らしいです。

それもグランプリを受賞した方には、10万円貰えるらしいです。
僕もやりたかったです。

グランプリを受賞された方のページを見たら・・・・・
採点の決めてが分からなかったです。
普通にYahooブログをカスタムしただけでした。

今の自分なら1時間以内で、出来てしまうサイトです。
僕は、中3ですが、受賞者は、小6でした。

多少の年齢差で、作る物は、変わっているんだな～っと思いますした。
でも小学生にしては、綺麗に出来ているブログでした。
コンテンツの配置も完璧?　って程でした。

ただ困った事が、・・・・皆ブログなんです。^^;
ホームページコンテストじゃなくてブログコンテストになっていました。
ま～結構面白そうなサイトコンテストなので、色々みてみました。

そして、自分的にいいと思った物を勝手に順位をつけてみます。

1. http://kaze-iro.jugem.jp/
2. http://ameblo.jp/kana-cooking/
3. http://mako700.blogspot.jp/

今回初心者さん達の参考に、っと思い簡単なメニューを作ってみました。
誰でも真似が出来るので、試してみて下さい。

このメニューは、ボタン風に作ってみました。
あまりボタンの様には、見えませんが、とりあえずと言う事で、

<style type="text/css"> body{ font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro"; } .web642122{ width: 200px; } .web642122 li{ text-align: center; margin-bottom: 5px; border-width: 2px; border-color: #FFCCFF #DD00DD #DD00DD #FFCCFF; border-style: solid; list-style-type: none; height: 30px; background-color: #FF33FF; } .web642122 li a{ font-size: 20px; color: #FFFFFF; font-weight: bold; text-decoration: none; display: block; } .web642122 li:hover{ border-width: 2px; border-color: #FF33FF #DD00DD #DD00DD #FF33FF; background-color: #FFCCFF; } .web642122 li a:hover{ color: #FF00CC; } </style> <!--HTML--> <ul class="web642122"> <li><a href="#">Home</a></li> <li><a href="#">Home</a></li> <li><a href="#">Home</a></li> <li><a href="#">Home</a></li> <li><a href="#">Home</a></li> </ul>



CSS3を使って角を丸くしました。
ちょっと可愛いメニューですね

<style type="text/css"> body{ font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro"; } .web509849{ width: 150px; } .web509849 li{ text-align: center; margin-bottom: 5px; border-width: 1px; border-color: #808080; border-style: solid; list-style-type: none; background-color: #808080; border-radius: 1em; } .web509849 li a{ color: #00FF00; font-weight: bold; text-decoration: none; display: block; } .web509849 li:hover{ background-color: #C0C0C0; } .web509849 li a:hover{ color: #006600; } </style> <!-- HTML --> <ul class="web509849"> <li><a href="#">Home</a></li> <li><a href="#">Home</a></li> <li><a href="#">Home</a></li> <li><a href="#">Home</a></li> <li><a href="#">Home</a></li> </ul>




このメニューは、激ノーマルですね^^;
実際は、背景画像で、オリジナルのメニューを作成出来るのですが
画像を配布すると手間がかかるので、このブログでは、画像を使わない様に、

紹介いたします。

<style type="text/css"> body{ font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro"; } #dweb943510{ height: 35px; background-color: #373737; } #dweb943510 .web943510{ margin: 0 auto; width: 650px; } #dweb943510 .web943510 li{ text-align: center; margin-right: 5px; border-right-width: 1px; border-right-color: #808080; border-right-style: solid; list-style-type: none; float: left; width: 100px; } #dweb943510 .web943510 li a{ color: #FFFFFF; font-weight: bold; text-decoration: none; padding-top: 5px; display: block; } #dweb943510 .web943510 li a:hover{ color: #C0C0C0; } </style> <!--HTML--> <div id="dweb943510"> <ul class="web943510"> <li><a href="#">Home</a></li> <li><a href="#">Home</a></li> <li><a href="#">Home</a></li> <li><a href="#">Home</a></li> <li><a href="#">Home</a></li> </ul> </div>



※ここで、紹介しているメニューは、自由に使っていただしていいのですが、
もしこのメニューのせいで、何か起きた場合責任はとりませんのでご了承下さい。

実際にメニューを使う方法!

こちらで、紹介しているメニューを実際に使う方法をご説明させていただきます。

今サイトを作成途中の方は、編集中のファイルを開いて、
メニューを配置したい場所に<!--HTML-->の部分の下のタグを貼り付けて下さい。

次に、<style type="text/css">っと言う部分から</style>っと言う部分まで、コピーして下さい。
コピー出来たら<head>内に貼り付けをして下さい。

以上で、設置完了です。
プレビューで、ご確認下さい。


Q?　ぜんぜんうまく行かない場合は、この記事にコメントに書いてくださったら回答いたします。

今日色々あって友達が、ホームページのヘッダー画像を、
作りたいっと言う事で、自分のpcを貸して作ってました。

それで、色々質問して来るんです。
自分は、iPhoneと睨めっこしている途中にいちいち聞いて来るので、
ムカつきました。

画像編集出来ないならやらないで、欲しいです。^^;
それで、編集中の画面を覗いてみると、
面白い景色がありました。

もともと自分は、センスが無いっと気づいているのですが、
その時は、「自分は、まだましな方だ。」っと思いました。
なぜなら激ダサい画像を作っていたからです。

友達は、納得していたのですが自分なら絶対納得しません。
僕が指摘しても逆ギレされてもういいやと思いました。
まずそのサイトのテーマを意味不明にする画像ですからw


そして出来た画像.......

今回友達に頼まれて、プロフィールサイトを作ってっと言う依頼があったので、
暇だったので、作ってあげました。

でも僕の作ったデザインがあまり好きじゃないらしく
色々っと変更させられました。
確かに自分のセンスは、無いのですが色々っと変更させられたので、

ちょっと悲しくなりましたw
自分にそのセンスくれっと言ったのですが「え、うちもセンスなんて、無いよ!」
っと言い返されたのです。
センスのある人は、自分にセンスがあるとは、分かって無い様ですねw


ま～別にいいのですが
結構サイト作るのも大変でしたw
サイトの製作は、友達の思いつきなので、何かいいな～っと思う機能を付けて欲しい
っと言う感じなので、完成した～っと思っても「いやまだだよ!」っと言う感じで、疲れました。

まずRSS機能を付けて欲しいっと言う事では、jQueryのRSSで、実現したのですが
次に、フォトギャラリーが作りたいっと言う事なので、フォトギャラリーのjQueryを使って
実現しました。


それも友達のサイトは、忍者サーバーの無料バージョンなんです。
だからCGIやPHPを設置出来ない状態っと言う事を前提にjs関連になんとか
実現しました。



一番困るのが説明ですねw


web製作している人なら分かる用語を初心者は、分からないんですもんw
だから用語などをどう説明していいのか困りますね。
大体HTMLは、簡単に理解しやすい様に説明出来るのですが

クライアントとかRSSとかの言葉も知らない人なんで、どうしようも無いですw


そんな困難を乗り越えてほぼ2日寝ずに今日製作が完了しました。
最後のお願いが、アクセス数を表示出来る様にして!!

っと言う事なんで、適当にそこらへんで、作って今日は、終わりです。



作業スケジュール

午後6:00
             頼まれたので、製作開始
　　　　　　　　　まずデザインを想像しつつHTMLを組んで行く

午後9:00
　　　　　　　レイアウトも決まったので、CSSの編集に入る

午前1:00
　　　　　　　後々変だな～っと思いCSSを再編集
午前3:00
　　　　　　　大体のデザインは、完了
午前4:00
　　　　　　　デザインなど見直しつつ活用するページの製作
午前5:00
　　　　　　　就寝
午前7:00
　　　　　　　友達に起こされて出来たサイトを見せる
午前8:00
　　　　　　　大体のデザイン説明と仕組みと編集箇所とHTMLの教習をしたので、編集させる
午前10:00
　　　　　　　サイトのデザインで、嫌な所を指摘され編集をする。
午前11:00
　　　　　　　色々機能を追加させられる
午後3:00
　　　　　　　大まかな機能を追加が完了
午後6:00
　　　　　　　友達が帰宅した
午前1:00
　　　　　　　メールが来てアクセス数を表示てもらう様頼まれる

現在

　　　　　　　　こうして一人で、Blogを書いている・・・・・・・・

最近webテンプレートを何日も続けて作成しているけど

今回久々にテンプレートを配布したいと思います。
結構複雑になりましたが綺麗に整えてコメントも付けて

初心者さんでも利用出来る様にしました～

ついでにテンプレートのアップデートもこれからどんどん増やすつもりです。!!


このテンプレートでは、丸をメインにイメージしました。
メインカラーは、黒とピンク!

多少落ち着いたイメージのテンプレートです。


【サンプル】

【ダウンロード】













■ちょっと工夫した所!

今回テンプレートにあるヘッダーの枠は、画像を変えても消えない様にしました。
CSSのレイヤーで枠とヘッダー画像を重ねているので、
ヘッダー画像を変えても枠は、ちゃんと表示されます。!!!


■最初に言ってたアップデートとは?

アップデートとは、テンプレートのバージョンアップすると言う所です。
たまにアップデータを配布したいと思います。

アップデートする事により今までのテンプレートをさらによくする事が可能です。




☆次のアップデート予告!!

フォームのデザインを追加!
その他修正!



次まアップデートは、いつになるか分かりませんが
近いうちに公開したいと思います。

最近まともにjQueryを勉強したのですがjQueryが楽しすぎるww
今まで動的なサイトやテンプレート作れなかったけど
jQueryを使い始めて動的なテンプレートが作れる様になった!

最近は、楽しくていつもjQueryのAPLを検索して実験しているw
やはりweb制作は、楽しい!!
一度入ったら抜け出せない世界だねw

最初の頃もそうだけどHTMLを覚え始めの時は、
HTMLで見出しとか作る事が楽しくなってたw
今は、レベルが上がってjQueryなどになったけどw

CGIも変わらず楽しいけど気軽にpc上で楽しめるのは、
C#/js/jQueryなどだと僕は、思います。
皆さんもまだjQueryに手を出してない方は、一度試してみてください。

いずれこのブログもjQueryを使った効果を付けたいと思います。

あなたに向いているpc技術

現在web制作のお手伝いをしようと考えています。
「今web制作をしたいけど方法が分からなくて手伝って欲しい!!」
と言う方いませんか?

そういった方が居るのなら出来るだけ僕は、協力いたします。
お手伝い方法の流れは、以下のとおりです。

①メールでお手伝い依頼
僕がメールを確認しだいご返信します。^^

②ご指定したチャットルームが連絡の拠点となります。
チャットルームは、僕が用意します。

③制作内奥にそって制作のお手伝いをしたいと思います。

④制作完了後後は、自由に

この流れで制作をしたいと思います。
限定2組の制作のお手伝いをしたいと思います。


■遠慮する制作手伝い

sns制作などのお手伝い
Flashを使用したwebサイトのお手伝い
jsなどを多く利用するwebサイトのお手伝い
著作権の違反をするwebサイトのお手伝い

などのお手伝いは、ご遠慮ください。
その他管理人をやってもらうなどのお手伝いもご遠慮ください。


■依頼資格

FFFTPソフトを持っている方
(持っていない方でも僕が使い方を教えてあげます。)

サイト管理の自身がある方
(自分1人でサイトを管理していける方)

サーバーを持っている方
(レンタルサーバーなど借りている方など
まだ持っていなくても色々説明します。)


■アクアのwebスキル

HTML　多少
HTML5　未経験
CSS　　多少
CSS3　未経験
js勉強中
Flash 　作成経験あり



このスキル内で出来る事なら出来るだけ協力したいと思います。
今回限定2組だけの依頼者を待っています。

2組の依頼で埋まったらブログサイドの掲示板でお知らせします。
皆さん依頼待ってます^^


■お手伝い依頼方法

僕のメールアドレスに連絡する方法になります。





迷惑メール防止の為画像のメールアドレスとなります。
他の方法では、僕のプロフィールサイトのお問い合わせ
でご依頼ください。

http://aqua822.hariko.com/index4.html

最近自分のサイト作成方法は、正しいのか?
そう思ってきました。
なので今回自分のサイト作成様子を゜紹介してみたいと思います。

---

現在利用しているサイト作成ソフト>>
ez-HTML

まず必要な物を準備します。
画像などを管理する為フォルダーを開きます。

サイトを作成するのでez-HTMLを起動します。

ブラウザーでは、すぐにタグを検索出来る様に
タグなどを紹介しているサイトを表示させて
おきます。


これで準備は、完了です。



次にHTMLでレイアウトの土台を書きます。
<div id="">でレイアウトの基礎を書きます。


コメントでは、そのdivの中に何が入っている
かを記入します。








次にCSSを書いていきます。

container{

}
などまで一覧書きます。
プロパティは、次に書いていきます。







次にプロパティを書きながら
プレビューを見ていきます。

後は、背景など指定して
スタイルを決めていきます。








最後に<link rel="stylesheet" type="text/css" href="#">でCSSを外部ファイル化して
終わりです。

皆さんおまたせしました～
新テンプレートを配布します。
名前は、「1234」です　毎回適当な名前ですみません。

夜中の作成なので^^;;

今回特徴は、画像を一切使わない
テンプレートです。

シンプルに仕上げました。
画像が無い分CSSが複雑です。

まだ初心者感のあるテンプレートですね^^;




サンプルページ

ダウンロード


ちょい工夫?


CSSにそのまま貼り付けしてください。

はい僕は、・・・・・・・・WEBデザインをする事は、好きですが・・・・・
サイトを作るのは、嫌いです。

なのでこれからサイトの為に作って来たテンプレートを配布して行きたいと思います。
今まで作って来たテンプレートは、配布しているのよりいいと思うので
それを配布していきたいと思います。

テンプレートのリクエストなどあればコメントにどうぞ

今回アニメ系テンプレートの作成を考えてます。
まー今回作るのは、ほぼコピーです。

アニメのテンプレートは、大体が同じ感じになっていなます。

メニューの配置などが特徴的です。














これに似たレイアウトでソラハネと言うサイトの素材で作ってみます。
※著作権の問題で配布は、いたしません。