デフォルトテーマ Twenty Fifteen のデザインをカスタマイズ

今現在、当サイトに適用しているWordPressのテーマは「Twenty Fifteen」というテーマです。

サイドバーとコンテンツの2カラムで構成され、タブレットやスマートフォンでの表示にも対応したレスポンシブデザインとなっています。

とってもシンプルで好みではあるのですが、自作テーマ完成までのつなぎとして少しはカスタマイズしておきたい・・・

というわけで、今日と明日の2回くらいに分けてカスタマイズの様子を書いてみようと思います。

 

Twenty Fifteen のカスタマイズ画面にアクセス

まずはじめに Twenty Fifteen のカスタマイズ画面にアクセスします。

WordPressのダッシュボードにログインし、左サイトバーメニューの「外観」→「カスタマイズ」をクリック。

design customize menu

するとこんな画面が表示されます。

customize view

左のサイドバーでデザインのカスタマイズを行うと、その結果が右側のプレビューで即座に確認できるようになっています。

以下はサイトのタイトルとキャッチフレーズを変更してみたところ。

customize example

なお、実際にカスタマイズ内容がサイトに反映されるのは「保存して公開」ボタンを押したタイミングとなります。

 

サイトの配色を変更する

Twenty Fifteen では6つのカラーパターンが用意されており、カスタマイズ画面でカラーを選択するだけで手軽にサイトの配色を変更することができます。

 

ちなみに用意されているのは以下のようなカラーパターン。

カラーパターン

当サイトではシンプルに白を基調とした配色(デフォルト)を採用しています。

もし上記とは違うニュアンスの配色にしたい場合は、カラーピッカーを使って

  • コンテンツ部分の背景色
  • サイドバーの文字色
  • サイドバーの背景色

などを変更することも可能です。

customize colors

 

背景画像を設定する

配色のカスタマイズと同様に、サイトの背景色のカスタマイズを行うことも可能です。

以下は一例として、サイトのヘッダ画像を変更してみたところ。

customize header image

以上のように、Twenty Fifteen 標準のデザインカスタマイズ機能を使うだけでも、かなりサイトの印象を変えることができます。

 

他にもサイトのメニューやサイドバーに表示する項目もカスタマイズ可能となっていますが、具体的な方法についてはまた明日書いてみようと思います。

サイトにソーシャルボタンを表示する

今日も AGITO Labs のカスタマイズのお話です。

本日は「WP Social Bookmarking Light」というプラグインを使ってこのサイトにソーシャルボタンを設置してみます。

 

まずは「WP Social Bookmarking Light」をインストール

詳しく説明するまでもなく、こちらの記事を参考にプラグインをインストールして有効化します。

 

プラグインの設定

プラグインをインストールしたら、設定画面にアクセスして設定を行います。

WordPressのダッシュボードにログインし、左サイドバーの「設定」→「WP Social Bookmarking Lite」をクリックします。

menu of WP Social Bookmarking Light

 

プラグインの設定画面が表示されますので、
まずはソーシャルボタンを表示する位置と表示する記事の種類(投稿もしくは固定ページ)、表示するソーシャルボタンを選びます。

settings of WP Social Bookmarking Light

今回は

  • Twitter
  • Facebook
  • Google Plus One
  • はてな
  • Evernote
  • Pocket

の6種類のソーシャルボタンを表示するようにしてみました。

ソーシャルボタンを選んだら、個別のボタンの設定を行います。

 

まずはTwitterから。

for Twitter

見た目をシンプルにするために、あえて言語は「英語」を選択しています。

 

次にはてな。

for Hatena

 

そしてFacebookの設定(設定のタブは2つに分かれています)。

for FB

for FB like

 

以下はEvernoteのクリップボタンの設定。

for Evernote

 

Google Plus Oneの設定。

for Google Plus One

 

最後にPocketの設定。

for Pocket

 

以上を入力し終わったら、左下の「変更を保存」ボタンをクリックして設定を完了します。

 

ソーシャルボタンの表示を確認

以上の手順が終了したら、サイトの個別ページを開いてソーシャルボタンがちゃんと表示されているかを確認します。

 

当サイトの場合は以下のようになりました。

complete display social buttons!

 

以上でソーシャルボタンの設置は完了です。

 

サイトの画像をFlickrで管理する

今日は当サイトに掲載している画像ファイルの保存先について書いてみようと思います。

通常の画像ファイルの保存先

