プログラミングカテゴリー記事一覧

DreamweaverでSass（Compass）を利用する方法

Adobe DreamweaverでSass・Compassを利用する方法の備忘録です。

Gulp・Grunt等でやる方法がありますが、コマンドプロンプト（通称：黒い画面）はちょっと敷居が高いと思われる方も多いと思うので、Adobeユーザーなら大抵入っているDreamweaverの設定方法をお伝えします。

Dreamweaverを利用してWordPressでサイト構築（テーマ開発）することを想定していますが、他のサイト制作でも同様の設定で多分利用できます。

試行錯誤の結果とりあえず動いたという設定方法をご紹介しておりますので、正統なやり方では無いかもしれません。その点ご容赦ください。

2018年2月2日追記

文字コードの関係でエラーになる場合があったため、config.rb、config_prod.rbに以下の一文を追加しました。

Encoding.default_external = “UTF-8”

今回想定するDreamweaverのサイト設定

Dreamweaverのサイト設定が以下のように行われている前提で説明を行います。

今回のサイト設定・構造

サイト直下にwp-content , wp-admin, wp-includes等のファイルがある。
テーマディレクトリを「THEME_NAME」としてテーマを作り込もうとしていることを想定しています（この部分を適宜ご自身の環境に合わせて以降読み替えてください）。

空のディレクトリを作成しよう

以下のように、/wp-content/themes/THEME_NAME/ディレクトリに空のディレクトリを作成します。

scss ディレクトリ

このディレクトリにSassファイルを配置していきます。

css, css/min ディレクトリ

sassディレクトリに配置されたSassファイルがコンパイルされ、生成されたCSSファイルが配置されます（css/minにはminifyされたCSSが配置されます）

fonts, images, js ディレクトリ

とりあえず作ります。Compassが画像等を出力する時に使用するようですが正直よく分かりません（笑）

configファイルを配置しよう

以下Gist からconfig.rbとconfig_prod.rbをダウンロードしてきてテーマディレクトリ直下に配置します。

Gist：Dreamweaverでcompassを動作させようとした時のconfig.rb

https://gist.github.com/onocom/29259b091fdea04e159506bcba6d89ff

config.rb

これはMinifyしない為のコンフィグファイル。このコンフィグが実行されると、最後にMinify用のコンフィグが実行される。

THEME_NAMEディレクトリは適宜書き換えてください。

Encoding.default_external = "UTF-8"

http_path = "/"
css_dir = "/wp-content/themes/THEME_NAME/css/"
sass_dir = "/wp-content/themes/THEME_NAME/scss/"
images_dir = "/wp-content/themes/THEME_NAME/images/"
javascripts_dir = "/wp-content/themes/THEME_NAME/js/"
fonts_dir = "/wp-content/themes/THEME_NAME/fonts/"

output_style = :expanded # :expanded or :nested or :compact or :compressed
sourcemap = true
line_comments = false
relative_assets = true

on_stylesheet_saved do
    `compass compile -c wp-content/themes/THEME_NAME/config_prod.rb --force`
end

Encoding.default_external = "UTF-8"

http_path = "/"

css_dir = "/wp-content/themes/THEME_NAME/css/"

sass_dir = "/wp-content/themes/THEME_NAME/scss/"

images_dir = "/wp-content/themes/THEME_NAME/images/"

javascripts_dir = "/wp-content/themes/THEME_NAME/js/"

fonts_dir = "/wp-content/themes/THEME_NAME/fonts/"

output_style = :expanded # :expanded or :nested or :compact or :compressed

sourcemap = true

line_comments = false

relative_assets = true

on_stylesheet_saved do

`compass compile -c wp-content/themes/THEME_NAME/config_prod.rb --force`

end

config_prod.rb

Minify（圧縮）用のコンフィグ。

なお、output_styleを変更することで様々な出力を選べる。

:expanded ・・・通常のCSS出力
:nested ・・・ネストされたCSS出力
:compact ・・・コンパクトなCSS出力
:compressed ・・・ Minifyされた最も小さいCSS出力

