wordpressによるホームページ作成 
ーwordpressによるかんたんなホームページの作成ー

ホームページ作成はhtml言語で記述されています。ただし、htmlで一から記述すると、ページが増えたときのリンクやタグの作成の編集と管理が複雑になります。このためにwordpressを代表とする無料のwebアプリケーションが現れ利用されています。googleのサイトもその一つです。wordpressの利点は無料でホームページを作成でき、プラグインなどが豊富である点です。ブログには多くwordpressが利用されています。ここではwordpressを利用したホームページの作成方法を紹介します。学内ではここここをクリックして別のマニュアルもチェックしてください。
またwordpressには多くのマニュアルサイトがあります。(1)初心者サイト(2)記事の投稿のまとめ(3)固定ページの作成方法(4)2時間でHPを作成する方法、も参考にしてください。

1. アカウントの取得
2. テーマの選択
3. 投稿と固定ページ
4. 新規ページの作成
5. 外観→メニューによるナビゲーションの作成
6. ナビゲーションのリンクの作成
7. 新規ページのビジュアル編集とテキスト編集ー文字色と背景色ー
8. テキスト編集におけるhtmlコマンドの利用
9. 画像の追加と大きさの編集(画像のサイズや回り込み防止)
10. 画像レイアウトのコツ
11. ページ内のLinkによる移動(長いページの時に便利)
12. 表の作成
13. googleの認証を受ける

WordPressについて

 wordpressは現在ホームページの半分ほどに用いられています。通常はサーバーにwordpressをインストールして利用します。ここではwordpress.com社が無料あるいは有料で公開しているブログ形式のサービスを利用してホームページを作成する方法について説明します。
wordpressはデータベースを利用してコンテンツを整理して利用しています。データベースにはmysqlを用いています。基本的には画像などは一度wordpressサーバにアップ(転送)してから利用します。
wordpressの編集画面にはwebに表示される方式と、テキストエディタで表示される方式があります。htmlタグに慣れてくると(利用するタグが決まってくる)テキストエディタが利用し易くなります。

1. wordpressのアカウントの取得

wordpressのアカウント取得は簡単です。以下の手順に従ってください。
1) 管理するためのメールアドレスを用意する(gmailを作成)
2) a.wordpress.comに接続し、「サイトを作成」をクリックし、必要な情報を入力(メールアドレス、ユーザー名、パスワード、ページのURL)
3) メールをチェックしてwordpressから来ているリンクをクリックし、作成したURLを公開する

1) メールアドレスは初期値で後で変更可能です。グループで管理する場合、新しいグループで共有するためのアカウントを作成することが望まれます。このアドレスにwordpressから届くメールで次に作成するURLをアクティブにするため、メールを確認できるようにしておきます。
2) 以下のリンクをクリックして、メールアドレス、ユーザー名、パスワード、ページのURLを入力し、freeを選択してブログを作成します。一度メールアドレスを登録すると同じアドレスで2つのURL(Uniform Resource Locator: ホームページのアドレスで世界でおなじものはない)は管理できません。必要なメールアドレスはwordpressのメールアドレスの変更記事から変更できるようです。
アカウント取得は以下のところをクリックして必要項目を入力してください。wordpressのアカウント取得
メールアドレス、ユーザー名(ログイン時に必要)、自分のログインパスワード、ブログのアドレスなどを入力後、基本の無料ブログの下にある”ブログを作成(Sign up)”をクリックします。(有料のものもあるので注意してください)
学生の方には是非、生涯記録ノートしてのページ作りをおすすめします。また、非公開にしていれば他人に見えることがありません。講義のノートや記憶しておくことを、項目別に分けてリンクしておけば、一生(おーばーですが)利用できるMy noteになります。wordpressはスマートフォンからも記事をアップできるので、重要項目や関連づけておきたいことを、アップして整理しておきましょう。リンク張りを含めて整理は画面の広いPCで行う方が簡単です。また、検索することを考えると、このページのように、項目を増やしてLinkを張って同じページに長い記事を書く方がよいかもしれません。
3) wordpressから届いたメールにあるリンクをクリックして作成したURLを公開します。この作業をしないと公開できないため作業には確認できるアドレスの準備が必要です。次回からのページ編集ためのloginにはこのメールアドレスか、または2)で作成したアカウントでログインできます。

