今回はDreamWeaverでの検索/置換機能についてです。

DreamWeaver内で[ctrl+F]を押すと検索/置換ウィンドウが開きます。

ここからコード内から検索/置換機能を使っていきます。

まずは検索機能
例として「pic3」と含んだテキストを探したい場合

検索項目に「pic3」と入力をし「次を検索」を選択します。

すると、

コードの中から「pic3」が含まれる箇所が選択されます。

次に置換機能

例として先ほどのコードのタグを「ul」から「ol」に変更したくなった場合
検索に「ul」、置換に「ol」と入力し
置換ボタンを選択します。

すると、

ul
「ul」が「ol」に置き換わりました！

この機能は特に同じ表記を一括で変更したい場合とても便利です。

先ほどのコードで画像の拡張子を「gif」から「png」変えたいとき

検索「gif」　置換に「png」を入力しすべてを置換を選択！

一瞬ですべて置き換わりました。
手打ちでいちいち修正していると時間がかかってしまう作業もこれで時短！

基本としては以上ですが、正規表現を使うとより高度な検索/置換機能が使えるので
もし後で面倒くさい修正が必要な場合でも使いこなせば
箇所を指定してワンクリックで終える事もできるのも夢じゃない。
まさにドリームな機能！
DreamWeaverの検索/置換機能でした。

ページ内リンクを指定する時に、急に画面が切り替わると現在の場所を見失うことがあります。
それを、解消するためにスクロールで指定の位置まで移動する設定にjQueryを使って行います。

■ページ内リンクをスクロールで移動するやり方

1.ボタンを作成します。

2.head内でjQueryを呼び出します。

3.その後に以下のスクリプトを記入します。

★完成★

webサイトを作る際は、そのサイトを見るユーザーがいかに見やすいかを意識して作るように心がけましょう。

＜参考サイト＞

【jQuery】ページ内リンクをするするーっとスムースにスクロールするJavascript ｜ KLUTCHE

「Preserve Editor Scroll Position」というプラグインを使うと、WPで投稿や編集作業をしている記事を下書き保存したりした時に、スクロール位置を現状のまま保持できるプラグインです。
標準だと記事の先頭に戻ってしまうため、毎度同じ箇所の修正を続けて行いたい場合に不便ですが、このプラグインを導入すれば解消することができます。

■「Preserve Editor Scroll Position」プラグインの導入の仕方

1.プラグインより、インストールします。

2.最大行表示エディターと集中執筆モード機能を有効化します」項目のチェックボックスをはずしましょう。

3.投稿中文章で、下書き保存してもタブが動かなくなります。

★完成★

非常に簡単なプラグイン導入で、無駄な業務が減りました。

無駄な時間を短縮していき、楽しくWPLIFEを。

＜参考サイト＞

WordPressで記事を下書き/公開した際に、エディタのスクロール位置を固定するプラグイン・Preserve Editor Scroll Position – かちびと.net

「Preserve Editor Scroll Position」プラグインでエディタのスクロール位置を固定する | vdeep

WordPressではあらかじめ設定された画像サイズ（大・中・サムネイル）とは別に、オリジナルの画像サイズも保存されます。
アップロードするオリジナルの画像が大きすぎると、いくらメディア設定上でアップロードする画像サイズに制限をかけてもファイルサイズの大きな画像がアップロードされ続けてしまいます。
Imsanityをつかってオリジナルの画像自体をリサイズしてみましょう。

■画像のリサイズによるメリット

1.サーバー容量への負担が軽減されます
2.サイトの表示速度が速くなります

■Imsanityの使い方

1.Imsanityをインストールします。

2.設定の中のImsanityをクリックします。

3.設定の中の初期設定と説明です。

4.以下の数値に変更します。

★完成★

Imsanityを使えば今までの画像ファイルを一括でリサイズしたりすることも出きるので、汎用性もありますし、遅れてでもサイトに設定しておきましょう。

＜参考サイト＞
▶画像を自動リサイズするWordPressプラグインの設定方法
▶WordPress アップロード時に画像をリサイズしてくれる「Imsanity」

キープイットシンプル、ストゥピッド？
正確に言うと…
Keep It Simple, Stupidのことです。俗にKISSメソッドと呼ばれています。

■KISSメソッドとは、

ソースコードやデザイン、ページ構成などをできるだけシンプルに心がけることです。
直訳で、「誰でもわかるようにシンプルにしょう」と言う意味です。

KISSメソッドはKISS Principle（KISS原則）と呼ばれることもあり判断に迷ったときに立ち返るべき原理です。

■効果

1.ソースなどをシンプルにすることで、コードの打ちミスなどが減りトラブルになりにくい効果があります。
2.コードが少ないことで、ファイルサイズが小さくなりわかりやすくなります。

■まとめ

WEBサイトを作成する上で、心がけておかないといけない考え方になります。
SEOにとっても、単純な文章であることは、重要なことになるので、シンプルな作りにするように心がけましょう。

＜参考サイト＞
▶Keep it Simple, Stupid | SEO 検索エンジン最適化

▶KISSメソッド | 株式会社ネオロジー

DWなら、置換昨日を使って指定した文字を一括で書き換えることができます。
一括置換を覚えれば、時間短縮になるので、しっかり覚えておきましょう。

■一括置換のやり方。

（今回は例として「テスト文章です。」を「変更後文章です。」に一括変換します。）

1.「ctrl」を押しながら「f」を押します。

2.出現したダイアログボックスの中の検索に文字を挿入します。

3.現在のソースがこちら。

4.検索と置換に変更したい文字を挿入します。

5.全て置換をクリックして完了です。

★完成★

一括置換は慣れてくると非常に便利ですが、置換したくないソースも変更してしまう場合が
ありますが、仕事での作業が格段に捗るのでしっかり癖付けていきましょう。

ソースフォーマットとは、HTMLやCSSなどのコードを整理する方法のことです。
DWでは、標準で備わっている機能なので、コーディング中にバラバラになってしまったコードは定期的に整理して、コードを書き損じないようにしましょう。

■ソースフォーマットのやり方。

1.整理したいHTMLを開いてコマンドを押します。

2.その後、ソースフォーマットの適用をクリックします。
すると以下のように整列してくれます。

・before

・after

★完成★

DWでは「Alt」+「c」+「a」を順番に押すとソースフォーマットできるので、早々にショートカットコマンドを癖づけるようにしましょう。

Wordpressは画像をアップロードするとアップロードした画像の他に、自動で大きいサイズの画像と小さいサムネサイズの画像の3種類ができます。

サムネイルとか自動で作ってくれることはメリットになるのですが、無駄な画像がたくさん増えるとサーバーがいっぱいになってしまうので、定期的に消さないといけません。

以上のような、ちびちび消していくのは面倒ですし時間がかかるので、無駄な画像が生成されないように設定します。

■メディア設定画面でオプション変更。

1.WordPress管理画面で設定の中の「メディア」をクリックします。

2.画像サイズの中の「サムネイルのサイズ」「中サイズ」「大サイズ」の数値を全て0にします。

・before

・after

★完成★

全てを0に変更すると、画像生成はできないのでサーバーに負担がかかりません。
無駄な画像が増える前に早めに設定してしまいましょう。

＜参考サイト＞
WordPressで画像アップロードしたときにムダなサムネイルを自動で作らせなくする方法