インフルエンサー向けのWordPressテーマ【Blossom Speaker】

Blossom Speaker

すべての画面サイズでコンテンツを美しく表示する、完全にレスポンシブなテーマであり、モバイルフレンドリーなテーマです。テーマは、Webサイトにアクセスしている間、訪問者にスムーズなブラウジング体験を提供するために速度が最適化されています。さらに、Schema.orgマークアップとともに最適化されたウルトラSEOであり、ウェブサイトが検索エンジンの結果で上位にランクされるのに役立ちます。このテーマのその他の重要な機能には、WooCommerce互換、翻訳準備完了、RTLスクリプト準備完了、およびカスタムCSSコードを追加するオプションがあります。

※最新の情報を Blossom Speaker で確認のうえご利用ください。

カスタマイザー

Blossom Speaker のカスタマイズ内容は以下の表のようになっています。

サイト基本情報	サイトのタイトル キャッチフレーズ
Apperance Setting	色を選択、背景画像を選択、サイトのメインフォント・サブフォントを選ぶことができる
Layout Setting	Blog Layout（ブログのページレイアウトを設定できる） Geneal Sidebar Layout（固定ページと投稿のサイドバーの位置）
Front Page Setting	Banner Section Service Section About Section Call to Action Section Testimonial Section Clint Section Blog Section Simle Call to action Contact Section
General Setting	検索ボタンを有効にできる ソーシャルボタンを有効にできる パンくずリストを有効にできる
メニュー	1ケ所の表示位置がある
ウィジェット	Sidebar（デフォルトサイドバー） Client Section（クライアントセクション） About Section（アボート） Call To Action Section（お問い合わせアクション等） Testimnial Section（お客様の声） Service Section（サービス） Simple call to Action Section Fotter One Fotter Two Footer Three Footer Four
ホームページ設定	トップページを最新の投稿か固定ページにする
Footer Setting	著作権表示や会社名などを入力できる

インストール

Blossom Speaker をインストールするにはダッシュボードから外観　→　テーマ　→　新規追加　→　テーマ名で検索しインストールを開始します。

※

Blossom Speakerのカスタマイズ

Blossom Speakerをカスタマイズするには下記の手順で行うとよいでしょう。

1. WEBサイトの構成を考える　（※注１）
2. 不要な機能を削除する
3. 必要な拡張機能（プラグイン）を追加する
4. グローバルナビゲーションやサイドメニューを作る
5. TOPページを作る
6. 企業サイトなどは、会社案内や事業内容などを作る
7. お知らせや、ブログ（製品やサービスをカテゴリーに構成する）を設置する

※　注１）固定ページ・投稿ページのコンテンツを書き出す。そしてカテゴリーやタグを振り分ける。などの設計書・制作ガイドラインを作成しておくと作業をスムースに進めることができ、修正が発生しても最小限の工程で完結できるようになります。

Blossom Speaker（WordPressテーマ）をカスタマイズするには、大きく分けて機能面とデザイン性をカスタマイズすることになります。最初に取り組むべきは、テーマカスタマイザーを使う、cssの追加をすることでしょう。どちらも手段が複数ありますので、事前に理解して取り組まれるとよいでしょう。プラグインを利用すれば高度なカスタマイズが可能になります。プログラムスキルをお持ちの場合は、直接テンプレート（PHP）ファイルを書き換えるカスタマイズになります。コードを直接編集する方法はリスクも高いので、よく理解されている方以外にはおすすめできません。

WordPressは無料で利用できるCMS（Contents Management System）であることから、多くの企業やブロガー、アフェリエイターによって運用されています。利用数が多いといことは、同じようなサイトが存在するといううことになります。そこで、サイトをカスタマイズして他のサイトと差別化しビジネスに役立てませんか。

css（スタイルシート）でカスタマイズ

部分的に色を変更したり、背景や囲みを装飾、文字の大きさを変更したりしたいのであればcss（スタイルシート）を追加することになります。「スタイルシート・css」記述するには、「テンプレートファイルに直接記述」する、「テーマカスタマイザーで記述」する。「プラグインを使って記述」などの方法があります。

ブロックエディタ対応のテーマではブロックごとにタイポグラフィ（「文字や文章を読みやすく、または美しく見せるための技術」）を指定できるので、文字の大きさや色を指定したい場合は、こちらを利用されたほうが良いでしょう。

注意点）スタイルシート・cssが大きくなりすぎると表示速度に影響を及ぼすこともあるので注意が必要です。

