WordPress リビジョン 無効

WordPressのDBにリビジョンを残さない

プラグインは不要

wp-config.php にこれを追加するだけ。場所はどこでもOK

define('WP_POST_REVISIONS', false);

すでにあるリビジョンは消えない。

sassを使う Koala

.scssを自動コンパイルする「Koala」をダウンロード

koalaimage

左上の歯車のアイコンをクリックし、左側メニューの「Sass → compass」にチェック。
また、左側メニューの「General → Language」から日本語モードに。

DreamweaverにSassを対応させる

①メニュー → 編集 → 環境設定 → ファイルタイプ/エディターを開く
②右側の項目「コードビューで開く」に拡張子”.scss”を追記

コードヒントが出るようにする

Extensions.txtを編集する

Windows7の環境では
C:/Users(ユーザー名)/AppData/Roaming/Adobe/Dreamweaver (バージョン)/ja_JP/Configuration

Macの環境では
/Applications/Adobe Dreamweaver (バージョン)/Configuration

に「Extensions.txt」というファイルがあると思います。
そのファイルをテキストエディタで開いて編集していきます。

scssExten

MMDocumentTypes.xmlを編集する

Windows7の環境では

C:/Users(ユーザー名)/AppData/Roaming/Adobe/Dreamweaver (バージョン)/ja_JP/Configuration/DocumentTypes/

Macの環境では
/Applications/Adobe Dreamweaver (バージョン)/Configuration/DocumentTypes/

MMDocment

カラーリングが変わらない場合

たぶんこれらのファイルが、ライブラリフォルダに入っていて見えていない。
ファインダーで検索 「 filename:MMDocumentTypes.xml 」「 filename:Extensions.txt 」
ファイル名の前に filename: を記入すると、FinderとSpotlightでも隠しファイルが検索出来ます。

koala

Sassを書いてみる

  1. 任意の場所に”test”という名前でフォルダを作る
  2. その中にDWなりのテキストエディタで、”test.scss”というファイルをつくる
  3. Koalaを起動する
  4. testフォルダを、フォルダごとKoalaにドラッグ&ドロップ
  5. すると、右側にアイコンと共に”test.scss”の表記が出ます。
  6. 右側に何やら項目が表示されるので、任意で設定する。
#main{
    width :600px;
    p{margin:0 0 1em;
    em{color:#f00;}
    }
  }
.box{
    padding: 0 10px;
    h1{
    font-size: 18px;
    }
  }

こんなかんじに書いたものが、DWで上書き保存すると普通のCSSに変換される

リンク画像を拡大表示&移動可能にする

zoomy2

<script type="text/javascript" src="http://cssrevolt.com/upload/files/zoomy/js/prototype.js"></script>
<script type="text/javascript" src="http://cssrevolt.com/upload/files/zoomy/js/scriptaculous.js?load=effects,dragdrop"></script>
<script type="text/javascript" src="http://cssrevolt.com/upload/files/zoomy/js/effects.js"></script>
<script type="text/javascript" src="http://cssrevolt.com/upload/files/zoomy/js/dragdrop.js"></script>
<script type="text/javascript" src="http://cssrevolt.com/upload/files/zoomy/js/zoomy.js"></script>

<script type="text/javascript">
Event.observe(window,"load",function() {

$$("div.entry-content a").each(function(element){
new Zoomy(element, { draggable: true });
});
});
</script>


/* thumbnails grid */
.zoomy, .zoomy2 { float:left; width:100%; }
.zoomy li, .zoomy2 li { list-style:none; float:left; display:inline; margin-right:5px; margin-bottom:5px; width:150px; height:100px;  }
.zoomy a, .zoomy2 a { text-decoration:none; display:block; width:150px; height:100px; }


/* ..... ZOOMY */
#zoomy { position:absolute; overflow:hidden; background:#000000; padding:0px; border:1px solid #FFFFFF; text-align:center; color:#fff; line-height:0; }
#zoomy img { margin:5px; }
#zoomy p { position:relative; margin:10px 5px 5px 5px; line-height:100%; text-align:left  }

