現在制作しているテンプレートにちょっと変わった「新着情報リスト」を作りたかったので、色々考えた結果、日付だけを右側に固定で表示し、それにマウスが触れると内容が見れると言う様な物を作ってみました。

 
2014/08/22
    
2014/09/01

#new_view { position: fixed; top: 110px; left: 0px; }    /*親要素で、固定配置する*/

#new_view li{
 background-color: rgba(254,101,104,0.89);
 border-top-right-radius: 5px;
 border-bottom-right-radius: 5px;
 border-left: 8px solid rgba(64,145,238,1.00);
 padding-left: 10px;
 padding-right: 10px;
 color: rgba(255,255,255,1.00);
 line-height: 30px;
 margin-bottom: 20px;
 transition: .42s;
 width: 100px;
 height: 30px;
 overflow-y: hidden;        /*はみ出る内容を非表示にする*/
 margin-right: 10px;
 -webkit-box-shadow: 0px 5px 5px rgba(140,140,140,0.63);
 box-shadow: 0px 5px 5px rgba(140,140,140,0.63);
}
#new_view li:hover{
 background-color: rgba(255,143,144,0.90);
 height: 30px;
 width: 100%;
}
#new_view li:after{
 content: attr(data-new);
 margin-left: 10px;
 color: rgba(245,245,245,1.00);
}

今回ローカルサーバー上で試しに"EC-CUBE"をインストールしてみました。
このEC-CUBEは何なのかと言うと、ネットショップを構築出来るシステムです。

機能もよく、独自で制作した商品等を出品するのもいいですね。

個人的に興味深いCMSなので、システム自体の解析をしてアルゴリズムを盗みたいと思います。w




こういった系統のオープンソースはホント魅力的ですよね。
私の知識・技術のほとんどがオープンソースのおかげです。
WordPressのアルゴリズムも参考になるし、OpenPNEにもお世話になりました。


っで今回まず、このシステムの魅力を説明します。


管理画面home


これは管理画面ホームのスクリーンショットです。この画面でも既に色々な情報が表示されていますね。

個人的にUIは何かヘタレですが、十分だと思います。

[システム情報]->[詳細]のリンクではPHPの詳細情報を閲覧可能です。

開発者であれば必要な情報ですね。





デザインの設定も可能です。
レイアウト設定ではコンテンツの配置を自由に変更可能で、[テンプレート追加]ではダウンロードしたテンプレートをセッティング出来る様です。

この際自分もテンプレートの制作のお勉強をして現在ある依頼をチャチャっと終わらせようかと思っています。

また、自分の参加しているグループでの利用も検討していて、自分らの力を合わせれば原型をとどめないぐらいカスタマイズ出来るかと期待しています。




お決まりのあのファイル


このファイルでは見て分かるとおり、MySQLのテーブル設定のクエリが記述されています。

って事はどこかのファイルにクエリをSQLに渡す処理があると言う事。

これも実に参考になる情報だ。
クエリ文も参考になるから得だらけだwww








ダウンロードコンテンツの販売も可能らしい。

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

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


New

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

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





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


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

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







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


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


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



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



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





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


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

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

今回jQuery Mobileテンプレート(スマートフォンテンプレート)の使い方をご紹介したいのですが、
まず以下のサイトにあるテンプレートを使用します。

jQuery Mobileのテンプレート


こちらのサイトでもある程度詳しく書いてありますが、ここでは更に詳しく書いて行きたいと思います


ではまずダウンロードして展開して編集する準備をしましょう。





展開したフォルダーには[images]と[index.html]と[style.css]のフォルダー・ファイルが含まれていると思います。このテンプレートでは大体1つのファイルで複数のページを作る事が出来ます。


コンテンツはdiv要素ごとに管理出来ます。

リンクの設定

この[id=""]部分だけは複重しない様にして下さい。

この部分が他と同じだと正しくリンクしませんのでご注意下さい。