2. テーマの選択

トップへ

アカウントを取得して、自分のページにログインした後、まずは”外観”からテーマの変更をおこないます。ページの雰囲気を決めるのはこのテーマです。(ただし、テーマがすでにきまっていれば、あとで説明するヘッダー画像で全体の雰囲気を変えることができます。)テーマはページデザインと関連しています。たくさんのサンプルがあります。ここでも有料なものを選択せずに無料のものを選択するのがよいでしょう。

3. 投稿と固定ページ

トップへ

wordpressはブログ形式を主としてデザインされているようです。一方、固定ページを利用すると通常のホームページのように作成できます。

4. 新規ページの作成

トップへ

ログインしたら、左のナビゲータのダッシュボードの参加サイト一覧を開きます。現在の固定ページを含む状況が示されます。
固定ページの一覧のなかから編集するページを選択するか、固定ページ/新規作成で新しい固定ページを作成します。
固定ページにはタイトルを付けます。タイトルに従ってURLが日本で作成されるので、”編集”をクリックして、できればhtmlページ名を英語にしましょう。
“ビジュアル”では画像の大きさ変更などグラフィカルユーザーインターフェイス(GUI)を利用して変更可能です。しかし、画像周囲へのテキストの周り込みの禁止などhtmlコマンドなどは”テキスト”モードでないと記述できません。また、一度テキストモードで書いてビジュアルモードにするとせっかく書いたhtmlコマンドが消されてしまいますので注意をしてください。
新規ページの追加

書き終わったら右側にある”下書きとして保存”か”公開”をクリックし変更を保存します。”変更をプレビュー”は保存する前の状態を確認することができます。または、”固定ページを表示”をクリックしてもページを確認できます。

5. 外観→メニューによるナビゲーションの作成

トップへ
左側にナビゲータを作成すときには、まず、固定ページを作成し、設定→外観→メニューを開いて、左側下にある固定ページの一覧からナビゲータに追加する固定ページを選択し、チェックボックスにチェックを入れ、メニューに追加をクリックします。
メニューに追加

6. ナビゲーションのリンクの作成

トップへ

左側の設定のダッシュボードの下のリンクを開きます。新しいカテゴリを追加するときは、リンクカテゴリが必要なら、新しいカテゴリ名をいれて追加します。次にリンク名をいれてリンクをURL、名前、説明などを入力し、最後にカテゴリを選択し、リンク追加ボタンを押します。

7. 新規ページのビジュアル編集とテキスト編集ー文字色と背景色ー

トップへ

4で書いたように通常はテキストモードでページを作成します。ただ、ビジュアルモードではhtlmコマンドを知らなくても簡単に幾つかの効果を視覚的に確認できます。従って、効果を付ける場合、ビジュアルモードで効果を付け、それをテキストモードに切り替えて、その部分をコピーし、編集中のテキストモード画面にコピーして埋め込みます。
例として文字に色を付ける場合
(1) 新規追加で新しい固定ページを開き、テキストを書きビジュアルモードでテキストに色を付けます。
テキストを色づけ

(2) テキストモードにしてhtmlコマンドを確認し、コピーします。
<span style=”color: #ff0000;”>文字の色つけ</span>
<span style=”color: #ff0000;”>赤い文字</span>
(行間スペース)
<span style=”color: #993366;”>紫色の文字</span>
(行間スペース)
<span style=”color: #33cccc”>青色の文字</span>
(3) 編集中のテキストモードのページに移動し、ペーストします。更新して固定ページを表示させて確認します。(行間のスペースはカットしました)
*ビジュアルモードでは行間にスペースが自動的に入りますが、テキストモードでは入りません。
文字の色つけ
赤い文字
紫色の文字
青色の文字