#close { position:absolute; right:5px; width:12px; height:12px; background:url(close.gif) no-repeat; cursor:pointer;} 


基本的に"prototype.js"はjQeryとは競合するので、もし共存させたければこの記事を参考に
「jQueryとprototype.js共存させる為にする事」

タグに付けられたIDにClassを追加する

body内にないとダメらしい。うまく行かなかったらあちこち移動してみる。
prototype.jsがほしいのでどっかから参照する。

<script src="/js/prototype.js" type="text/javascript"></script>


<script>// <![CDATA[

 var element4=document.getElementById("menu-item-71") 
 element4.addClassName("shake");  //クラス shakeを追加

element4.removeClassName("menu-item-object-page"); //menu-item-object-pageクラスを除去
// ]]></script>

Sassの書き方

Sass の概要

Sass とは、今までの CSS にプログラミング的な書き方を加えて、.scss ファイルを変換(コンパイル)することで .css ファイルを作成します。
例えば、「style.scss」を変換すると、「style.css」が作成されます。

大手様が Sass を導入しているという話をよく耳にするけれど

・・・一体何が便利なの?

ざっくり言いますと、Sass を導入する事で、記述が減りメンテナンス性が向上します!
結果的に、コーディングのスピードが抜群にUPできると言うしろものなのですっ

と・・・言葉で書いてもこの便利さがいまいちピンと来ないと思うので、インターネットに繋がっている環境(IE8 以上)なら誰でも簡単に Sass を体験することができるサイトをご紹介!

SassMister
※SASS 記法と SCSS記法 がありますが、「SCSS記法」が標準です。

次はこのサイトを使って、簡単に Sass の世界に触れてみましょう!!
まずは触れてみることが大事!きっとワクワクするはず・・・!

Sass の基本機能

ルールのネスト(Nested Rules)

ネストは、Sass の中でも一番よく使う機能で、CSS を HTML の構造に合わせて入れ子で書いて行くことができますっ

例:CSS の構造にあわせて入れ子にする場合

▼ Sass

1
2
3
4
5
6
7
8
9
10
11
12
#main section {
     margin-bottom: 50px;
     h1 {
          font-size: 140%;
     }
     p, ul {
          margin-bottom: 1.5em;
     }
     p.notes {
          color: red;
     }
}

▼ CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
#main section {
     margin-bottom: 50px;
}
 
#main section h1 {
     font-size: 140%;
}
#main section p, #main section ul {
     margin-bottom: 1.5em;
}
#main section p.notes {
     color: red;
}

入れ子にする事で、記述がスッキリしましたッ

親セレクタの参照 &(アンパサンド)

セレクタに「&」を書くことで親セレクタを参照できます。

例:類似クラスやクラス指定でやってみた

▼ Sass

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
a {
     text-decoration: none;
     &:hover {
          text-decoration: underline;
     }
}
 
ul.pageNav {
     li {
          margin: 0;
          width: 50%;
          &.prev {
               float: left;
          }
          &.next {
               float: right;
          }
     }
}

▼ CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
a {
     text-decoration: none;
}
a:hover {
     text-decoration: underline;
}
 
ul.pageNav li {
     margin: 0;
     width: 50%;
}
ul.pageNav li.prev {
     float: left;
}
ul.pageNav li.next {
     float: right;
}

主な使いどころは、類似クラスやクラスの二重指定とか・・・!

プロパティのネスト(Nested Properties)

ネストはセレクタだけではなく、プロパティでも使うことができます!

例:background プロパティをネストしてみる

▼ Sass

1
2
3
4
5
6
7
.sample {
     background: {
          image: url(img/bg_head.jpg);
          repeat: no-repeat;
          position: center top;
     }
}

▼ CSS

1
2
3
4
5
.sample {
     background-image: url(img/bg_head.jpg);
     background-repeat: no-repeat;
     background-position: center top;
}

「-(ハイフン)」つなぎのプロパティは全てネストできるのですが、ややこしくなるので・・・っ
基本的には、一括指定ができるプロパティでのみ使うようにしましょう!

Sass で使えるコメント

