めるちる's Room（備忘録サイト） http://mellchile.com WordPressを利用して作成した「めるちる」の備忘録兼ショッピング用情報サイトです。 Fri, 20 Apr 2012 22:42:43 +0000 ja hourly 1 http://wordpress.org/?v=3.3.1 http://mellchile.com http://mellchile.com/mell/wp-content/themes/wsc6/images/icon1.gif めるちる's Room（備忘録サイト） 角丸ボックスに影をつける方法 http://mellchile.com/2012/04/21/%e8%a7%92%e4%b8%b8%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%81%ab%e5%bd%b1%e3%82%92%e3%81%a4%e3%81%91%e3%82%8b%e6%96%b9%e6%b3%95/ http://mellchile.com/2012/04/21/%e8%a7%92%e4%b8%b8%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%81%ab%e5%bd%b1%e3%82%92%e3%81%a4%e3%81%91%e3%82%8b%e6%96%b9%e6%b3%95/#comments Fri, 20 Apr 2012 22:42:38 +0000 mellchile http://mellchile.com/?p=1140 続きを読む･･･]]> 影付き角丸のボックスるを作るには、角丸にするプロパティのborder-radiusを併用する

通常の影付きボックスは

 

.kage_box {
background-color:#EFEFEF;
-moz-box-shadow: 5px 5px 5px #DDD;    /* firefox　*/
-webkit-box-shadow: 5px 5px 5px #DDD;  /* safari、chorme */
width:400px;
padding:5px;
}

 

これに、border-radiusを併用して、

 

.kage_box2 {
background-color:#EFEFEF;
-moz-box-shadow: 5px 5px 5px #666;
-webkit-box-shadow: 5px 5px 5px #666;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
margin:0px 0px 15px 0px;
width:400px;
padding:5px;
}

 

影付き角丸ボックスるになる。

-moz-box-shadowでFIrefox、-webkit-box-shadowでSafari、Google Chorme用の記述となり、

横方向のずれ、下方向のずれ、ぼかしの半径、ぼかしの色の順に指定していく。

 

 

 

 

]]> http://mellchile.com/2012/04/21/%e8%a7%92%e4%b8%b8%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%81%ab%e5%bd%b1%e3%82%92%e3%81%a4%e3%81%91%e3%82%8b%e6%96%b9%e6%b3%95/feed/ 0 画像上の自由な位置に文字を表示させる方法 http://mellchile.com/2012/04/21/%e7%94%bb%e5%83%8f%e4%b8%8a%e3%81%ae%e8%87%aa%e7%94%b1%e3%81%aa%e4%bd%8d%e7%bd%ae%e3%81%ab%e6%96%87%e5%ad%97%e3%82%92%e8%a1%a8%e7%a4%ba%e3%81%95%e3%81%9b%e3%82%8b%e6%96%b9%e6%b3%95/ http://mellchile.com/2012/04/21/%e7%94%bb%e5%83%8f%e4%b8%8a%e3%81%ae%e8%87%aa%e7%94%b1%e3%81%aa%e4%bd%8d%e7%bd%ae%e3%81%ab%e6%96%87%e5%ad%97%e3%82%92%e8%a1%a8%e7%a4%ba%e3%81%95%e3%81%9b%e3%82%8b%e6%96%b9%e6%b3%95/#comments Fri, 20 Apr 2012 21:39:58 +0000 mellchile http://mellchile.com/?p=1136 続きを読む･･･]]> 背景上ではなくimg上に文字を表示させるには、positionプロパティを使用する。

値に「absolute」を指定すると、positionプロパティが指定されている最も近いボックスから、指定距離だけ移動した位置に表示させらる。

（例）

<div style="position: relative;">
   <img src="○○○.jpg" width="320" height="140" alt="○○○"><br>
   <div style="position: absolute; top: 15px; left: 150px; width: 150px;">
      ここに表示したい文字を入力。
   </div>
</div>

——-以下抜粋——————————————————————————–

positionプロパティで指定するのは、配置方法（基準位置）のみです。 実際の表示位置の指定には、 top、 bottom、 left、 rightを併用して、基準位置からの距離を設定する必要があります。