また、sourcemap の設定は.mapファイルを生成するかどうかの指定。
line_comments の設定は、コメントを出力するかしないかの指定になります。

THEME_NAME ディレクトリは適宜書き換えてください。

Encoding.default_external = "UTF-8"

http_path = "/"
css_dir = "/wp-content/themes/THEME_NAME/css/min/"
sass_dir = "/wp-content/themes/THEME_NAME/scss/"
images_dir = "/wp-content/themes/THEME_NAME/images/"
javascripts_dir = "/wp-content/themes/THEME_NAME/js/"
fonts_dir = "/wp-content/themes/THEME_NAME/fonts/"

output_style = :compressed # :expanded or :nested or :compact or :compressed
sourcemap = true
line_comments = false
relative_assets = true

Encoding.default_external = "UTF-8"

http_path = "/"

css_dir = "/wp-content/themes/THEME_NAME/css/min/"

sass_dir = "/wp-content/themes/THEME_NAME/scss/"

images_dir = "/wp-content/themes/THEME_NAME/images/"

javascripts_dir = "/wp-content/themes/THEME_NAME/js/"

fonts_dir = "/wp-content/themes/THEME_NAME/fonts/"

output_style = :compressed # :expanded or :nested or :compact or :compressed

sourcemap = true

line_comments = false

relative_assets = true

テーマディレクトリ直下に配置

上記ファイルを配置するとこんな感じ。

サイト設定でCompassを有効化しよう

サイト設定を開く

Dreamweaverメニュー → サイト(S) → サイトの管理(M)から該当のサイトをダブルクリックして以下の画面を立ち上げます。

CSSプリプロセッサー－一般設定

以下のように設定しておきました。

ファイルの保存時に自動コンパイルを有効にする

をチェック入れとくと勝手にコンパイルしてくれるようです。その他のOutput file Styleやソースマップを生成、ソースコメントを作成などはconfigで設定してあるので無視して良さそう。

Compassの設定をしよう

Compassの設定項目で、

Compassを使用する

にチェックし、

Rubyベースの構成ファイルを指定で先ほど配置したconfig.rbファイルを指定します。

これが出来たら保存をします。

コンパイルされるか確かめてみよう

Sass・Compassの設定がちゃんと動作するか確かめて見ましょう。

scssディレクトリ内に、適当なscssファイル(ここではmain.scss)を作成し、保存します。

数秒待つと

/~~~/main.scss は CSSに正常にコンパイルされました： /~~~/main.css

とうメッセージが「出力」ウィンドウに出力され、以下のファイルが自動的に作成されました。

THEME_NAME/css/main.css
THEME_NAME/css/min/main.css

やったー！出来た！

まとめ

設定さえしてしまえば、DreamweaverでもSassが使えるので大変便利ですね。

黒いウインドウ怖いといって敬遠していたかた、ぜひご活用ください。

config.rb の設定方法でもっと良いやり方があれば教えてください。

[IDE] Eclipse 4.7（OXYGEN）のインストール手順と日本語化

Aptanaのアップデートが止まっている！
新しいIDEを探そう！

私は以前からAptana（Aptana Studio 3）を愛用しているのですが、2014年頃から新しいバージョンがリリースされず。

このまま使い続けるのもいいのですが、他のIDE(統合開発環境)を模索しても良い頃かと思い、AptanaのベースともなっているEclipseをインストールしてみました。

2017年の6月末にEclipseのバージョン4.7（コードネームをOXYGEN(酸素)）がリリースされており変わらず活発にアップデートがされているようです。

今回はWindows 10（64bit）でEclipseをインストールする手順をまとめてみました。

日本語化についても簡単に触れていますが不足部分はググってくださいませ。

ダウンロード

公式サイトのダウンロードページへアクセス

https://www.eclipse.org/downloads/

ダウンロードボタンをクリック。

もう一度ダウンロードボタンをクリック

ダウンロードが開始される。

お金に余裕のある方は、ダウンロード中の画面に表示される寄付を検討してみてくださいませ。

インストール

ダウンロードしてきた、「eclipse-inst-win64.exe」をダブルクリックしてインストール操作を行います。

Eclipse IDE for JavaScript and Web Developersを選択

