カテゴリー別アーカイブ: htmlについて

EXCELをHTMLのTABLEに変換するには?

EXCELで作った表をHTMLのTABLEに簡単に変更したい!

そんなときに便利なサイトが

tableizer

手順はほんの数ステップでOK!

  1. エクセルで表を作る
  2. 表をコピーする
  3. tableizerの
    Paste your cells from Excel, Calc or other spreadsheet here:
    の下にある大きな枠に貼り付ける
  4. No CSS Styles:
    の右のチェックボックスをチェックする
  5. Tableize it!をクリックする。
  6. 出てきたコードを入力したい場所にコピペする。

たったのこれだけで面倒なTABLE作成をできてしまいます!
見た目は後で、cssで整えたほうがきれいになるので、
自分でcssの設定をしましょう!

ただ、これだけ便利なツールも万能ではありませんでした!

細かくは色々あるのですが、一番大きなことは、

THが固定されている

ということです。

必ず、先頭行がTHになってしまうので、
左が見出しのテーブルを作りたいときは
後で変更しないといけません!

それだけっていえばそれだけですので、

結局便利なツールですね!

tableizer

ページを自動転送させるには

サイトの移行等で、

「このサイトは○○秒後に移動します」

といった文章がでて自動的に読み込むようになります。


<meta http-equiv="refresh" content="3;URL=http://□□□□.□□/">

このコードをheader部分に挿入したらokです。

content部分の数字は転送までの時間
URLは転送サイト

これでサイトの移転もばっちりですね!

ファビコンについて

よくwebサイトのタブの横にアイコンがついてませんか?
それとかiPhoneやiPadでホーム画面に追加を押すと
アプリっぽくなったり。

なんかオリジナルサイト感がでていいですよね♪

なのでやっちゃいましょう♪

まずはpng画像で114×114の画像を準備しましょう!
そのあとは、.iconファイルに変換します。

ソフトは無料であります → こちら

あとは、そのファイルをthemeフォルダの中にアップし
headerの中に以下のコードを~内に入力したらOK!

<link href="<?php bloginfo('template_directory'); ?>/favicon.ico" rel="shortcut icon" />

<link href="<?php bloginfo('template_directory'); ?>/favicon.ico" rel="apple-touch-icon-precomposed" />

こんな感じで簡単にできてしまいます♪

TrustFormで住所を自動入力できるようにする

お問い合わせフォームで郵便番号だけ入れたときに自動で住所反映してるとうれしいですよね!

そんなときはこいつが便利です!

ajaxzip3

じゃぁ設定手順です。

1.Formに郵便番号と住所のテキストボックスをつくる

郵便番号の項目のclassにzipを入力し、その下に住所の項目をつくる。

2. javascriptを読み込ませる

まずはheader内に以下のコードを入力する。

通常の場合

<script src="http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js" charset="UTF-8"></script>

sslをしようする場合

<script src="https://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3-https.js" charset="UTF-8"></script>

どちらかを入力した後以下のコードもheader内に入力する。

<script type="text/javascript">
jQuery(document).ready(function($) {
 $(".zip").keyup(function(){
 var addrInput = $(this).parents('tr').next().children('td').children('div').children('input').attr('name');
 AjaxZip3.zip2addr(this, '', addrInput, addrInput);
 });
});
</script>

3.固定ページにTrustFormのショートコードを読み込ませる

最初に作成したフォームのショートコードを固定ページに読み込ませる。

4.共通スタイルシートを読みこませる

Trust Form を使う際には各フォームごとの CSS が生成されるのですが、それを消しちゃって共通のスタイルを読み込ませたい場合の対処方法です。trust-form.php の940行目あたりを下記のように変更します。


if ( file_exists( $this->plugin_dir . '/css/front_'.$atts['id'].'.css' ) ) {
 wp_enqueue_style('trust-form-front', $this->plugin_url . '/css/front_'.$atts['id'].'.css');
} else {
 wp_enqueue_style('trust-form-front', $this->plugin_url . '/css/front.css');
}
//wp_enqueue_style('trust-form-front', "/wp-content/plugins/trust-form/css/front_{$atts['id']}.css"); // 元の。使わないので消してもOK。

こうすることで特定の CSS があるものは読み込まれ、なければ front.css を読み込みます。