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

気まぐれに書き込み☆

Various Artist

GIRLY’S-ROCKIN’GIRLS COLLECTION-

m-flo

ASTROMANTIC CHARM SCHOOL

BoA

PeaceB.REMIXS

LISA

Disco Volante

HALCALI

音樂ノススメ

melody.

Sincerely

SOMATROPE

ANIME HOUSE PROJECT~おしゃれ Selection vol.1~

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

・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>

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

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

[ blogger customize ]

[html5,css3]

VisualBasicの投稿を書いているとき余りにもごちゃごちゃしすぎて面倒になってきたので少しいじってみました。

Webデザインをそれほど勉強したことないし、得意でもないのでネットで調べた方法を組み合わせた程度なので正しいかどうかは別として。。。

でも、なんか型にはまった感じがしてすっきりしました（・ω・）

コードのHTML化は　http://manoli.net/csharpformat/　を使用していてCSSにも設定が追加されています。

投稿内容のHTML

<article id="cont">

 <section id="readme">

  <h4>[サブタイトル]</h4>

  <p>[内容]</p>

 </section>

 <section id="cont_main">

  <h2>[サブタイトル]</h2>

  <p>[内容]</p>

 </section>

 <section id="cont_code">

  <h2>Form</h2>

    [内容]

 </section>

 <section id="cont_code">

  <h2>Module</h2>

    [内容]

 </section>

 <section id="cont_dl">

  <h2>ダウンロード</h2>

    [内容]

 </section>

 <aside id="cont_aff">

    [内容]

 </aside>

</article>

brogger設定の追加CSS

*{

    font-family: Arial, Helvetica, sans-serif;

}

#cont #readme {

    border: 1px solid #4169e1;

    padding: 5px;

    margin-bottom: 30px;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    -moz-border-radius: 5px;

}

#cont #readme h4 {

    line-height: normal;

    font-size: 9pt;

    color: #fff;

}

#cont #readme p {

    margin-left: 10px;

    line-height: normal;

    font-size: 9pt;

    color: #fff;

}

#cont #cont_main {

    margin-top: 30px;

}

#cont #cont_main h2 {

    text-decoration: underline;

    line-height: normal;

    font-size: 12pt;

    color: #fff;

}

#cont #cont_main p {

    margin-left: 10px;

    line-height: normal;

    font-size: 9pt;

    color: #fff;

}

#cont #cont_code {

    margin-top: 30px;

}

#cont #cont_code h2 {

    text-decoration: underline;

    line-height: normal;

    font-size: 12pt;

    color: #fff;

}

#cont #cont_dl {

    margin-top: 30px;

}

#cont #cont_dl h2 {

    text-decoration: underline;

    line-height: normal;

    font-size: 12pt;

    color: #fff;

}

#cont #cont_aff {

    margin-top: 30px;

}

#cont #cont_aff div.amazon {

        float:left;

    line-height: normal;

    font-size: 10pt;

        padding-left:10px;

        padding-bottom:10px;

}

#cont #cont_aff div.amazon img {

        -webkit-border-radius: 3px;

        -moz-border-radius: 3px;

        border-radius: 3px;

}

#cont #cont_code .csharpcode, #cont #cont_code .csharpcode pre{

    font-size: small;

    color: black;

    font-family: Consolas, "Courier New", Courier, Monospace;

    background-color: #ffffff;

    /*white-space: pre;*/

}

#cont #cont_code .csharpcode pre { margin: 0em; }

#cont #cont_code .csharpcode .rem { color: #008000; }

#cont #cont_code .csharpcode .kwrd { color: #0000ff; }

#cont #cont_code .csharpcode .str { color: #a31515; }

#cont #cont_code .csharpcode .op { color: #0000c0; }

#cont #cont_code .csharpcode .preproc { color: #cc6633; }

#cont #cont_code .csharpcode .asp { background-color: #ffff00; }

#cont #cont_code .csharpcode .html { color: #800000; }

#cont #cont_code .csharpcode .attr { color: #ff0000; }

#cont #cont_code .csharpcode .alt {

    background-color: #f4f4f4;

    width: 100%;

    margin: 0em;

}

#cont #cont_code .csharpcode .lnum { color: #606060; }

[blogger css customize]

なんとなくいい背景だったのでCSSをいぢってみたが、
すごく重くなった感が気になりました。。。

半透明と角丸のCSS追加です。


テンプレート→カスタマイズ→アドバンス→CSSを追加

div.post-outer {
        background-color: #000000;
        filter: alpha(opacity=50);
        opacity:0.5;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
}