ラジオボタンをカスタマイズの例

.ragio_custom input{
    display: none;
}
.ragio_custom label{
    display: inline-block;
    position: relative;
    cursor: pointer;
    margin-left: 20px;
    padding: 10px 20px;
    border-radius: 2px;
    color: #3e4956;
    font-size: 14px;
    text-align: center;
    line-height: 1;
}
.ragio_custom label:before{
    position: absolute;
    content: "";
    top: 50%;
    left: -10px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    background: #e2e2e2;
    border:1px solid #999;
    border-radius: 50%;
}
.ragio_custom input[type="radio"]:checked + label:after {
    position: absolute;
    content: "";
    top: 50%;
    left: -4px;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-radius: 50%;
    background: #e82c83;
}
<div class="ragio_custom">
	<input type="radio" name="radio1" id="select1" value="1" checked=""><label for="select1"><img src="images/plan/1.jpg" class="radio_img" alt="選択肢1"/></label>
	<input type="radio" name="radio1" id="select2" value="2"><label for="select2"><img src="images/plan/2.jpg" class="radio_img" alt="選択肢2"/></label>
	<input type="radio" name="radio1" id="select3" value="3"><label for="select3"><img src="images/plan/3.jpg" class="radio_img"  alt="選択肢3"/></label>
	<input type="radio" name="radio1" id="select4" value="4"><label for="select4"><img src="images/plan/4.jpg" class="radio_img" alt="選択肢4"/></label>
</div> 

ラジオボタン 

サイトを印刷すると、リンク先がずらずら出てくるずら。 原因はTwitterBootstrapでした。

サイトを印刷すると、リンク先がずらずら出てくるずら。 原因はTwitterBootstrapでした。

気づいていたんだけど、放置してた。

放置したら忘れてしまって、今日お客様に

お客様「なんかホームページ印刷したらいっぱい字が出てるんです~。」

と言われて「あ。」となった。

Bootstrapに違いないと思っていたやつだ。。。急いで調べよ。。。とググったら回答を発見した!

http://www.magical-remix.co.jp/magicalog/archives/2127

@media print {
/* 省略 */
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
/* 省略 */
}

Bootstrapのこの部分がイケナイらしい。上記のHPを参考にして
わたしはとりあえずカスタムcssに打消しCSSを記載してアップ。

@media print {
a[href]:after {
content: “”!important;
}
abbr[title]:after {
content: “”!important;
}
}

ずらずらと出ていたリンク先テキストは消えたので、お客様と電話しながら解決した。

文字化けで〼がでるのもそうだし、Bootstrapはこんな感じのひっかけ?があるので油断できない。

しかしこのずらずら文字を「便利」と言ってそのままでいいとおっしゃるお客様のいるので、さらに安心できない。

2015年はいい年にしたい私でした。

wordpress 自作のテーマを作る 2014/09/ その3

wordpress 自作のテーマを作る 2014/09/ その3

また続きです。

メニューの内容ですが

Menu
Info
はカスタム投稿に、

Special
Access
AboutUs
は固定ページにして

デフォルトの投稿はBlogで使うようにしたいと思います。

とりあえず、さっき作ったindex.html をフォルダ内の同じ場所にコピーしてindex.php にリネームします。

index.php と style.css からテーマ作成が始まります。

テーマが出てきたよ

まずはローカル環境でいろいろやりますので、MAMP や Xampp 等のローカル環境にwordpressをインストール。
その wp-content/themes/の中にさっき作った mysweetcaffe フォオルだごと突っ込む。
そしたら、こんな感じで出てきます。
screenshot.jpg という名前でイメージ画像を wp-content/themes/ の中に入れた mysweetcaffe の中直下に入れると、テーマの画面でイメージ図が出るようになります。

有効化する前に、パスをwordpress 用に変更します。
index.php を秀丸とかで開いて置き換えなんかで直してしまいます。

css 内のパスも変更。

で、いったんこんなindex.php nisita.

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>[サイト名] のウェブサイト</title>

    <!-- Bootstrap core CSS -->
	<link href="<?php echo get_template_directory_uri(); ?>/css/bootstrap.min.css" rel="stylesheet" media="screen">
 	<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

     <!-- thema CSS -->
    <link href="<?php echo get_stylesheet_uri(); ?>" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script>