WordPressでは、サイトにアップロードする画像は「メディア」として扱われ、その保存先はWordPressがインストールされているサーバー内となります。

また画像をアップロードしたときにサーバ内に保存されるのは、

  • オリジナルの画像ファイル
  • 大サイズにリサイズされた画像ファイル
  • 中サイズにリサイズされた画像ファイル
  • 小サイズにリサイズされた画像ファイル

の最低4ファイル。

このため、高画質の画像を大量にアップロードした場合、サーバーのディスク容量を圧迫してしまい、最悪の場合はWordPressが動かなくなってしまう・・・という事態もあり得るかもしれません。

また、たとえディク容量が十分にあるサーバーを使っていたとしても、万が一「WordPressサイトを別のサーバーにお引越しする」となったときに、アップロード済の画像ファイルをすべて新しいサーバーにコピーするのは気の遠くなるような作業です。

 

それらを見越して、当サイトでは、サイトに掲載する画像ファイルはすべて外部サービスの「Flickr」に保存し、記事には Flickrの画像リンク を掲載するようにしています。

 

画像ファイルの保存先をFlickrにする

以下、WordPressとFlickrとの連携方法について書いていきます。

Flickrのアカウントを作成

まずはFlickrを利用するため、米 YAHOO! のアカウント登録を行います(すでにアカウントがある場合はこの作業は不要です)。

具体的な登録方法については以下のページ

が参考になるかと思います。

WordPressにプラグイン「Remote Media Libraries」をインストール

Flickrの画像をWordPressで簡単に使えるようにするにはプラグインをインストールする必要があります。

FlickrとWordPressを連携させるためのプラグインは様々存在しますが、今回は「Remote Media Libraries」を利用してみることにしました。

プラグインのインストール方法と有効化は以前の記事を参考にしてみてください。

FlickrのユーザーNSIDを確認

「Limote Media Libraries」でFlickrの画像にアクセスするために、Flickr User NSID というものを確認しておく必要があります。以下はNSIDの確認方法。

米 YAHOO! のアカウントが取得できたら Flickr にサインインします。

サインイン後、画面左上のメニューから「Alubums」をクリック。

Go to Alubms Page

Albumsページが表示されたら、ウェブブラウザのアドレス欄を確認します。

Flickr USER NSID

「XXXXXXXXX@NXX(Xは数字)」という文字列が Flickr User NSID となります。

Flickrとの連携設定

WordPressのダッシュボードにアクセスし、左サイドバーメニューの「メディア → Remote Libraries」をクリック。

Remote Library の一覧画面が出てくるので「Add New」ボタンを押して新規作成画面を表示します。

Add Remote Library

新規作成画面で必要事項を入力します。先ほど確認した Flickr User NSID もここで入力。

Input Remote Library info

入力が完了したら画面右側の「Validate」ボタンをクリックしてみて、Flickerとの連携が正常におこなわれることを確認します。

Validate and Publish

 

最後に「公開」ボタンを押せば完了。

ちなみにここで「公開」ボタンを押しても、この Remote Library 設定内容は一般公開されませんので安心してください(笑)

Flickrのアルバムに画像をアップロード

以上で WordPressとFlickrの連携が可能となったはずなので、早速試してみます。

まずは Flickrに画像をアップロードし、写真の公開範囲を「public」にしておきます。

操作方法がいまいちわからない場合は以下のサイト

が参考になるかもしれません。

記事にFlickrの画像を挿入してみる

それでは早速、WordPressの投稿記事ににFlickrの画像を挿入してみます。

 

まずは WordPressのダッシュボードの左メニューから「投稿 → 新規追加」をクリック。

新規投稿画面が表示されるので、「メディアを追加」ボタンをクリックします。

Add new post

メディア挿入用のポップアップ画面が表示されますので、
左側の「Insert Flickr」をクリックするとFlickrに保存した画像(publicのもののみ)が一覧表示されます。

View Flickr images

 

挿入したい画像を選択し、サイズを指定して「投稿に挿入」ボタンをクリック。

Insert image from Flickr

以上の操作で、投稿の本文にFlickrの画像が挿入されます。

Complete insert Flickr image

以上、案外簡単にFlickrと連携することができました。

上記の手順で一番面倒なのは、米 YAHOO! のアカウント登録かもしれませんね (^ ^;

 

ちなみに今回インストールした「Limote Media Libraries」というプラグインは、Flickrとの連携だけでなく Instagram とも連携できるみたいですので、また機会をみつけて試してみたいと思います。