今日の自分を変えよう！時代と共に成長する

Hoxmoの何がいけないのか、何が問題なのかを、日々提起していく事で改善が始まる。

プログラムをさわる為の最低限の準備

WordPress設定 WordPressをはじめよう

これからWordPressを設定やカスタマイズしていくのですが、最低限必要なツールを用意しておかなければいけません。

Windowsをお使いの方、Macをお使いの方、いずれも無料で使えるツールを紹介していきます。

また、今回は、このサイトで紹介するソースコードを、コピペする方法なども予備知識としてお伝えしておきます。

用意しておく必要があるツールは

テキストエディター

FTPツール

です。

また、画像などを加工する場合は、画像の加工ソフト等が必要ですが、OSに標準で付いているペイントなどからはじめられますので、ここでは、HTMLやCSS等を記述してアップロードするというWeb構築に最低限必要なものだけ取り上げてみます。

テクストエディターについて

「テキスト・エディター」って、OS純正の「メモ帳」みたいなものですが、メモ帳などは付加した機能があり、純粋にテキストだけを書くことが出来ません。極端に言うと「Office Word」なども文字装飾があり純粋な文字だけを抜き取るのは一手間かかります。

そこで、用意して頂きたいのが、「テキスト・エディター」です。

「テキストエディター フリー」と検索すれば、無料で配布されているエディターがいっぱい見つかりますが、リッチテキスト等を書く高機能エディターではなく、プログラミングに使用する用途のものが必要です。

ちなみにHoxmoは、Windowsでは「TeraPad」「サクラエディター」、Macでは、「CotEditor」を使っています。

本格的にプログラミングをする場合は、CSSを自動生成出来るような有料のエディター等もありますが、入門用としてはかえって使いづらいかもしれませんので、上記の無料のディタ−をオススメします。

FTPソフトについて

FTPとは、File Transfer Protocol（ファイル・トランスファー・プロトコル）の略で、「ファイル転送プロトコル」です。ちょっとわかりにくいですね。

簡単に言うと、自分のパソコンにあるデーターを、離れた場所にあるサーバー等にファイルを送ったり、その逆にサーバーにあるデータをパソコンにダウンロードしてコピーするための仕組みです。

実はこの作業、FTPソフトを使わなくても出来るのですが、FTPソフトはこの作業をGUI操作(見た目で感覚的に操作)で簡単に出来るようにしてくれます。

FTPを行う方法は色々ありますが、ここでは３種類お話しておきます。

１．サーバーのFTP機能を利用する方法

レンタルしたサーバーの標準機能で転送する方法

ロリポップには、ユーザー管理ページの「Webツール」に「ロリポップFTP」という機能があります。ダイレクトでロリポップのFTPを開くことも出来ます。

ftpまた、さくらインターネットでも、同様にツールに「ファイルマネージャー」という機能が付属しています。

しかし、いずれも使いにくいし、ブラウザ上で動作させるので動作が重たいと感じます。

2.FTPソフトを利用する

使いやすさで言うと、左ウインドウに手元のパソコンのフォルダが表示され、右ウインドウに転送先のサーバーなどのディレクトリが表示される２画面の方が良いと思います。

下の画像はMacで使っている「FileZilla」というソフトです。

FTP2

このFTPソフトもテキストエディター同様、無料で入手出来ますので、用意しておきましょう。

Windowsの場合は「FFFTP」が、人気を集めており、使い方を説明されているサイトも多く有りますので、理解しやすいと思います。

「FFFTP」は、漢字などの「マルチバイト文字」を名前に含むようなファイルも扱えるので、Windowsの場合はやはり「FFFTP」が便利かもしれません。が、マルチバイト文字はサーバーによってエラーを起こす場合もありますので違操作など注意が必要ですね。

Macの場合なら「FileZilla」が、日本語化されていいて使いやすいと思われます。

もう一つ方法を説明しておきます。

3.Webブラウザの拡張機能を利用する

Firefoxというブラウザをご存知でしょうか？

よく使われているブラウザは「Internet Explorer」や「Safari」などで、最近では「Chrome」も人気が高まっています。

そのブラウザの拡張機能でFTPが使えるのですが、中でも分かりやすい画面なのは「Firefox」で、オープンソース・クロスプラットフォームのウェブブラウザということもあり、Windows、Mac OS X、LinuxなどのOSで正式にサポートされています。

FTP3

Firefoxをインストールした後、「FireFTP」と検索すると表示されるアドオンをインストールすると使用できます。

(画面は本家サイトからキャプチャーしたものですが、実際は日本語化されています)

ftp5