インストールパスを指定

利用規約に同意

よく内容を読み、Accept Nowをクリック。

インストール完了まで待つ

インストール完了したらEclipseを起動

おおぉ！Eclipse！

ワークスペースディレクトリを指定

Eclipseが無事に起動しました

日本語化

Eclipseの日本語化といえば、Pleiades (プレアデス)。

公式サイトよりPleiadesのプラグインをダウンロード

Pleiades – Eclipse プラグイン日本語化プラグイン
http://mergedoc.osdn.jp/

日本語化の設定

詳しくはreadme_pleiades.txtを参照ください。

readme_pleiades.txtより、設定方法部分だけ以下に抜粋します。

1. pleiades_x.x.x.zip を解凍し、plugins、features ディレクトリーを <ECLIPSE_HOME> ディレクトリーに
コピー。(<ECLIPSE_HOME> は Eclipse デフォルトの plugins や features があるディレクトリー)
2. eclipse.ini の最終行に以下の 2 行を追加。Xverify は Eclipse 4.4 以降で必須で、これを指定しないと
起動できなかったり、一部の機能が正常に動作しない可能性があります。
Windows 以外の場合は後述の Eclipse 起動オプション参照してください。
-Xverify:none
-javaagent:plugins/jp.sourceforge.mergedoc.pleiades/pleiades.jar
3. Pleiades スプラッシュ画像を使う場合は
eclipse.ini の -showsplash org.eclipse.platform (実際は 2 行) を削除。

最低限1と2だけ行えばEclipseが日本語化されます。

まとめ

以前Javaでプログラムをしていた頃と比べるとロゴがおしゃれになっていたり、Eclipse Marketplace が出来ていたりと色々なアップデートが加えられているようです。

Eclipseを試してみつつ、IDE探しの旅引き続き行ってまいります。

Bootstrapで作られたWEBサイトを見たまま印刷(プリントアウト)する方法

Boostrapを使って作ったサイトをPC用の表示で印刷したい！

Bootstrap利用して構築してあるWEBサイトを印刷すると、見たままの状態では印刷されず、紙媒体でも読みやすいように印刷時にレイアウト等が変更されて印刷されます。

以下のURLで印刷プレビューしてもらうと、Bootstrapのデフォルトの印刷スタイルを確認出来ます。
http://onocom.net/code/bootstrap-print/default.html

これは、Bootstrapには予め印刷用のスタイルが定義されており、それが印刷時に適用されるためです。

この印刷スタイルには、

・リンクテキストの後にリンク先のURLが表示される！（ハイテク！）
・背景がすべて消える（インク代節約！）
・レイアウトがシンプルになる（タブレットやスマホ用に近い、コンテンツを読みやすいレイアウトになる！）

などなどが含まれます。
デバイスに応じて適切なスタイル（CSS）を定義すべきという素晴らしい思想だと思います。

しかし、そんなことクライアント様には関係ないようで「印刷用のスタイル？わけがわからない。安く作ってくれればいい。」「印刷すると壊れる！（印刷するとレイアウト崩れておかしくなるの意）」などありがたい意見を頂くことがあります。

印刷する環境はやはりPCなので、PC表示を印刷できるようにして欲しい。という要望です。

[Bootstrap 印刷]とかで調べると、印刷時のURLを消す方法とかはよく出てくるのですが、見たまま印刷する方法って意外と出てこないので頭を抱えておりました。

私以外にもそういうお声に頭を悩ませている方がいることを願い、今回、Bootstrapで見たまま印刷する。という方法に真っ向から立ち向かってみました。

お役に立てれば幸いです。

Bootstrapで見たまま印刷する手順

以下の手順でBootstrapサイトを見たまま印刷できるようにしていきます。

Bootstrap公式サイトから印刷用スタイル（@media print）を除外したパッケージをダウンロード
印刷調整用CSSの適用
微調整

1. Bootstrap公式サイトから印刷用スタイル（@media print）を除外したパッケージをダウンロード

まずは、Boostrapから印刷用のスタイル定義情報（@media print）を削除してあげます。

