ひとりで頑張っているあなたに寄り添うサポートやってます♪  ここをクリック   

ALPHAカスタマイズ:見出しのデザインを変えてみた

  • URLをコピーしました!
★本ブログの各記事では、サイトの運営維持のため広告リンクを利用している場合があります。

ららです。

ららの別のブログでは、
>>らら流情報商材レビューブログ
テンプレートに「ALPHA(アルファ)」を使っています。

ALPHA(アルファ)は、シンプルでスタイリッシュなデザインがとってもお気に入り。
なかなか洗練されているのですが、
h2やh3のタイトルのデザインがちょっとシンプルすぎ…。

こんな感じです。

これはこれで、シンプルで素敵♪な部分でもあるんですが、
私はもうちょっと可愛い目にしたかったので、こんなふうに変えてみました。

↓ ↓ ↓

なかなか素敵になりましたよね。これのやり方をご紹介しますね。
あなたも自分なりのセンスでカスタムしてみてください^^

カスタマイズに慣れていない場合は、必ずこの記事に目を通してください。
カスタマイズの基本的なことが書いてあります。
>>カスタマイズの手順と注意点
>>ワードプレステンプレートALPHA(アルファ)カスタマイズの基本
目次

h2のデザインをステッチ風に変える

「追加CSS」もしくは子テーマの「style.css」に、このようなコードを追加します。

/* 既存のスタイルをリセット */
.entry-content > h2,
.textwidget > h2 {padding: 0;border-radius: 0;background: none;border: none; }

/* 見出しのスタイルを変更 */
.entry-content > h2,
.textwidget > h2 {
margin-right: 5px;
margin-left: 5px;
padding: 0.5em 0.666em;
border: 2px dashed #ffffff;
background: #965036;
box-shadow: 0px 0px 0px 5px #965036;
color: #ffffff;
font-size: 21px;
line-height: 1.333;
}

全体の色は、12行目と13行目のカラーコードを変更すると違う色になります。
ステッチの色(今は白)は、11行目のカラーコードを変更すると変わります。
文字の色を変更したかったら、14行目を変更してください。

h3のデザインを変更する方法

h3は、左側にちょっとポイントを入れただけのカスタマイズになります。

「追加CSS」もしくは子テーマの「style.css」に、このようなコードを追加します。

/* 既存のスタイルをリセット */
.entry-content > h3, 
.textwidget > h3 {padding: 0;border-radius: 0;background: none;border: none; }

/* 見出しのスタイルを変更 */
.entry-content > h3, 
.textwidget > h3 {
  padding: 0.5em 0.666em;
  border-left: 7px solid #670202;
  background-color: #eeeeee;
  color: #000000;
  font-size: 21px;
  line-height: 1.333;
}

9行目が、そのポイントを指定している行です。
9行目のカラーコードを変更すると、ポイントの色が変わります。
バックの色をグレーじゃなく変更したい場合は、10行目のカラーコードを変更します。
文字の色は、11行目のカラーコードを変更すれば変わります。

h4のスタイルを変更する

h4は、太めのアンダーラインを追加しました。

「追加CSS」もしくは子テーマの「style.css」に、このようなコードを追加します。

/* 既存のスタイルをリセット */
.entry-content > h4, 
.textwidget > h4 {padding: 0;border-radius: 0;background: none;border: none; }

/* 見出しのスタイルを変更 */
.entry-content > h4, 
.textwidget > h4 {
  padding: 0 0 0.5em;
  border-bottom: 3px double #670202;
  color: #000000;
  font-size: 21px;
  line-height: 1.333;
}

アンダーラインの色の変更は、9行目のカラーコードを変更します。
10行目で、文字の色が変更できます。
11行目で文字の大きさが変更できます。

 


以上になります。
記事の見出しのデザインを変えると、ブログの雰囲気がガラッと変わります。

特にALPHAは、元がシンプルなので、
自分好みのデザインに変更して、楽しんでみてくださいね^^

スタイリッシュ過ぎるワードプレステーマ「ALPHA(アルファ)」の詳細はこちら
ALPHAらら流レビューと特典のご案内

ALPHAの関連記事はこちらです
ALPHAの関連記事をもっと読む

 

記事が役に立ったら、ここをクリックして応援をお願いします。

私が稼げるようになった教材

アンリミテッドアフィリエイト
ごくごく普通の主婦だった私が、累計800万円以上稼げたのは、この教材を購入して作業をしたから。
詳細は、こちらのページでご紹介しています。
>>アンリミテッドアフィリエイトらら流レビュー
私がここまでたどった経験を元にした特典と、濃厚すぎるサポートも差し上げています。

無料レポートを書かずにメルマガ読者を全自動で集める方法!

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

ららです。
2人の子供はもう成人した50代主婦です。10年ほど前から、主婦業・母親業の隙間時間でアフィリエイトに挑戦。パート時代の約6倍の月収を達成することができました。

超マイペースで超怠惰で超食いしん坊の私でもできたその秘密は、とにかく諦めないこと!
これから始めるあなたに私の経験をお伝えするため、ブログ・メルマガで情報を配信するとともに、サポートやコンサルを行っています。常に初心者さん目線を忘れない安心できるブログを目指してますので、どうぞ何でもご相談くださいね。

コメント

コメント一覧 (0件)

  • はじめまして

    あや子と申します

    ブログランキングから来ました。

    きれいなデザインですね。

    見た目も重要だと感じます。
    ありがとうございました。

    応援ポチ

あや子 へ返信する コメントをキャンセル

目次