フォームタグのselectの文字色を選択前と選択後で変える方法

フォームタグのselectの文字色を選択前と選択後で変える方法をお伝えします。 色を変えることで、閲覧者にとってわかりやすいフォームになるかと思います。

○HTML

<select name="お問い合せ項目(必須)">
 <option value="" disabled="disabled" selected class="contact_not_selected">お問い合せ項目を選択してください。</option>
 <option value="お買い上げの商品について">お買い上げの商品について</option>
 <option value="お探しの商品について">お探しの商品について</option>
 <option value="その他">その他</option>
</select>
① 選択前のoptionに任意のクラス名(ここではcontact_not_selected)をつけます。

○JQuery

$(function(){
	function selectColor() {
  // 現在選択されてる項目によって色設定
	  if($('select').find('option:selected').hasClass('contact_not_selected')) {
	    $('select').css({'color': '#e6e6e6'});
	  }
	 
	  // 項目が変更された時、条件によって色変更
	  $('select').on('change', function(){
	    if($(this).find('option:selected').hasClass('contact_not_selected')) {
	      $(this).css({'color': '#e6e6e6'});
	    } else {
	      $(this).css({'color': '#000'});
	    }
	  });
	}
	selectColor();
});

② このように書くことで、①でつけたクラスがついているoptionを選んだ時は#e6e6e6が文字色になり、他のものを選んだ時は#000が文字色になります。

SEO解析ツールあれこれ


Juicer


https://juicer.cc/

■Googleアナリティクスと近いweb解析ツール。
解析データがデザインによって視覚化されていて、アナリティクスより見やすく分かりやすい。
プレゼン時など、お客様にSEO対策の話をする際、デモとして伝えやすい

Similar Web(無料版)

https://www.similarweb.com/ja

■競合他社の情報を見る
通常、他社の解析データは見れないが、ある程度の情報なら読み取ることが出来る。

モバイルフレンドリーテスト

https://search.google.com/test/mobile-friendly?utm_source=support.google.com/webmasters/&utm_medium=referral&utm_campaign=6155685

■レスポンシブ対応できているかテストするツール
レスポンシブ対応かチェックし、改善点など上げてくれる。
プレゼンのレスポンシブデザインの必要性を伝える時にデモとしてよく使う。

GRC

http://seopro.jp/grc/

■キーワード検索順位の推移チェック
アコーダーのWin PCに入っている。検索ワードを複数登録して、日々の検索順位の推移をチェックできる。
サイト公開前に登録して、公開後のデータを確認する。

SEOチェキ

http://seocheki.net/

■キーワード検索に便利
調べたいサイトのURLを入力し、キーワードを入力。
キーワードに対して、ページの検索順位が見れる

SEO TOOLS

http://www.seotools.jp/

■キーワード検索に便利
SEOチェキ同様、キーワードを入力して、検索順位が見れる
『強調タグ』ではそのキーワードが、title,meta,見出しタグに何回使用されているかも分かる。

共起語ツール

https://www.sakurasaku-labo.jp/tools/cooccur

■入力したキーワードと同時に検索される可能性の高いワードを抽出してくれる
Google/yahooの検索結果上位のページのコンテンツで形態素解析を行い、頻出する語を共起語として表示する

関連キーワード取得ツール(仮名・β版)

http://www.related-keywords.com/

■コンテンツを作る時に役立つツール
サジェストやYahoo!知恵袋、教えてGooなどのキーワードと関連するコンテンツも出て来る

answer the public(英語版)

http://answerthepublic.com/

■UIがおもしろいキーワード検索ツール
任意のキーワードを入力すると、大量のアイデアを表示してくれる

沖田工務店 写真リサイズ

写真サイズを50%に縮小する

①BU4から写真をローカルにコピーし、プレビューのツールを使ってリサイズする


BACKUP_4/ ア/沖田工務店
→写真の入っているフォルダをローカルにコピペ

写真を全て選択し、開く


写真を全て選択し(command+A)、上のメニュー【ツール>サイズを調整】
縦横比固定で、単位を50%に変更してreturn。
リサイズされるので、全て選択し(command+A)→(command+S)【保存】


たまにアイコンの表示でサイズが変わっていないように見えるものもあるが、だいたいちゃんとリサイズされている。(プレビューのバグ?)
念のため数字が変わっていないものは、サイズを確認する。
◀◀

②BU4の元データのあったところに【resize】というフォルダを作成し、今回サイズを変えた写真を入れる。



完了!

hoverしてbackgroundを変える際に起こるちかちかを解消する方法

ホバーして背景の画像を変える際に、

HTML

<p class="foo"><a href="">アコーダー株式会社</a></p>