目視で該当部分を削除する方法もありますが、公式サイトのカスタマイズページやSass・Lessを使った方が間違いないでしょう。

ということでここでは、Bootsrap公式サイトのカスタマイズページを利用する前提で話を進めます。

Bootsrapのカスタマイズページ (Customize and download)
http://getbootstrap.com/customize/

このページはBootstrapのカラム幅や色など、多岐にわたるカスタマイズをウェブ上から簡単に行えるページです。
以下の方法で印刷用のスタイルを除外したBootstrapを取得します。

1-1:ページの最初の方にある大見出し「Less files」の中にある、中見出し「Common CSS」の中の「Print media styles」というチェックボックスのチェックを外し、一番下までスクロールします。

1-2:ページの一番下に「Compile and Download」というボタンがあるのでクリックしてダウンロードします。

ダウンロードしたZIPファイルには印刷スタイルの含まれないBootstrapが出来上がっています！すごい簡単！

1-3:ダウンロードしたZIPファイルの中からbootstrap.css,bootstrap.min.cssをコピーして現在のサイトで使っているBootstapファイルを上書きします。

ここまでの操作でBootstrapで構築されたサイトを印刷プレビューしてみましょう。

以下のURLで印刷プレビューしてもらうと、このステップが完了した状態の印刷スタイルを確認出来ます。
http://onocom.net/code/bootstrap-print/step1-complete.html

当初より大分改善はされているものの、スマホやタブレットのようなレイアウトになっているかと思います。手順２でその部分を改善していきます。

蛇足ですが、ダウンロードしたZIPファイルには「config.json」というファイルが含まれています。このファイル先ほどBootstrapのカスタマイズページの上部からアップロードしてあげることでカスタマイズ情報を引き継ぐことができます。

そのため、Bootstrapのバージョンが変わってもこのファイルをアップロードして再度Bootstrapをダウンロードすることで、印刷スタイルの定義されていないBootstrapのCSSファイルを簡単にダウンロードできるのです。

2. 印刷調整用CSSの適用

印刷用スタイルの定義されていないbootstrap.cssを利用すると印刷が見たままに多少近づきますが、レイアウトがスマホやタブレットのようになりがちです。

そこで私が特別に作った黒魔術のようなCSS（bootstrap-print.css）を以下からダウンロードしてサイトに適用してあげます。

bootstrap-print
https://github.com/onocom/bootstrap-print

するとどういうことでしょう。印刷プレビューがPC表示のままで印刷出来るようになっていませんか！？PC表示のまま印刷出来るという方はここまでで作業終了。

以下のURLで印刷プレビューしてもらうと、印刷対応が全て完了した状態の印刷スタイルを確認出来ます。
http://onocom.net/code/bootstrap-print/index.html

もし、一部印刷が上手く出来ない方は3.微調整を行っていきます。

3. 微調整

サイトによっては（と言うか殆どのサイトでは）、２の調整用のCSSを導入しただけでは細かな部分でおかしい箇所が出てくると思います。

そこは印刷調整用のCSSに追記するなどして一個ずつ潰していきましょう。

先ほどのbootstrap-print.cssに追記するか、以下の用にプリント用のCSS （@print）を作成して最終調整を行います。

bootstrap-print-adjuster.cssみたいなファイルを作成し、以下のように記述する

@media print {
  /* ここに印刷調整用のスタイルを定義 */
}

@media print {

/* ここに印刷調整用のスタイルを定義 */

}

さぁ、これで印刷パーフェクトになったはずです！

まとめ

ここに辿り着くまでに意外と時間がかかりました(^_^;)

印刷調整用CSSはまだまだ改良の余地があると思いますので、お気づきの点などあればリクエストをお願いします。

皆様のウェブサイトが見たまま印刷出来るようになってくれることを願います！

[jQuery] セレクトボックスで選択した値で表を絞り込む方法(プラグイン不使用、動作デモ、サンプルコード有)

表を検索したい！簡単に！

都道府県別にある情報を簡単に絞り込みたい。というご要望。

セレクトボックスに47都道府県の情報をあらかじめ設定しておきセレクトボックスを選択すると該当の都道府県を検索（絞り込み）する。