下記の3つを使うことができますッ

○ 1行コメント

コンパイル後、CSS に出力されないコメントです!
納品をする際に残しておきたくないコメントがある場合に使いましょうッ

▼ Sass
1
2
3
4
5
.box {
     //width: 350px;
     min-height: 300px;
     _height: 300px; // IE6対策
}
▼ CSS
1
2
3
4
.box {
     min-height: 300px;
     _height: 300px;
}

○ 通常のコメント

基本的には、コンパイル後も CSS に出力されるコメントですが、出力される CSS ファイルのフォーマットが Compressed の場合はこちらのコメントは出力されません!

▼ Sass
1
2
3
4
5
6
7
.box {
     /*
     width: 350px;
     */
     min-height: 300px;
     _height: 300px; /* IE6対策 */
}
▼ CSS
1
2
3
4
5
6
7
8
.box {
     /*
     width: 350px;
     */
     min-height: 300px;
     _height: 300px;
     /* IE6対策 */
}

納品時、CSS に残して起きたいコメントがある場合に使うようにしましょう!

○ compressed でも残るコメント

出力される CSS ファイルのフォーマットがいかなるものでも、CSS に必ず吐き出されるコメントです!通常のコメントとの違いは「!」を入れている所ですっ

例:フォーマットを Compressed にした場合

▼ Sass
1
2
3
4
5
.box {
     /*! width: 350px; */
     min-height: 300px;
     _height: 300px; /* IE6対策 */
}
▼ CSS
1
.box{/*! width: 350px; */;min-height:300px;_height:300px}

出力されないと困る大事なコメントである場合に使いましょう!
WordPress のスタイルシートヘッダ、更新日、コピーライトなど・・・。

変数

あらかじめ、変数を定め値を使い回すことができます!

例:仕様書でカラーが決まっている場合

▼ Sass

1
2
3
4
5
6
7
8
9
$red: #cf2d3a;
 
.notes {
     color: $red;
}
 
.notesBox {
     border: 3px double $red;
}

▼ CSS

1
2
3
4
5
6
7
.notes {
     color: #cf2d3a;
}
 
.notesBox {
     border: 3px double #cf2d3a;
}

カラーが変更になった際に、修正は1箇所で済みますッ
・・・便利ですね!

演算

数値の算出に毎回電卓を叩いている方にオススメなのがコレ。

例:width の値から padding の値を引く場合

▼ Sass

1
2
3
4
article {
     width: 560px - 14px;
     padding: 7px;
}

▼ CSS

1
2
3
4
article {
     width: 546px;
     padding: 7px;
}

ミックスイン - Mixins

ミックスインは、プロパティやセレクタをまとめてワンセットにしておく事が可能で、それらをカンタンにインクルード(読み込む)する事が出来ます。
変数の機能を強化したと言うか便利にしたようなイメージです。

Sass

@mixin inline_block {
display: inline-block;
*display: inline;
*zoom: 1;
}

@mixinの後に半角スペース、任意の名前って感じで定義します。

この例では、display: inline-block; を IE でも使う場合に、 *display: inline; と *zoom: 1; を指定する必要があります。
これを毎回書くと面倒なので、ミックスインを使って予め定義しておくことで、次のように1行書くだけでインクルード出来ます。

Sass

.sampleBox {
@include inline_block;
background: #eee;
}

@includeの後に半角スペース、ミックスインで定義した名前って感じで記述します。
当然、他の宣言と一緒に書くことが可能です。
これを変換すると、、、

変換されたCSS

.sampleBox {
display: inline-block;
*display: inline;
*zoom: 1;
background: #eee;
}

無事にインクルードされ、展開されました。
こんな感じで、何度も使うようなスタイルや長めの宣言を予め定義してインクルード出来るので、かなりの工数削減になると思います。
特にCSS3使ってて、ベンダープレフィックスが多い場合とか。

このミックスインもかなり強力な機能なので、がっつりやり出すとかなり覚えたりやることが多いですが、いきなり複雑な事はせずに、この宣言何度も書いてるなーと思ったらミックスインで定義しておく位が最初は良いのかなと。

