2013/07/05

[画像の中に文字を書く（html5+css3）]

気まぐれに書き込み☆



・画像の角丸や、右と下にシャドウいれたり余計なこともしていますが下記な感じ。

・articleの背景に画像指定、ただこのサンプルだと画像サイズが指定より小さいと並べて表示、大きいとはみ出たのは表示されないです。

・当ブログだと幅固定なのでわからないですが、floatも設定しているので幅に応じて画像も並ばれていきます。

・画像の中に文字を入れるので、どうしても見づらくなる場合があるので、文字を縁取りしたりカーソル移動で色を変えたり。

CSS

article.pict {
    float: left;
    margin-left: 20px;
    margin-top: 20px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    box-shadow: 2px 2px 6px rgba(255, 255, 255, 0.80);
    -moz-box-shadow: 2px 2px 6px rgba(255, 255, 255, 0.80);
    -webkit-box-shadow: 2px 2px 6px rgba(255, 255, 255, 0.80);
}
 
article.pict h3 {
    line-height: normal;
    font-size: 9pt;
}
 
article.pict h3 a.pictlink, article.pict h3 a.pictlink:link, article.pict h3 a.pictlink:visited {
    padding-left: 5px;
    color: #ff4500;
    overflow: hidden;
    text-decoration:none;
    text-shadow: 1px 1px 2px #000,-1px -1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000;
}
 
article.pict h3 a.pictlink:hover {
    padding-left: 5px;
    color: #f0f0f0;
    overflow: hidden;
    text-decoration:none;
    text-shadow: 1px 1px 1px #ff4500,-1px -1px 1px #ff4500, 1px -1px 1px #ff4500, -1px 1px 1px #ff4500;
}

HTML

<article class="pict" style="width:nnnpx; height:nnnpx; background-image:url(画像ＵＲＬ);">
    <h3><a class="pictlink">ｘｘｘ</a></h3>
    <h3><a class="pictlink" href="リンク先">ｘｘｘ</a></h3>
</article>

※アルバムのセレクトは特に意味はありません。。。



0 件のコメント:
ラベル: ,

2013/07/03

[ＣＰＵクーラー交換]

初のＣＰＵクーラー交換です。

動画エンコするといきなり落ちたりしていたので、マザーボード設定でターボモードをOFFにして発熱を抑えてたりしていたのですが、あるとき似たような環境の方がＣＰＵクーラー交換のレビュー書いていて（すみません場所を忘れてしまいました。）、私もやってみようと思った次第です。

使用ソフトもその記事と同じ物を使用しました、似たような記事になりますが、きっと信憑性が上がるものでしょう・・・



[取り付けたＣＰＵクーラー]

安値な割には、ガンガン冷やすと言われているものです。ソケットによってネジを取り付ける場所が違うみたいでわかり易かったです。

対応ソケット:Intel LGA1366/1156/1155/775 、AMD Socket AM3+/AM3/AM2+/AM2/FM1

CoolerMaster社製 CPUファン RR-TX3E-28PK-J1 (Hyper TX3 EVO)




［取り付け前の動画エンコ状態］

ＣＰＵコアの温度が約70～77度、ASUS AI Suite IIでは50～60度（恐らくアベレージ値）

ターボモードOFF

ターボモードON





［取り付け後の動画エンコ状態］

ＣＰＵコアの温度が約60～64度、こんなにも違うものかとびっくりするほどでした。

ターボモードON



CoolerMaster社製 CPUファン RR-TX3E-28PK-J1 (Hyper TX3 EVO)


0 件のコメント:
ラベル:

2013/07/01

[HardDisk BENCH 3回目]

定期的にＳＳＤのベンチマーク行なってみて劣化具合見ようと思ってたのですがあまりにも、劣化どころか変化なかったので書く気にもならなかったのが本音です・・・前回のベンチから約１５ヶ月ほど経過（マザーボード、ＯＳも64bit変更）

１年以上SSD酷使してますがIntel Tool Boxでの寿命表示も変化ない感じ。

使用ソフトしたソフトはCrystalDiskMark3.0.2 x64

[環境]

　マザーボード：ASUS P8Z77-V PRO

　ＯＳ：Windows7 64bit



［前回のベンチで使用したＳＳＤ］

INTEL 510 SSDSC2MH120A2 120G

INTEL 510 SSDSC2MH120A2 120G 0fill



INTEL 520 SSDSC2CW060A3 60G

INTEL 520 SSDSC2CW060A3 60G 0fill



［追加購入したＳＳＤ］

INTEL 520 SSDSC2CW120A3 120G＠１台目

INTEL 520 SSDSC2CW120A3 120G＠１台目 0fill



INTEL 520 SSDSC2CW120A3 120G＠２台目

INTEL 520 SSDSC2CW120A3 120G＠２台目 0fill



マザーボードとOSを64bitに変えてSSDの規格にあったハード構成になったので、予想通りな速度ＵＰという感じになりました。

内蔵はSSDのみ、eSATAでHDDをつけて大きいファイルなど保存する感じになってきてます。使うときしか電源入れないのでHDDからの発熱もだいぶ減ってます。



Intel SSD Elmcrest 120GB SATA 2.5Iinch MLC w/Cable Retail K SSDSC2MH120A2K5