■値

static
特に配置方法を指定しません。この値のときには、top、bottom、left、rightは適用されません。これが初期値です。
relative
相対位置への配置となります。positionプロパティでstaticを指定した場合に表示される位置が基準位置となります。
absolute
絶対位置への配置となります。親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。
fixed
絶対位置への配置となるのはabsoluteと同じですが、スクロールしても位置が固定されたままとなります。
]]> http://mellchile.com/2012/04/21/%e7%94%bb%e5%83%8f%e4%b8%8a%e3%81%ae%e8%87%aa%e7%94%b1%e3%81%aa%e4%bd%8d%e7%bd%ae%e3%81%ab%e6%96%87%e5%ad%97%e3%82%92%e8%a1%a8%e7%a4%ba%e3%81%95%e3%81%9b%e3%82%8b%e6%96%b9%e6%b3%95/feed/ 0 画像上の自由な位置に文字を重ねる方法 http://mellchile.com/2012/04/20/%e7%94%bb%e5%83%8f%e4%b8%8a%e3%81%ae%e8%87%aa%e7%94%b1%e3%81%aa%e4%bd%8d%e7%bd%ae%e3%81%ab%e6%96%87%e5%ad%97%e3%82%92%e9%87%8d%e3%81%ad%e3%82%8b%e6%96%b9%e6%b3%95/ http://mellchile.com/2012/04/20/%e7%94%bb%e5%83%8f%e4%b8%8a%e3%81%ae%e8%87%aa%e7%94%b1%e3%81%aa%e4%bd%8d%e7%bd%ae%e3%81%ab%e6%96%87%e5%ad%97%e3%82%92%e9%87%8d%e3%81%ad%e3%82%8b%e6%96%b9%e6%b3%95/#comments Fri, 20 Apr 2012 02:00:04 +0000 mellchile http://mellchile.com/?p=1133 画像の上に文字や入力フォームなど様々なオブジェクトを重ね合わせる方法

 

http://allabout.co.jp/gm/gc/23824/

 

 

 

]]> http://mellchile.com/2012/04/20/%e7%94%bb%e5%83%8f%e4%b8%8a%e3%81%ae%e8%87%aa%e7%94%b1%e3%81%aa%e4%bd%8d%e7%bd%ae%e3%81%ab%e6%96%87%e5%ad%97%e3%82%92%e9%87%8d%e3%81%ad%e3%82%8b%e6%96%b9%e6%b3%95/feed/ 0 文字をクリックすると、その下に別の文字が表示される方法（例　Q&A） http://mellchile.com/2012/04/18/%e6%96%87%e5%ad%97%e3%82%92%e3%82%af%e3%83%aa%e3%83%83%e3%82%af%e3%81%99%e3%82%8b%e3%81%a8%e3%80%81%e3%81%9d%e3%81%ae%e4%b8%8b%e3%81%ab%e5%88%a5%e3%81%ae%e6%96%87%e5%ad%97%e3%81%8c%e8%a1%a8%e7%a4%ba/ http://mellchile.com/2012/04/18/%e6%96%87%e5%ad%97%e3%82%92%e3%82%af%e3%83%aa%e3%83%83%e3%82%af%e3%81%99%e3%82%8b%e3%81%a8%e3%80%81%e3%81%9d%e3%81%ae%e4%b8%8b%e3%81%ab%e5%88%a5%e3%81%ae%e6%96%87%e5%ad%97%e3%81%8c%e8%a1%a8%e7%a4%ba/#comments Tue, 17 Apr 2012 21:56:10 +0000 mellchile http://mellchile.com/?p=1129 続きを読む･･･]]> ■クリックすると下に文字が表示される方法
—————————————————–
<div>
<a href=”javascript:void(0)” onclick=”o=document.getElementById(‘x’).style;o.display=(o.display==’none’)?’block’:'none’;”>クリックする部分</a><br>
<br>
<div id=”x” style=”display:none;”>表示させる部分</div>
</div>
—————————————————–

■インデントの設定

