「インターネットで情報発信!」カテゴリーアーカイブ

WordPress公開用サーバをVPSで構築(CentOS 7)

WordPress公開用サーバをVPSで構築(CentOS 7)で構築します。「Wordpress検証用サーバを仮想マシンで構築(CentOS 7)」と異なるのは、電子証明書を認証局が発行したものを使用するなど、セキュリティに関する設定が異なります。

本内容については、「WordPress公開用サーバをVPSで構築(CentOS 7)」に記載しました。

WordPress検証用サーバを仮想マシンで構築(CentOS 7)

WordPress用検証サーバを仮想マシンで構築します。HTTPサーバは、Nginxを使用しますがApacheでも動作するように設定します。

はじめに

以下の順で検証環境を構築します。
・Virtualboxによる仮想マシンの作成
・CentOS 7のインストールと初期設定
・外部リポジトリの追加
・ユーティリティのインストール
・SSL通信用の電子証明書の作成(自己署名証明書)
・Apacheのインストールと初期設定
・PHPのインストールと初期設定
・Nginxのインストールと初期設定
・MariaDBのインストールと初期設定
・WordPressのインストールと初期設定

作業用パラメータ

作業用のパラメータを決めておきます。

サーバ設定

ホスト名:vm001
IPアドレス:192.168.11.101/24
デフォルトゲートウェイ:192.168.11.1
DNSサーバ:192.168.11.1
管理者ユーザ名:admin001
管理者UID:1001

WordPressのDB接続設定

データベース名:db01
データベースのユーザー名:db01admin
データベースのパスワード:db01admin_pwd
データベースホスト:localhost
データベースの接頭辞 :wp_

WordPressのサイト設定

サイトのタイトル:検証用サイト
サイトのユーザー名:admin001
サイトのユーザーのパスワード:admin001_pwd
サイトのメールアドレス:admin001@example.com

Virtualboxによる仮想マシンの作成

Virtualboxで検証サーバ用の仮想マシンを作成します。

CentOS 7のインストールと初期設定

CentOS 7のインストール

仮想マシン上にCentOS 7をMinimumでインストールします。インストール完了後、rootユーザでログインし、CentOSのバージョンを確認します。

# cat /etc/redhat-release
CentOS Linux release 7.4.1708 (Core)

作業用管理者ユーザの追加

作業用の管理者ユーザを登録し、作成した管理者ユーザでログインし直します。

# useradd -u 1001 -g wheel admin001
# passwd admin001
# exit

ネットワークの設定

ホスト名の設定を行います。

$ sudo hostnamectl set-hostname vm001

次に、ネットワークの設定を行います。ネットワーク接続の設定が終わったら、ヘッドレスモードで起動して、terminalからログインしたほうが作業がしやすいです。

$ nmcli device
DEVICE  TYPE      STATE      CONNECTION 
enp0s3  ethernet  connected  enp0s3     
lo      loopback  unmanaged  --        
      --
$ sudo nmcli connection modify enp0s3 ipv4.method manual ipv4.addresses 192.168.11.101/24
$ sudo nmcli connection modify enp0s3 ipv4.gateway 192.168.11.1
$ sudo nmcli connection modify enp0s3 ipv4.dns 192.168.11.1
$ sudo systemctl restart NetworkManager
$ nmcli device show enp0s3
GENERAL.DEVICE:                         enp0s3
...
IP4.ADDRESS[1]:                         192.168.11.101/24
IP4.GATEWAY:                            192.168.11.1
IP4.DNS[1]:                             192.168.11.1
...             

SELinuxの設定

SELinuxによるセキュリティは設定を見極めるまで無効化しますが、セキュリティ違反があったことをログで確認できるように”Permissive”モードで動作させます。再起動して変更が有効であるか確認します。

$ sudo vi /etc/selinux/config
#SELINUX=enforcing
SELINUX=permissive
$ sudo systemctl reboot

再起動後ログインして、”Permissive”モードであることを確認します。

$ getenforce
Permissive

外部リポジトリの登録

標準リポジトリより新しいバージョンをインストールする場合のため、外部リポジトリを登録します。

yum-prioritiesのインストール

リポジトリ間の優先順位を設定するパッケージをインストールします。

$ sudo yum -y install yum-priorities

EPELリポジトリの登録

EPELリポジトリを登録します。

$ sudo yum -y install epel-release

一時利用に設定します。

$ sudo vi /etc/yum.repos.d/epel.repo
enabled=0

Remi’s RPM repositoryの登録

Remi’s RPM repositoryを登録します。

$ sudo yum -y install http://rpms.famillecollet.com/enterprise/remi-release-7.rpm

一時利用に設定します。

$ sudo vi /etc/yum.repos.d/remi-safe.repo
enabled=0

Nginxのリポジトリを一時利用で登録します。

$ sudo vi /etc/yum.repos.d/nginx.repo
[nginx]
name=nginx repo
baseurl=http://nginx.org/packages/centos/7/$basearch/
gpgcheck=0
enabled=0

ユーティリティのインストール

以後の作業等で必要になるユーティリティをインストールしておきます。

wgetのイントール

WordPress等のモジュールのダウンロード用に、wgetコマンドをインストールします。

