自宅サロンママのためのネット集客術

女性個人事業主専門 WordPressで作るホームページ作成講座

アメブロでサイドバーや記事タイトルの文字と下線の色を変える方法

23615 views
約 4 分

こんにちは!
ママのためのネット集客術 伊藤真穂です。

アメブロのカスタマイズを自分でしたい!
そんな方向けに必要最低限なカスタマイズ方法をご紹介します。

↑こちらの記事で、
ヘッダー画像の編集が終わったら・・・

あとは、
サイドバーのタイトル文字やその下の線の色、

記事タイトルの文字やその下の線の色を変更してみたいと思います。

色の変更

こちらも、
ヘッダー画像の設置同様に、

CSSの最後にコードを貼り付けるだけです!

ちょっと大変なのは、
色選びでしょうか?

手順は以下となります。

①CSS編集可能デザインを設定する

②コードを貼り付ける

③カラーコードを指定する

それでは、順番にみていきましょう。

CSS編集可能デザインを設定する

管理画面からCSS編集可能デザインの設定をします。
詳しい方法は、こちらの記事の手順をご覧ください。

コードを貼り付ける

サイドバーのタイトル文字とラインの色を編集するのに、以下のコードをCSSの一番下に貼り付けてください。

/* サイドバータイトル */
.skin-widgetTitle {
color:#DC4748;
border-bottom: 1px solid#DC4748;
}

このままだと、
こんな感じになります。

サイドバー

記述内容の意味は・・・

color:#DC4748;
→文字の色はカラーコード#DC4748
border-bottom: 1px solid#DC4748;
→線は、1ピクセルの実線でカラーコードは#DC4748

ということ。

なので色を変えたい場合、

この#で始まるコードを指定していきます。

カラーコードを貼り付ける

では、カラーコードを変更してみますね。

/* サイドバータイトル */
.skin-widgetTitle {
color:#C5631F;
border-bottom: 1px solid #61C41F;
}

サイドバーの文字とラインの色

と、このように変わります。

※わかりやすいように変な配色になってますが(汗)

カラーコードに関しては、
↓こちらの記事を参考にしてください。

記事のタイトルと下線を変更する

記事タイトルと下線の色を変更する場合も同じです。

コードは以下となります。

/* 記事タイトル */
.skin-entryTitle {
color: #333333;
border-bottom: 1px solid #e5e5e5;
}

同じようにカラーコードを設定してください。

サイドバーと同じ配色にするとよいと思います。

下線の太さや種類を変更

慣れてきたら、
下線の太さや種類も変更してみましょう。

border-bottom: 1px solid #e5e5e5;
ここを変えます↑

下線の太さを変える

例えばこんなコードだと・・

/* 記事タイトル */
.skin-entryTitle {
color: #878787;
border-bottom: <strong>1px solid</strong> #F0435A;
}
タイトルサンプル1

このように表示されます。
ピクセル数を3pxにしてみると・・・

タイトルサンプル2

このように変更できます。

下線の種類を変える

下線の種類は、solidを変更します。
solid→1本線
double→2本線
dashed→破線
dotted→点線

例えば、

border-bottom: 2px dotted #F0435A;

とすると、こんな感じになります↓

下線サンプル

サイドバー、記事タイトルも同じ設定なので、
ヘッダーに合わせてお好みを見つけくださいね。

以上です!

まとめ

・アメブロカスタマイズでサイドバーや記事の文字色、下線の種類は、それぞれ指定したコードをCSSの最後に貼り付けるだけで変更が可能です。
・線の種類も点線や破線に変更が可能です。
・色の指定はカラーコードで設定します。

東京と大阪でSEOの基本が学べます

東京と大阪でSEOの基本が学べます

【女性個人事業主限定】

東京と大阪で、SEOの基本が学べる期間限定講座を行います。

今後もネットで集客していくなら知らないと絶対に損してしまう、SEO対策の基本をわかりやすく、女性個人事業主向けにアレンジした他では学べない特別な内容です。モヤモヤしていたSEOの謎がスッキリ解決し、今すぐできることがわかります。

ブログだけの集客に限界を感じているという方へ

いまさら人に聞けない【ネット集客の基本】をまとめたPDF資料が今すぐダウンロードできます!

  • 検索にひっかかるってどういうこと?
  • WordPressって何?
  • SNSってやったほうがいいの?
  • メルマガって何のためにやるの?
  • LINE@って必要?
    ・・・他

一般的なネット集客のノウハウをおうちサロン・女性個人事業主の方向けにアレンジしてまとめました。

資料の詳細を見てみる

この記事を書いた人

PC講師20年、おうちサロン歴6年。
次男の障害をきっかけにママ支援をするも、SEOの知識の無さから本当に必要な人に情報が届かないという、もどかしさを経験。それをきっかけにWordPress、SEOを本格的に学び、同じ悩みを持つ女性個人事業主の方に向けて、情報発信をしています。

詳しいプロフィールはこちら