elegant theme(エレガントテーマ) Extraのレビューとおすすめカスタマイズ

シェアする

wordpress001

elegant theme(エレガントテーマ) Extraのレビューとついでにカスタマイズ方法をまとめておきます。

全体のレビューはこちらから。

Elegant Themes(エレガントテーマ)の評判・評価(日本語対応)
Elegant Themesという海外の有名なテーマがあります。購入しましたので、評判をレビューしていきます。 公式サイトはこちら...

管理画面からのカスタマイズ方法はみればだいたいわかるような気がします。ただ、cssの具体的なカスタマイズ方法をいちいちコードから調べたり英語でぐぐったりが大変な人のために全部まとめておきます。

elegant theme(エレガントテーマ) Extraのレビューとデモ

Extraはelegant theme(エレガントテーマ) の中で最も使いやすい最新のwordpressのテーマです。レビューシステムなどを搭載しているだけではなくメニューのアニメーションなどが格好いいです。日本のテーマでメニューのアニメーションまで実装しているのはなかなかないですよね。

デモはこちらです。

公式の紹介動画はこちらです。

エレガントテーマはデザインが格好いいだけではなく、2016年頃にテーマの管理画面がリニューアルされて一新されました。かなり使いやすくなりましたね。

スポンサーリンク

電子書籍のおすすめ比較

elegant theme(エレガントテーマ) diviのおすすめカスタマイズ

もうひとつ有名なテーマdiviのカスタマイズはこちらにまとめました。

elegant theme(エレガントテーマ) diviのおすすめカスタマイズ
elegant theme(エレガントテーマ) diviのカスタマイズをまとめておきます。 エレガントテーマのdiviの完成例 ...
スポンサーリンク

運用は子テーマの作成がおすすめ

個人的には更新時に楽なように、子テーマを作成して運用しています。

Wordpressの子テーマの作り方〜header.phpやfooter.phpやsingle.phpもあると便利
Wordpressの子テーマの作成方法をまとめておきます。覚書をかねています。 style.cssやfunctions.phpだけでは...

ほとんどのカスタマイズは管理画面からできる

サイドバーの幅を決めたり、フッターリンクを削除したりなどだいたいのことはテーマオプションやカスタマイザからできます。場所は管理画面左の下の方にあります。

Extra > Theme Option
Extra > Theme Coutomizer

Youtubeに20本以上の公式のチュートリアルが公開されています。Theme Optionは新しくなっているため、管理画面はぜんぜん違いますけど。でも、みればわかるレベルです。

elegant theme(エレガントテーマ) Extraの色変え

そのままでも利用できるのですが、好みのサイトにするため色変えをしています。子テーマを使う場合は!importantで書き換える必要がある場合もあります。

/* もろもろ色替え */
#top-header {
	background-color: #ff6d94;
}
#main-header {
	background-color: #fafafa;
}
#main-header a{
	color: #626262 !important;
}
.sub-menu {
	background-color: #fafafa !important;
	border-top-color: #ff6d94 !important;
}
/* ウィジエットタイトル */
.et_pb_extra_column_sidebar .et_pb_widget .widgettitle {
	background-color: #82c0c7;
	color: #626262;
}
.post {
	background-color: #f1f1f1 !important;
}
#footer {
	background-color: #393939;
}

elegant theme(エレガントテーマ) Extraのレビューシステムを消去

elegant theme(エレガントテーマ)にはレビューシステムを導入されているのですが、いらない場合はレビューシステムを消去します。使う場合はそのまま使いましょう。

/* rating-starsを消去 */
.rating-stars {
	display: none !important;
}

rating-starsで記事上も記事下も消えます。

rating-starsを消去に伴いコメントリンクの位置がずれるため調整します。記事上にあるコメントリンクのことです。クリックすると飛びますよね。

/* rating-starsの消去に伴いコメントリンクの位置がずれるため調整 */
.comments-link {
	position: relative;
}

.comments-link:after {
	content: '';
	position: absolute;
	top: 0;
	right: -9px;
	bottom: 0;
	width: 2px;
	background: #f1f1f1;
}

elegant theme(エレガントテーマ) Extraのモバイルメニューを消去

個人的にモバイルメニューを削除しています。なぜかというと、スマホで固定メニューを導入したいからです。

/* モバイルメニューの削除 */
@media only screen and (max-width: 1024px) {
	#main-header {
		display: none;
	}
}

固定メニューはプラグインを利用しています。Wordpressって本当に便利ですね。

簡単にプラグインでスマホのメニューを上部固定する方法まとめ
Wordpressのテンプレートはいまだスマホの固定メニューに対応していないものが多いです。 そのため、jqueryのsliderなどが有...

Elegant Themes(エレガントテーマ)のまとめ記事や公式サイト

Elegant Themes(エレガントテーマ)のまとめ記事や公式サイトはこちらです。

Elegant Themes(エレガントテーマ)の評判・評価(日本語対応)
Elegant Themesという海外の有名なテーマがあります。購入しましたので、評判をレビューしていきます。 公式サイトはこちら...

ご参考になれば幸いです。

スポンサーリンク

シェアする

フォローする

スポンサーリンク