$(function(){
   // #で始まるアンカーをクリックした場合に処理
   $('a[href^=#]').click(function() {
      // スクロールの速度
      var speed = 400; // ミリ秒
      // アンカーの値取得
      var href= $(this).attr("href");
      // 移動先を取得
      var target = $(href == "#" || href == "" ? 'html' : href);
      // 移動先を数値で取得
      var position = target.offset().top;
      // スムーススクロール
      $('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
   });
});
</script>
  </head>

  <body>

	<div id="wrapper">
	<!-- キーヴィジュアル -->
 		<div class="key-visual-wrap">
		<div class="key-visual"><img src="<?php echo get_template_directory_uri(); ?>/images/main-image.png" width="1223" height="492" alt=""/>
    <div class="logo-wrap"></div>
    <div class="map-wrap"></div></div>
		</div>
	<!-- //キーヴィジュアル -->

<a id="pagetop"></a>

	<!-- menu -->
 		<div class="menu-wrap">
		<div class="menu"><!--<p>AIUEO</p><p>AIUEO</p><p>AIUEO</p><p>AIUEO</p><p>AIUEO</p>-->

<!---->
<nav class="navbar navbar-default menu navbar-static-top" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">HOME</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li style="font-size:22px;"><a href="#">Info</a></li>
        <li  style="font-size:22px;"><a href="#">Menu</a></li>
        <li  style="font-size:22px;"><a href="#">Special</a></li>
        <li  style="font-size:22px;"><a href="#">Access</a></li>
        <li  style="font-size:22px;"><a href="#">AboutUs</a></li>
<!--        <li class="dropdown" style="font-size:20px;">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu" style="font-size:20px;">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>-->
      </ul>
<!--      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>-->
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><img src="<?php echo get_template_directory_uri(); ?>/images/b.png" width="31" height="30" alt=""/></a></li>
        <li><a href="#"><img src="<?php echo get_template_directory_uri(); ?>/images/f.png" width="31" height="30" alt=""/></a></li>
        <li><a href="#"><img src="<?php echo get_template_directory_uri(); ?>/images/t.png" width="31" height="30" alt=""/></a></li>
<!--        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>-->
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

    </div>
		</div>
	<!-- //menu -->

<!-- ----------この当たりまでheader.phpにしようかな-->

<div class="contents-wrap">
    <div class="container">

      <!--<div class="starter-template">
        <h1>Bootstrap starter template</h1>
        <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
      </div>-->

      <div class="special_box clearfix">
      <div class="special_contents">
      				<div class="special_item"><img src="<?php echo get_template_directory_uri(); ?>/images/item1.png"></div>
            <div class="special_item"><img src="<?php echo get_template_directory_uri(); ?>/images/item2.png"></div>
            <div class="special_item"><img src="<?php echo get_template_directory_uri(); ?>/images/item3.png"></div>
            <div class="special_item"><img src="<?php echo get_template_directory_uri(); ?>/images/item4.png"></div>
       </div>
      </div>

<!-- --------------------- -->
   <div class="top_item_box clearfix">
   <div class="banner_item">
      <a href="#">
        <img src="<?php echo get_template_directory_uri(); ?>/images/kashikiri.png" alt="スペシャルバナー1">
		</a></div>
	<div class="banner_item">
      <a href="#">
        <img src="<?php echo get_template_directory_uri(); ?>/images/kashikiri.png" alt="スペシャルバナー1">
      </a>
    </div>
    </div>

 <!-- --------------------- -->

<div class="top_banner_box clearfix">
   <div class="banner_item">
      <a href="#">
        <img src="<?php echo get_template_directory_uri(); ?>/images/bosyu.png" alt="スペシャルバナー1">
		</a></div>
	<div class="banner_item">
      <a href="#">
        <img src="<?php echo get_template_directory_uri(); ?>/images/blog.png" alt="スペシャルバナー1">
      </a>
    </div>
    </div>
 <!-- --------------------- -->

 <div class="top_info_box clearfix">
   <div class="info_item">
   <h3>みだしみだしみだし</h3>
      <a href="#">
        <img src="<?php echo get_template_directory_uri(); ?>/images/info_sample.png" alt="インフォ" class="info_item_mg">
		<p>あういおいうえおいおえお</p></a>
    <p class="readmore"><img src="<?php echo get_template_directory_uri(); ?>/images/readmore.png" width="108" height="28" alt=""/></p>
    </div>
   <div class="info_item">
   <h3>みだしみだしみだし</h3>
      <a href="#">
        <img src="images/info_sample.png" alt="インフォ" class="info_item_mg">
		<p>あういおいうえおいおえお</p></a>
    <p class="readmore"><img src="<?php echo get_template_directory_uri(); ?>/images/readmore.png" width="108" height="28" alt=""/></p>
    </div>
    </div>

    </div><!-- /.container -->
    <div class="container pagetop"><a href="#pagetop"><img src="<?php echo get_template_directory_uri(); ?>/images/pagetop.png" width="334" height="103" alt=""/></a></div>
 </div><!-- /.containt-wrap -->

 <!-- ----------このへんからfooter.phpにしようかな-->
  				<div id="footer" class="footer_bg">
          <div class="container">
				<p class="copy">
					&copy; 2014 MySweetCaffe. All rights reserved.
					Theme Design by <a href="#">okw</a>
					from <a href="#">MySweetCaffe</a>
				</p>
       </div>	

			</div><!-- /#footer -->

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->

    <script src="js/bootstrap.min.js"></script>
	</div> 

  </body>
</html>

トップページは
 までをheader.php として別のファイルにします。
 から下はfooter.php としてコレも別ファイルにします。

 から

 までがindex.php に残った。
なので、header.php と footer.php をindex.php内に読み込む訳です。

<?php get_header(); ?>
<div class="contents-wrap"> から  </div><!-- /.containt-wrap -->
<?php get_footer(); ?>

トップページ以外のページはとりあえずサイドバーのある1パターンとして、

から

をメインの部分にして

サイドバーです。

の部分を にするのです。

いいと思いまーす。(心の声)

とりあえずindex.php header.php footer.php sidebar.php style.css ができました。

それで次はWPっぽい機能を盛り込んで行こうと思います。

wordpress 自作のテーマを作る 2014/09 その2

wordpress 自作のテーマを作る 2014/09 その2

さっきの続きです。
ページを一枚作ると書いて、思いましたが表紙とそれ以外の2ページをコーディングします。
style.css

@charset "utf-8";
/*
Theme Name: MySweetCaffe
Description: にゃっとこにゃっとこwordpressテーマ
Version: 1.0
Author: machi
Author URI: http://happy.automaticfailys.com/
*/


/*-----*-----**-----*-----**-----*-----*eeditor_cssと揃えます ▽ *-----*-----**-----*-----**/

h2{
line-height: 140%; /*bootstrap.css のほうで指定されてる line-height: 40px; をリセット*/
position: relative;
border-color: #f6bfbc;
border-style: solid;
border-width: 5px 5px 5px 0;
border-left:1px solid #f6bfbc;
background: #fff;
margin: 30px 0 15px -1px;
padding: 5px 15px;
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,.3);
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.3);
box-shadow: 1px 1px 1px rgba(0,0,0,.3);
font-size: 14px;
}