$ sudo yum -y install wget

zip/unzipのイントール

コンテンツなどのアーカイブの移動用に、zipおよびunzipコマンドをインストールします。

$ sudo yum -y install zip unzip

SSL通信用の電子証明書の作成(自己署名証明書)

検証用のサーバで使用する電子証明書を事前に作成しておきます。検証用なので自己署名証明書で作成します。

$ openssl genrsa 2048 > server.key
Generating RSA private key, 2048 bit long modulus
.....................................+++
......................................+++
e is 65537 (0x10001)
$ openssl req -new -key server.key > server.csr
You are about to be asked to enter information that will be incorporated
into your certificate request.
What you are about to enter is what is called a Distinguished Name or a DN.
There are quite a few fields but you can leave some blank
For some fields there will be a default value,
If you enter '.', the field will be left blank.
-----
Country Name (2 letter code) [XX]:JP
State or Province Name (full name) []:
Locality Name (eg, city) [Default City]:
Organization Name (eg, company) [Default Company Ltd]:
Organizational Unit Name (eg, section) []:Test Unit
Common Name (eg, your name or your server's hostname) []:www.testunit.jp
Email Address []:

Please enter the following 'extra' attributes
to be sent with your certificate request
A challenge password []:
An optional company name []:
$ openssl x509 -days 3650 -req -signkey server.key < server.csr > server.crt
Signature ok
subject=/C=JP/L=Default City/O=Default Company Ltd/OU=Test Unit/CN=www.testunit.jp
Getting Private key

作成した電子証明書をNginxとApache用にコピーしておきます。

$ sudo cp ~/server.crt /etc/pki/tls/certs
$ sudo cp ~/server.key /etc/pki/tls/private
$ sudo chmod 600 /etc/pki/tls/certs/server.crt
$ sudo chmod 600 /etc/pki/tls/private/server.key
$ ls -l /etc/pki/tls/certs
$ ls -l /etc/pki/tls/private

Apacheのインストールと初期設定

Apacheをインストールします。SSLが使用できるようにmod_sslもインストールします。

$ sudo yum -y install httpd mod_ssl
$ httpd -version
Server version: Apache/2.4.6 (CentOS)
Server built:   Oct 19 2017 20:39:16

通信制御の設定変更を行い、80/tcpと443/tcpの通信を許可します。

$ sudo firewall-cmd --add-port=80/tcp --zone=public --permanent
$ sudo firewall-cmd --add-port=443/tcp --zone=public --permanent
$ sudo firewall-cmd --reload
$ sudo firewall-cmd --list-all --zone=public | grep tcp
  ports: 80/tcp 443/tcp

SSL通信用の設定を行います。

$ sudo cp -p /etc/httpd/conf/httpd.conf ~/httpd.conf_org
$ sudo vi /etc/httpd/conf.d/rewrite.conf
<ifModule mod_rewrite.c>
      RewriteEngine On
      RewriteCond %{HTTPS} off
      RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R,L]
</ifModule>
$ sudo cp -p /etc/httpd/conf.d/ssl.conf ~/ssl.conf_org
$ sudo vi /etc/httpd/conf.d/ssl.conf
SSLCertificateFile /etc/pki/tls/certs/server.crt
SSLCertificateKeyFile /etc/pki/tls/certs/server.key

Apacheを起動します。

$ sudo systemctl start httpd.service
$ sudo systemctl status httpd.service
● httpd.service - The Apache HTTP Server
   Loaded: loaded (/usr/lib/systemd/system/httpd.service; enabled; vendor preset: disabled)
   Active: active (running) since Thu 2017-11-23 17:36:36 JST; 7s ago
...

ブラウザからアクセスして、httpsにリダイレクトされてトップページが表示されることを確認します。

http://192.168.11.101/

PHPのインストールと初期設定

PHPをインストールします。標準リポジトリを使用するとPHP 5.4がインストールされます。比較的古いバージョンなので、新規で使用する場合は、Remi’s RPM repositoryより最新のPHP 7をインストールしましょう。以下、標準リポジトリを使用した場合と、Remi’s RPM repositoryを使用してPHP 7.1をインストールした場合の手順になります。

PHPのインストールと初期設定(標準リポジトリ)※PHP7.1をインストールする場合不要

標準リポジトリを使用してPHPをインストールします。標準リポジトリを使用するとPHP 5.4がインストールされます。

$ sudo yum -y install php-mysql php php-gd php-mbstring
$ php --version
PHP 5.4.16 (cli) (built: Nov 15 2017 16:33:54)
Copyright (c) 1997-2013 The PHP Group
Zend Engine v2.4.0, Copyright (c) 1998-2013 Zend Technologies

PHPの初期設定を行います。タイムゾーン、PHPのバージョン出力、日本語に関連する設定を行います。

$ sudo cp -p /etc/php.ini ~/php.ini_org
$ sudo vi /etc/php.ini
expose_php = Off
default_charset = UTF-8
date.timezone = "Asia/Tokyo"
mbstring.language = Japanese
mbstring.internal_encoding = UTF-8
mbstring.http_input = pass
mbstring.http_output = pass
mbstring.encoding_translation = Off
mbstring.detect_order = auto
mbstring.substitute_character = none;
mbstring.func_overload = 0
mbstring.strict_detection = Off

