山根の無料メール講座始めました!

自由でのんびりとした人生を目指したい方は是非購読してみて下さい♪

カスタマイズ

【AFFINGER5カスタマイズ】サイドバーの背景を白くする方法!

更新日:

こんちには、山根です。

 

 

今回は、私がアフィンガー5を初期設定する時に

必ず行っている設定として、

「サイドバーの背景を白くする方法」を紹介していきたいと思います。

 

 

アフィンガーはカスタマイズ無限大!

しかしそのせいで

「やれることが多すぎる」

「何を設定すれば良いのか分からない」

というようなお問い合わせも多く寄せられてきます。

(メリットが逆にデメリットになってしまう面白い現象ですね(笑))

 

 

なので、

このサイトではアフィンガーについての細かい設定を

徹底的に解説していきたいと思います。

 

 

アフィンガー5カスタマイズ:サイドバーの背景を白くする意味とは?

 

まず、なぜこのような設定をしなければいけないのかと言うと、

アフィンガー5はインストールしたての状態だと、

サイドバーの背景が透明になっているからです。

(つまり、サイトの背景が透けて見える状態)

 

 

 

これはこれでオシャレな場合もありますが、

正直、背景色が無ければ、

文字がとても読みにくい!

 

 

 

例えば、サイドバーに

プロフィール欄を設けているサイトが多いと思いますが、

 

 

もちろプロフィールなので

文字が表記されますよね?

 

 

その場合、背景が透けていると、

文字が同化してしまい、

とても読みにくいプロフィールになってしまうのです。

 

 

 

それを防ぐ意味でも、

サイドバーの背景色の設定は必須。

 

 

簡単なので、この記事でしっかりと覚えていきましょう!

 

アフィンガー5カスタマイズ:①サイドバーの背景を「標準機能」で白くする方法

サイドバーの背景を白くする方法は2つあります。

 

1つ目は、

もともとアフィンガーに組み込まれている

「標準機能」で設定する方法です。

 

 

まずワードプレスの「外観」⇒「カスタマイズ」を選択します。

 

 

カスタマイズ画面のメニューから「基本エリア設定」をクリック。

 

 

基本エリア内の「サイドバー」をクリック。

 

 

 

サイドバーを開くと、下記の画面になるので、あとは自由に色を変えて下さい。

 

 

 

ここで注意点が1つ!

 

この設定で背景を変えれる範囲は、

「サイドバーウィジェット」部分のみです。

 

つまり、

「サイドバートップ」部分にテキストなどを入れている場合は、

そこだけ反映されませんので注意してください。

 

 

自分がどういう設定をしているかは、

「外観」⇒「ウィジェット」から確認してみて下さいね♪

 

 

 

アフィンガー5カスタマイズ:②サイドバーの背景を「CSS」で白くする方法

 

次に2つ目の方法を紹介します。

 

2つ目は「追加CSS」から変更する方法です。

 

追加CSSとは、簡単に言えば

「失敗しても修正が効く(サイトを壊す心配のない)プログラミングの編集」機能です。

 

 

 

つまり、初心者や素人は直接サイトのCSSを書き加えると、

取り返しのつかない失敗をすることがありますが、

(私も過去に調子に乗ってCSSをいじったらログイン画面すら表示されなくなりました(笑))

 

 

この追加CSS機能を使えば

初心者でも安心して

サイトをカスタマイズすることが出来るという事です。

 

 

 

では説明していきましょう。

 

「外観」⇒「カスタマイズ」をクリックし、下記の画面まで進みます。そして、

カスタマイズ画面の一番下にある「追加CSS」をクリック。

 

 

 

追加CSSを開くと、下記の画像のような、左に数字が書いてる空白のページが表示されますので、

その空白の部分にコードを書き加えていきます。そのコードが正しければリアルタイムでサイトに反映されるのです。

 

 

 

では、サイドバーの背景を白くするコードを書いておきますので、

使ってみたい人はこのままコピペして使用してください。

 

 

#side aside {
background:#FFFFFF; /*背景色*/
padding:10px!important; /*隙間*/
box-sizing:border-box;
}

 

 

 

 

この追加CSSを使用した場合は、

先ほどお伝えした「標準機能」で変更した時と違い、

サイドバー全ての背景が変更されますので、

「サイドバートップ」部分だけ色が変わらない。なんてことにはなりません。

 

 

どちらの方法を使って変更しても結果はほぼ同じですが、

追加CSSで変更すると、

少しだけ「なんかプログラマーっぽい(笑)」

となる気がしますので、

是非追加CSSを使ってみてはいかがでしょうか?

 

 

以上がアフィンガー5でサイドバーの背景を白くする方法でした!

それではまた!

 


人気ブログランキング

↑クリックしてこのブログを応援。
正直に言います!ご迷惑でなければ押して欲しいです。山根の活力剤になります(笑)

 

当サイト限定!山根のAFFINGER5豪華特典のご案内

 

【当サイトだけの限定特典!】

当サイト経由でAFFINGER5を購入された方限定で豪華な特典をプレゼント!

ロールプレイングゲームのように、中ボス、ラスボスを倒して楽しくアフィリエイトで稼いでいく考え方!

一個一個の手順や課題を提案!ステップアップ式にクリアしていく為のチェックシート配布!

・3ヵ月で30万円稼いだノウハウ

・ヘッダー画像作成サービスなどなど!

詳しくは記事の最後をご確認下さい。目次で飛ぶ事も可能です♪

 

 

 

「本気」で「今の人生を変えたい人」に読んで欲しいメルマガ!

 

特別なスキルや才能もなく、

頭も良くない。

 

何かスポーツが得意なわけでもなく、

むしろ引っ込み思案で

地味な性格。

 

そんな「THR 凡人」の私が

「自由」を手に入れ、人生をがらりと変えた方法を

今だけ無料公開中!

人生はほんの少しのきっかけで

驚くほど変化します。

そのきっかけをあなたにも・・・・・・

 

 

このブログは、脱サラして、嫌な上司とは無縁の自由な暮らしを手にしたい!お金に不自由せず家族とのんびり暮らしたい!子供に誇れるかっこいい親になりたい!

と、”本気で”考えている方のブログです。

本気であればあるほど、覚悟があればあるほど、圧倒的に早く成功出来ます!

気になることがあれば、なんでもご相談下さい。私の知識の範囲で誠心誠意お答えいたします。

 

 

山根のお問い合わせはこちらから 一人で悩んでも何も解決はしませんからね♪

 

 

 

 

 

 

-カスタマイズ

Copyright© 山根のスローライフブログ , 2019 All Rights Reserved.