スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

はてなブックマークに追加 はてなブックマーク - スポンサーサイト

Ver.5.03:ボタンデザイン変更可、チルトシフト画像

MyHome Portal Ver.5.03をリリースしました。
http://ok2nd.web.fc2.com/download.html

ボタンのスタイルシート(CSS)を、common.cssとは別ファイルとして独立させました。ボタンのスタイルシート(CSS)サンプルとして、角丸タイプ、グラデーションタイプなど、数種類用意しました。実運用定義ファイルで任意のものを設定できます。
button-radius.jpg

button-gradient.jpg

button-shadow.jpg

button-kube.jpg

「アルバム」に、画像(写真)をチルトシフト表示する機能を追加。「tiltShift.js」を使用。Chromeでのみ動作します。
http://www.noeltock.com/tilt-shift-css3-jquery-plugin/

tiltshift.jpg

「アルバム」に、画像(写真)を拡大縮小アニメーション表示する機能を追加。拡大縮小率や速度を調整できます。IEでは動作しません。
スポンサーサイト

はてなブックマークに追加 はてなブックマーク - Ver.5.03:ボタンデザイン変更可、チルトシフト画像

theme : CSSレイアウト
genre : コンピュータ

aタグを余白含めてクリッカブル+上下中央揃え

<a>タグを余白部分も含めてクリッカブルにするには、
display: block;
を使えば良いが、ブロック内で、上下(縦位置)中央揃えするための
vertical-align: middle;
とは相いれない。
複数行文字列も含めて、ブロック要素内で上下中央揃えをJavaScript/jQueryやCSSハックを使わずにIE6も含めてCCSだけで実現する現実的な方法のサンプルです。
方法は、<a>タグに、行数に合わせてpaddingを設定することです。
block-click2.gif
a {
display: block;
line-height: 16px;
...
}
.line1 a { padding: 40px 0; }
.line2 a { padding: 32px 0; }
.line3 a { padding: 24px 0; }

サンプル↓
http://2ndmytest.appspot.com/sample/block-click.html

スニペット集にも載せました。
http://memo.ok2nd.biz/?query=display%3A+block

もっとシンプルな方法がありましたら、お知らせください。

はてなブックマークに追加 はてなブックマーク - aタグを余白含めてクリッカブル+上下中央揃え

theme : CSSレイアウト
genre : コンピュータ

Ver.3.32:CSS関連修正

MyHome Portal Ver.3.32をリリースしました。
http://ok2nd.web.fc2.com/download.html

CSS関連部分を、一部修正しました。

相変わらず、CSSまわりでは苦労します。

はてなブックマークに追加 はてなブックマーク - Ver.3.32:CSS関連修正

theme : CSSレイアウト
genre : コンピュータ

DIVの組み合わせで思い通りのレイアウトは難しい。

MyHome Portal Ver.2.60で、アルバムの上位ディレクトリを、左側に表示できるようにしましたが、ウインドウの下端一杯に広げたかったのですが、方法がわかりませんでした。CSSはやはり難しいです。HTMLとCSSを一部抜きだすと次のような感じです。ウインドウの下一杯に広げる方法がわかる方、アドバイスをお願いいたします。
ここに抜き出した部分より上の<div id="page_navi">などの高さが固定なら実現できそうなのですが、これら上段部分はウインドウサイズにより可変という前提です。下のフッター部分はなしという条件でもOKです。

<div id="photo_body">
<div id="photo_header">
</div>
<div id="photo_contents">
<div id="photo_dir">
</div>
<div id="photo_main">
</div>
</div>
</div>

#photo_body {
height: 70%;
}
#photo_contents {
position: relative;
height: 100%;
}
div#photo_dir {
position: absolute;
height: 100%;
overflow: scroll;
}


<div>部分のみにしたHTML全体とCSSを以下にも置きました。
http://ok2nd.web.fc2.com/sample/index.html
http://ok2nd.web.fc2.com/sample/photo.css
http://ok2nd.web.fc2.com/sample/photo-left.css

はてなブックマークに追加 はてなブックマーク - DIVの組み合わせで思い通りのレイアウトは難しい。

theme : CSSレイアウト
genre : コンピュータ

Ver.2.26:ページbody横幅を自分好みのサイズに

MyHome Portal Ver.2.26をリリースしました。
http://ok2nd.web.fc2.com/download.html

ページ全体のbodyの横幅の定義をCSSファイルでなく、実運用定義ファイルで指定できるように変更。
実運用定義ファイルのPAGE_BODY_STYLEで定義してください。max-widthを外せば100%指定になります。

define("PAGE_BODY_STYLE", "max-width: 980px;");

はてなブックマークに追加 はてなブックマーク - Ver.2.26:ページbody横幅を自分好みのサイズに

theme : PHP
genre : コンピュータ

Ver.2.25:textarea関連の修正

MyHome Portal Ver.2.25をリリースしました。
http://ok2nd.web.fc2.com/download.html