h2:after
{
-webkit-box-shadow: 0 15px 10px rgba(0,0,0, .7);
-moz-box-shadow: 0 15px 10px rgba(0, 0, 0, .7);
box-shadow: 0 15px 10px rgba(0, 0, 0, .7);
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
-ms-transform: rotate(2deg);
transform: rotate(2deg);
content: "";
position: absolute;
z-index: -1;
bottom: 15px;
right: 15px;
width: 70%;
height: 10px;
background: rgba(0, 0, 0, .7);
}

h3{
position: relative;
border-color: #dbd0e6;
border-style: solid;
border-width: 5px 5px 5px 0;
border-left:1px solid #dbd0e6;
background: #fff;
margin: 0 0 15px -1px;
padding: 5px 15px;
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,.3);
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.3);
box-shadow: 1px 1px 1px rgba(0,0,0,.3);
font-size: 14px;
}

h3:after
{
content: "";
position: absolute;
z-index: -1;
bottom: 15px;
right: 15px;
width: 70%;
height: 10px;
background: rgba(0, 0, 0, .7);
-webkit-box-shadow: 0 15px 10px rgba(0,0,0, .7);
-moz-box-shadow: 0 15px 10px rgba(0, 0, 0, .7);
box-shadow: 0 15px 10px rgba(0, 0, 0, .7);
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
-ms-transform: rotate(2deg);
transform: rotate(2deg);
}

h4{
position: relative;
border-color: #c1e4e9;
border-style: solid;
border-width: 5px 5px 5px 0;
border-left:1px solid #c1e4e9;
background: #fff;
margin: 0 0 15px -1px;
padding: 5px 15px;
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,.3);
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.3);
box-shadow: 1px 1px 1px rgba(0,0,0,.3);
font-size: 14px;
}

h4:after
{
content: "";
position: absolute;
z-index: -1;
bottom: 15px;
right: 15px;
width: 70%;
height: 10px;
background: rgba(0, 0, 0, .7);
-webkit-box-shadow: 0 15px 10px rgba(0,0,0, .7);
-moz-box-shadow: 0 15px 10px rgba(0, 0, 0, .7);
box-shadow: 0 15px 10px rgba(0, 0, 0, .7);
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
-ms-transform: rotate(2deg);
transform: rotate(2deg);
}

h5{
position:relative;
padding:9px;
padding-left:15px;
font-weight: bold;
font-size: 18px;
background-color: #20b2aa;
color: #fff;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
font-size: 14px;
margin-left:20px;
width: 90%;
}

h5:before{
content:'';
height:25px;
width:2px;
display:block;
position:absolute;
top:5px;
left:4px;
background-color:#fff;
border-left: 4px solid #fff;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
}

h6{
position:relative;
padding:9px;
padding-left:15px;
font-weight: bold;
font-size: 18px;
background-color: #f08080;
color: #fff;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
font-size: 14px;
margin-left:20px;
width: 90%;
}

h6:before{
content:'';
height:25px;
width:2px;
display:block;
position:absolute;
top:5px;
left:4px;
background-color:#fff;
border-left: 4px solid #fff;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
}

table {
width: 100%;
margin:20px 0px 50px;
border-top: 1px solid #CCC;
border-left: 1px solid #CCC;
border-spacing:0px;
}
table tr th,table tr td { /*「,(カンマ)」で区切って複数のセレクタを指定しています*/
font-size: 12px;
border-bottom: 1px solid #CCC;
border-right: 1px solid #CCC;
padding: 7px;
}
table tr th {
background: #f5f5dc;
}

ol{
counter-reset:li;
list-style:none;
margin:0;
padding:0;
margin-left: 20px;
}
ol li { line-height: 2; }
ol li:before {
counter-increment: li;
content: counter(li);
/*}
.maru li:before {*/
float: left;
background: #EBF5C7;
width: 1.8em;
height: 1.8em;
border-radius: 50%;
color: #98CB54;
text-align: center;
line-height: 1.8;
}

/*WordPressには自動整形機能 用 ネイティブCSS */
p {
display: block;
margin: 1em 0;
}
strong { font-weight: bold; }
em { font-style: italic; }
blockquote {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 40px;
-webkit-margin-end: 40px;
}
.aligncenter {
display: block;
margin: 0 auto;
}
.alignright { float: right; }
.alignleft { float: left; }

img[class*="wp-image-"],
img[class*="attachment-"] {
max-width: 100%;
height: auto;
}

.clearfix {
overflow: hidden;
zoom: 1;
}
.clearfix:after {
content: ""
display: block;
clear: both;
}
/*-----*-----**-----*-----**-----*-----*eeditor_cssと揃えます△ *-----*-----**-----*-----**/


/*全体*/

body {
  font-family: 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif;
}
pre {
  font-family: 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif;
}
input,
button,
select,
textarea {
  font-family: 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif;
}
.navbar-search .search-query {
  font-family: 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif;
}




/**/
html, body {
height: 100%;
margin: 0;
padding: 0;
}

div#wrapper{
	min-height: 100%;
	height: auto !important;
	width: 100%;
    font-weight:normal;
background: -moz-linear-gradient(top,  rgba(215,225,208,0.4) 0%, rgba(129,160,130,0.4) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(215,225,208,0.4)), color-stop(100%,rgba(129,160,130,0.4))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(215,225,208,0.4) 0%,rgba(129,160,130,0.4) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(215,225,208,0.4) 0%,rgba(129,160,130,0.4) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(215,225,208,0.4) 0%,rgba(129,160,130,0.4) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(215,225,208,0.4) 0%,rgba(129,160,130,0.4) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66d7e1d0', endColorstr='#6681a082',GradientType=0 ); /* IE6-9 */
}
.contents-wrap{
	max-width:1223px;
	margin:0 auto;
	background-color:#E1D8C5;
}

