elegant theme(エレガントテーマ) Extraのレビューとついでにカスタマイズ方法をまとめておきます。
全体のレビューはこちらから。
管理画面からのカスタマイズ方法はみればだいたいわかるような気がします。ただ、cssの具体的なカスタマイズ方法をいちいちコードから調べたり英語でぐぐったりが大変な人のために全部まとめておきます。
目次
elegant theme(エレガントテーマ) Extraのレビューとデモ
Extraはelegant theme(エレガントテーマ) の中で最も使いやすい最新のwordpressのテーマです。レビューシステムなどを搭載しているだけではなくメニューのアニメーションなどが格好いいです。日本のテーマでメニューのアニメーションまで実装しているのはなかなかないですよね。
デモはこちらです。
公式の紹介動画はこちらです。
エレガントテーマはデザインが格好いいだけではなく、2016年頃にテーマの管理画面がリニューアルされて一新されました。かなり使いやすくなりましたね。
elegant theme(エレガントテーマ) diviのおすすめカスタマイズ
もうひとつ有名なテーマdiviのカスタマイズはこちらにまとめました。
運用は子テーマの作成がおすすめ
個人的には更新時に楽なように、子テーマを作成して運用しています。
ほとんどのカスタマイズは管理画面からできる
サイドバーの幅を決めたり、フッターリンクを削除したりなどだいたいのことはテーマオプションやカスタマイザからできます。場所は管理画面左の下の方にあります。
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って本当に便利ですね。
Elegant Themes(エレガントテーマ)のまとめ記事や公式サイト
Elegant Themes(エレガントテーマ)のまとめ記事や公式サイトはこちらです。
ご参考になれば幸いです。
コメント