○段落の1行目だけインデント設定をする場合

・要素に直接書く
—————————————————–
<p style=”text-indent:2em”>
この文章の先頭は、通常の表示位置から２文字下がってます。
<br>この行の位置が通常の表示位置です。
<br>この行の位置が通常の表示位置です。
</p>
—————————————————–

・Headに書く
—————————————————–
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>

<html>
<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=Shift_JIS”>
<meta http-equiv=”Content-Style-Type” content=”text/css”>

<style type=”text/css”>
<!–

p {text-indent:2em;}

–>
</style>
</head>
<body>

<p>この文章の先頭は、通常の表示位置から２文字下がってます。
<br>この行の位置が通常の表示位置です。
<br>この行の位置が通常の表示位置です。
</p>

</body>
</html>
—————————————————–
○段落全体にインデント設定をする場合

・要素に直接書く
—————————————————–
<p style=”padding-left:2em”>
この文章の先頭は、通常の表示位置から２文字下がってます。
<br>この行の位置も下がってます。
<br>この行の位置も下がってます。
</p>
—————————————————–

・Headに直接書く
—————————————————–
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>

<html>
<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=Shift_JIS”>
<meta http-equiv=”Content-Style-Type” content=”text/css”>

<style type=”text/css”>
<!–

p {padding-left:2em;}

–>
</style>
</head>
<body>

<p>この文章の先頭は、通常の表示位置から２文字下がってます。
<br>この行の位置も下がってます。
<br>この行の位置も下がってます。
</p>

</body>
</html>
—————————————————–

]]> http://mellchile.com/2012/04/18/%e6%96%87%e5%ad%97%e3%82%92%e3%82%af%e3%83%aa%e3%83%83%e3%82%af%e3%81%99%e3%82%8b%e3%81%a8%e3%80%81%e3%81%9d%e3%81%ae%e4%b8%8b%e3%81%ab%e5%88%a5%e3%81%ae%e6%96%87%e5%ad%97%e3%81%8c%e8%a1%a8%e7%a4%ba/feed/ 0 BloggerにアニメーションGIFを表示させるには？ http://mellchile.com/2012/04/10/blogger%e3%81%ab%e3%82%a2%e3%83%8b%e3%83%a1%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3gif%e3%82%92%e8%a1%a8%e7%a4%ba%e3%81%95%e3%81%9b%e3%82%8b%e3%81%ab%e3%81%af%ef%bc%9f/ http://mellchile.com/2012/04/10/blogger%e3%81%ab%e3%82%a2%e3%83%8b%e3%83%a1%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3gif%e3%82%92%e8%a1%a8%e7%a4%ba%e3%81%95%e3%81%9b%e3%82%8b%e3%81%ab%e3%81%af%ef%bc%9f/#comments Tue, 10 Apr 2012 11:29:37 +0000 mellchile http://mellchile.com/?p=1103 続きを読む･･･]]> テストです。

Bloggerに直接アニメーションGIF画像をアップロードすると、静止画に置き換わります。

何か方法があるはず･･･

残念、上記画像URLをBloggerに設定しても、Bloggerにホストされた画像はPicasaウェブアルバムに格納されるため、アニメ画像をサポートしていないPicasaが静止画として表示させるようです。

]]> http://mellchile.com/2012/04/10/blogger%e3%81%ab%e3%82%a2%e3%83%8b%e3%83%a1%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3gif%e3%82%92%e8%a1%a8%e7%a4%ba%e3%81%95%e3%81%9b%e3%82%8b%e3%81%ab%e3%81%af%ef%bc%9f/feed/ 0 2011年 同窓会！楽しかったぁ♪ http://mellchile.com/2011/08/18/2011%e5%b9%b4-%e5%90%8c%e7%aa%93%e4%bc%9a%ef%bc%81%e6%a5%bd%e3%81%97%e3%81%8b%e3%81%a3%e3%81%9f%e3%81%81%e2%99%aa/ http://mellchile.com/2011/08/18/2011%e5%b9%b4-%e5%90%8c%e7%aa%93%e4%bc%9a%ef%bc%81%e6%a5%bd%e3%81%97%e3%81%8b%e3%81%a3%e3%81%9f%e3%81%81%e2%99%aa/#comments Thu, 18 Aug 2011 11:55:26 +0000 mellchile http://mellchile.com/?p=1071 続きを読む･･･]]> 2011年8月14日、8年ぶりの同窓会がありました。

