高機能有料テーマ「Avada」を使ってみる Vol.02

投稿日: カテゴリー: Avada, Wordpress

テーマをカスタムしていく上でCustomCSSに追加で記述したCSSを備忘録。
一部、実質的には「Avada」とは関係ないCSSも含む。

まず、トップページにウィジェットで最新の投稿を表示させてみる。
投稿のカテゴリーを選別して表示。プラグインの「Category Posts Widget」を使用し表示した場合、タイトルとなるカレゴリー名はh4で指定される。「Category Posts Widget」を使うと、例えば【キャンペーン】や【お知らせ】というカテゴリーを指定して投稿した場合、その項目の投稿情報を簡単に一覧表示できる。

 

しかし、ウィジェットタイトルとして表示されてしまうのでh4がデフォルト。
で、それをオリジナルのデザインにしていきたい場合、今回はこう記述してみた。

トップのウィジェットエリアのウィジェットタイトルのフォントサイズを1.6emしますよ、とする。
ちゃんと効いているようなので、あとは好きにCSSでデザインしていけば良さそう。

 

「Avada」のfusion builderには標準で投稿記事を表示させる機能がある。「Blog」と「Recent Posts」。今回はシンプルに「Recent Posts」を使ってみた。しかし、投稿タイトルがデフォルトでは弱い。本文と同じサイズ・ウェイトだ。
そこで、以下をトップページ単体のCustomCSSに記述。

見たまま、エントリータイトルのデザインを変更させる。

 

今回なぜ「Blog」ではなく「Recent Posts」を使ったかというと「Blog」のグリッドレイアウトだと若干要素が多くてカスタムに手間取ると感じたから。
ちなみに、「Blog」の場合、grid指定するとデフォルトで記事を囲む罫が施されるが、余白をコントロールするダイアログはテーマオプションには用意されていない。そこで、以下を追加。これである程度コントロールできる。

 

あと、背景画像を施したボタンを設置してみた。
以下を記述。なんだかんだ…怪しい部分もあるけど、大凡以下で欲しい形にはなっている。

.button-flip { display: inline-block; width: 100%; height: 100%; text-align: center; text-decoration: none; line-height: 150px; outline: none; border-radius:5px; } .button-flip::before, .button-org::after { position: absolute; z-index: -1; display: block; content: ”; } .button-flip, .button-flip::before, .button-flip::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all .3s; transition: all .3s; } .button-flip { background: url(#) no-repeat; background-position: center right; font-family: Maru Folk Medium ; font-size:18px; color: #333; background-color: #ffeb3b; } .button-flip:hover { color: #fff; background-color: #59b1eb; }

因みに、背景画像のない通常のボタンでベーシックなモデルはこれを使っている。

 

 

「Avada」にバンドルされるスライダー作成プラグイン「Slider Revolution」をヘッダーの一パーツとしてショートコードで配置すると、周囲にボーダー(境界線)が表示されてしまう。これはまずい…
何とか消せないものかと、設定などを調べたけれどもどこにも指定項目が見つからない。
で、とても重要な事だけれども「Avada」のオフィシャルフォーラムにしか答えが載っていなかったのでメモ。
以下をCustomCSSに記述することで非表示にできる。

 

 

ついでにもう一つ。
「Avada」のblogのMETAで表記される日付はあまり日本的とはいえない。
そこで、テーマオプションのBlogにあるMETA設定で日付項目に以下を入力。

これで日本的な日付表記になる。