ちなみに、この inline-block程度ならミックスインではなく次に説明する セレクタを継承出来る @extend を使った方が良いかもです。

この他にもミックスインは、変数と合わせたり初期値を指定したり、とても色んな事が出来ますが、もうちょっと詳しい説明は後のエントリーで書く予定です(ちゃんと書けよ自分)。

セレクタの継承 - Selector Inheritance(@extend)

@extend は、一度使ったセレクタを継承して使うことが出来ます。
ミックスインと似てる部分も多いのですが、似て非なるものって感じで用途がだいぶ変わってきます。
文だと伝わる気がしないので、例を見てください。

Sass

.imgR {
float: right;
margin-left: 10px;
margin-bottom: 1.5em;
}

これだけ見ても、いつものCSSと何ら変わりは有りませんが、この一度使ったセレクタを使うことが出来ます。

Sass

.photo {
@extend .imgR;
}

と書くことで .imgR で指定した宣言が .photo でも継承されます。
これを変換すると、、、

変換されたCSS

.imgR, .photo {
float: right;
margin-left: 10px;
margin-bottom: 1.5em;
}

こんな感じで変換されるので、clearfix等のように一度使ったセレクタを再利用したい場合に便利な機能です。

ちなみに、clearfixを @extend で利用する場合はこんな感じです。

Sass

.clearfix {
*zoom: 1;
&:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
}
 
ul.menu {
@extend .clearfix;
background: #ccc;
li {
float: left;
width: 100px;
}
}

変換されたCSS

.clearfix, ul.menu {
*zoom: 1;
}
.clearfix:after, ul.menu:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
 
ul.menu {
background: #ccc;
}
ul.menu li {
float: left;
width: 100px;
}

clearfixから話を戻して。
また次のように、スタイルを上書きしたい場合も有ると思います。

Sass

.imgR {
float: right;
margin-left: 10px;
margin-bottom: 1.5em;
}
.photo {
@extend .imgR;
margin-left: 5px;
}

この様な場合は、次のようにちゃんと分けて変換してくれます。

変換されたCSS

.imgR, .photo {
float: right;
margin-left: 10px;
margin-bottom: 1.5em;
}
.photo {
margin-left: 5px;
}

部分的に、スタイルを上書きしたい場合も問題ないですね。
こんな感じで便利な @extend ですが、現状だと単独のセレクタしか使うことしか出来ません。
よく分からない説明ですが、次の場合はエラーになっちゃいます。

Sass(エラー)

.item .imgR {
float: right;
margin-left: 10px;
margin-bottom: 1.5em;
}
.photo {
@extend .item .imgR;
}

子孫セレクタとかセレクタを組み合わせるとダメって事ですね。
これは、将来的に対応されるのかな。

@extend は使い方に寄ってはミックスインでも何ら問題が無いのですが、大きな違いとして、ミックスインはインクルードする度に展開され、@extend はグループ化されて変換されます。
なので、例えばclearfixをミックスインで定義して、複数ヶ所でインクルードするとその数だけ宣言が増えていきますが、@extend だとグループ化されるのでより合理的なCSSになります。


// SCSS

// 継承元のセレクタ
.button {
    display: inline-block;
    border: 1px solid gray;
    background-color: silver;
    &:hover {
        border-color: black;
    }
}

// .button セレクタを継承・拡張
.button-download {
    @extend .button;         // .button を継承
    background-color: green; // プロパティを上書き
    border-radius: 4px;      // 新たなプロパティの追加
    .icon {                  // ネストしたセレクタの追加
        background: url(/img/download.png) no-repeat 0 50%;
    }
}

この SCSS をコンパイルすると、こういう CSS が生成されます:

/* CSS */

.button,
.button-download {
    display: inline-block;
    border: 1px solid gray;
    background-color: silver;
}

.button:hover,
.button-download:hover {
    border-color: black;
}

.button-download {
    background-color: green;
    border-radius: 4px;
}

.button-download .icon {
    background: url(/img/download.png) no-repeat 0 50%;
}

