カスタマイズ

【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 凡人」の私が

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

今だけ無料公開中!

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

驚くほど変化します。

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

 

 

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

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

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

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

 

 

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

     

     

     

     

     

     

    山根の「ビジネス無料相談所」はこちらから

    ネットビジネス初心者の為に、無料相談所を作りました!

    登録してくれた方には

    ・無料プチコンサル権(LINE通話)
    ・毎月ほぼ放置で稼ぎ続けている資産型アフィリエイトのノウハウ
    ・凡人でも100万円稼ぐ為のロードマップ
    ・メルカリ物販でリアルに利益が出た商品
    ・メルカリ物販で2ヵ月で10万円稼ぐ為のロードマップ

    この5つをプレゼントしたいと思います。

    一緒に稼げる仲間が増えれば嬉しいです♪

    -カスタマイズ