テーマカスタマイザーの「css追加」は複雑なコード編集は、編集エリアが狭く操作しづらいですが、テーマの更新よって上書きされることはありません。逆にテンプレートファイルの「style.css」は上書きされるので、子テーマで対応するか、バックアップをとり対応するかになります。推奨は「css追加」となっています。

css（スタイルシート）を追加するには、ダッシュボードの　外観　→　カスタマイズ　→　追加css　と進みコードを追加します。スタイルシートを適用させるには編集ブロックに　高度な設定で　「追加 css クラス」にクラス名を記述します。スタイルはブロック対して適用されるようになっています。複数のブロックに適応させたいならブロックをグループ化しておきます。

ページごとに css を記述したい場合はプラグインを利用すると良いでしょう。「VK All in one Expansion Unit」の cssカスタマイズ　を有効にしておくと、ページごとに スタイルシートを追加することができます。

テーマによってはあらかじめ、ページごとに css を記述できるようにしたものもあります。複雑なデザインを施したいサイトの場合はこちらを選ぶとよいかもしれません。

テンプレートファイル（PHP）でカスタマイズ

テンプレートファイル（テーマファイル）のカスタマイズは、外観 → テーマファイルエディタで編集することになります。テンプレートファイルの構成は各テーマによって異なっていますが概ね以下のようなファイルで構成されています。

• スタイル（style.css）
• テーマの関数
• 404テンプレート
• コメント
• テーマフッター
• テーマヘッダー
• 検索フォーム
• 単一テンプレート

テンプレートファイルを直接編集してカスタマイズすることもできます。ただ、この方法は高度な知識を必要とされますので、十分な知識をお持ちの方におすすめなります。記述ミスによって画面が表示されなくなったり、管理画面にログインすらできなくなったりすることもあります。

テンプレートファイルを直接編集してサイトを運用するなら子テーマを利用しましょう。なぜならWordPressは頻繁にアップデートが繰り返されソースコードが上書きされてしまい、再びカスタマイズをしなければならなくなってしまうからです。

子テーマの作り方

＊子テーマとは
「子テーマ」は、WordPressでウェブサイトやブログのデザイン・レイアウトを構築する際に、「親テーマ」と連動して機能するもうひとつのテーマです。 WordPressのデザインテンプレートは、「テーマ」を有効化させることで構築されます。

詳細を読む

子テーマの作り方

子テーマは単独で動作するのではなく、親テーマと連動して機能します。そのため子テーマはカスタマイズをするソース（ファイル）だけで構成します。ただし、functions.php と style.css は親テーマと連動させるために必須となっています。

• functions.php
• style.css

これらのソースの記述内容は決まっているので準じて記述しなければなりません。

■子テーマはPC上で作成しアップロード

子テーマの作成作業はPC上で行います。作業は比較的簡単で、知識のある方なら数分で完了するのではないでしょうか。そして、完成した子テーマは、WordPress管理画面（ダッシュボード）のテーマからインストール（アップロード）すれば利用できるようになります。

■子テーマ作成手順と作業内容

子テーマは以下の手順で作業します。

【1.】子テーマフォルダを作成
【2.】Style.css を記述する
【3.】functions.php を記述する
【4.】子テーマフォルダを圧縮する
【5.】WordPressにアップロードする

■作業内容

【1.】Windowsパソコンでディスクトップ等に、子テーマフォルダを作成します。フォルダ名は　XXXX-child とわかりやすい名前にします。

【2.】Style.css を記述します。メモ帳などのテキストエディタを使います。テキストエディタを開いたら下記のコードを記述もしくはコピー＆ペーストしてください。

/*
Theme Name:xxxxx child
Theme URI:
Description:WordPressテーマ「xxxxx」の自作子テーマです。
Template:XXXX
Author:xxxx
Author URI:https://xxxxx.com/
Version:0.0.8
*/

xxxx の部分を変更します。Template: と Author URI: は子テーマを採用するサイトの内容にあわせます。完了したら先ほど作成した子テーマフォルダに保存します。

スタイルシートを追記したい場合は、子テーマの　カスタマイズ　→　追加css で記述できます。

【3.】functions.php を記述します。同様にテキストエディタを使用します。

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
  wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
  wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style')
);
}
?>

内容は変更する必要がないので、完了したら先ほど作成した子テーマフォルダに保存します。

※カスタマイズコードは子テーマを有効化し　外観　→　テーマファイルエディター　を使って追記します。