動作確認を行います。

$ cd /var/www/html
$ sudo vi phpcheck.php
<?php
    phpinfo();
?>
$ sudo chmod 755 phpcheck.php
$ sudo 755 phpcheck.php
$ sudo systemctl stop httpd
$ sudo systemctl start httpd

ブラウザからアクセスして、PHPのインストール情報のページが表示されることを確認します。

http://192.168.11.101/phpcheck.php

PHP 7のインストールと初期設定(Remi’s RPM repository)

PHP 7.1をインストールします。PHP 5.4など旧バージョンをインストールしている場合は、念のためアンインストールしておきます。

sudo yum remove php-*

Remi’s RPM repositoryとEPELリポジトリを使用してPHP 7.1をインストールします。

$ sudo yum -y install --enablerepo=remi-safe,remi-php71,epel php php-mbstring php-pear php-fpm php-mcrypt php-mysql php-gd php-opcache php-pecl-apcu-bc
$ php --version
php --version
PHP 7.1.12 (cli) (built: Nov 22 2017 08:25:12) ( NTS )
Copyright (c) 1997-2017 The PHP Group
Zend Engine v3.1.0, Copyright (c) 1998-2017 Zend Technologies
    with Zend OPcache v7.1.12, Copyright (c) 1999-2017, by Zend Technologies

PHPの初期設定を行います。タイムゾーン、PHPのバージョン出力、日本語に関連する設定を行います。

$ sudo cp -p /etc/php.ini ~/php.ini_org
$ sudo vi /etc/php.ini
expose_php = Off
date.timezone = "Asia/Tokyo"
mbstring.language = Japanese
mbstring.internal_encoding = UTF-8
mbstring.http_input = pass
mbstring.http_output = pass
mbstring.encoding_translation = Off
mbstring.detect_order = auto
mbstring.substitute_character = none;
mbstring.func_overload = 0
mbstring.strict_detection = Off

※PHP 7.1では、”default_charset = UTF-8″は設定済み。

動作確認を行います。

$ cd /var/www/html
$ sudo vi phpcheck.php
<?php
    phpinfo();
?>
$ sudo chmod 755 phpcheck.php
$ sudo systemctl stop httpd
$ sudo systemctl start httpd

ブラウザからアクセスして、PHPのインストール情報のページが表示されることを確認します。

http://192.168.11.101/phpcheck.php

Nginxのインストールと初期設定

Apacheを停止します。

$ sudo systemctl stop httpd
$ sudo systemctl status httpd
● httpd.service - The Apache HTTP Server
   Loaded: loaded (/usr/lib/systemd/system/httpd.service; disabled; vendor preset: disabled)
   Active: inactive (dead)

Nginxをインストールします。

$ sudo yum -y --enablerepo=nginx install nginx
$ nginx -v
nginx version: nginx/1.12.2

Nginxの初期設定を行います。

$ sudo cp -p /etc/nginx/conf.d/default.conf ~/default.conf_org
$ sudo vi /etc/nginx/conf.d/default.conf
server {
    listen       80;
    server_name  localhost;
    return 301 https://$host$request_uri;
}