6) config.rb を用意する
sass ディレクトリ内に、config.rb データを作成します!
config.rb は、「Sass を制御するための設定ファイル」ですっ

ファイルを新規作成して、下記を記述します!

http_path = "/"
css_dir = "/"
sass_dir = "/"
images_dir = "images"
javascripts_dir = "javascripts"

 

 

2.変数入門

通常の言語同様グローバルスコープとローカルスコープが存在する。
変数の定義方法は下記の通り。

1
$width1 : 5em;

特に意識しなくても良いが、データ型は以下の5つがある。
numbers (e.g. 1.2, 13, 10px)
strings of text, with and without quotes (e.g. “foo”, ‘bar’, baz)
colors (e.g. blue, #04a3f9, rgba(255, 0, 0, 0.5))
booleans (e.g. true, false)
lists of values, separated by spaces or commas (e.g. 1.5em 1em 0 2em, Helvetica, Arial, sans-serif)

スタイルの外側で定義すればグローバルスコープとなりファイル全体で使用することができる。

1
2
3
4
5
6
7
8
9
10
11
$width1 : 5em;
#navbar {
 
  width: $width1;
  height: $width1;
  ul { list-style-type: none; }
}
 
#neko{
  width: $width1;//こっちでも使える
}

[ローカススコープの例]

1
2
3
4
5
6
7
8
9
10
#navbar {
  $width1 : 5em;  //ここに書くとローカルスコープ、このブロック内部でしか使えなくなる。
  width: $width1;
  height: $width1;
  ul { list-style-type: none; }
}
 
#neko{
  width: $width1;//これはエラーになる。
}

グローバルとローカルスコープに同名の変数は使用することができない。

1
2
3
4
5
6
7
8
9
10
11
$width1 : 5em;
#navbar {
  $width1 : 3em;
  width: $width1;
  height: $width1;
  ul { list-style-type: none; }
}
 
#neko{
    width: $width1;
}

↓こう書いた場合、結果は次の様になる。

1
2
3
4
5
6
7
8
#navbar {
  width: 3em;
  height: 3em; }
#navbar ul {
  list-style-type: none; }
 
#neko {
  width: 3em; }

3.関数入門

関数を定義するには、@mixinを使用する。

1
2
3
4
5
6
7
@mixin hoge($huga) {
     #neko{
         width: $huga;
     }
 }
呼び出すには、@includeで呼び出す。
@include hoge(20px);

結果は下記

1
2
#neko {
  width: 20px; }

変数はいくつでも渡すことができる。
例:ListとNumber型のデータを渡した場合。

1
2
3
4
5
6
7
@mixin hoge2($foo,$bar) {
      #neko{
          padding: $foo;
          width: $bar;
      }
  }
  @include hoge2(20px 10px 0px 0 , 200px);

結果は下記

1
2
3
#neko {
  padding: 20px 10px 0px 0;
  width: 200px; }

変数をセレクタや文字列内に流しこみをしたい場合には、rubyの#{}
が使用できる。

1
2
3
4
5
6
@mixin hoge3($foo) {
     #neko #{$foo}{
       padding: 10px;
     }
 }
 @include hoge3(".neko");

結果は下記

1
2
#neko .neko {
  padding: 10px; }

引数なし関数

1
2
3
4
5
6
7
8
9
10
11
12
@mixin large-text {
    font: {
      family: Arial;
      size: 20px;
      weight: bold;
    }
    color: #ff0000;
  }
 
  h1{
    @include large-text;
  }

結果は下記

