人気の「Twenty Fifteen」カスタマイズ設定方法-wordpressワードプレス無料テーマ

Twenty Fifteen」カスタマイズ設定方法 ブログの始め方・アクセスアップ

こんにちは、おひとりさまブロガー和泉です^^

今回は、wordpress(ワードプレス)で人気の無料テーマ「Twenty Fifteen」のカスタマイズ・設定方法を解説していきたいと思います。

「Twenty Fifteen」は、2015年のwordpress(ワードプレス)のデフォルト無料テーマです。

ブログ向けでシンプルかつ読みやすいレイアウトが特徴になっています。

では、早速、詳しく解説していきますね!

Twenty Fifteen無料テーマの特徴

「Twenty Fifteen」は、ワードプレスをインストールすると、標準で搭載されている無料テーマ。

ブログ向けのシンプルなデザインになっています。

twentyfifteenカスタマイズ設定

テーマ名:Twenty Fifteen

  • カスタマイズ性:比較的簡単
  • カラム数:2カラム
  • サイドバー位置:左サイドバー
  • レスポンシブ:対応
  • 言語:日本語対応
  • SEO対策:プラグインなどを入れて対策しましょう
  • スライド機能:なし(プラグインなどを使って対応させよう)
  • アドセンス埋込機能:なし(プラグインなどを使って対応させよう)
  • 関連記事表示:なし(プラグインなどを使って対応させよう)
  • トップページにSNSアイコン:設定可能(メニューから設定)
  • 記事内にSNSアイコン:なし(プラグインなどを使って対応させよう)
  • 用途:ブログ・ビジネス
  • 配布元:wordpress

デザイン・レイアウト

「Twenty Fifteen」は、ウェブサイトやブログとして活用することが出来ます。

twentyfifteenカスタマイズ設定

デザイン・レイアウト

  • サイドバー兼ヘッダー
  • サイドバー兼ヘッダーに、タイトルとメインメニュー表示
  • サイドバー兼ヘッダーに、画像を挿入させることが出来る
  • フロントページ設定機能あり
  • 投稿記事のアイキャッチ画像が大きい

インストール方法

あなた自身のwordpress(ワードプレス)からテーマをインストールします。

ダッシュボード ⇒外観  ⇒テーマ  ⇒ 新規追加 ⇒「Twenty Fifteen」を検索してインストール ⇒有効化

「Twenty Fifteen」は標準搭載されています。

カスタマイズ・設定

ここからは、wordpress(ワードプレス)で人気の無料テーマ「Twenty Fifteen」のカスタマイズ・設定をやっていきます。

「外観⇒カスタマイズ」からテーマの編集

twentyfifteenカスタマイズ設定

twentyfifteenカスタマイズ設定

上から順番にカスタマイズをしていきます。

サイト基本情報

カスタマイズ・設定できる項目

  • ロゴ
  • サイトタイトル
  • キャッチフレーズ
  • サイトアイコン(ファビコン)

【1】 ロゴ、サイトタイトル、キャッチフレーズのカスタマイズ・設定

今回は、サイトタイトル・キャッチフレーズを非表示設定にし、ロゴ画像を表示させました。

twentyfifteenカスタマイズ設定

【2】 サイトアイコン(ファビコン)のカスタマイズ・設定

サイトアイコン画像をアップロードしました。

twentyfifteenカスタマイズ設定

カスタマイズ・設定できる項目

  • ベース配色
  • 背景色
  • ヘッダー・テキスト色
  • ヘッダー・サイドバー背景色

【1】 「ベース配色」のカスタマイズ・設定

ベース配色を「青」に設定。

青に設定しましたが、あとあとの設定で背景色などすべて変えたのでほぼ意味がありませんでした・・・。

【2】 「背景色」のカスタマイズ・設定

背景色を「#dda146」、オレンジ近い色に設定しました。

背景は、後々の設定で画像に変えることも出来ます。

twentyfifteenカスタマイズ設定

【3】 「ヘッダー・テキスト色」のカスタマイズ・設定