server {
    listen       443 ssl;
    server_name  localhost;

    ssl on;
    ssl_certificate      /etc/pki/tls/certs/server.crt;
    ssl_certificate_key  /etc/pki/tls/private/server.key;
...
    location / {
        root   /var/www/html;
        index  index.html index.htm index.php;
    }
...
    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    location ~ \.php$ {
        root           /var/www/html;
        fastcgi_pass   127.0.0.1:9000;
        fastcgi_index  index.php;
        fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
        include        fastcgi_params;
    }

Nginxを自動起動するように設定します。

$ sudo systemctl enable nginx.service
$ sudo systemctl list-unit-files | grep nginx.service
nginx.service                                 enabled

Nginxを起動します。

$ sudo systemctl start nginx.service
$ sudo systemctl status nginx.service
● nginx.service - nginx - high performance web server
   Loaded: loaded (/usr/lib/systemd/system/nginx.service; enabled; vendor preset: disabled)
   Active: active (running) since Sat 2017-11-25 14:23:15 JST; 15min ago
...

テストページ表示用のHTMLを作成します。

$ sudo vi /var/www/html/index.html
$ sudo vi /etc/php-fpm.d/www.conf
<html>
<body>
Welcome to web server test page!
</body>
</html>

ブラウザからアクセスして、httpsにリダイレクトされてトップページが表示されることを確認します。

http://192.168.11.101/

PHP-FPMの設定を変更します。

$ sudo cp -p /etc/php-fpm.d/www.conf ~/www.conf_org
$ sudo vi /etc/php-fpm.d/www.conf
user = nginx
group = nginx

PHP-FPMを自動起動するように設定します。

$ sudo systemctl enable php-fpm
$ sudo systemctl list-unit-files | grep php-fpm
php-fpm.service                               enabled

PHP-FPMを起動します。

$ sudo systemctl start php-fpm
$ sudo systemctl status php-fpm
● php-fpm.service - The PHP FastCGI Process Manager
   Loaded: loaded (/usr/lib/systemd/system/php-fpm.service; enabled; vendor preset: disabled)
   Active: active (running) since Sat 2017-11-25 14:15:02 JST; 49s ago
...

ブラウザからアクセスして、HTTPにリダイレクトされて、PHPのインストール情報のページが表示されることを確認します。

http://192.168.11.101/phpcheck.php

Apacheでも動作可能なようにApacheのユーザとグループをnginxに変更します。

$ sudo vi /etc/httpd/conf/httpd.conf
User nginx
Group nginx

MariaDBのインストールと初期設定

MariaDBをインストールします。

$ sudo yum -y install mariadb mariadb-server
$ mysql --version
mysql  Ver 15.1 Distrib 5.5.56-MariaDB, for Linux (x86_64) using readline 5.1

MariaDBを自動起動するように設定します。

$ sudo systemctl enable mariadb.service
$ sudo systemctl list-unit-files | grep mariadb.service
mariadb.service                               enabled 

MariaDBを起動します。

$ sudo systemctl start mariadb.service
$ sudo systemctl status mariadb.service
● mariadb.service - MariaDB database server
   Loaded: loaded (/usr/lib/systemd/system/mariadb.service; enabled; vendor preset: disabled)
   Active: active (running) since Thu 2017-11-23 19:15:41 JST; 6s ago
...

MariaDBのインストール後の設定を行います。

$ cd
$ mysql_secure_installation
Set root password? [Y/n] y
New password: 
Re-enter new password: 
Password updated successfully!
Reloading privilege tables..
 ... Success!


By default, a MariaDB installation has an anonymous user, allowing anyone
to log into MariaDB without having to have a user account created for
them.  This is intended only for testing, and to make the installation
go a bit smoother.  You should remove them before moving into a
production environment.

Remove anonymous users? [Y/n] y
 ... Success!

Normally, root should only be allowed to connect from 'localhost'.  This
ensures that someone cannot guess at the root password from the network.

Disallow root login remotely? [Y/n] y
 ... Success!

By default, MariaDB comes with a database named 'test' that anyone can
access.  This is also intended only for testing, and should be removed
before moving into a production environment.

Remove test database and access to it? [Y/n] y
 - Dropping test database...
 ... Success!
 - Removing privileges on test database...
 ... Success!

Reloading the privilege tables will ensure that all changes made so far
will take effect immediately.

Reload privilege tables now? [Y/n] y
 ... Success!

Cleaning up...

All done!  If you've completed all of the above steps, your MariaDB
installation should now be secure.

Thanks for using MariaDB!

MariaDBの設定を変更します。

$ sudo cp -p /etc/my.cnf.d/server.cnf ~/server.cnf_org 
$ sudo vi /etc/my.cnf.d/server.cnf
[mysqld]
character-set-server=utf8

MariaDBを再起動します。

$ sudo systemctl stop mariadb.service
$ sudo systemctl start mariadb.service
$ sudo systemctl status mariadb.service
● mariadb.service - MariaDB database server
   Loaded: loaded (/usr/lib/systemd/system/mariadb.service; enabled; vendor preset: disabled)
   Active: active (running) since Thu 2017-11-23 19:15:41 JST; 6s ago
...

MariaDBにログインし、DBの一覧と文字コードの設定を出力してみます。

$ mysql -u root -p
Enter password: 
Welcome to the MariaDB monitor.  Commands end with ; or \g.
Your MariaDB connection id is 10
Server version: 5.5.56-MariaDB MariaDB Server

Copyright (c) 2000, 2017, Oracle, MariaDB Corporation Ab and others.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

MariaDB [(none)]> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| performance_schema |
+--------------------+
3 rows in set (0.05 sec)

MariaDB [(none)]> show variables like 'character%';
+--------------------------+----------------------------+
| Variable_name            | Value                      |
+--------------------------+----------------------------+
| character_set_client     | utf8                       |
| character_set_connection | utf8                       |
| character_set_database   | utf8                       |
| character_set_filesystem | binary                     |
| character_set_results    | utf8                       |
| character_set_server     | utf8                       |
| character_set_system     | utf8                       |
| character_sets_dir       | /usr/share/mysql/charsets/ |
+--------------------------+----------------------------+
8 rows in set (0.01 sec)

MariaDB [(none)]> exit

Bye

WordPressのインストールと初期設定

WordPressをダウンロードし、展開します。

$ cd /tmp
$ wget http://wordpress.org/latest.tar.gz
$ cd /var/www/html
$ sudo tar -xzvf /tmp/latest.tar.gz
$ sudo chown -R nginx:nginx wordpress

WordPress用のDBを作成します。

mysql -u root -p
CREATE DATABASE db01;
GRANT ALL PRIVILEGES ON db01.* TO "db01admin"@"localhost" IDENTIFIED BY "db01admin_pwd";
FLUSH PRIVILEGES;
EXIT

Nginxを再起動します。

$ sudo systemctl stop nginx.service
$ sudo systemctl start nginx.service
$ sudo systemctl status nginx.service
● nginx.service - nginx - high performance web server
   Loaded: loaded (/usr/lib/systemd/system/nginx.service; enabled; vendor preset: disabled)
   Active: active (running) since Sat 2017-11-25 14:23:15 JST; 15min ago
...

WordPressの設定を開始します。

http://192.168.11.101/wordpress/wp-admin/install.php

最初に言語(日本語等)を選択して、セットアップを開始します。DB接続情報として、以下を設定します。

    データベース名:db01
    データベースのユーザー名:db01admin
    データベースのパスワード:db01admin_pwd
    データベースホスト:localhost
    データベースの接頭辞 (1つのデータベースに複数の WordPress を作動させる場合):wp_

サイトの情報として、以下を設定します。※脆弱なパスワードと指摘された場合はチェックを入れて…

    サイトのタイトル:検証用サイト
    ユーザー名:admin001
    パスワード:admin001_pwd
    メールアドレス:admin001@example.com

作成したユーザで、WordPressにログインします。

WordPressインストール後の作業

その他、WordPressインストール直後に、使用することがありそうな作業を記載しておきます。

作業用のファイルの削除

インストールの際に使用した不要なファイルを削除しておきます。

$ sudo rm -i /var/www/html/phpcheck.php
$ sudo rm -i /tmp/latest.tar.gz

サイトのトップページへのアクセス

サイトのトップのURLにアクセスした場合に表示するHTMLを配置しておきます。以下の例では、wordpressディレクトリにリダイレクトさせています。

$ vi /var/www/html/index.html
<html>
<head>
<meta http-equiv="refresh" content="0;URL=/wordpress/">
</head>
<body>
</body>
</html>

サイトのURLの修正

サイトのURLをいろいろ変更してWordPressが動作しなくなった場合は、DBのデータを直接修正します。

$ mysql -u root -p
MariaDB [(none)]> use wordpress
Reading table information for completion of table and column names
You can turn off this feature to get a quicker startup with -A

Database changed
MariaDB [wordpress]> SELECT * FROM wp_options WHERE option_name IN ('home','siteurl');
+-----------+-------------+------------------------+----------+
| option_id | option_name | option_value           | autoload |
+-----------+-------------+------------------------+----------+
|         2 | home        | https://192.168.11.101/ | yes      |
|         1 | siteurl     | https://192.168.11.101/ | yes      |
+-----------+-------------+------------------------+----------+
2 rows in set (0.00 sec)

MariaDB [wordpress]> UPDATE wp_options SET option_value = 'http://192.168.11.91/wordpress/' where option_name IN ('home','siteurl');
Query OK, 2 rows affected (0.30 sec)
Rows matched: 2  Changed: 2  Warnings: 0

MariaDB [wordpress]> SELECT * FROM wp_options WHERE option_name IN ('home','siteurl');
+-----------+-------------+---------------------------------+----------+
| option_id | option_name | option_value                    | autoload |
+-----------+-------------+---------------------------------+----------+
|         2 | home        | http://192.168.11.101/wordpress/ | yes      |
|         1 | siteurl     | http://192.168.11.101/wordpress/ | yes      |
+-----------+-------------+---------------------------------+----------+
2 rows in set (0.00 sec)

WordPressのサイトのデータ移行

WordPressのサイトを検証用サーバにデータ移行して作成する場合について記載します。

DBデータの移行

DBバックアップを取得し、gzipコマンドで圧縮します。

$ mysqldump -u db_admin -h db_host -p db_name > db_backup
$ gzip db_backup

移行先サーバに転送し、解凍します。

$ cd /var/www/html
$ sudo scp server_name:/var/www/html/db_backup.gz .
$ sudo gzip -d db_backup.gz

移行先の用のDBを作成します。

$ mysql -u root -p
CREATE DATABASE db02;
GRANT ALL PRIVILEGES ON db02.* TO "db02admin"@"localhost" IDENTIFIED BY "db02admin_pwd";
FLUSH PRIVILEGES;
EXIT

DBをリストアします。

$ mysql -u db02admin -p db02 < db_backup

ファイルの移行

移行元でファイルをtarファイルにまとめ、gzipコマンドで圧縮します。

$ cd /var/www/html
$ tar -cvf wordpress.tar wordpress
$ gzip wordpress.tar 

移行先サーバに転送し、解凍後、オーナを変更します。

$ cd /var/www/html
$ sudo scp server_name:/var/www/html/wordpress.tar.gz .
$ sudo gzip -d wordpress.tar.gz
$ sudo tar -xvf wordpress.tar
$ sudo chown -R nginx:nginx wordpress

おわりに

以上で、WordPressのインストールと初期設定が完了しました。以降は、WordPressの管理画面を使用して、Webサイトのコンテンツを作成します。

説明用の図の作り方(LibreOffice Impress)

Webサイトの記事作成では文字ばかりではなく、説明用の図が多々必要になります。LibreOffice Impressを使用して、説明用の図の作成します。Impressを使用するメリットは、概念図等を簡単に作成することができ、PNG形式のファイルに簡単に保存できることです。

はじめに

LibreOffice Impressを使用して、説明用の図の作成します。

使用したシステム環境

ソフトウェア:LibreOffice / Version 4.4.4.3

Impressで図を作成

何もオブジェクトのないシンプルな状態にします。
create_images_impress_001

背景を設定します。
create_images_impress_002

自由に図を作成します。
create_images_impress_003

Impressで図をPNG形式で出力

「エクスポート」メニューを選択します。
create_images_impress_011

PNG形式を選択します。
create_images_impress_012

サイズを設定します。縦横比が、バランスの良い4:3になっているところがよい感じです。
create_images_impress_013

WordPressでアップロードすると、以下ように図を簡単に表示できます。
create_images_impress_sample

おわりに

LibreOffice Impressを使用して、説明用の図の作成しました。

関連記事(目次)

  1. インターネットで情報発信!

よく使用するスタイルシート(CSS)の書式

よく使用するスタイルシートの書式をまとめておきます。

はじめに

よく使用するスタイルシートの書式をまとめます。
・セレクタの書式(要素の親子関係)
・余白の書式(margin, padding)

セレクタの書式(要素の親子関係)

すべての子要素に有効となる指定方法です。
 指定方法: <親の要素名> <子の要素名>
<CSSの例>

pre.csstest11 span.csstest12 {
	color: #00ff00;
}

<HTMLの例>

<pre class="csstest11">
	<span>
今日は<span class="csstest12">よい天気です。</span>
	</span>
</pre>

<表示例>

	
今日はよい天気です。
	

親の直下の子孫のみ有効となる指定方法です。別の要素を挟むと対象になりません。
 指定方法: <親の要素名> > <子の要素名>
まずは、CSSが有効なケースの記述になります。
<CSSの例(CSS有効)>

pre.csstest21 > span.csstest22 {
	color: #00ff00;
}

<HTMLの例(CSS有効)>

<pre class="csstest21">
今日は<span class="csstest22">よい天気です。</span>
</pre>

<表示例(CSS有効)>

今日はよい天気です。

次に、CSSが無効のケースになります。
<CSSの例(CSS無効)>

pre.csstest21 > span.csstest22 {
	color: #00ff00;
}

<HTMLの例(CSS無効)> ※class指定なしのspan要素が挟まっています。

<pre class="csstest21">
	<span>
今日は<span class="csstest22">よい天気です。</span>
	</span>
</pre>

<表示例(CSS無効)>

	
今日はよい天気です。
	

余白の書式(margin, padding)

「margin」および「padding」で使用する余白の指定方法をまとめます。
・値1個:上下左右
・値2個:上下,左右
・値3個:上,左右,下  ※「間が左右」で覚えるよよいかも
・値4個:上,右,下,左 ※「時計回り」で覚えるとよいかも

おわりに

よく使用するスタイルシートの書式をまとめました。

関連記事(目次)

  1. インターネットで情報発信!

ファビコンとウェブクリップアイコンの作り方

Webサイトに表示するファビコンとウェブクリップアイコンの作成方法をまとめます。

はじめに

Webサイトに表示するファビコンとウェブクリップアイコンを作成し、表示します。

ファビコンとウェブクリップアイコンの代表的なサイズ

代表的なサイズは以下になります。

<ファビコン>
・16×16 もともとのファビコンのサイズ
・32×32 最近のブラウザで使用されているファビコンのサイズ

<ウェブクリップアイコン>※Androidでも表示できます。
・57×57 iPhone用のウェブクリップアイコンのサイズ(Retinaモデルより前)
・72×72 iPad用のウェブクリップアイコンのサイズ(Retinaモデルより前)
・114×114 iPhone用のウェブクリップアイコンのサイズ(Retinaモデル)
・144×144 iPad用のウェブクリップアイコンのサイズ(Retinaモデル)

作成するファビコンとウェブクリップアイコンのサイズ

究極の美しさを求めなければ、大は小を兼ねるので以下のサイズのファビコンとウェブクリップアイコンを作成します。

<ファビコン>
・32×32 最近のブラウザで使用されているファビコンのサイズ

<ウェブクリップアイコン>
・144×144 iPad用のウェブクリップアイコンのサイズ(Retinaモデル)

画像ファイルのico形式への変換

作成した画像(32×32)をPNG形式で作成し、ico形式で”favicon.ico”のファイル名で保存します。

ウェブクリップアイコンの作成

作成した画像(144×144)をPNG形式で作成し、”apple-touch-icon.png”のファイル名で保存します。

画像ファイルのアップロード

作成した画像ファイル(favicon.ico,apple-touch-icon.png)をイメージ用のフォルダ(images等)にアップロードします。

ファビコンとウェブクリップアイコンの指定

HTMLのheaderセクション内で、ファビコンとウェブクリップアイコンの指定を行います。

<ファビコン(例)>

<link rel="shortcut icon" href="http://expr.ictlab101.com/images/favicon.ico" />

<ウェブクリップアイコン(例)>

<link rel="apple-touch-icon" href="http://expr.ictlab101.com/images/apple-touch-icon.png" />

ファビコンとウェブクリップアイコンの表示確認

ファビコンとウェブクリップアイコンの表示確認を行います。表示されない場合は、ブラウザのキャッシュをクリアして再表示させてみます。

関連記事(目次)

  1. インターネットで情報発信!

おわりに

Webサイトで表示するファビコンとウェブクリップアイコンの作成方法についてまとめました。

ムームードメイン ロリポップ!レンタルサーバー

スクリーンショットを取得!

Webサイト作成時に必要となるスクリーンショットの取得方法をまとめます。

はじめに

各プラットフォームでのスクリーンショットの取得方法をまとめます。
・Windows
・Mac
・Linux
・Android
・iPhone/iPod touch/iPad

スクリーンショットの取得方法(Windows)

・全画面の取得方法
「PrtSc」キーをを押す。
・選択画面の取得方法
「Ctrl」-「Alt」-「PrtSc」キーを同時に押す。
・保管場所
Windowsのクリップボード

スクリーンショットの取得方法(Mac)

・全画面の取得方法
「command」+「shift」+「3」キーを同時に押す。
・選択範囲の取得方法
「command」+「shift」+「4」キーを押してから範囲選択を行う。
・選択画面の取得方法
「command」+「shift」+「4」キーを押してから「スペース」キーを押す。

スクリーンショットの取得方法(Linux)

・全画面の取得方法
「PrtSc」キーをを押す。
コマンド:gnome-screenshot
・選択範囲の取得方法
「Shift」+「PrtSc」キーをを押す。
コマンド:gnome-screenshot –area
・選択画面の取得方法
「Alt」+「PrtSc」キーをを押す。
コマンド:gnome-screenshot –window
・その他
※delay指定との組み合わせ技が可能。例えば、以下のコマンドで3秒後にフォーカスされているウィンドウを取得することができます。
コマンド:gnome-screenshot –window –delay=3

スクリーンショットの取得方法(Android)

・全画面の取得方法
スマートフォンの「電源ボタン」と「音量下げるボタン」を同時に1秒程度押す。
・保管場所
/sdcard/Screenshots/

スクリーンショットの取得方法(iPhone/iPod touch/iPad)

・全画面の取得方法
ホームボタンと電源ボタンが同時に押されると撮影される。
・保管場所
「写真」→「カメラロール」

スクリーンショットの取得方法(携帯電話)

・Webブラウザの画面
画面メモ

スクリーンショットを使用できない場合に・・・

コマンドでスクリーンショットを取得できない場合には、デジカメ(スマホ等)で取得すればよいのです。「デジカメ(スマホ)をスキャナの代わりに使用!」を参照いただきたく。

おわりに

各プラットフォームでのスクリーンショットの取得方法をまとめました。

関連記事(目次)

  1. インターネットで情報発信!
ムームードメイン ロリポップ!レンタルサーバー

WordPressサイトのバックアップを取得!

サイトの更新を開始したら、合わせてバックアップを取得します。今回は、パソコンに取得する方法を整理します。

はじめに

WordPressで作成した情報発信サイトのバックアップを取得します!

バックアップの取得対象

WordPressでサイト構築した場合のバックアップ対象は、以下になります。
・DBデータ
・WordPressのファイル群

DBデータのダウンロード(phpMyAdmin)

phpMyAdminにログインします。
db_backup_000m.png
バックアップするデータベースを選択します。
db_backup_001m.png
エクスポートをクリックします。
db_backup_002m.png
デフォルトの設定のまま、「実行」をクリックします。
db_backup_003m.png
エクスポートデータをダウンロードします。
db_backup_004m.png

データファイルのダウンロード

WinSCPを使用してダウンロードします。WordPressの各テーマの”wp-content”フォルダをバックアップします。
web_backup_002m.png

おわりに

バックアップは自動化したいところですが、常時起動しているマシンがない場合は、サイトの更新後、パソコンにバックアップを取得します。

関連記事(WordPressサイトの運用)

  1. WordPressサイトのバックアップをパソコンに取得!

関連記事(目次)

  1. インターネットで情報発信!
ムームードメイン ロリポップ!レンタルサーバー

Googleアナリティクスのトラッキングコードを設定

Googleアナリティクスのトラッキングコードを各ページに設定します。

はじめに

Googleアナリティクスのトラッキングコードを各ページに設定します。
・SEO All in Packを使用してトラッキングコードを設定
・ページに埋め込まれたトラッキングコードを確認

SEO All in Packを使用してトラッキングコードを設定

SEO All in Packを使用して、Googleアナリティクスのトラッキングコードを全ページに設定します。Google Settingsで、以下の通り設定します。
・GoogleアナリティクスID  :取得したトラッキングID
・Use Universal Analytics :チェックオン
・Advanced Analytics Option:使用
setup_googleanalytics_011

ページに埋め込まれたトラッキングコードを確認

ページのソースを確認すると、トラッキングコードが埋め込まれていることが分かります。
setup_googleanalytics_012

おわりに

Googleアナリティクスのトラッキングコードを各ページに設定しました。

関連記事(目次)

  1. インターネットで情報発信!

Googleアナリティクスのアカウントを作成

Googleアナリティクスのアカウントを作成します。作業に入る前に、Googleアナリティクスで使用するGoogleのアカウントを事前に作成するか、既存のアカウントを使用するか決めておきましょう。

はじめに

Googleアナリティクスのアカウントを作成します。

Googleアナリティクスのアカウントを作成

Googleアナリティクスのホームページから、Googleアナリティクスで使用するGoogleのアカウントでログインします。
setup_googleanalytics_001
ログイン後、Googleアナリティクスの使用を開始の「お申し込み」ボタンを押します。
setup_googleanalytics_003
分析対象のサイト情報を入力して「トラッキングIDを取得」ボタンを押します。
・アカウント名     :expr.ictlab101.com
・ウェブサイト名    :ICT実験室
・ウェブサイトのURL   :http://expr.ictlab101.com/
・業種         :なし
・レポートのタイムゾーン:日本
setup_googleanalytics_004
setup_googleanalytics_005
setup_googleanalytics_006
利用規約に同意すると、「トラッキングID」と「トラッキングコード」が表示されるので、テキストファイルに控えておきます。

おわりに

Googleアナリティクスのアカウントを作成しました。

関連記事(目次)

  1. インターネットで情報発信!

Googleウェブマスターツールの構造化データのエラーを回避

Googleウェブマスターツールの構造化データの画面を確認すると、大量にエラーが出力されていました。Twenty ThirteenのデフォルトのHTML出力が、HTMLの規約に沿っていない部分があるためとのことですが、きちんと対応するのは難しい模様。とりあえず、Googleウェブマスターツールで検知した構造化データのエラーを回避を試みます。
using_webmastertool_031

はじめに

Googleウェブマスターツールで検知された、以下の構造化データのエラーを回避します。
・「updatedがありません」
・「authorがありません」
・「ノードが空です」
※構造化データテストツールを使用すると、「updatedがありません」、「ノードが空です」ではなく、以下の「ノードが空です」のエラーが表示されます。
using_webmastertool_034
以下のテンプレートを変更して、構造化データのエラーを回避します。
・テンプレート(functions.php)の変更
・テンプレート(page.php)の変更

テンプレート(functions.php)の変更

テンプレート「functions.php」を変更して、固定ページと投稿ページで作成日と修正日を出力するようにします。修正日は、class名を「updated」にして出力します。

<修正日を表示>

	if ( ! has_post_format( 'link' ) && ( 'post' == get_post_type() || 'page' == get_post_type() ) ){
		echo '作成日 :';
		twentythirteen_entry_date();
		echo '<br />';
		echo '修正日 :';
		twentythirteen_entry_update();
	}

<作成者を修正>※クラス名「url fn n」を「url fn」に修正します。

	// Post author
	if ( 'post' == get_post_type() || 'page' == get_post_type() ) {
		echo '<br />';
		echo '作成者 :';
		printf( '<span class="author vcard"><a class="url fn" href="%1$s" title="%2$s" rel="author">%3$s</a></span>',
			esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ),
			esc_attr( sprintf( __( 'View all posts by %s', 'twentythirteen' ), get_the_author() ) ),
			get_the_author()
		);
		echo get_the_author();
	}

