2015-02-02

WordPress　投稿ページ　画像の文字回り込みを解除する

その画像の下に文字を入れたいのに、画像の右に文字が配置される場合。
投稿ページの画像タグの後に、下記入れる

<div style="clear:both;"></div>

2015-01-24

コンタクトフォーム7 tableタグのレスポンシブ化

<table class="form">
<tbody>
<tr>
<th>お問い合わせ項目<span class="required">＊</span></th>
<td> [select* your-menu "ご意見・ご要望・ご質問" "サポートについて"] </td>
</tr>
<tr>
<th>お名前 <span class="required">＊</span></th>
<td> [text* your-name] </td>
</tr>
<tr>
<th>メールアドレス<span class="required">＊</span></th>
<td>[email* your-email] </td>
</tr>
<tr>
<th>郵便番号</th>
<td>[text your-postalcode]</td>
</tr>
<tr>
<th>ご住所</th>
<td> [text your-address ]</td>
</tr>
<tr>
<th>電話番号(半角)</th>
<td> [tel your-tel]</td>
</tr>
<tr>
<th>お問い合わせ内容<span class="required">＊</span></th>
<td> [textarea* your-message] </td>
</tr>
</tbody>
</table>

PC表示
f:id:okayu12:20150124133559p:plain

tbody{
max-width:80%;
height:auto;
background-color: #f1f2f3;
margin:0 auto;
border:1px solid #CCCCCC;

}

tbody th{
width:30%;
background-color:#888;
border:1px solid #CCCCCC;
}


tbody th, td{
padding:10px 0px; 
border:1px solid #CCCCCC;
vertical-align: middle; 
font-weight: normal; 
font-size: 100%;
text-align: left; 
}



 /* テキストエリアの設定 */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,select{
width: 100%;
background-color: #fff;
color: #000;
padding:10px 0 10px 10px;
margin:10px 0;
}


input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus,select:focus{
background-color: #fff;
}

スマートフォン表示
f:id:okayu12:20150124133629p:plain

trに　display: block;　list-style: none;（ブロックレベル要素にする）
th, tdに　display: list-item;（li要素のようなリスト項目にする）

/*max-width: 480px*/
@media (max-width: 480px) {

.form{
max-width:100%;
}

tbody tr{
width:100%;
display: block;
list-style: none;
}

tbody th, td{
width:100%;
display: list-item;
padding:0px 0px; 
border:none;
}

 /* テキストエリアの設定 */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,select{
width:90%;
padding:10px 0px 0px 0px;
margin:10px 0;
}

}

2015-01-21

擬似クラス"before""after"

文章の先頭、見出し部分にiconとして画像を表示したい！という場合に利用出来る。
指定した要素の「前”before”」か「後”after”」に画像を挿入することが出来る。
画像の位置をテキストを合わせる為に、positionを指定する。

wpの場合

ul li:before{
content: url(ファイルの URL);
margin: 5px;
position: relative;
top:3px;
}

/*max-width: 480px*/の場合
.ul li aにdisplay: bloc;だとずれるので、float:left;指定する。

ul li{
border-bottom: 1px solid #888;
overflow:hidden;
}

ul li a{
padding:20px 0;
text-decoration: none;
display: block;
float:left;
width:90%;
}

ul li:before{
float:left;
top:16px;
margin: 6px;
}

2013-11-19

ファビコン指定

下記両方指定する。
IE用（元々ファビコンはIEが独自に実装していたもの）

<link rel="shortcut icon" href="img/favicon.ico" type="image/vnd.microsoft.icon" />

他のウェブブラウザ用（GIFやPNG画像も使える）

<link rel="icon" href="img/favicon.ico" type="image/vnd.microsoft.icon">

画像のMIMEタイプを指定する

type="image/vnd.microsoft.icon" 　ICO形式の画像を使用する場合
type="image/gif"　　　　　　　　　GIF形式の画像を使用する場合
type="image/png"　　　　　　　　　PNG形式の画像を使用する場合

MIMEタイプ：WebサーバとWebブラウザの間で、ファイルと拡張子を関連付けをしており、そのファイルの種類を判別する。

2013-09-07

FlexSlider（レスポンシブ対応）

FlexSlider - The Best Responsive jQuery Sliderからダウンロードする。

head内に下記記述する。

<link rel="stylesheet" href="flexslider.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="jquery.flexslider-min.js"></script>

head要素にスライダーを動かすスクリプトを追加する。（どっちがいいのかよくわからない）

<script type="text/javascript">
    $(window).load(function() {
	$('.flexslider').flexslider();
　　　　animation: "fade",　　　//オプション
	});
</script>

<script type="text/javascript">
    $(function(){
      SyntaxHighlighter.all();
    });
    $(window).load(function(){
      $('.flexslider').flexslider({
        animation: "fade",　　　//オプション
        start: function(slider){
          $('body').removeClass('loading');
        }
      });
    });
  </script>

body要素の中にスライダーを設置する。

<div class="flexslider">
    <ul class="slides">
        <li><img src="slider1.jpg" /></li>
        <li><img src="slider2.jpg" /></li>
        <li><img src="slider3.jpg" /></li>
        <li><img src="slider4.jpg" /></li>
    </ul>
</div>

オプション例

<script type="text/javascript">
 $(window).load(function() {
    $('.flexslider').flexslider({
        animation: "slide",　//"fade"（デフォルト）か"slide"を選択
        slideDirection: "horizontal",　//"horizontal"（デフォルト）で横移動、"vertical"で縦移動
        slideshowSpeed: 5000,　//スライドショーの間隔のスピード　 数値が低いほど早く、高いほど遅くなる
        animationDuration: 500,　//アニメーションのスピード
        directionNav: true,　//true（デフォルト）で両サイドの前へ、次へを表示　falseは非表示
        controlNav: true,　//下にあるナビゲーション falseにすると非表示　デフォルトはtrue
        pausePlay: true,　//trueで停止ボタンを表示　デフォルトはfalse
        animationLoop: true,　//true（デフォルト）の場合はループをしてfalseの場合はループ無し
    });
  });
</script>