というかたちで実装を考えました。

テキストボックスだと入力するの面倒だし、都道府県で絞り込みたいだけなのでこのような形でどうだろうと。

jQueryのプラグインが色々とありましたが、自分でも簡単に表検索の仕組みが実装できそうだったので実装してみました。

参考になればと思い、ソースコードとデモサイトを作ったのでご活用下さいませ。

動作デモ・ソースコード

動作デモ

http://onocom.net/code/japan-prefecture/

ソースコード

https://gist.github.com/onocom/904991e984f1da14ef6e1d156bc6e570

ライセンス：WTFPL

好きに利用して改変して下さい。

実装したこと

セレクトボックスで選択した値(value)で表を検索（絞り込み）する機能を実装します。

ソースと解説

ソースコードサンプルと合わせてご覧くださいませ。

1.表を作る

取り敢えず検索するための表を作ります。

今回、都道府県の一覧表を作りました。

theadに見出しを。tbodyにデータを記述しましょう。

<table class="table table-borderd">
    <thead>
        <tr class="active">
            <td>番号</td>
            <td>都道府県名</td>
            <td>読み</td>
            <td>都道府県庁 所在地</td>
            <td>最大都市</td>
            <td>地方</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>01</td>
            <td>北海道</td>
            <td>ほっかいどう</td>
            <td>札幌市</td>
            <td>札幌市</td>
            <td>北海道</td>
        </tr>
        <tr>
            <td>02</td>
            <td>青森県</td>
            <td>あおもりけん</td>
            <td>青森市</td>
            <td>青森市</td>
            <td>東北</td>
        </tr>
        ・・・
    </tbody>
</table>

<thead>

<td>都道府県名</td>

<td>都道府県庁所在地</td>

</tr>

</thead>

<tbody>

<tr>

<td>ほっかいどう</td>

</tr>

<tr>

<td>あおもりけん</td>

</tr>

・・・

</tbody>

</table>

2.都道府県選択用のセレクトボックスを作る

表を絞り込む為のセレクトボックスを作ります。

<select id="pref-select" class="form-control">
    <option value="">都道府県で絞り込み</option>
    <option value="北海道">北海道</option>
    <option value="青森県">青森県</option>
    ・・・
</select>

<option value="">都道府県で絞り込み</option>

・・・

</select>

optionタグのvalueに検索キーワードを割り当てます。valueの値で検索をかけるので、以下のようにvalueと異なる表示を設定してもOKです。

<option value="青森県">青森県で絞り込む</option>

1	<option value="青森県">青森県で絞り込む</option>

また、最初のoptionのvalueは空にしておき、絞り込み解除用に使います。

3.JavaScriptを組む

キモとなるJavaScriptのコードは以下のように記述します。

コメントで処理を補足しておりますので、参考にしてみてくださいませ。

jQuery(function ($) {
    // セレクトボックスが変更されたら処理をする
    $('#pref-select').change(function () {
    
        // 選択した値を取得
        var select_val = $('#pref-select option:selected').val();
        
        // tbodyのtr数回 処理をする
        $.each($("#pref-table tbody tr"), function (index, element) {
        
            // 選択した値が空欄だったら、全ての行を表示する為の処理
            if (select_val == "") {
                $(element).css("display", "table-row");
                return true; // 次のtrへ
            }
            
            // 1行をテキストとして取り出し、セレクトボックスで選択した値があるかをチェック
            var row_text = $(element).text();
            
            if (row_text.indexOf(select_val) != -1) {
                // 見つかった場合は表示する
                $(element).css("display", "table-row");
            } else {
                // 見つからなかった場合は非表示に
                $(element).css("display", "none");
            }

        });
    });
});