<修正日を取得>※twentythirteen_entry_date関数をコピーして、twentythirteen_entry_update関数を新規に作成します。修正日は、get_the_modified_date関数で取得します。

if ( ! function_exists( 'twentythirteen_entry_update' ) ) :
/**
 * Print HTML with update information for current post.
 *
 * Create your own twentythirteen_entry_update() to override in a child theme.
 *
 * @since Twenty Thirteen 1.0
 *
 * @param boolean $echo (optional) Whether to echo the date. Default true.
 * @return string The HTML-formatted update date.
 */
function twentythirteen_entry_update( $echo = true ) {
	if ( has_post_format( array( 'chat', 'status' ) ) )
		$format_prefix = _x( '%1$s on %2$s', '1: post format name. 2: date', 'twentythirteen' );
	else
		$format_prefix = '%2$s';

	$date = sprintf( '<span class="updated"><a href="%1$s" title="%2$s" rel="bookmark"><time class="entry-date" datetime="%3$s">%4$s</time></a></span>',
		esc_url( get_permalink() ),
		esc_attr( sprintf( __( 'Permalink to %s', 'twentythirteen' ), the_title_attribute( 'echo=0' ) ) ),
		esc_attr( get_the_modified_date( 'c' ) ),
		esc_html( sprintf( $format_prefix, get_post_format_string( get_post_format() ), get_the_modified_date() ) )
	);

	if ( $echo )
		echo $date;

	return $date;
}
endif;

テンプレート(page.php)の変更

固定ページでも文書情報(作成日/修正日/作成者等)を表示するように、テンプレート「page.php」にtwentythirteen_entry_meta関数を追加します。

					<footer class="entry-meta">
						<hr class="hr-article-info-top" />
						<div class="article-info">
							<?php twentythirteen_entry_meta(); ?>
							<?php edit_post_link( __( 'Edit', 'twentythirteen' ), '<span class="edit-link">', '</span>' ); ?>
						</div><!-- .article-info -->
						<hr />
					</footer><!-- .entry-meta -->

結果は・・・

以下のグラフの赤線が示す通り、時間をかけてゆっくりと減っていきました。ページがクロールされるタイミング減っていくようです。
using_webmastertool_035

おわりに

文書情報(作成日/修正日/作成者等)の出力を修正して、Googleウェブマスターツールで検知された、構造化データのエラーを回避しました。

関連記事(目次)

  1. インターネットで情報発信!