Intel SSD 520 Series(Cherryville) 60GB 2.5inch Reseller BOX SSDSC2CW060A3K5

Intel SSD 520 Series(Cherryville) 120GB 2.5inch Reseller BOX SSDSC2CW120A3K5


センチュリー 裸族の集合住宅 USB3.0/eSATA接続3.5インチSATA-HDDケース CRSJ35EU3

ラトックシステム eSATA 2ポート PCI Expressボード REX-PE32S

ASUSTek Intel Socket 1155 DDR3メモリ対応 ATXマザーボード P8Z77-V PRO


0 件のコメント:
ラベル: ,

2012/10/14

JQUERY UI Dialogで幅が反映されない！？

ダイアログをiframeで表示したのですが、スタイルシートでいくら幅を設定しても反映されず・・・

JavaScript、ダイアログ呼出部分抜粋

$(function () {
    $("#dialog-button").click(function(e){
        e.preventDefault();
        $('<iframe frameborder="0" src="dialog.php" />').dialog({
            title: title,
            autoOpen: true,
            modal: true,
            width: 640,
            height: 430,
            resizable: false,
            autoResize: false,
            overlay: {
                opacity: 0.5,
                background: "black"
            },
            close: function(event){
                $(this).dialog('destroy');
                $(event.target).remove();
            }
        });
    });
});

実際に表示された要素を検証してみると

<iframe id="dialog-iframe" frameborder="0" src="dialog.php"
 style="display: inline; width: auto;
 min-height: 0px; height: 375.59999990463257px; "
 class="ui-dialog-content ui-widget-content"
 scrolltop="0" scrollleft="0"></iframe>

ダイアログ自体は640pxで表示されているのに、iframeの幅がwidth:autoで大体300pxぐらいしかでていない・・・

JavaScriptもCSSもそれほど詳しくなくて、追いきれなかったので・・・強引に対応。。。

対応後

$(function () {
    $("#dialog-button").click(function(e){
        e.preventDefault();
        $('<iframe id="dialog-iframe" frameborder="0" src="dialog.php" />').dialog({
            title: title,
            autoOpen: true,
            modal: true,
            width: 640,
            height: 430,
            resizable: false,
            autoResize: false,
            overlay: {
                opacity: 0.5,
                background: "black"
            },
            close: function(event){
                $(this).dialog('destroy');
                $(event.target).remove();
            }
        });
        $("#dialog-iframe").css("width","640px");
    });
});

原因とか正しそうなCSS設定方法などあったら教えて下さい。。。

JQUERY 1.8.0、JQUERY-UI 1.8.24

0 件のコメント:
ラベル: , ,

2012/05/04

Postgres SQL めもめも

テーブル件数・容量

select relname, to_char(reltuples, '999999999') as rows, to_char(pg_relation_size(relname::regclass), '999999999999') as bytes from pg_class where relkind='r' and relnamespace = (select oid from pg_namespace where nspname='public') order by relname;

インデックス件数・容量

select relname, to_char(reltuples, '999999999') as rows, to_char(pg_relation_size(relname::regclass), '999999999999') as bytes from pg_class where relkind='i' and relnamespace = (select oid from pg_namespace where nspname='public') order by relname;

キャッシュヒット率（データベース）

select datname,round(blks_hit*100/(blks_hit+blks_read), 2) as cache_hit_ratio from pg_stat_database where blks_read > 0;

キャッシュヒット率（テーブル）

select relname,round(heap_blks_hit*100/(heap_blks_hit+heap_blks_read), 2) as cache_hit_ratio from pg_statio_user_tables where heap_blks_read > 0;

インデックスキャッシュヒット率

select relname, indexrelname, round(idx_blks_hit*100/(idx_blks_hit+idx_blks_read), 2) as cache_hit_ratio from pg_statio_user_indexes where idx_blks_read > 0;

表スキャンあたりの読み取り行数の確認

select relname, seq_scan, seq_tup_read, seq_tup_read/seq_scan as tup_per_read  from pg_stat_user_tables where seq_scan > 0;

ガベージの量の確認

select relname, n_live_tup, n_dead_tup, round(n_dead_tup*100/(n_dead_tup+n_live_tup), 2)  as dead_ratio, pg_size_pretty(pg_relation_size(relid)) from pg_stat_user_tables where n_live_tup > 0;

HOT更新の比率の確認

select relname, n_tup_upd, n_tup_hot_upd, round(n_tup_hot_upd*100/n_tup_upd, 2) as hot_upd_ratio from pg_stat_user_tables where n_tup_upd > 0;

トングトランザクションの処理と経過時間の確認

select procpid, waiting, (current_timestamp - xact_start)::interval(3) as duration, current_query from pg_stat_activity where procpid <> pg_backend_pid();

ロック待ちとなっている処理内容と対象のテーブルを確認

select l.locktype, c.relname, l.pid, l.mode, substring(a.current_query, 1, 6) as query, (current_timestamp - xact_start)::interval(3) as duration from pg_locks l left outer join pg_stat_activity a on l.pid = a. procpid left outer join pg_class c on l.relation = c.oid where not l.granted order by l.pid;

参照

Let's Postgres 稼動統計情報を活用しよう(2)

0 件のコメント:
ラベル: , ,
登録: 投稿 (Atom)