コスメ水槽waterTank

30代・乾燥肌の管理人の年齢肌対策。スキンケアコスメの紹介と、時々メイク。綺麗なおばさん目指します。

[WordPress]ブログのカスタマイズに、あると便利なソフトやブラウザの機能 10選

 

20150706_09

ブログのカスタマイズをしてみたいけど、どんなソフトがあると便利かしら? という方のとっかかりに少しでもなれれば幸いです。
ここでご紹介するソフトはすべてWindows上で動作するものです。

FTPクライアント

WordPress使い始めて最初に戸惑ったのが、「ダッシュボードからテーマの編集はできるけど、自分で新しく作ったphpファイルやcssファイルをダッシュボードからアップできない」ことでした。

逆に言うと、テーマのカスタマイズをあまりしないのであればFTPクライアントは不要かと思います。

FTP = File Transfer Protocol(ファイル・トランスファー・プロトコル、FTP、ファイル転送プロトコル)。インターネット上でファイル転送するのに使います。参照:Wikipedia

FFFTP

FFFTP

FFFTP (エフエフエフティーピー) プロジェクト日本語トップページ - OSDN

左側にクライアント(主に自分のパソコン)、右側にサーバ(例えばWordPressをインストールしたとこ)を表示して、グラフィカルに、ファイルやディレクトリのアップロード・ダウンロードができます。
ずいぶん前からあるソフトのような気がします。Windows98のPCにこれ入れてた記憶があるようなないような。

FileZilla

FileZilla プロジェクト日本語トップページ - OSDN

すみません、私のパソコンにはインストールしていないのでスクリーンショットがありません。FFFTPよりFileZillaの方がイマドキっぽいかな……という理由で載せてます。

ファイル比較ソフト

修正前後のファイルやディレクトリを左右に並べて比較できるツール。ソースの修正後に動かなくなっちゃった! でもどこをどういじったかわかんなくなっちゃった! とかいう時にも便利です。

WinMerge

WinMerge

WinMerge 日本語版

左右にファイルを並べて比較。色が付いている行が、差異のある行です。差異の行をダブルクリックすると、下のパネルにクローズアップされます。私は比較ソフトは殆どこれを使っています。

DF

DF

DFの詳細情報 : Vector ソフトを探す!

DF(でふ)と読みます。以前はこっちを使っていました。やはり左右にファイルを並べて、比較できます。比較結果を紙に印刷する機能は、WinMergeよりDFの方がいいかも。

テキストエディタ

ファイルの拡張子(.htmlとか.phpとか)からプログラミング言語の種類を判定して、予約語やカッコやコメントに色を付けて表示してくれたりします。ソースがとても見やすくなり、作業効率が上がります。ダッシュボード上で全て編集するなら不要ですが、改行コードや空白文字の可視化も手軽にできるので、パソコンにインストールしておくと何かと便利。

サクラエディタ

サクラエディタ

サクラエディタ

私はもうこれがないと生きていけない。Ver1.x系(ANSI版)とVer2.x系(Unicode版)があります。扱える文字種が多いので2.x系がオススメです。

何故かデフォルトの状態ではPHPの強調表示が設定されていないので、PHPを扱う場合は以下のサイトなどを参考にされるといいと思います。
» PHP環境構築 サクラエディタの設定 Tech Fun.cc

UnEditor

UnEditor

YokkaSoft webpage

サクラエディタと違って最初からPHPの強調表示(色分け)ができていますので、プログラミングやブログのカスタマイズが完全に初めてという人はUnEditorの方が手軽でいいかも?

秀丸

秀まるおのホームページ(サイトー企画)-秀丸エディタ

20年の歴史がある超有名エディタ。高機能。使いやすい。ユーザー数が多いので、ネット上で情報も多い。「テキストエディタといえば秀丸」というくらいのソフト。なのですが、シェアウェア(有料)なので自分のPCには入れていません……。よってスクリーンショットもありません。興味のある方は上のリンクから公式サイトへどうぞ。

ブラウザの開発者ツール(F12ボタン)

とりあえず、ブラウザ(Internet ExplorerとかFireFoxとかChromeとか)を起動した状態で、キーボードのF12ボタン押してみて下さい。もしくは、ブラウザで表示しているサイト上で、右クリック → 「要素を検証(要素を調査)」。
今表示されているサイトのHTMLやCSS、Javascriptをリアルタイムで見られます。

Internet Explorer

InternetExplorer

FireFox

20150706_07

FireFox標準でこの機能が搭載されるまでは、「FireBug」というアドオンで実現していたので、今もそちらを使っている人も多いかも。

Chrome

20150706_08

私はChromeを主に使っています。User-agentの偽装機能もあるので、簡易的に他のブラウザの表示確認したい~という時にも(偽装というと響きがアレですが、Emulationのことです)。

 - ブログひっこし