Blog

プラグインWhat’s New Generatorを使って、トップページに最近の記事一覧を表示しました。作業はいたって簡単で、インストール後に「設定」-「What’s New 設定」で表示対象にするコンテンツタイプ、表示件数、Newマークの付与などいくつかの設定をおこない、設定画面のトップにあるショートコードをコピーして表示させたい箇所に貼り付けるだけです。

ショートコードをトップページの記事の下に貼り付けました。

最近の記事一覧がトップページに表示されました。

ヘッダに冬の朝の日の出前のグラデーションを使い、背景色にはグラデーションで中間色になっているうっすらとした空の色にしました。この設定は外観のカスタマイズ機能で簡単にできます。

記事のタイトルも全体に合わせて青味がかった色でリンクのある場合は明るめの色になるようにし、ついでに文字サイズも変更ました。変更はいつもの通り、サブテーマ”kimama-twentyfifteen-sub”の中の”style.CSS”ファイルに設定を追記しました。

記事の画像背景が白いと宙に浮いた感じで不安定なので枠と影を付けてみました。

フォントを変えるとサイトのイメージが変わります。これはフォントの設定を変更する前の表示です。

フォントを”noto sans japanese”変更するための設定をサブテーマのstyle.cssに追加しました。

フォントが”noto sans japanese”に変更されました。

フォントの設定は個別にされているものもあるのでこれだけでは初期のフォントが混在してしまいます。個別の部分は”WordPress Perfect Guide Book”に書かれていました。ひとつくらいは自分で探してみたいので、まずはこのままにしておきます。

2015/3/27
Google Chromeの”要素を検証”という機能を使ってひとつ見つけました。

個別記事ページの下にある前後のページへのリンクはフォントが変わっていませんでしたのでカーソルを”サブテーマの作成”に乗せ、右クリックして”要素を検証”を選択すると画面右下に適用しているCSSが表示されます。ここで順に下を見ていくと、ありました。
“.post-navigation .post-title {
font-family: “Noto Serif”, serif;”
この”.post-navigation .post-title”をターゲットにstyle.cssにフォントの設定を書いてみます。

“.post-navigation .post-title”のフォントを”noto sans japanese”変更するための設定をサブテーマのstyle.cssに追加しました。

フォントの変更ページを再読み込みするとフォントが変更されています。右下のCSS表示も変更したstyle.cssと同じ内容になっていることが確認できます。

他にもフォントが個別に設定されている箇所がありますので”WordPress Perfect Guide Book”に書かれている”.post-navigation .post-title”以外のセレクターもstyle.cssに書き写してフォントの変更を終了しました。サイトを検証する機能はChrome以外のブラウザにもあり、これはFirefoxのFire bugという機能でCSSの適用を検証したもので、前後のページへのリンク表示にも”noto sans japanese”が適用されていることが確認できました。

次は＜ヘッダ画像、背景色、記事タイトル色の変更＞です。

WordPressはプラグインだけでなくテーマもさまざまなテンプレートが作られていて、いつでも自分好みのテーマを選んでサイトのイメージを変更することができます。テーマは自分で作成することもできますが、初心者は既存のテーマをカスタマイズするのが簡単で、勉強にもなります。
ただし、既存のテーマを直接カスタマイズしてしまうとテーマの更新の際にカスタマイズを記述した部分が上書きされて無くなってしまう可能性が高いのでサブテーマを作成し、そこにカスタマイズ部分を置きます。
スタイルシートだけのカスタマイズであればダッシュボードから[外観]→[CSSの編集]という選択もあるようですが、自由度が高いサブテーマでカスタマイズします。

お名前.comでインストールしたWordPressに含まれていたテーマは”twentyfifteen”、”twentyfourteen”、”twentythirteen”の３つで、最新のtwentyfifteenが有効になっていましたので、ここではtwentyfifteenをメインテーマとしてサブテーマの作成を行います。

まずはWordPressのテーマディレクトリーにサブテーマのディレクトリーを追加します。名前は何でも良いのですが、メインテーマが判るようにkimama-twentyfifteen-subにしました。

次に”style.css”という名前のファイルを作りサブテーマのディレクトリーkimama-twentyfifteen-subに保存します。このファイルでテーマであることの宣言とメインテーマとの関連付けを行います。ファイルの中には次のように書きました。”Theme Name”、”Template”、”@import url(‘../twentyfifteen/style.css’);”以外は任意です。
”Theme Name”、”Template”、”@import url(‘../twentyfifteen/style.css’);”
ダッシュボードから[外観]→[テーマ]に進むとサブテーマが表示されます。

サブテーマの表示に画像をつけたい場合はサブテーマのディレクトリーに640×480程度の画像を”screenshot.png”というファイルで保存すると表示されます。（画像が表示されないときは一旦サブテーマを有効化すると表示されます）

次は＜フォントの変更＞です。

WordPressにはさまざまなプラグインが作成されていて容易に機能拡張ができますが、数が多すぎてどれにしたら良いのか悩みます。まずは”WordPress perfect GaideBook”で紹介されていた次のプラグインを一括でインストールすることにしました。
Imsanity
BackWPup Free
Broken Link Checker
Easy FancyBox
WordPress Related Posts
PS Auto Sitemap
TablePress
Simple Map
TinyMCE Advanced
Simple Login Lockdown
Image Widget
What’s New Generator
BackWPup Free

”Multi Plugin Installer”というプラグインを最初にインストールし、そこに残りのプラグイン名を全て記述して一括インストールを実行しましたが、次の２つはエラーになってしまいましたので個別にインストールしました。
What’s New Generator
BackWPup Free

次は＜サブテーマの作成＞です。

お名前.comのサーバーコントロールパネルを開いて”WordPressインストール”を選択し、以下のように進めて行きました。

次は＜プラグインのインストール＞です

このサイトを立ち上げるまでの作業を備忘録的に書き込むことにしました。よってここの記事はサイトが出来上がるまでの間は主に作業ノートです。

サーバーには”お名前.com”の共有サーバーSDを利用しました。仮想マシンのVPSだと自由度が高いのですがメンテナンスに手間がかかりますし、既に自宅サーバーを構築してあるのでサーバーで遊ぶのはそちらだけにしておいて、ここでは割り切って共有サーバーを選択しました。

WebサイトにはWordPressを使いました。WordPressは数年前から使っていましたが、新しいサーバーなのでついでにWordPress最新版の機能を確認しておこうと思い、参考書には”WordPress Perfect Guide Book（著者：佐々木 恵さん）”を使いました。

 このサイトはasme.comのサブドメインに置くことにしました。まずはサブドメインkimama.asme.comを作成するために、”お名前.com”共有サーバーのコントロールパネルにアクセスし、「独自ドメイン設定」を開き、そこからは次のように設定して行きました。

次は＜WordPressのインストール＞です。