タイトルの色や、サイドバーの文字の色を変えることが出来ます。

今回は、「#0a0a0a」色、黒に近い色にしました。

twentyfifteenカスタマイズ設定

【4】 「ヘッダー・サイドバー背景色」のカスタマイズ・設定

ヘッダー・サイドバーの背景色を変えることが出来ます。

ここは後々の設定で、背景画像を指定しました。

ヘッダー画像

カスタマイズ・設定できる項目

  • ヘッダー画像

【1】 ヘッダー画像のカスタマイズ・設定

ここでいうヘッダーは、サイドバー兼ヘッダーのことです。

画像を設定しました。

twentyfifteenカスタマイズ設定

背景画像

カスタマイズ・設定できる項目

  • 背景画像

【1】 「背景画像」のカスタマイズ・設定

今回は設定しませんでしたが、背景画像を指定することが出来ます。

メニュー・ヴィジェット

カスタマイズ・設定できる項目

  • メニュー
  • サイドバー、フッター

別項目で解説します。

固定フロントページ

カスタマイズ・設定できる項目

  • 最新の投稿
  • フロントページ

【1】 「固定フロントページ」のカスタマイズ・設定

今回は、「最新の投稿」のままの設定でいきます。

もし、トップページを「固定ページ」にすると以下のようになります。

あらかじめ固定ページでページを作っておくことで、トップページに表示させることが出来ます。

twentyfifteenカスタマイズ設定

サイト活用には少しいまいちな感じはしますね・・・。

メインメニュー・ソーシャルアイコンのカスタマイズ・設定

ここからはメインメニュー・ソーシャルアイコンメニューのカスタマイズ・設定方法について解説していきます。

「ダッシュボード⇒外観⇒メニュー」から編集

メニューでは、以下の項目をカスタマイズ・設定できます

  • メインメニュー
  • ソーシャルリンクメニュー

【1】 「メインメニュー」のカスタマイズ・設定

あらかじめ固定ページなどで内容を作っておくことで、メニューに追加することが出来ます。

twentyfifteenカスタマイズ設定

サイドバー兼ヘッダーにメニューが表示されます。

twentyfifteenカスタマイズ設定

【2】 「ソーシャルアイコン」のカスタマイズ・設定

「新規メニュー作成」で「メニュー名」をつけます。

その後、必要なSNSリンクをメニューに追加。

メニューの位置を、「ソーシャルリンクメニュー」にチェックをいれます。

twentyfifteenカスタマイズ設定

アイコンもきちんと表示されます。

twentyfifteenカスタマイズ設定

ヴィジェット(サイドバー・フッター)のカスタマイズ・設定

ここからはヴィジェットのカスタマイズ方法について解説していきます。

「ダッシュボード⇒外観⇒ヴィジェット」から編集

「Twenty Fifteen」のテーマの場合、は1つの項目の編集が可能。

  • ウィジェットエリア(サイドバー)

【1】 「ウィジェットエリア(サイドバー)」のカスタマイズ・設定

必要に応じて、要る項目・要らない項目をカスタマイズすることが出来ます。

人気記事ランキングなどが欲しい場合は、「WordPress Popular Posts」プラグインを入れることで設定できます。

twentyfifteenカスタマイズ設定

スマホ・レスポンシブ対応

「Twenty Fifteen」はレスポンシブ対応で、スマホから見てもとてもシンプルなレイアウトです。

メニューボタンを押すことで、メニュー一覧を確認することが出来ます。

twentyfifteenカスタマイズ設定

動画でワードプレス無料テーマカスタマイズ解説

wordpress(ワードプレス)で人気の無料テーマ

「Twenty Fifteen」のカスタマイズ設定の様子を動画で録画しましたので、参考にしてください。

こちらの記事もおすすめです

当ブログで使用中のサーバーは??

表示速度が断然速い

SEO効果アップ

無料お試し期間あり

エックスサーバー です。

[btn class=”spe”]エックスサーバー 公式[/btn]

タイトルとURLをコピーしました