さて次は背景色ですが、これはビジュアルモードではできません。従ってテキストモードで換えます。ただ、色番号は上で利用した文字色で調べられる番号(例えば青は#33cccc”)を利用すると楽です。文字色はRGBの順(web色コードwiki)で指定されています(詳細は色見本などをご参照ください; http://www.hi-ho.ne.jp/douton/htmlcolor.html)。
例えば紫色の背景であれば次のように記述します。その下に実際の効果を表示します。
<span style=”background-color: #D8BFD8;”>文字に薄紫色の背景色を付ける</span>
文字に薄紫の背景色を付ける
これに”見出し2″にするとその効果(フォントサイズを変更)は以下のようになります。

文字に背景色を付ける

8. テキスト編集におけるhtmlコマンドの利用

トップへ
(1) リンクは以下のように、記述する。titleに続くところは表示されない説明で、後ろの文字は表示される部分となる。
<a title=”リンクの説明(表示されない)” href=”http://www.meiji-u.ac.jp/XXXXXXX/index.html” target=”_blank”>リンクの説明(表示される)</a>
(2) リスト表示と段落番号入力(LIとOL):リスト表示するには<LI>タグを利用します。利用方とてはリストの各項目を<li>と</li>で囲みます。全体を<ol>と</ol>で囲みます。番号の代わりに点を利用するには<ul>と</ul>で囲みます。
以下のようなコマンドを記述すればその下の様に表示されます。
<ol>
一日の予定
<li> 物理の講義
<li> 生物の実験
<li> 英文論文抄読会
</ol>

表示例

    一日の予定

  •  物理の講義
  •  生物の実験
  •  英文論文抄読会(図による表示例)

    (3) 特殊記号(メタキャラクタ)などの表示についてはHTMLコマンドで決められています。例えば、”±”などの記号を表示させるコマンドとしては±と記述します。その他の表記についてはこのページなどを参照するとよいかもしれません。

    9. 画像の追加と大きさの編集(画像のサイズや回り込み防止)

    トップへ

    画像は最初にサイズを小さくしておくとよでしょう。wordpressでは横720ピクセル以上あるの画像は自動的に720に圧縮されます。縦が小さい場合は横だけ圧縮され、縦横比が変わってしまいます。このため720ピクセル以下でアップする画像を用意しておきます。また、多くのwordpressサーバには画像データが多く蓄積するため、アップした画像を調べて不必要なものを削除すべきです。しかし、実際にはどれが不必要かを調べていくときには難しいので、できるだけアップする画像は小さめにしておく必要です。それぞれのアカウントにはデータを入れるサイズも有限です。wordpressにアップした画像のサイズを縮小したり拡大したりできます。”ビジュアル”でおこなうことも可能ですが、”テキスト”モードでサイズを変更する方法を説明しておきます。まず”メディアを追加”のコマンドで追加した中に以下のように画像サイズを規定しているところがあります。
    <a href=”http://www.meiji-u.ac.jp/md-medinfo/files/wordpress_menu.png”><img alt=”メニューに追加” src=”http://www.meiji-u.ac.jp/md-medinfo/files/wordpress_menu.png” width=”202″ height=”223″ /></a>

    この、”width”と”height”の数字を同じ割合で小さくしたり大きくしたりします。縦と横に等しい縮小率を用いないと表示されないことがあるので注意します。表計算ソフトを利用して式を入れておくとよいでしょう(例:表計算のサンプル)。計算したサイズに編集します。更新すると変更後のサイズが表示されるはずです。Macではアプリケーションのプレビュー(preview)で画像を開き、”ツール/サイズを調整”をクリックします。以下のような画面がでるので、cmをピクセルにして、縦横比を固定にチェックを入れ、サイズの数値を調整します。
    プレビューによる画像サイズ調整

    画像の挿入は編集画面の上にある”メディアを追加”をクリックします。
    メディアを追加

    次にファイルアップロードをクリックし、アップロードが終わったら右側の代替テキストに説明を入れます。(この説明はHPを読み上げるサービスで利用されます)
    画像の説明

    画像の回り込みを禁止するには以下の文章を画像をしている文章の最後に加えます。

    <p style=”clear: both”></p>

    また、画像を挿入すると自動的に回り込んでしまいます。”メディアを追加”で追加された文章のあとに以下の文章を追加しておきます。一度”ビジュアル”モードにするとこの文章は消されてしまうことがありますのでご注意ください。

    pdfなどにリンクを付けるには被リンクの文字の前にメディアのフルアドレスを追加します。
    これはテストです。ここが被リンクをクリックすると画像が表示されます。
    この記述は以下のようになります。
    —-
    <a href=”http://www.meiji-u.ac.jp/md-medinfo/files/wordpress_image1.png”>ここが被リンク</a>
    —-

    [図説のまとめ]
    (1) 画像の横に図の説明を付けるときにはpower pointなどで図と説明を並べておき、これをキャプチャー(静止画として保存)して利用します。
    以下のようになります。ただし、説明文書が文字なのでキャプチャする分解能が高くないとぎざぎざ文字になるので注意してください。
    ここではiMacのキャプチャソフト(SnapNDrag)を利用しています。
    wordpressの説明付き図

    (2) 図の下に説明を入れるときにはwordpressのメディアを追加したときに設定できるキャプションを利用すると良いでしょう。

    fMRIの図

    掌をスポンジでこすったときとブラシでこすったときのfMRIです。

    (3) 周り込み禁止コマンドを利用した場合は以下のようになります。
    fMRIの図

    上図は、掌をスポンジでこすったときとブラシでこすったときのfMRIです。

    10. 画像レイアウトのコツ

    トップへ
    画像のレイアウトはwordpressでは得意ではありません。従って、レイアウトした画像を作り、アップして挿入する方が楽です。このためにはPowerPoint(KeynoteやLibreofficeのプレゼンテーションでも可)を利用してレイアウトします。レイアウトは図の配列コマンドを利用するとよいです(keynoteを例にした下図参照)。
    その後にキャプチャーソフトで取り、横サイズを720ピクセル以下に修正して、アップします。
    画像の配列

    アップした様子は以下のようになります。
    画像のレイアウト例

    11. ページ内のLinkによる移動(長いページの時に便利)

    トップへ

    この記事にように1ページに長く書くことがあります。
    このときにはページ内で必要な項目に飛んだり、戻ったりするためにlinkコマンドを利用します。
    目次

    最初の目次に当たるところにlinkで順番を定義し、下の記事のところもlinkで受けます。
    <a href=”#link2″><strong>2. プレゼンテーションの心得とコツ</strong></a>
    こうすると目次をクリックすると番号の項目に飛びます。

    また下にはトップに上がるようにlinkを入れておくとよいでしょう。
    まず目次のトップに受けを定義しておきます。
    <h3 Id=”link2″>2. プレゼンテーションの心得</h3>
    続いて目次の1に戻るリンクを付けます。
    <a href=”#link1″>トップへ</a>

    これを受ける文をページの一番最初に入れます。(からなので表示はされません)

    <h5 Id=”link1″></h5>
    これで”トップへ”をクリックするとページトップに移動します。
    つまり目次の部分はこのようになります。
    目次の書き方

    12. 表の作成

    トップへ
    wordpressでは表の機能が標準で用意されていません。プラグインのTinyMCE Advancedがインストールされている場合は、表ツールが利用できます。インストールされていない場合は、htmlエディタで表を作成し、htmlの記述をコピーし、テキストエディタで編集します。以下の図のような表のテキストエディタの例文を下記に掲載しますのでご利用ください。これを編集すれば表ができます。
    表のテーブル

    —参考テーブルコマンド (* 「”]の表示が変更されるため、 &quot を利用しました。)
    <table border=”1″ cellspacing=”0″ cellpadding=”0″>
    <tbody>
    <tr>
    <th style=”text-align: center” width=”243″ valign=”top”><strong>表の上項目1</strong></th>
    <th style=”text-align: center” width=”302″ valign=”top”><strong>表の上項目2</strong></th>
    </tr>
    <tr>
    <td rowspan=”2″ width=”243″ valign=”top”><strong>縦項目1</strong></td>
    <td valign=”top” width=”302″>テーブル内容1-1</td>
    </tr>
    <td valign=”top” width=”302″>テーブル内容1-2</td>
    </tr>
    <tr>
    <td rowspan=”2″ width=”243″ valign=”top”><strong>縦項目2</strong></td>
    <td width=”302″ valign=”top”>テーブル内容2-1</td>
    </tr>
    <td valign=”top” width=”302″>テーブル内容2-2</td>
    </tr>
    </tbody>
    </table>
    ーーー以上
    このデータを入力すると以下の様に表示されます。

    表の上項目1 表の上項目2
    縦項目1 テーブル内容1-1
    テーブル内容1-2
    縦項目2 テーブル内容2-1
    テーブル内容2-2

    ———————

    別の方法としては表をアプリケーションで作成し、html書き出しを行い、必要な部分をコピーする方法があります。
    ここでは、LibreOfficeを例に説明します。
    まず、表を作成し、罫線を引いておきます。
    libreofficeの表

    これをファイル/エクスポートでフィル名.xhtml形式で保存します。これをテキストエディタ(シンプル)で開くか、webブラウザで開き、表示された下の部分(<table border・・から、</table>まで)をコピーしてwordpressのテキスト形式の画面にペーストしてください。以下の必要な部分を示します。また、最後の方にある<tr class=”ro3 から、 class=”Default”> </td>までは省略してください。
    —-libreofficeの表のhtml書き出した必要な部分
    <table border=”0″ cellspacing=”0″ cellpadding=”0″><col width=”99″ /> <col width=”213″ />
    <tbody>
    <tr>
    <td style=”text-align: center” valign=”top” width=”243″><strong>表の上項目1</strong></th>
    <td style=”text-align: center” valign=”top” width=”302″><strong>表の上項目2</strong></th>
    </tr>
    <tr>
    <td rowspan=”2″ valign=”top” width=”243″><strong>縦項目1</strong></td>
    <td valign=”top” width=”302″>テーブル内容1-1</td>
    </tr>
    <tr>
    <td valign=”top” width=”302″>テーブル内容1-2</td>
    </tr>
    <tr>
    <td rowspan=”2″ valign=”top” width=”243″><strong>縦項目2</strong></td>
    <td valign=”top” width=”302″>テーブル内容2-1</td>
    </tr>
    <tr>
    <td valign=”top” width=”302″>テーブル内容2-2</td>
    </tr>
    </tbody>
    </table>
    ーーーー
    このデータを入力すると以下のような表として表示されます。

    表の上項目1 表の上項目2
    縦項目1 テーブル内容1-1
    テーブル内容1-2
    縦項目2 テーブル内容2-1
    テーブル内容2-2

    13. googleの認証を受ける

    トップへ

    wordpress.comで作成したページをgoogleの認証を受けるとgogleからそのページを検索しやすくなります。

    手順の詳細はwordpressの技術情報を確認してください。

    (1) googleのアカウントでgooleウェブマスターツールにログインします。

    (2) “サイトを追加”のボタンをクリックし、作成したwordpress.comのアドレスを入力(httm://はいらない)

    (3) “別の方法”のタグをクリックし、”HTMLタグ”をラジオボタンで選択(左にある丸をクリック)、表示された文字列からcontent=”######”から#####をコピーする(部分選択できない場合は全部をコピーし、テキストエディタなどに書き出してから部分選択するとよい)。

    (4) worpdress.comの左のメニューから”ツール”→”利用可能なツール”を選択

    (5) “google Webmaster Tools”の右にある枠内にコピーし、下の”変更を保存”をクリック

    (6) 認証ができているかの確認はgoogleのウェブマスターツールの作成したURLが表示されている右側の”サイトを確認”から”このサイトを確認”をクリックします。

    以上です。
    トップへ