CSS

.foo { background: url(../images/bbb.jpg); } 
.foo:hover { background: url(../images/ccc.jpg); }
.foo a { width:200px; height:200px; display:block; }
と指定すると、ホバーして画像が切り変わる瞬間に一瞬白くなることがあります。今回はこの問題を解決する方法をお伝えします。変更するのはCSSだけです。

CSS

.foo { background: url(../images/ccc.jpg); } 
.foo a { background: url(../images/bbb.jpg); width:100%; height:100%; display: block; }
.foo a:hover { background: none; }

hoverしたら見える画像を「foo」の背景にして、ホバー前に見えている画像を<a>の背景にしています。 ホバーしたら<a>の背景が消えて、<li>の背景が見える仕組みです。これなら画像が切り替わる瞬間にちらつく問題を解決できます。

Smarty基礎

Smartyは、PHPのテンプレートエンジンです。
公式日本語サイト:http://www.smarty.net/docsv2/ja/

PHPとHTMLが1つのファイルになっていると、エンジニアも、コーダーも大変です。
なぜかというと、コードも読みにくいし、一緒に作業も出来ません。
間違ってエンジニアがコードを触ってレイアウトが崩れたり、コーダーがphpの部分を触ってエラーに繋がったり、様々な問題が現れます。
これを防ぐための1つの方法が、テンプレートエンジンです。

Smartyは、基本的に TPL ファイルで保存します。
他にもコンパイルフォルダーが必要です。
tpl/
index.htmlをスマーティ化する場合は、基本的に以下のようになります。
index.php
tpl/index.tpl
tpl_c/
このまましてみたのに、動かない場合、tpl_cのパーミッションが757になっているか確認してみてください。
サーバーによって、777にしないといけない場合もありますが、基本的に757です。

Smartyの設置は SHIN の方で行いますので、気にしなくてもいいですが、
使い方はコーダーでも覚えて欲しいので、以下を中心に学んで下さい。

phpからのデーターを出力したい phpの方で、処理した結果をテンプレート(以下、tplで書きます)に渡します。
渡されていない値は表示出来ません。渡されたデータのみ出力が出来ます。
どうするのかですが、PHPの方は以下のようになっています。

PHP:
$my_name = "shin";
$smarty->assign('my_name', $my_name);
TPL:
<h1>My name is {{$my_name}}.</h1>
結果:
My name is shin.
次は、配列の場合です。 PHP:
$smarty->assign('Contacts',
    array('fax' => '555-222-9876',
          'email' => 'shin@accorder.co.jp',
          'phone' => array('home' => '555-444-3333',
                           'cell' => '555-111-1234')
                           )
         );
HTML:
FAX: {$Contacts.fax}<br>
EMAIL: {$Contacts.email}<br>
Phone(h): {$Contacts.phone.home}<br>
Phone(c): {$Contacts.phone.cell}<br>
結果:
FAX: 555-222-9876
EMAIL: shin@accorder.co.jp
Phone(h): 555-444-3333
Phone(c): 555-111-1234
次は、PHPから貰ったデータを可変してみましょう。
例えば、phpから、$my_date = “20170503 12:34:59”;というデータを貰った場合、日本風の日付に変えたい場合:
{{$my_date|date_format:"%Y年%m月%d日"}}
結果:
2017年5月3日
簡単に言うと、{{と}}に囲まれた変数の次に縦棒を入れ、コマンドを入れれば、わざわざPHPで処理しなくても Smarty の方で変えてくれます。
{{$変数|ここに変えたい処理を入れる}} 
日付だけではなく、文字制限、全て大文字にする、全て小文字にするなどは、よく使われています。

最後にincludeです。
例)/accorder/tpl/base_header.tplのヘッダーを別のテンプレートで作成され、利用する場合:
{{include file="$document_url/tpl/base_header.tpl"}}
$document_urlは、shinの方で作成しておくので、入れておけば適切な値が入ります。

例)/accorder/blog/tpl/blog_header.tplのヘッダーを別のテンプレートで作成され、利用する場合:
{{include file="$document_url/blog/tpl/blog_header.tpl"}}
このように、ヘッダーやフッターなどをテンプレート化しておくと、
修正も1回で済むので楽になります。 以下、公式サイトと、アコーダーのSmartyの違いです。
jQueryなどとの問題もあり、{$variable}を{{$variable}}に変えました。
入力の文字を減らすため、templates を tpl に変え、templates_c を tpl_c に変えました。
公式サイトで確認するときは、間違いないようにお願いします。

公式アコーダー
{$variable}{{$variable}}
templatestpl
templates_ctpl_c