ディレクトリ内部だけではなく、ディレクトリの階層が表示されて、デザインともに違和感のない感じがとても良く、HoxmoはMacからのFTPはこの「FireFTP」を愛用しています。

余談ですが、開発ツールなども結構充実していて、個人的には好きなのですが・・・FireFTPでファイルを「ドラッグ&ドロップ」の操作は出来ないと思います(そういう使い方はしないので良くわかりませんが)ので、使い勝手の感想は人それぞれですね。

ftp4

用意しておくツールは今のところ、この2つで大丈夫だと思います。(今後必要があればまた説明しますね)

当サイトで公開するソースのコピー&ペースト方法

これから「WordPress」をカスタマイズしていく上で、CSSやPHPなどのソースを触っていきます。

その際、皆さんにはコピペで使えるようにソースを掲載します。

他のサイトでご覧になった事があるかと思います。

[code language="CSS"]

/*--見出しライン--*/

.m_2_r{

background-color: #FFFFFF;

padding-top: 2px;

padding-right: 20px;

padding-bottom: 2px;

padding-left: 10px;

font-size: 17px;

font-weight: 700;

border-bottom: medium solid #d7d7d7;

border-left: 5px solid #cc3300;

border-bottom: 1px solid #d7d7d7;

}

[/code]

こんなやつですね。

行番号を入れなければ、コピペもしやすいのでしょうが、便宜上、行番号を入れさせてもらいます。

コピーする時に行番号まで選択していまうので、使いにくいと思いますので簡単にコピーする方法を説明します。

上のソースは実物です(下は説明用の画像です)。上のソース画面にマウスを持っていくと、下の画像のように右上にアイコンが出てきます。

この赤丸内に表示されているアイコンをクリックすると、別画面でソースだけが表示されますので、全選択してコピー出来るようになります。

45

ソースを記述する場所

つまり、現在プログラムが置いてある場所ですが、WordPressの管理画面の左のツールバーの「外観」から「テーマ編集」で表示されます。

35

画面には、意味不明と思われる文字が出ており、右側のツールにも多くのファイルのリンクが並んでいます。

主に変更するのは、右下のスタイルシート内の２つです。

1.「スタイルシート」・・・ページの表示スタイルを設定します。

2.「ビジュアルエディターのスタイルシート」・・・記事投稿エディターのスタイルを設定します。

実は、テーマによってこの「ビジュアルエディターのスタイルシート」がありません。これがないと投稿時に実際のWebの表示と同じような投稿画面を作ることが出来ないのです。

このCSSをあとから作ることも出来るのですが、難しくなるので標準で備わっているテーマを選んだ理由のひとつです。

CSSには既に、多くの記述がされていますので、変更を加えたいところだけを触っていく事になります。

問題解決にはすこし勉強が必要ですm(_ _)m

が・・・この方法ひとつ大きな問題があるのです。

はじめの頃にお話した思いますが、「WordPress」のバージョンの更新が３〜４ヶ月に１回くらいで行われています。

同じようにテーマやプラグインも更新されます。

テーマを更新する際には、変更箇所をバックアップしておいて、更新後にペーストして戻す方法を取らなければいけません。

変更した所をメモとして保存しておき、更新後、新しいCSSに貼り付けするという手間がかかります。

本来は以下の画像のように、シンプルにすることが出来ます。（上の画像と同じ現在のテーマです。この方が見やすいですね。）

36

現在インストールしているテーマに自分のオリジナルの「小テーマ」を設定します。

すると変更したいシートだけを表示させて、何も記述のない(ヘッダーはありますが)シートに書いていくだけで見やすい状態です。

画像ではテーマが「hoxmo」になっていますが、この「小テーマ」の名前は自由に付けれます。

この方法の場合、もし「WordPress」や「テーマ」が更新されても、このシートは変更される事はありませんので、更新のたびにコピペする手間がなくなります。

ま、それは大した手間で無いにしても、間違って不必要な部分を触ってしまう心配からは解消されます。

ただし、この作業を行うには、今回説明した「テキストエディター」と「FTPツール」をフルに活用する事になります。

ちょっと難しいかもしれませんが、WordPress導入の参考資料として、この「子テーマ」を作る方法で説明を続けていきます。

もし、「小テーマ」が作れない場合でも、現在のスタイルに変更を加える事でスタイルを変更することが出来ます。変更する箇所がテーマ自体のCSSか、「小テーマ」のCSSかの違いだと考えて頂ければ良いかと思います。

ここで説明するカスタマイズは一例にしか過ぎません。なるべく皆様にご理解頂けるよう説明いたしますが、少しだけ勉強するつもりでこのサイトを参考のひとつにして頂ければ良いかと思います。