え？　もう8年もたってた？

40年前に卒業した中学校の同窓会です。

卒業生15名、今回の出席者数10名。

なかなかの出席率です。

同窓会開始直後のお行儀のよい写真です。
崩れたところを撮ればよかったけど、私も崩れていたし････

　

　

　

　

　

　

]]> http://mellchile.com/2011/08/18/2011%e5%b9%b4-%e5%90%8c%e7%aa%93%e4%bc%9a%ef%bc%81%e6%a5%bd%e3%81%97%e3%81%8b%e3%81%a3%e3%81%9f%e3%81%81%e2%99%aa/feed/ 0 「温泉に行こうか！」と思い立ち http://mellchile.com/2011/08/12/%e3%80%8c%e6%b8%a9%e6%b3%89%e3%81%ab%e8%a1%8c%e3%81%93%e3%81%86%e3%81%8b%ef%bc%81%e3%80%8d%e3%81%a8%e6%80%9d%e3%81%84%e7%ab%8b%e3%81%a1/ http://mellchile.com/2011/08/12/%e3%80%8c%e6%b8%a9%e6%b3%89%e3%81%ab%e8%a1%8c%e3%81%93%e3%81%86%e3%81%8b%ef%bc%81%e3%80%8d%e3%81%a8%e6%80%9d%e3%81%84%e7%ab%8b%e3%81%a1/#comments Fri, 12 Aug 2011 07:30:05 +0000 mellchile http://mellchile.com/?p=1046 続きを読む･･･]]> 夕方、「温泉に行こう！」と思い立ち、

陽菜ちゃんと大知を保育園に迎えに行って、

匹見のやすらぎの湯に行ってきました。

陽菜ちゃんに「どこの温泉に行くか知ってる？」と聞くと、

「たぬきの温泉！」と即答されました。

そうか、子どもにはあの狸が印象深いんだね。

温泉の中での写真は、ご容赦くださいませ<m(__)m>

]]> http://mellchile.com/2011/08/12/%e3%80%8c%e6%b8%a9%e6%b3%89%e3%81%ab%e8%a1%8c%e3%81%93%e3%81%86%e3%81%8b%ef%bc%81%e3%80%8d%e3%81%a8%e6%80%9d%e3%81%84%e7%ab%8b%e3%81%a1/feed/ 0 Webで使えるスーペース（空白） http://mellchile.com/2011/07/03/web%e3%81%a7%e4%bd%bf%e3%81%88%e3%82%8b%e3%82%b9%e3%83%bc%e3%83%9a%e3%83%bc%e3%82%b9%ef%bc%88%e7%a9%ba%e7%99%bd%ef%bc%89/ http://mellchile.com/2011/07/03/web%e3%81%a7%e4%bd%bf%e3%81%88%e3%82%8b%e3%82%b9%e3%83%bc%e3%83%9a%e3%83%bc%e3%82%b9%ef%bc%88%e7%a9%ba%e7%99%bd%ef%bc%89/#comments Sun, 03 Jul 2011 02:31:15 +0000 mellchile http://mellchile.com/?p=827 続きを読む･･･]]> HTML記述中に複数のスペースを挿入する場合のいろいろが記載されていますので、メモします。

&nbsp;　　　半角スペース
&ensp;　　　それより少し広め
&emsp;　　　さらに広め（&ensp;の2倍）
&thinsp;　　細めの空白

 