1
2
3
4
5
h1 {
font-family: Arial;
font-size: 20px;
font-weight: bold;
color: #ff0000; }

4.制御文(繰り返し構文は使い道がありそう)

1
2
3
4
5
6
7
@for $i from 1 through 3 {
    .item-#{$i} { width: 2em * $i; }
  }
 
  @each $animal in puma, sea-slug, egret, salamander {
    .#{$animal}-icon {background-image: url('/images/#{$animal}.png');}
  }

↓これは便利!

1
2
3
4
5
6
7
8
.item-1 {  width: 2em; }
.item-2 {  width: 4em; }
.item-3 {  width: 6em; }
 
.puma-icon       {  background-image: url("/images/puma.png"); }
.sea-slug-icon   {  background-image: url("/images/sea-slug.png"); }
.egret-icon      {  background-image: url("/images/egret.png"); }
.salamander-icon {  background-image: url("/images/salamander.png"); }

 

WordPress 投稿 独自テーブル 保存

タイトルのようなプラグインを作ってみました。
概ねこちら
で紹介されていた内容で作ってますが、取り扱いにいろいろ戸惑ったので
そのまとめ。

プラグインを有効にしたあとに、新規投稿を開くとこんな感じに
「カスタムフィールド」がが追加されている。

custom1

投稿後DBには'wp_ex_meta'テーブルが追加されている。

ソースをアップしておく
プラグイン本体+表示用single.php

javascript カレンダーからの日付入力

datepicker でカレンダーを2つ作って開始日~終了日にする

日付フォーマットが海外スタイルなのでyyyy/mm/ddになおす


<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<script src="js/jquery.ui.datepicker-ja.js"></script> <!--これを読ませるだけで日付フォーマット完成-->

<script language="javascript" type="text/javascript">

$(function() {     $( "#datepicker_begin" ).datepicker();   });

$(function(){    $("#datepicker_end").datepicker();   });

</script

</pre>

 

<h3>開始日が終了日より後にならないようにする</h3>

<p>ボタンはsubmitさせて、jsでfalseを返して止めるやり方</p>

<pre>

function next_button(){

var datepicker_begin = document.getElementById("datepicker_begin");

var datepicker_end = document.getElementById("datepicker_end");

// 最終確認

if (  datepicker_begin.value >=  datepicker_end.value  ) {

alert('到着日を返却日よりも前にしてください');

return false; //submit の返り値が false なら submit の処理が中断される

}

}

 

 

 

html


<form  name="frm" id="frm" method="post" action="add.php?<?=SID ?>"  onSubmit="return next_button();" >

<dl>

<dt>到着日</dt>

<dd>

<input name="datepicker_begin" id="datepicker_begin" type="text" placeholder="--年--月--日" size="11" maxlength="10" required />

</dd>

<dt>返却日</dt><dd>

<input name="datepicker_end" type="text" class='list_dd trs_bg' id="datepicker_end" placeholder="--年--月--日" size="11" maxlength="10"  required />

</dd>

</dl>

javascript ラジオボタンでDOMの開閉をしたい。


異なる配送先を選んだ場合には住所の入力欄が作られるスクリプト

<script>
window.onload = function() { /* チェックボックス */
var check = document.getElementById("check"); /* 同じ住所 */
var non = document.getElementById("non"); /* 違う住所 */
var frm = document.getElementById("frm"); /* formのID */

//
non.checked = false;
non.value = 'off';

/* チェックボックスにonclickイベントハンドラをセット */

non.onclick = function() {
var hide_area = document.getElementById("hide_area");
check.checked = false; /* */
check.value = 'off';

if( non.value == 'off' ) {

hide_area1.innerText="郵便番号:";

var zipp = document.createElement("input");
zipp.type = "text";
zipp.id = "zipp";
zipp.name = 'zipp';
zipp.size = '4';
zipp.maxLength = '3';
hide_area1.appendChild(zipp);

var zipp2 = document.createElement("input");
zipp2.type = "text";
zipp2.id = "zipp2";
zipp2.name = 'zipp2';
zipp2.size = '5';
zipp2.maxLength = '4';
zipp2.onKeyUp="AjaxZip3.zip2addr('zipp','zipp2','pref31','haisosaki');"
hide_area1.appendChild(zipp2);
}
};

//上記と同じ住所 clicked
check.onclick = function() {
non.value = 'off';
hide_area.addClassName("hide_class");
};

</script>

書いているうちにもっと簡単な方法を思いついた。

display:none のクラスをあてたり、とったりすればいいのだ。

$("hide_area").removeClassName("hide_class");  // 一行で片付いた。

DreamWeaver カラーテーマ コードカラーリング

dw14co

Dreamweaverでのコードカラーリングの設定方法

  1. 編集
  2. 環境設定
  3. コードカラーリング
  4. HTML
  5. とりあえず背景を全部 #272822

Windows フォルダの場所
C:\Users\your Name\AppData\Roaming\Adobe\Dreamweaver CS5\ja_JP\Configuration\CodeColoring

を開いて、ダウンロードした「Colors.xml」をここに置く。

vbscriptでインストール

Mac版も同じファイルが使える。
場所→/ユーザ/ユーザ名/ライブラリ/Application Support/Adobe/Dreamweaver CS5/ja_JP/Configuration/CodeColoring/Colors.xml
フォントは「Courier New」似ているのがあるので注意。

Css3 Transition

 

WordPressの特定ページのみでCSS3を使う。

WordPressと切り離したいページが時々あると思う。

WordPressと切り離さないなら、header.phpとかに、ifで投稿記事を分けて、特定の投稿なら別のCssを読ませるとかの工夫が必要。

  1. 完全に新規で作成してヘッダーにCSSを書く方法が手っ取り早い。
  2. FTPでアップして、どっかの記事にはフルパスでリンクを貼る。
    ちなみに、WordPressはフルパスにしないと、インストールフォルダがルートなので、全てそこからの相対パスになる。
  3. ソロモン試算表のマニュアルへのリンク
 


<style type="text/css">
<!--
#file {left: 433px;top: 70px;}
#kaito {left: 495px;top: 70px;}
#fonto {left: 588px;top: 70px;}
#jarhelp {left: 648px;top: 70px;}
#mondai {left: 648px;top: 170px;}
#kamoku {left: 611px;top: 289px;}
#tform {left: 70px;top: 68px;}
#karikata {left: 811px;top: 290px;}
#kashikata {left: 1052px;top: 290px;}

#container .number {
font-size:0.95em;
text-align: center;
color: #000;
background-color: #F90;
position: absolute;
height: 18px;
width: 18px;
text-indent: 2px;
padding: 2px;
border-radius: 1em;
transition: background-color 1s linear 0 , width 0.5s linear 0 , height 0.5s linear 0;
-moz-transition: background-color 1s linear 0 , width 0.5s linear 0 , height 0.5s linear 0;
-moz-transition: 1s ease-in-out;
overflow:hidden;
}

#container .number:hover {
height: 160px;
width: 450px;
background-color: #272822;
color: #A7EC21;
text-align: left;
border:solid thin #CCC;
z-index:100;
}

