WordPressテーマ設定レポート│Sydney

Sydneyスクリーンショット

こちらでは、WordPressの無料(一部有料も)テーマをザックリと設定してみて、使用感を書いていきます。

カスタマイズの仕方については、他に詳しいサイトがありますし、専門知識が必要なカスタマイズについては、私がやってあげることが前提なので、ここでは、テーマを選ぶ際の参考程度の内容にとどめます。

テーマによっては、参考サイトがほとんどないものや、説明がいらないくらい簡単なもの、丁寧な説明があっても、なかなかわかりにくいもの、レスポンシブと言いながらレイアウトが崩れているものなどあったりするので、その辺のことを書いてみようかなと思います。

ほんとにザックリです。
パソコンに不慣れな方は、基本的に「自分でやらないで誰かにやってもらって」って思っているので、パッと見てわかる方向けに書いていきます。

 

Sydney

難易度:★★★★★
総評:凝ろうと思えばかなり凝れる。どの辺まで作りこむかによるが、デモサイトくらい見た目をカッコよくするには、管理画面でできることはできるが、専門用語がわからないと設定できない部分がある。そしてかなり根性が要る。

WordPress theme Sydney 作者: athemes

無料。有料版あり。

無料でここまでいろんなことができるのはスゴイかもしれない。

テーマの説明、ドキュメンテーションなどは英語。
検索すればカスタマイズ方法は割と出てくる。
ページビルダーのウィジェットは日本語。
HTMLやCSSの知識がなくても、管理画面レベルで細かくカスタマイズできるのは確かだけれど、かなり難しい!わかりにくい!

でも、頑張ればカッコイイサイトにはなる。

推奨プラグインを追加インストールする

Page Builder by SiteOrigin
SiteOrigin widget bundle
Sydney toolbox

インストールすると、サイドバーに設定項目が表示される。これをインストールしておかないと、トップページの設定が何もできないので注意。

表示設定

「フロントページ」と「ブログ」固定ページ作成は通常通り。

テーマ色の設定

「外観」→「カスタマイズ」→「色」でけっこう自由に色が変えられる。

背景色、メインカラー、テキストカラーなど、ヘッダー、サイドバー、フッターと分けて設定できるのは、CSSがわからない人には嬉しいかも。(CSSわかる人にとっても、これは楽だぁ!!)

トップページ

ヘッダー

静止画、スライド、動画設定可。ファーストビューにフル幅で動画が貼れるのはうれしい!

メディアライブラリにアップロードする場合、ヘッダーに表示できる動画は8MBまで。
推奨サイズ1920ⅹ1080。動画の圧縮方法がわからない場合は、YouTubeにアップしてからリンクを貼るほうが簡単だけど、YouTubeのロゴが出る。CSSで隠せるけど、いいのかな!?

設定は「外観」→「カスタマイズ」→ヘッダー(動画は「メディア」)

フロントページの編集

フロントページを設定している固定ページを「ページビルダー」で編集する。
編集画面の右上に「ページビルダー」ボタンがある。

【1】列を追加

カラム数とレイアウトを選択(カラムごとの横幅が選べる)

「列を追加」でカラムを設定するとウィジェットタイトル(h3)がカラム数分になる。
カラム数を1にしておいて、各カラムの設定で列数(※)を複数にすると、タイトルが一つになるので、好みで設定を変えればよい。とても自由度があっていい。

右側の「行のスタイル」では、「属性」でidやclassを設定し、追加CSSを書くことができるが、CSSの知識がなくても、その下の「レイアウト」と「デザイン」で、カラムごとに見た目は充分調整できそう。

(※)ここでひとつ注意なのが、「行」と「列」の使い方。Excelや一般的な表だと横の並びが「行」で、縦の並びが「列」だけど、このテーマの場合は、逆。・・・かと思えば、ウィジェットの中の列、行はその逆になっている! なんかアバウト~ (^_^;) 

「設定」→「挿入」

【2】ウィジェットを追加

挿入した行の各カラムをクリックして、「ウィジェットを追加」。
どのウィジェットがどんな仕様なのかは、とりあえず片っ端から入れてみて表示確認するしかないかな。

シドニーフロントページ: サービスタイプA・B

Aはアイコン、タイトル、本文が縦並び、Bは横並び。

「ダッシュボード」→「Services」→「Add New Service」でサービスページを作っておく。
サービス名の上にアイコンを表示させたい時は、サービスのページの下の「Service info」→「Service icon」でフォントオーサムを設定することができる。

シドニーフロントページ: メンバー

これも同じくあらかじめ「Enployees」でページを作っておく。
顔写真はアイキャッチ画像と同じ右下で設定。
写真のサイズ、タテヨコ比を揃えておかないと、ガタガタになる。

同様にお客様の声、プロジェクトなども先にページを作っておく。

ブログ一覧カルーセルとその他のブログ一覧

抜粋文の文字数設定がウィジェット内でできないっぽい。
そして、デザインが全然カッコ良くなく・・・というか、そもそもデザイン設定していないのでは!?というくらいダサイ。抜粋文の行間もないので、CSSで調整する必要あり。

後日要確認

「クライアント一覧」ウィジェットを追加しようとすると、403エラーになってしまった。
他の部分は更新できるので、このウィジェット限定なんだろうけど・・・なんでだろう?
国内の制作者で、問い合わせ窓口がある場合だと、こういうときに質問や報告がしやすいので、解決も速いのだけれど、こういう時困りますね。

あまり使わないウィジェットで良かったけれど、気になります。

 

 

 

岸田みづなのレターポット

コメント欄の「Also post on Facebook」にチェックを入れてコメントするとFacebookにシェアできます。