どうも、さきこ。です♪
何回かこのブログを訪れている場合はわかるかもしれませんが、テンプレートを変えてみました♪
今回はこの使用しているテンプレート、
バズ部の「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はカスタマイズしやすそうなのに、中々編集している方が見つからないのです。
検索してみても、同じ方のブログに飛んでしまって、
自分が欲しい情報に中々行き当たりません…。
苦労して色々なブログを見つつ、
試行錯誤を繰り返してきたので、これからちょこちょこ備忘録として
残していこうと思います♪
何かわからない事、疑問、成功しないんだけど…
ということがありましたら、コメントや問い合わせください♪
底辺フリーターが経済的自由と自分らしさを手に入れるまで