【4.】子テーマフォルダを圧縮する
WordPressにアップロードするために、子テーマーフォルダーを圧縮します。フォルダを右クリックし、送る　→　圧縮（zip形式）フォルダ　でディストップに圧縮ファイルが生成されます。

【5.】WordPressにアップロードする
WordPressにログインし　外観　→　テーマ　→　新しいテーマ　→　テーマのアップロードと進みます。

「ZIP 形式のテーマファイルをお持ちの場合、こちらからアップロードしてインストールまたは更新できます。」と表示されるので、ディストップの圧縮フォルダをアップロードして子テーマをインストール、有効化すれば使用できるようになります。

最終作業として、子テーマで表示されるか確認をします。ブラウザの新規タブを開くか、他のブラウザを開いて目的のURLで開きましょう。このときWordPressの管理画面を開いておけば、万一表示されない場合にもテーマを親手テーマに戻せることが可能なことが多いです。

■トラブルが発生したら

表示されない原因の多くに　Style.css　の記述ミスが挙げられます。例えば2バイト文字で記述したり、Template:　を間違って記述したりでしょうか。

管理画面から親テーマに戻せるようなら、一度戻して、作成した子テーマフォルダをPCで修正しましょう。

表示はされるが崩れてしまう場合もあるようです。テーマが有料テーマや無料で配布されているテーマの場合は配布元のサイトで確認をしてください。

※

WordPressのテーマを変更する手順

テーマを変更するには、管理画面からダウンロードし有効化するという流れになるのですが、いきなり有効化するのは少しリスクがあります。ウイジェットなどはテーマによって取り扱いが異なります、そこで以下の手順で変更されることを推奨します。

1. 変更前にバックアップする
2. ダッシュボード・外観　よりテーマディレクトリにアクセスする
3. ライブプレビューを確認し表示の調整を行う
4. 有効化して公開
5. 公開後の確認作業を行う

※ライブプレビューで確認して表示の調整をするには、ダッシュボードの　外観　画面でインストールしたテーマの有効化ボタンの右側　ライブプレビューボタンをクリックします。

テーマカスタマイザーによる調整ができるので、修正が終わったら左上部の「有効化して公開」ボタンをクリックします。公開後にはスタイルシートを修正、確認、設定します。以下の点については公開後早期にチェックするようにしましょう。

• 外部のツールと連携している場合は正しく動作しているか
• スタイルシートが正しく設定されているか
• 不要なプラグインは削除する。

WordPressテーマの選び方

テーマを選ぶ際にはにはレスポンシブデザインかどうかは着目しましょう。レスポンシブデザインとは、スマートフォンやタブレット・PC別に１つのデザインで表示できるようにしたものです。サイトの内容によってはスマホユーザーが少ないこともあるでしょうが、Googleはモバイル端末での表示を標準と考えていますので、この点からも対応すべきポイトです。

• レスポンシブデザインなのか
• デザインをカスタマイズしやすいか
• ダウンロード数（利用されている数）が多いのか
• ブロックエディタに対応しているのか
• 日本語に対応しているのか
• テーマは安全なのか

有料テーマ	無料テーマ	公式テーマ
WordPress有料テーマはおしゃれでカスタマイズしやすいのが大きなメリットです。 WEBサイト運用するための機能も標準として装備されているので、プラグインの追加をしなくても十分使用することが可能です。 無料テーマはシンプルなものが多く、他のサイトとデザインが同じようになってしまうこともあります。 しかし、有料テーマであればカスタマイズしやすくなっているため、好みのサイトを作成しやすいのが特徴です。	WEB制作会社から配布される無料テーマもあります。無料とは思えないほど機能やデザインが充実しているテーマもあります。ただし、無料がゆえに途中で更新がストップしたり、開発が終了されることもあります。無料テーマは開発者の宣伝や有料版へのステップとして提供されていることもあると認識しておきましょう。 無料テーマのデメリットとしては、製品版のお試し（機能が制限されたり）として配布されたり、個人的に配布されたりしていて、サポートや更新が終了してしまうことがあります。	公式テーマは、日本語に対応しているのか確認しましょう、開発が海外の場合、日本語表示等に考慮されていない場合もあります。また、テーマ内の説明も日本語でないことも多いようです。 ディレクトリ登録時に事前に審査が行われるので、製作者サイトからの直ダウンロードに比較すれば安全といえるでしょう。 デザインや機能は育て上げる面もあり初心者にはハードルが高いかもしれません。サポートはありませんのでwordpress.orgやネットから情報か自力で解決しなければなりません。