CSSで、
    * {margin: 0px; padding: 0px; }
とすると、Google Chromeだけ、textareaの左端のカーソルが見えなくなってしまう問題の対策をしました。以下をCSSに追加しました。ただし、Firefox、Safariのtextareaの左端に隙間ができます。
Google Chromeだけに有効なCSSハックをご存知の方、教えてください。
textarea {
    padding: 2px;
    _padding: 0px;
    /padding: 0px;
}

入力画面のレイアウトの微調整をしました。

textareaの横幅がブラウザによって違ってしまう問題の回避策として、colsをやめてwidthにしました。

はてなブックマークに追加 はてなブックマーク - Ver.2.25:textarea関連の修正

theme : PHP
genre : コンピュータ

Ver.2.23:デザイン修正&不具合修正

MyHome Portal Ver.2.23をリリースしました。
http://ok2nd.web.fc2.com/download.html

住所録で、日本地図で都道府県を選択すると、分類の選択がリセットされてしまう問題を修正。

RSSの配置を横4個固定でなく、ウインドウサイズに合わせて可変にしました。

RSSの画面表示で出力をバッファリングしないように「ob_implicit_flush();」を追加しました。

一覧形式のページのCSSの微調整。

ツールの「実運用環境バックアップ」で住所録DBのバックアップが漏れていたのを修正。

はてなブックマークに追加 はてなブックマーク - Ver.2.23:デザイン修正&不具合修正

theme : PHP
genre : コンピュータ

テーブルタグによる日本地図

MyHome Portal Ver.2.19で追加した住所録の日本地図は、テーブルタグで作成しました。

デザイン的には、
<なぜ人はテーブルタグで日本地図を作るのか>
http://d.hatena.ne.jp/wata300/20060308/p1
の「いつもガイド - ゼンリンの詳しい地図サイトより」のデザインを参考にさせていただきました。ただ、これは画像データでしたので、テーブルタグで新たに作成しました。
シンプルなHTMLとCSSで作成していますので、ここだけ抜き出して、再利用していただくことも可能です。

map.jpg

はてなブックマークに追加 はてなブックマーク - テーブルタグによる日本地図

theme : CSSレイアウト
genre : コンピュータ

CSSで気になっていることが2つあります。

MyHome PortalのCSSで気になっていることが2つあります。

一つ目は、IEでウインドウの横幅を狭くすると、下図のようになってしまうことです。Google Chrome等のブラウザではきれいに2段になります。できれば、IEでもこうなってほしいのですが、どうすれば良いのかわかりません。(Ver.1.68で対処。リストでの対策が分からなかったのでテーブルに変更して対処。)
css-ie.jpg
css-gc.jpg

二つ目は、MyHome Portalの中に外部コンテンツ組み込みをするときに、
<iframe src="http://www.youtube.com/" width="100%" height="100%"></iframe>
とすると、IE7では下図の様に縦が縮んでしまいます。(IE6では問題なし)
<iframe src="http://www.youtube.com/" width="100%" height="1000px"></iframe>
とすれば、拡がるのですが、できれば、固定値にはしたくないと思っているのですが、こうするしか方法はないのでしょうか?

iframe.jpg

はてなブックマークに追加 はてなブックマーク - CSSで気になっていることが2つあります。

theme : CSSレイアウト
genre : コンピュータ

Ver.1.36,1.37:CSSによるロールオーバー画像拡大

MyHome Portal Ver.1.36,1.37を リリースしました。
http://ok2nd.web.fc2.com/download.html

Ver.1.24でアルバムの画像データ表示をscripts/php/img-size-change.phpを使わない方法に変更したが、カレンダーのアルバム連携表示ではそのままになっていたのを、同様の方法に修正。

カレンダーのアルバム連携表示のロールオーバーによる画像拡大(CSSによる)がIE以外で動作しなかったのをFirefox、Google Chromeでも動作するように修正。(Ver.1.36)

<Ver.1.37追記>
Ver.1.36のカレンダーのアルバム連携表示のロールオーバーによる画像拡大CSSの修正で、ロールオーバー時にカレンダー日付枠が拡大画像サイズに従って拡がってしまう問題を修正。ただし、修正はIEのみ有効で、Firefox、Google Chromeは未対応。 Ver.1.38で修正しました。

はてなブックマークに追加 はてなブックマーク - Ver.1.36,1.37:CSSによるロールオーバー画像拡大

theme : CSSレイアウト
genre : コンピュータ

プロフィール

ok.2nd

Author:ok.2nd
HomePage:
http://ok2nd.web.fc2.com/
Email: m.ok.2nd@gmail.com

最新記事
最新コメント
最新トラックバック
月別アーカイブ
FC2ブログランキング

FC2Blog Ranking

検索フォーム
カテゴリ
リンク
RSSリンクの表示
ブロとも申請フォーム

この人とブロともになる

QRコード
QRコード
ユーザータグ

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。