【バズ部テンプレート】Xeory baseでヘッダーを塗りつぶす

どうも、さきこ。です♪

何回かこのブログを訪れている場合はわかるかもしれませんが、テンプレートを変えてみました♪

今回はこの使用しているテンプレート、

バズ部の「Xeory base」のカスタマイズについて、お送りします♪

 

 

そもそも「Xeory」って?

 

Xeory baseは、バズ部提供の無料テンプレートです。

バズ部が提唱しているSEO施策を、全てテンプレート内で行えるのが

このテンプレートの魅力。

 

というか、私が惹かれたのはシンプルな見た目でした。

カスタマイズし甲斐があるというか(笑)

非常にシンプルに纏まっていて、とても使いやすいです。

 

何と言っても、テンプレート内に、

  • 使い方マニュアル
  • CTA作成機能
  • LP作成機能

これが備わっているのがとても嬉しい。

CTAやLPについては後日解説しますね。

 

 

画像の様に、使い方マニュアルがついていて、

左サイドメニューに

投稿、CTA、LPと三つの項目がわかりやすく分けられています。

もちろん、使い方マニュアルつき。

 

 

そんなこんなで、シンプルは好きだけど、

シンプルすぎるのもどうなの?っていうことなので、

少しカスタマイズしていこうと思います。

 

ヘッダー部分を塗りつぶす

 

ヘッダーに画像を使う事も考えたのですが、

このシンプルな見た目のままいきたいなーと思ったので、

「だったらちょっと色づけする為に、ヘッダー部分を一色にまとめよう!」

と思い立ったので、自分の備忘録的にも書いていこうと思います♪

 

 

 

 

 

何もしていない状態だと、ヘッダー、一番上の部分は無色です。

とんでもなくブログが白い。

このままじゃいかんので、早速作業開始です。

 

今回は、スタイルシートは弄らず、

備わっている機能で補います。

 

ダッシュボートの左サイドメニューから、

【外観】→【CSS編集】の順番にクリック。

 

すると、左側に編集用の入力欄がでてきます。

 

右側には入力したものがリアルタイムでプレビューできるので、

これまた嬉しい。

この左側の入力欄に、入力していきます。

 

 

赤いカッコの部分が入力したものです。

※茶色い文字の最後に入力しないと、反映されません。

 必ず文章の最後に入力していきましょう。

 

body.color01 #header

{background: #00cc66;

}

 

上記が入力したコードです。

 

body color01について

このbody colorの後についている【01】。

なんぞやと思われるかもしれませんが、

Xeoryには初期設定で基本色を指定することが出来ます。

 

この画面ですね。

この画面で指定する色は、リンクが貼ってある文字の色の指定になります。

 

デフォルトだったらそのまま。

緑だったら01

赤は02

オレンジは03

ピンクは04

と、指定している色別に、番号を指定してあげないと色が変わりません。

 

私の場合は緑を指定しているので、

bodycolor01です。

 

色系は全てこのコードを指定しないといけないので、

今自分が設定している色がどの色なのか、きちんと把握して編集していきましょう。

 

 

#00cc66について

こちらは、好きな色のカラーコードです。

私は緑にしたかったので、このコード。

 

カラーコードを見て自分の好きな色を探すのも楽しみなので、

ぜひぜひお気にいりの色を探してみてください。

 

カラーコード一覧は、こちらが便利⇓

原色大図鑑

※原色と書かれていますが、パステルカラーも、地下鉄の線別色も一覧になってます。

 

そんなこんなで

CSS編集欄にコードを入力できたら、右のプレビューを見ながら、

大丈夫だと思ったら上の【保存して公開】ボタンをクリックして編集完了です。

 

こんな風になりました。

今まで真っ白だったヘッダーが、緑に塗りつぶされて、

インパクトがググッと上がりました。

 

ちなみに、タイトルは画像です。

白い文字で入力した後、背景を透明化することで、

指定した#00cc66の色を消さずに出せています。

(コードでも出来るのですが、フォントが気に入らなかった・・・)

 

 

編集後記

まずは上から、という事でヘッダーを編集してみました。

Xeoryはカスタマイズしやすそうなのに、中々編集している方が見つからないのです。

検索してみても、同じ方のブログに飛んでしまって、

自分が欲しい情報に中々行き当たりません…。

 

苦労して色々なブログを見つつ、

試行錯誤を繰り返してきたので、これからちょこちょこ備忘録として

残していこうと思います♪

 

 

何かわからない事、疑問、成功しないんだけど…

ということがありましたら、コメントや問い合わせください♪

 

 

底辺フリーターが経済的自由と自分らしさを手に入れるまで

  • このエントリーをはてなブックマークに追加
  • LINEで送る

SNSでもご購読できます。

コメントを残す

*