jQuery(function ($) {

// セレクトボックスが変更されたら処理をする

$('#pref-select').change(function () {

// 選択した値を取得

var select_val = $('#pref-select option:selected').val();

// tbodyのtr数回処理をする

$.each($("#pref-table tbody tr"), function (index, element) {

// 選択した値が空欄だったら、全ての行を表示する為の処理

if (select_val == "") {

$(element).css("display", "table-row");

return true; // 次のtrへ

}

// 1行をテキストとして取り出し、セレクトボックスで選択した値があるかをチェック

var row_text = $(element).text();

if (row_text.indexOf(select_val) != -1) {

// 見つかった場合は表示する

$(element).css("display", "table-row");

} else {

// 見つからなかった場合は非表示に

$(element).css("display", "none");

}

});

まとめ

あえて、一般的なテキスト入力で絞り込む方法をせず、セレクトボックスで絞り込むようにしてみました。検索ワードが固定されている場合、この方が操作しやすいと思います。

もちろん上記を応用すれば、テキスト入力やラジオボタンで絞り込みなんてことも簡単に出来ます。

お役に立てば幸いです。

WordPressの検索フォームのカスタマイズ！カスタムタクソノミーを検索条件に追加する方法

WordPressの検索フォームをカスタマイズしよう

WordPressの検索フォームはキーワードを入力するテキストボックスと、検索を実行する検索ボタンで構成されています。

この検索フォームにカスタムタクソノミーを指定する方法をご紹介します。

検索条件にカスタムタクソノミーを追加しよう

以下の順序で検索フォームをカスタマイズしていきます。

searchform.php をテーマフォルダに追加
searchform.php にカスタムタクソノミー選択用のセレクトボックスを設置
検索ボックスを呼び出し

1.searchform.php をテーマフォルダに追加しよう

まずやることは、searchform.phpというファイルをテーマフォルダ内に追加することから始めます。

中身は取り敢えず空で大丈夫です。

2.searchform.php にカスタムタクソノミー選択用のセレクトボックスを設置

searchform.php をエディタで開いて以下のように書き換えます。

タクソノミースラッグ（以下例だとpref）をご自身のサイトに付け加えてあげてください。

<?php
/* 
 * 検索ボックスのカスタマイズ
 *   カスタムタクソノミーを検索条件に追加する
 */
<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
    <label>
        <span class="screen-reader-text">検索キーワード</span>
        <input type="search" class="search-field" placeholder="キーワードを入力" value="<?php echo get_search_query() ?>" name="s" />
    </label>
    <label>
        <span class="screen-reader-text">都道府県で絞り込み</span>
        <?php
            $selected = get_query_var("pref",0);
            $args = array(
                        'show_option_all' => '都道府県で絞り込み',
                        'taxonomy'    => 'pref',
                        'name'        => 'pref',
                        'value_field' => 'slug',
                        'hide_empty'  => 1,
                        'selected'    => $selected
                    );
            wp_dropdown_categories($args);
        ?>
    </label>
    <input type="submit" class="search-submit" value="検索" />
</form>

<?php

* 検索ボックスのカスタマイズ

* カスタムタクソノミーを検索条件に追加する

<label>

<span class="screen-reader-text">検索キーワード</span>

</label>

<label>

<span class="screen-reader-text">都道府県で絞り込み</span>

<?php

$selected = get_query_var("pref",0);

$args = array(

'show_option_all' => '都道府県で絞り込み',

'taxonomy' => 'pref',

'name' => 'pref',

'value_field' => 'slug',

'hide_empty' => 1,

'selected' => $selected

);

wp_dropdown_categories($args);

</label>

</form>

2-1. カスタムタクソノミーを複数設置したい場合

以下部分をコピーして、formタグ内に追加することで、複数のカスタムタクソノミーからのAND条件検索も行えます。

●●●・・・タクソノミーラベル（例：都道府県）
■■■・・・タクソノミーの名前[半角英数]（例：pref）

  <label>
        <span class="screen-reader-text">●●●で絞り込み</span>
        <?php
            $selected = get_query_var("■■■",0);   // 選択状態となるタクソノミースラッグを取得
            $args = array(
                        'show_option_all' => '●●●で絞り込み', // 何も指定しない場合のラベル（要らなければこの行削除してOK）
                        'taxonomy'    => '■■■',   // タクソノミーの名前
                        'name'        => '■■■',   // タクソノミーの名前
                        'value_field' => 'slug',   // タクソノミーのスラッグをセレクトボックスのオプションに設定する
                        'hide_empty'  => 1,        // 空のタクソノミーは非表示(0にすると表示)
                        'selected'    => $selected
                    );
            wp_dropdown_categories($args);
        ?>
    </label>

<label>

<span class="screen-reader-text">●●●で絞り込み</span>

<?php

$selected = get_query_var("■■■",0); // 選択状態となるタクソノミースラッグを取得

$args = array(

'show_option_all' => '●●●で絞り込み', // 何も指定しない場合のラベル（要らなければこの行削除してOK）

'taxonomy' => '■■■', // タクソノミーの名前

'name' => '■■■', // タクソノミーの名前

'value_field' => 'slug', // タクソノミーのスラッグをセレクトボックスのオプションに設定する

'hide_empty' => 1, // 空のタクソノミーは非表示(0にすると表示)

'selected' => $selected

);

wp_dropdown_categories($args);

</label>

3. カスタマイズした検索ボックスを呼び出し

検索ボックスを表示させたい箇所のテンプレート（sidebar.php等）に以下のコードを記載します。

<?php get_search_form(); ?>

1	<?php get_search_form(); ?>

これでカスタマイズした検索ボックスが表示されるはずです。

CSSの調整等はよしなにしてくださいませ。

まとめ

結構簡単に検索条件にタクソノミーを追加できた！

その他にも、特定の日付範囲内の記事を検索する。とかもやろうと思えば出来ます。その場合、上記以外にも修正が必要です。それはまた気が向いたら追記しようかな。

今回想定するDreamweaverのサイト設定

今回のサイト設定・構造

空のディレクトリを作成しよう

scss ディレクトリ

css, css/min ディレクトリ

fonts, images, js ディレクトリ

configファイルを配置しよう

Gist：Dreamweaverでcompassを動作させようとした時のconfig.rb

config.rb

config_prod.rb

テーマディレクトリ直下に配置

サイト設定でCompassを有効化しよう

サイト設定を開く

CSSプリプロセッサー － 一般設定

Compassの設定をしよう

コンパイルされるか確かめてみよう

まとめ

Aptanaのアップデートが止まっている！ 新しいIDEを探そう！

ダウンロード

公式サイトのダウンロードページへアクセス

インストール

Eclipse IDE for JavaScript and Web Developersを選択

インストールパスを指定

利用規約に同意

インストール完了まで待つ

インストール完了したらEclipseを起動

おおぉ！Eclipse！

ワークスペースディレクトリを指定

Eclipseが無事に起動しました

日本語化

公式サイトよりPleiadesのプラグインをダウンロード

日本語化の設定

まとめ

Boostrapを使って作ったサイトをPC用の表示で印刷したい！

Bootstrapで見たまま印刷する手順

1. Bootstrap公式サイトから印刷用スタイル（@media print）を除外したパッケージをダウンロード

1-1:ページの最初の方にある大見出し「Less files」の中にある、中見出し「Common CSS」の中の「Print media styles」というチェックボックスのチェックを外し、一番下までスクロールします。

1-2:ページの一番下に「Compile and Download」というボタンがあるのでクリックしてダウンロードします。

1-3:ダウンロードしたZIPファイルの中からbootstrap.css,bootstrap.min.cssをコピーして現在のサイトで使っているBootstapファイルを上書きします。

2. 印刷調整用CSSの適用

3. 微調整

まとめ

表を検索したい！簡単に！

動作デモ・ソースコード

動作デモ

ソースコード

実装したこと

ソースと解説

1.表を作る

2.都道府県選択用のセレクトボックスを作る

3.JavaScriptを組む

まとめ

WordPressの検索フォームをカスタマイズしよう

検索条件にカスタムタクソノミーを追加しよう

1.searchform.php をテーマフォルダに追加しよう

2.searchform.php にカスタムタクソノミー選択用のセレクトボックスを設置

2-1. カスタムタクソノミーを複数設置したい場合

3. カスタマイズした検索ボックスを呼び出し

まとめ

CSSプリプロセッサー－一般設定

Aptanaのアップデートが止まっている！
新しいIDEを探そう！