.key-visual-wrap{
	width:100%;
	background-image:url(images/bg-wood.png);
	margin:0 auto;

}
.key-visual{
	max-width:1223px;
	margin:0 auto;
	z-index: 1;
 position: relative;
}
.logo-wrap {
z-index: 2;
 position: absolute;
 background-image:url(images/logo-L.png);
 background-repeat:no-repeat;
 top: 20px;
 right: 20px;
 min-height:100px;
 min-width:350px;
}
.map-wrap {
z-index: 3;
 position: absolute;
 background-image:url(images/map-mini.png);
 background-repeat:no-repeat;
 bottom: 10px;
 right: 10px;
 min-height:250px;
 min-width:400px;
}

.menu-wrap  {

	width:100%;
	background: rgb(239,234,211); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(239,234,211,1) 0%, rgba(215,201,166,1) 40%, rgba(191,168,115,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(239,234,211,1)), color-stop(40%,rgba(215,201,166,1)), color-stop(100%,rgba(191,168,115,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(239,234,211,1) 0%,rgba(215,201,166,1) 40%,rgba(191,168,115,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(239,234,211,1) 0%,rgba(215,201,166,1) 40%,rgba(191,168,115,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(239,234,211,1) 0%,rgba(215,201,166,1) 40%,rgba(191,168,115,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(239,234,211,1) 0%,rgba(215,201,166,1) 40%,rgba(191,168,115,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efead3', endColorstr='#bfa873',GradientType=0 ); /* IE6-9 */
}
.menu{
	max-width:1223px;
	margin:0 auto;
	background-image:url(images/bg.png);
 /* height:62px;*/
	text-align:left ;
	border:none;
	color:#fff;
}
.headerNavBtn{
    text-align:center;
    height:3em;
    line-height:3em;
    color:#fff;
    font-size:20px;
}
.headerNavBtn:hover{
    color:#934E8A;
}

.navbar-default .navbar-brand{color:#FFFFFF}
.navbar-default .navbar-brand:hover,.navbar-default .navbar-brand:focus{
	color: #934E8A;}

.navbar-default .navbar-brand:hover,.navbar-default .navbar-brand:focus{color:#ffffff;background-color:transparent; }
.navbar-default .navbar-text{color:#ffffff}.navbar-default .navbar-nav>li>a{color:#ffffff}
.navbar-default .navbar-nav>li>a:hover,.navbar-default .navbar-nav>li>a:focus{color:#934E8A;background-color:transparent}

.special_box {
	background-image:	url(images/bg-special.png);
	background-repeat:no-repeat;
	min-height:360px;
	background-position:bottom;
	text-align:right;
}
.special_contents{
		margin-top:150px;
	}
.special_item {
	float:right;
	border:3px solid #DBDBEA;
	margin-left:40px;
}
.special_item img {
    max-width: 100% !important;
  }
.top_item_box{
	margin-top:40px;
}
.top_banner_box{
	margin-top:20px;
}
.banner_item{
	width: 50%;
	padding:1%;
	float: left;
}
.banner_item img {
    max-width: 100% !important;
  }
.top_info_box{
	margin-top:30px;
}
.info_item{
		width: 50%;
	padding:1%;
	float: left;
	position: relative;
}
.info_item_mg {
	border:3px solid #DBDBEA;
	float: left;
	margin-right: 2em;
  margin-bottom: 1em;
	 max-width: 100% !important;
}
.top_info_box h3{
	-moz-border-bottom-colors: none;
	-moz-border-left-colors: none;
	-moz-border-right-colors: none;
	-moz-border-top-colors: none;
	background-color: #E1D8C5;
	border-color: #C09179;
	border-image: none;
	border-radius: 3px 3px 3px 3px;
	border-style: solid;
	border-width: 0 0 0 6px;
	font-size: 116%;
	font-weight: bold;
	margin: 0 0 10px;
	padding: 15px;
	color:#C09179;
}
.top_info_box a{
	color:#808080;}
.readmore{
	text-align:right;
	position: absolute;
 bottom: 10px;
 right:10px;
 border:none;
}
#footer {
  background-image:url(images/bg-footer.png);
	padding:10px 0;
	color:#fff;
}
.pagetop{
	text-align:right;
}

index.html
トップページ

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>[サイト名] のウェブサイト</title>

    <!-- Bootstrap core CSS -->
	<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
 	<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

     <!-- thema CSS -->
    <link href="style.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script>
$(function(){
   // #で始まるアンカーをクリックした場合に処理
   $('a[href^=#]').click(function() {
      // スクロールの速度
      var speed = 400; // ミリ秒
      // アンカーの値取得
      var href= $(this).attr("href");
      // 移動先を取得
      var target = $(href == "#" || href == "" ? 'html' : href);
      // 移動先を数値で取得
      var position = target.offset().top;
      // スムーススクロール
      $('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
   });
});
</script>
  </head>

  <body>

	<div id="wrapper">
	<!-- キーヴィジュアル -->
 		<div class="key-visual-wrap">
		<div class="key-visual"><img src="images/main-image.png" width="1223" height="492" alt=""/>
    <div class="logo-wrap"></div>
    <div class="map-wrap"></div></div>
		</div>
	<!-- //キーヴィジュアル -->

<a id="pagetop"></a>

	<!-- menu -->
 		<div class="menu-wrap">
		<div class="menu"><!--<p>AIUEO</p><p>AIUEO</p><p>AIUEO</p><p>AIUEO</p><p>AIUEO</p>-->

<!---->
<nav class="navbar navbar-default menu navbar-static-top" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">HOME</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li style="font-size:22px;"><a href="#">Info</a></li>
        <li  style="font-size:22px;"><a href="#">Menu</a></li>
        <li  style="font-size:22px;"><a href="#">Special</a></li>
        <li  style="font-size:22px;"><a href="#">Access</a></li>
        <li  style="font-size:22px;"><a href="#">AboutUs</a></li>
<!--        <li class="dropdown" style="font-size:20px;">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu" style="font-size:20px;">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>-->
      </ul>
<!--      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>-->
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><img src="images/b.png" width="31" height="30" alt=""/></a></li>
        <li><a href="#"><img src="images/f.png" width="31" height="30" alt=""/></a></li>
        <li><a href="#"><img src="images/t.png" width="31" height="30" alt=""/></a></li>
<!--        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>-->
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

    </div>
		</div>
	<!-- //menu -->

<div class="contents-wrap">
    <div class="container">

      <!--<div class="starter-template">
        <h1>Bootstrap starter template</h1>
        <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
      </div>-->

      <div class="special_box clearfix">
      <div class="special_contents">
      				<div class="special_item"><img src="images/item1.png"></div>
            <div class="special_item"><img src="images/item2.png"></div>
            <div class="special_item"><img src="images/item3.png"></div>
            <div class="special_item"><img src="images/item4.png"></div>
       </div>
      </div>

<!-- ----------------------->
   <div class="top_item_box clearfix">
   <div class="banner_item">
      <a href="#">
        <img src="images/kashikiri.png" alt="スペシャルバナー1">
		</a></div>
	<div class="banner_item">
      <a href="#">
        <img src="images/kashikiri.png" alt="スペシャルバナー1">
      </a>
    </div>
    </div>

 <!-- ----------------------->

<div class="top_banner_box clearfix">
   <div class="banner_item">
      <a href="#">
        <img src="images/bosyu.png" alt="スペシャルバナー1">
		</a></div>
	<div class="banner_item">
      <a href="#">
        <img src="images/blog.png" alt="スペシャルバナー1">
      </a>
    </div>
    </div>
 <!-- ----------------------->

 <div class="top_info_box clearfix">
   <div class="info_item">
   <h3>みだしみだしみだし</h3>
      <a href="#">
        <img src="images/info_sample.png" alt="インフォ" class="info_item_mg">
		<p>あういおいうえおいおえお</p></a>
    <p class="readmore"><img src="images/readmore.png" width="108" height="28" alt=""/></p>
    </div>
   <div class="info_item">
   <h3>みだしみだしみだし</h3>
      <a href="#">
        <img src="images/info_sample.png" alt="インフォ" class="info_item_mg">
		<p>あういおいうえおいおえお</p></a>
    <p class="readmore"><img src="images/readmore.png" width="108" height="28" alt=""/></p>
    </div>
    </div>

    </div><!-- /.container -->
    <div class="container pagetop"><a href="#pagetop"><img src="images/pagetop.png" width="334" height="103" alt=""/></a></div>
 </div><!-- /.containt-wrap-->

  				<div id="footer" class="footer_bg">
          <div class="container">
				<p class="copy">
					&copy; 2014 MySweetCaffe. All rights reserved.
					Theme Design by <a href="#">okw</a>
					from <a href="#">MySweetCaffe</a>
				</p>
       </div>	

			</div><!-- /#footer -->

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->

    <script src="js/bootstrap.min.js"></script>
	</div> 

  </body>
</html>

サブページ
sub.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>[サイト名] のウェブサイト</title>

    <!-- Bootstrap core CSS -->
	<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
 	<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

     <!-- thema CSS -->
    <link href="style.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script>
$(function(){
   // #で始まるアンカーをクリックした場合に処理
   $('a[href^=#]').click(function() {
      // スクロールの速度
      var speed = 400; // ミリ秒
      // アンカーの値取得
      var href= $(this).attr("href");
      // 移動先を取得
      var target = $(href == "#" || href == "" ? 'html' : href);
      // 移動先を数値で取得
      var position = target.offset().top;
      // スムーススクロール
      $('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
   });
});
</script>
  </head>

  <body>

	<div id="wrapper">
	<!-- キーヴィジュアル -->
 		<div class="key-visual-wrap">
		<div class="key-visual"><img src="images/main-image2.jpg" width="1223" height="278" alt=""/>
    <div class="logo-wrap"></div>
    <!--<div class="map-wrap"></div>--></div>
		</div>
	<!-- //キーヴィジュアル -->

<a id="pagetop"></a>

	<!-- menu -->
 		<div class="menu-wrap">
		<div class="menu"><!--<p>AIUEO</p><p>AIUEO</p><p>AIUEO</p><p>AIUEO</p><p>AIUEO</p>-->

<!---->
<nav class="navbar navbar-default menu navbar-static-top" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">HOME</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li style="font-size:22px;"><a href="#">Info</a></li>
        <li  style="font-size:22px;"><a href="#">Menu</a></li>
        <li  style="font-size:22px;"><a href="#">Special</a></li>
        <li  style="font-size:22px;"><a href="#">Access</a></li>
        <li  style="font-size:22px;"><a href="#">AboutUs</a></li>
<!--        <li class="dropdown" style="font-size:20px;">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu" style="font-size:20px;">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>-->
      </ul>
<!--      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>-->
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><img src="images/b.png" width="31" height="30" alt=""/></a></li>
        <li><a href="#"><img src="images/f.png" width="31" height="30" alt=""/></a></li>
        <li><a href="#"><img src="images/t.png" width="31" height="30" alt=""/></a></li>
<!--        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>-->
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

    </div>
		</div>
	<!-- //menu -->

<div class="contents-wrap">
    <div class="container">

      <div class="row"><!-- maincontents--->
          <div class="col-md-9">
            <h1>h1 見出しの文字は、こんな感じです。</h1>
  <h1>h1 見出しの文字は、こんな感じです。見出しの文字は、こんな感じです。見出しの文字は、こんな感じです。</h1>
  <p>要件はGFDLタイトルに著作し事項ですで際、考慮するれフリーに.権可能の著作ペディア・プロジェクトがしれるてはするなく、目的の文献は、説明定める文を参考ありことについて改変必要ますなてなりでん。しかし、ドメインの著作法は、対象の保護さ編集困難ます文章に創作さ、その記事で生じるて文が利用することを決議するれです。またはが、尊重著者で活用しればい文献をそのままし作ることも、該当ませませ、一部によりも検証会の認定についてフリー上の問題はしことに、本注意権も、法的の推奨を有して情報を関係行うますからいでませ。該当従っが、誰の考慮は強くなどするますん。</p>
  <p>しかし、お編集法と、参照するユーザの対象、ShareAlikeが明確に転載さことをさば、対象主体性の執筆が記事に編集守らことがして、著作しですライセンスが引用、著作権調査ないなとの著作に満たすものは、まずないとさてよいですます。

    しかし特には、該当人物で利用されてい裁判を仮に登場含む、百科上を除外さものにより、プロジェクトの他人について方針の執筆を強く違反疑わことをなっます。または、文を法律がする濫として、同じ文字の本文を短い著作しれてなら対象の場合を引用扱うと、SA法が要件からでき雑誌により、その作品権の必要参照の一部を区別するとあたりまとめます。そのようあっ許諾記事は、アニメが指摘厳格者の該当が独自パブリックで下げ主従に、仮にしことうも即しませある。しかし、これらに問題でできことに「作成権」の著作ない。 </p>
  <h2>h2 見出しの文字は、こんな感じです。</h2>
  <h2>h2 見出しの文字は、こんな感じです。見出しの文字は、こんな感じです。見出しの文字は、こんな感じです。</h2>

<p>要件はGFDLタイトルに著作し事項ですで際、考慮するれフリーに.権可能の著作ペディア・プロジェクトがしれるてはするなく、目的の文献は、説明定める文を参考ありことについて改変必要ますなてなりでん。しかし、ドメインの著作法は、対象の保護さ編集困難ます文章に創作さ、その記事で生じるて文が利用することを決議するれです。またはが、尊重著者で活用しればい文献をそのままし作ることも、該当ませませ、一部によりも検証会の認定についてフリー上の問題はしことに、本注意権も、法的の推奨を有して情報を関係行うますからいでませ。該当従っが、誰の考慮は強くなどするますん。</p>

   <h3>h3 見出しの文字は、こんな感じです。</h3>
  <h3>h3 要件はGFDLタイトルに著作し事項ですで際、考慮するれフリーに.権可能の著作ペディア・プロジェクトがしれるてはするなく、目的の文献は、説明定める文を参考ありことについて改変必要ますなてなりでん。</h3>

 <p>要件はGFDLタイトルに著作し事項ですで際、考慮するれフリーに.権可能の著作ペディア・プロジェクトがしれるてはするなく、目的の文献は、説明定める文を参考ありことについて改変必要ますなてなりでん。しかし、ドメインの著作法は、対象の保護さ編集困難ます文章に創作さ、その記事で生じるて文が利用することを決議するれです。またはが、尊重著者で活用しればい文献をそのままし作ることも、該当ませませ、一部によりも検証会の認定についてフリー上の問題はしことに、本注意権も、法的の推奨を有して情報を関係行うますからいでませ。該当従っが、誰の考慮は強くなどするますん。</p>

      <h4>h4 見出しの文字は、こんな感じです。</h4>
  <h4>h4 見出しの文字は、こんな感じです。見出しの文字は、こんな感じです。見出しの文字は、こんな感じです。</h4>

 <p>要件はGFDLタイトルに著作し事項ですで際、考慮するれフリーに.権可能の著作ペディア・プロジェクトがしれるてはするなく、目的の文献は、説明定める文を参考ありことについて改変必要ますなてなりでん。しかし、ドメインの著作法は、対象の保護さ編集困難ます文章に創作さ、その記事で生じるて文が利用することを決議するれです。またはが、尊重著者で活用しればい文献をそのままし作ることも、該当ませませ、一部によりも検証会の認定についてフリー上の問題はしことに、本注意権も、法的の推奨を有して情報を関係行うますからいでませ。該当従っが、誰の考慮は強くなどするますん。</p>

  <h5>h5 見出しの文字は、こんな感じです。</h5>
  <h5>h5 見出しの文字は、こんな感じです。見出しの文字は、こんな感じです。見出しの文字は、こんな感じです。</h5>

 <p>要件はGFDLタイトルに著作し事項ですで際、考慮するれフリーに.権可能の著作ペディア・プロジェクトがしれるてはするなく、目的の文献は、説明定める文を参考ありことについて改変必要ますなてなりでん。しかし、ドメインの著作法は、対象の保護さ編集困難ます文章に創作さ、その記事で生じるて文が利用することを決議するれです。またはが、尊重著者で活用しればい文献をそのままし作ることも、該当ませませ、一部によりも検証会の認定についてフリー上の問題はしことに、本注意権も、法的の推奨を有して情報を関係行うますからいでませ。該当従っが、誰の考慮は強くなどするますん。</p>

  <h6>h6 見出しの文字は、こんな感じです。</h6>
  <h6>h6 見出しの文字は、こんな感じです。見出しの文字は、こんな感じです。見出しの文字は、こんな感じです。</h6>
 <p>要件はGFDLタイトルに著作し事項ですで際、考慮するれフリーに.権可能の著作ペディア・プロジェクトがしれるてはするなく、目的の文献は、説明定める文を参考ありことについて改変必要ますなてなりでん。しかし、ドメインの著作法は、対象の保護さ編集困難ます文章に創作さ、その記事で生じるて文が利用することを決議するれです。またはが、尊重著者で活用しればい文献をそのままし作ることも、該当ませませ、一部によりも検証会の認定についてフリー上の問題はしことに、本注意権も、法的の推奨を有して情報を関係行うますからいでませ。該当従っが、誰の考慮は強くなどするますん。</p>
          </div><!-- //maincontents--->
          <!-- sidebar-->
          <div class="col-md-3">サイドバーです。</div>
        </div><!--//sidebar-->

    </div><!-- /.container -->
    <div class="container pagetop"><a href="#pagetop"><img src="images/pagetop.png" width="334" height="103" alt=""/></a></div>
 </div><!-- /.containt-wrap-->

  				<div id="footer" class="footer_bg">
          <div class="container">
				<p class="copy">
					&copy; 2014 MySweetCaffe. All rights reserved.
					Theme Design by <a href="#">okw</a>
					from <a href="#">MySweetCaffe</a>
				</p>
       </div>	

			</div><!-- /#footer -->

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->

    <script src="js/bootstrap.min.js"></script>
	</div> 

  </body>
</html>

ここまでできたら、あとの細かいところはあとから調整しながらやるとします。

wordpressのテンプレートにするためには下の絵のようにパーツに分けたいと思います。

分け方イメージ

wordpress 自作のテーマを作る 2014/09 その1

wordpress 自作のテーマを作る 2014/09 その1

今回また1からテーマを作るので、やったことがない人にもわかるように作れればと思い残します。

1、まずはページのコンテンツを決める

作るのはカフェ店舗のページです。

今回は、トップページのほかには
メニュー
お知らせ
スペシャル
アクセス
店舗の自己紹介
店長のブログ

としました。

はてなブックマークとFacebook、Twitter のSNSボタンをつけて女性向けのデザインにしようと思いました。

2、大体のコンテンツが決まったらいやっとトップページをデザインしました。
トップページデザイン
少し変えたいような気がするけどとりあえずは。

2階層目は、とりあえずメインビジュアル部分を高さを半分以下にして、他は使いまわしで行く予定です、

デザインの中のメインイメージ(鳥の写真)以外は、http://www.pakutaso.com/で借りてきました。鳥の写真はこの間夏休みに旅行先でとったカワゲラさんです。

デザインは大体こんな感じでいいかなと思ったところで、必要なパーツにスライスしていきます。
デザインの制作もスライスもわたしはAdobeのFireworksを使っています。
ばらばらとスライス

普通のHTMLページを作る

さっきバラバラにしたスライスを使ってトップページを静的HTMLでふつーに作ります。
自分のローカルのどこでもいいので専用のフォルダを作製してそこで作業しようと思います。
こんな感じで
フォルダはこんな感じで
mysweetcaffe のフォルダの中に index,html と images のフォルダを作っておきました。
css と js フォルダもどうせいるので作りました。

index.html は http://getbootstrap.com/examples/starter-template/ のスタートアップテンプレートを取り合えアズ参考にした。
Bootstrap3を使いたいので、公式http://getbootstrap.com/ で ダウンロードしてきます。バージョンはこの時は Currently v3.2.0 って書いてありました。これ。
あとは アイコンも使いたいので http://glyphicons.getbootstrap.com/ に行ってGlyphiconsのリンク文字列をコピーします。index.html にコピーした を貼り付けます。

bootstrap-3.2.0-distのフォルダの中に、は css font js のフォルダがありまので
css の中からbootstrap.min.css を mysweetcaffe の中に css フォルダを作って突っ込みます。
bootstrap.min.js のふファイルもmysweetcaffe の中に js フォルダを作って入れます。

これもindex.htmlのhead中に書いておきます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Starter Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="../css/bootstrap.min.css" rel="stylesheet" media="screen">
  <link href="../bootstrap3/css/bootstrap.min.css" rel="stylesheet" media="screen">
    
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

    <div class="container">

      <div class="starter-template">
        <h1>Bootstrap starter template</h1>
        <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
      </div>

    </div><!-- /.container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <s</script>
    <script src="js/bootstrap.min.js"></script>

  </body>
</html>

これをもとにしてDreamweaverでページを一枚作ってしまいます。

自作のwordpressのテーマの制作の際に管理画面と合わせて使うCSS

自作のwordpressのテーマの制作の際に管理画面と合わせて使うCSS

自作のwordpressのテーマの制作hの際に
eeditor_cssとフロントのCSSでおなじのを書いておく。


/*-----*-----**-----*-----**-----*-----*eeditor_cssと揃えます ▽ *-----*-----**-----*-----**/

h2 {
position: relative;
color: #efab93;
background: #ffe4e1;
line-height: 1;
margin: 30px -10px 30px -10px;
padding: 15px 5px 10px 40px;
box-shadow: 0 1px 3px #efab93;
font-size: 16px;
}
h2:after,h2:before {
content: "";
position: absolute;
top: 100%;
height: 0;
width: 0;
border: 5px solid transparent;
border-top: 5px solid #ffdab9;
font-size: 16px;
}
h2:after {
left: 0;
border-right: 5px solid #ffdab9;
}
h2:before {
right: 0;
border-left: 5px solid #ffdab9;
}
/*#f6bfbc*/
h3{
line-height: 140%; /*bootstrap.css のほうで指定されてる line-height: 40px; をリセット*/
position: relative;
border-color: #f6bfbc;
border-style: solid;
border-width: 5px 5px 5px 0;
border-left:1px solid #f6bfbc;
background: #fff;
margin: 30px 0 15px -1px;
padding: 5px 15px;
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,.3);
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.3);
box-shadow: 1px 1px 1px rgba(0,0,0,.3);
font-size: 14px;
}

h3:after
{
-webkit-box-shadow: 0 15px 10px rgba(0,0,0, .7);
-moz-box-shadow: 0 15px 10px rgba(0, 0, 0, .7);
box-shadow: 0 15px 10px rgba(0, 0, 0, .7);
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
-ms-transform: rotate(2deg);
transform: rotate(2deg);
content: "";
position: absolute;
z-index: -1;
bottom: 15px;
right: 15px;
width: 70%;
height: 10px;
background: rgba(0, 0, 0, .7);
}

h4{
position: relative;
border-color: #dbd0e6;
border-style: solid;
border-width: 5px 5px 5px 0;
border-left:1px solid #dbd0e6;
background: #fff;
margin: 0 0 15px -1px;
padding: 5px 15px;
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,.3);
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.3);
box-shadow: 1px 1px 1px rgba(0,0,0,.3);
font-size: 14px;
}

h4:after
{
content: "";
position: absolute;
z-index: -1;
bottom: 15px;
right: 15px;
width: 70%;
height: 10px;
background: rgba(0, 0, 0, .7);
-webkit-box-shadow: 0 15px 10px rgba(0,0,0, .7);
-moz-box-shadow: 0 15px 10px rgba(0, 0, 0, .7);
box-shadow: 0 15px 10px rgba(0, 0, 0, .7);
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
-ms-transform: rotate(2deg);
transform: rotate(2deg);
}

h5{
position: relative;
border-color: #c1e4e9;
border-style: solid;
border-width: 5px 5px 5px 0;
border-left:1px solid #c1e4e9;
background: #fff;
margin: 0 0 15px -1px;
padding: 5px 15px;
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,.3);
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.3);
box-shadow: 1px 1px 1px rgba(0,0,0,.3);
font-size: 14px;
}

h5:after
{
content: "";
position: absolute;
z-index: -1;
bottom: 15px;
right: 15px;
width: 70%;
height: 10px;
background: rgba(0, 0, 0, .7);
-webkit-box-shadow: 0 15px 10px rgba(0,0,0, .7);
-moz-box-shadow: 0 15px 10px rgba(0, 0, 0, .7);
box-shadow: 0 15px 10px rgba(0, 0, 0, .7);
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
-ms-transform: rotate(2deg);
transform: rotate(2deg);
}

h6{
position:relative;
padding:9px;
padding-left:15px;
font-weight: bold;
font-size: 18px;
background-color: #c7dc68;
color: #fff;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
font-size: 14px;
margin-left:20px;
width: 90%;
}

h6:before{
content:'';
height:25px;
width:2px;
display:block;
position:absolute;
top:5px;
left:4px;
background-color:#fff;
border-left: 4px solid #fff;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
}

table {
width: 100%;
margin:20px 0px 50px;
border-top: 1px solid #CCC;
border-left: 1px solid #CCC;
border-spacing:0px;
}
table tr th,table tr td { /*「,(カンマ)」で区切って複数のセレクタを指定しています*/
font-size: 12px;
border-bottom: 1px solid #CCC;
border-right: 1px solid #CCC;
padding: 7px;
}
table tr th {
background: #f5f5dc;
}

ol{
counter-reset:li;
list-style:none;
margin:0;
padding:0;
margin-left: 20px;
}
ol li { line-height: 2; }
ol li:before {
counter-increment: li;
content: counter(li);
/*}
.maru li:before {*/
float: left;
background: #EBF5C7;
width: 1.8em;
height: 1.8em;
border-radius: 50%;
color: #98CB54;
text-align: center;
line-height: 1.8;
}

/*WordPressには自動整形機能 用 ネイティブCSS */
p {
display: block;
margin: 1em 0;
}
strong { font-weight: bold; }
em { font-style: italic; }
blockquote {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 40px;
-webkit-margin-end: 40px;
}
.aligncenter {
display: block;
margin: 0 auto;
}
.alignright { float: right; }
.alignleft { float: left; }

img[class*="wp-image-"],
img[class*="attachment-"] {
max-width: 100%;
height: auto;
}

.clearfix {
overflow: hidden;
zoom: 1;
}
.clearfix:after {
content: ""
display: block;
clear: both;
}
/*-----*-----**-----*-----**-----*-----*eeditor_cssと揃えます△ *-----*-----**-----*-----**/

気に入ってる見出し CSS

気に入ってる見出し CSS


h1{
position: relative;
margin: 0 0 1.5em;
padding: 0.8em;
background: #dcdcdc;
color: #666;
font-size: 1.143em;
font-weight: bold;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}

h1:after{
position: absolute;
bottom: -15px;
left: 10%;
z-index: 90;
margin-left: -15px;
border-top: 15px solid #dcdcdc;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 0;
content: "";
}

h2 {
position: relative;
color: #efab93;
background: #ffe4e1;
line-height: 1;
margin: 30px -10px 30px -10px;
padding: 15px 5px 10px 40px;
box-shadow: 0 1px 3px #efab93;
font-size: 16px;
}
h2:after,h2:before {
content: "";
position: absolute;
top: 100%;
height: 0;
width: 0;
border: 5px solid transparent;
border-top: 5px solid #ffdab9;
font-size: 16px;
}
h2:after {
left: 0;
border-right: 5px solid #ffdab9;
}
h2:before {
right: 0;
border-left: 5px solid #ffdab9;
}

こんなふうなふきだしの見出し
ふきだしの見出し