#container .number2:hover {
height: 120px;
width: 400px;
background-color: #272822;
color: #A7EC21;
text-align: left;
border:solid thin #CCC;
left: 852px;/**/
}
-->
</style>

javascriptバリデーション

javascriptバリデーション form.js

 

var gGlobalCheckFlag = 0; // 1の場合は一回ボタンを押したとき

var gCheckFormArray = { // 3
"name_last":"姓名(姓)",
"name_first":"姓名(名)",
"name_last_kana":"フリガナ(姓)",
"name_first_kana":"フリガナ(名)",
"zip21":"郵便番号",
"zip22":"郵便番号",
"pref21":"都道府県",
"addr21":"住所(市区町村)",
"uDateYJ":"予約日(年)",
"uDateM":"予約日(月)",
"uDateD":"予約日(日)",
"email":"メールアドレス",
"tel_num1":"電話番号(市外局番)",
"tel_num2":"電話番号(市内局番)",
"tel_num3":"電話番号(加入者番号)"
}; // 3

var gCheckFormKanaArray = {
"name_last_kana":"フリガナ(姓)",
"name_first_kana":"フリガナ(名)"
};

function checkForm( pType ) {// 36
if (( gGlobalCheckFlag == 0 ) && ( pType == 1 )) { // 37
gGlobalCheckFlag = 1;
}// 37

if ( gGlobalCheckFlag == 1 ) { // 41
// 入力チェック
aErrorFlag = "";
aErrorStr = "";

for (var i in gCheckFormArray) { // 45 ;
if ( $F(i) != "" ) { // 46
$( i ).removeClassName("cssErr");

// アラート非表示
if ( $( i + "_msg" ) != undefined ) { // 47

$( i + "_msg" ).innerHTML = "";
} // 47
} // 46
else { // 54 $F(i)の値がない場合
//
aErrorMsg = "「" + gCheckFormArray[ i ] + "」を入力してください。";
aErrorFlag = 1;
aErrorStr += "<div>" + aErrorMsg + "</div>" ;
// 色変更
$( i ).addClassName("cssErr");
// アラート表示
if ( $( i + "_msg" ) != undefined ) {// 63
$( i + "_msg" ).innerHTML = aErrorMsg;
//
} // 63 if
} // 54 else
} // 45 for

// カタカナチェック
for (var i in gCheckFormKanaArray ) {//alert ($F(i));
if ( $F(i) != "" ) {
if ( checkZenkakuKana( $F(i) ) == true ) {
$( i ).removeClassName("cssErr");

// アラート非表示
if ( $( i + "_msg" ) != undefined ) {
$( i + "_msg" ).innerHTML = "";
}
} else {
aErrorMsg = "「" + gCheckFormKanaArray[ i ] + "」を全角カタカナで入力してください。";
aErrorFlag = 1;
aErrorStr += "<div>" + aErrorMsg + "</div>" ;

// 色変更
$( i ).addClassName("cssErr");

if ( $( i + "_msg" ) != undefined ) {// アラート表示
$( i + "_msg" ).innerHTML = aErrorMsg;
}
}
}
}

// 追加チェックalert ("メールアドレス書式");
if ( checkAlphabet($F('email')) == false ) {
aErrorFlag = 1;
aErrorMsg = "「メールアドレス」の形式に誤りがあります。正しいメールアドレスを入力して下さい。";
aErrorStr += "<div>" + aErrorMsg + "</div>";
if ( $( "email_msg" ) != undefined ) {
$( "email_msg" ).innerHTML = aErrorMsg;
}

// 色変更 alert ("色変更");
$( 'email' ).addClassName("cssErr");
}

// 追加チェック(電話番号チェック) alert ("追加チェック");
if (( $F( "tel_num1" ) != "" ) && ( $F( "tel_num2" ) != "" ) && ( $F( "tel_num3" ) != "" )) {
len = ( $F( "tel_num1" ) + $F( "tel_num2" ) + $F( "tel_num3" ) ).length;
if (( len == 11 ) || ( len == 10 )) {
;
} else {
aErrorFlag = 1;
aErrorMsg = "「電話番号」は10桁(IP電話は11桁)の数値で入力してください。";
aErrorStr += "<div>" + aErrorMsg + "</div>";

if ( $( "tel_num1_msg" ) != undefined ) {
$( "tel_num1_msg" ).innerHTML = aErrorMsg;
}

$( 'tel_num1' ).addClassName("cssErr");
$( 'tel_num2' ).addClassName("cssErr");
$( 'tel_num3' ).addClassName("cssErr");
}
}

// 追加チェック(番地情報を含むか) alert ("追加チェック");
if ( checkNumeric( $F( 'addr21' )) != true ) {
aErrorFlag = 1;
aErrorMsg = "「住所」は番地まで入力して下さい。";
aErrorStr += "<div>" + aErrorMsg + "</div>";

if ( $( "addr21_msg" ) != undefined ) {
$( "addr21_msg" ).innerHTML = aErrorMsg;
}

$( 'addr21' ).addClassName("cssErr");
}

// 最終確認
if ( aErrorFlag == 1 ) {

return false; //submit の返り値が false なら submit の処理が中断される
}
else {
if ( pType == 1 ) {
return true;
}
}
}
}

function checkNumeric( pStr ) {
if( pStr.match( /[0-90-9]/ ) ) {
return true;
} else {
return false;
}
}

function checkZenkakuKana( pStr ) {
if( pStr.match( /[^ァ-ンー]+/ ) ) {
return false;
} else {
return true;
}
}

function checkAlphabet( pStr ) {
if( pStr.match( /^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/ ) ) {
return true;
} else {
return false;
}
}