「Webで使えるスペース（空白文字）いろいろ」

]]> http://mellchile.com/2011/07/03/web%e3%81%a7%e4%bd%bf%e3%81%88%e3%82%8b%e3%82%b9%e3%83%bc%e3%83%9a%e3%83%bc%e3%82%b9%ef%bc%88%e7%a9%ba%e7%99%bd%ef%bc%89/feed/ 0 wp_get_archives を特定のカテゴリ対応にするプラグイン http://mellchile.com/2011/06/30/wp_get_archives-%e3%82%92%e7%89%b9%e5%ae%9a%e3%81%ae%e3%82%ab%e3%83%86%e3%82%b4%e3%83%aa%e5%af%be%e5%bf%9c%e3%81%ab%e3%81%99%e3%82%8b%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3/ http://mellchile.com/2011/06/30/wp_get_archives-%e3%82%92%e7%89%b9%e5%ae%9a%e3%81%ae%e3%82%ab%e3%83%86%e3%82%b4%e3%83%aa%e5%af%be%e5%bf%9c%e3%81%ab%e3%81%99%e3%82%8b%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3/#comments Wed, 29 Jun 2011 22:09:26 +0000 mellchile http://mellchile.com/?p=825 続きを読む･･･]]> テンプレートタグwp_get_archivesにはカテゴリを指定する引数がない。

そこで導入したのが、Archives for a category

このプラグインを使用すると、カテゴリーIDを指定することができる。

<ul>
<?php wp_get_archives('type=postbypost&limit=10&cat=1'); ?>
</ul>


上記の例だと、「カテゴリーID１の記事タイトルを新着10件表示」と言うことになる。

]]> http://mellchile.com/2011/06/30/wp_get_archives-%e3%82%92%e7%89%b9%e5%ae%9a%e3%81%ae%e3%82%ab%e3%83%86%e3%82%b4%e3%83%aa%e5%af%be%e5%bf%9c%e3%81%ab%e3%81%99%e3%82%8b%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3/feed/ 0 簡単にリンク集を作成するプラグイン http://mellchile.com/2011/06/28/%e7%b0%a1%e5%8d%98%e3%81%ab%e3%83%aa%e3%83%b3%e3%82%af%e9%9b%86%e3%82%92%e4%bd%9c%e6%88%90%e3%81%99%e3%82%8b%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3/ http://mellchile.com/2011/06/28/%e7%b0%a1%e5%8d%98%e3%81%ab%e3%83%aa%e3%83%b3%e3%82%af%e9%9b%86%e3%82%92%e4%bd%9c%e6%88%90%e3%81%99%e3%82%8b%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3/#comments Tue, 28 Jun 2011 07:39:04 +0000 mellchile http://mellchile.com/?p=820 続きを読む･･･]]> サイドバーではなく、固定ページにリンク集を作成するプラグインを
別のサイトで使用したので、忘れないうちにメモ･･･！

プラグイン名：WP Render Blogroll Links

投稿ページや固定ページにショートコードを入力するだけで簡単にリンクを表示させられる。

しかも、特定のカテゴリーだけとか、特定のカテゴリーを除くとか、
ショートコードにパレメーターを付けることで、表示のカスタマイズが可能！

驚くほど簡単でした。メモする必要もないかな･･･と思ったほど(^_^;)
だけど、やっぱりφ(..)メモメモ

プラグインをインストール、有効化した後、

ページに

ブログロール

とショートコードを記載するだけ。

すると、全てのリンクが表示される。
どう？簡単？

ショートコードに付けられるパラメーターの詳細は、こちらのページを見ればよく解ります。

よく使うパラメーターを抜粋してみます。


カテゴリー名は日本語でもOK

 


カテゴリーIDの５だけを表示する

 

ブログロール


カテゴリーIDの５だけ表示しない

 


カテゴリーIDの5と6を表示する

 


タイトルとして表示されるカテゴリー名を非表示にする

 

ブログロール


リンクの後ろに続けて説明文を表示させる

 

ブログロール


リンクの下に説明文を表示させる

 

などなど････。

 

]]> http://mellchile.com/2011/06/28/%e7%b0%a1%e5%8d%98%e3%81%ab%e3%83%aa%e3%83%b3%e3%82%af%e9%9b%86%e3%82%92%e4%bd%9c%e6%88%90%e3%81%99%e3%82%8b%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3/feed/ 0