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

【ALPHAカスタマイズ方法】ららのブログの見出しのデザインを、ちょっと可愛く変えてみました。ALPHAのデフォルトデザインはとってもシンプルなので、特徴を付けたい場合は、マネしてみてくださいね^^

ららです。


ららの別のブログでは、
>>らら流情報商材レビューブログ
テンプレートに「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は、元がシンプルなので、
自分好みのデザインに変更して、楽しんでみてくださいね^^



この記事が役に立ったと思ったらクリックしてね。ららが喜びます。

 

 

 

こんな記事もありますよ☆ぜひ見ていってね!

 


最後まで読んでいただき、ありがとうございました。


ららのブログでは、あなたからの疑問・質問・お問い合わせを大歓迎しています。 こちらからいつでもメールを送ってくださいね。

>>ららにメールを送る

 

 

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

  1. あや子 より:

    はじめまして

    あや子と申します

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

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

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

    応援ポチ

コメントを残す

サブコンテンツ

このページの先頭へ