3匹のカエル

WEB

アメブロの見出しをカスタマイズする方法

今更ながらアメブロデビューしました。

そこで気づいたのですが、アメブロを書いている方ってあまり見出しを使われないんですね…

私は、WordPressでブログを書く時のように見出しを使ってみたのですが、ただ文字サイズが大きくなるだけ。しかも、大きくなりすぎる。・・・そんな、デザイン的にもどうなんだろう?と思うものでした。

ここでは、アメブロの見出しにラインを引いたり、装飾をしたりする方法について説明していきます。

スポンサードリンク
スポンサードリンク

シンプルだけどお洒落な見出しにカスタマイズしてみよう

今回は、下の画像のような見出しに変更するコードを紹介します。

アメブロの見出し

 

毎回、HTMLに記述をする方法もありますが、最初にCSSを編集してしまうと楽です。

ただし、この方法は、ブログ管理デザインの設定で『カスタム可能』のデザインを選択している方限定となります。新デザイン、旧デザイン、どちらもOKです。

アメブロの管理画面

1. CSSの編集を選択

ブログ管理デザインの設定デザインの変更CSSの編集 をクリックします。

アメブロの管理画面

すると、『現在使用中のブログデザインCSS』が表示されます。

アメブロの管理画面

2. コードを記述

上の画像の赤枠で囲んだ『@charaset “UTF-8”;』で始まるものがスタイルシートになります。スクロールして、スタイルシートの一番下にコードを追記するのですが・・・

その前に!!

念のためにバックアップを取っておきましょう。
やり方は簡単。スタイルシートの記述を全てコピーし、メモ帳などに貼っておくだけです。

 

では早速、下記のコードを追記しましょう。コピペしてしまえば簡単です。

【新デザインの方

 

【旧デザインの方

3. アレンジ方法

あとは、あなた好みにアレンジしてみましょう。

下記を踏まえた上で、お好みのサイズや色に変更していきます。

font-size:文字サイズ
padding:文字と枠の隙間
background:背景色
border:線の太さ、種類、色

一つずつ詳しく解説していきますね。

font-size:文字サイズ

文字サイズの『1em』というのは、デフォルトの 16px のことです。もし 20px にしたいのなら、1.25 倍なので『1.25em』と記述します。

padding:枠と文字の隙間

下記のように4タイプの指定方法があります。0.5 の場合は、0 を省いて『.5』と記述します。また、0 には単位をつけません。

padding: 1em; 「上下左右」を指定
padding: .5em .75em; 「上下」「左右」を指定
padding: .25em 0 .5em; 「上」「左右」「下」を指定
padding: .25em 0 .5em .75em; 「上」「右」「下」「左」を指定
background:背景色

背景色は、『#〇〇〇〇〇〇』という色コードで指定します。色コードについては、原色大辞典 を参考にすると良いでしょう。

border:線

・線の太さは、数字を大きくすればするほど太くなります。

・代表的な線の種類として、下記のものがあります。

直線・・・・solid
二重線・・・double
破線・・・・dashed
点線・・・・dotted

見本では直線(solid)となっている部分を、お好きなものに変更してみましょう。

・線の色については、backgroundと同じです。お好みの色コードを指定します。

・border には部位を示す toprightbottomleft があります。

見本は、

・大見出しは border-left(左のライン)と border-bottom(下のライン)
・小見出しは border-bottom(下のライン)

で作られていますね。

border-radius は、角の丸みをまとめて指定するプロパティです。

最後に

CSSのコードは、少しでもミスがあるときちんと表示されません。もし、表示がおかしくなってしまった場合は慌てずに、おかしな記述がないか確認しましょう。

どうしても分からなければ、スタイルシートの下にある『編集前の状態に戻す』をクリックすれば大丈夫。

念には念を入れ、追記する前にスタイルシートのバックアップも取っておきましたので、安心してチャレンジしてみてください!!

 

思いどおりにカスタマイズすることはできましたか?

何か分からないことなどございましたら、お問い合わせページ、またはツイッターのダイレクトメッセージからお気軽にお問い合わせください。

 

 
スポンサードリンク
 
スポンサードリンク

関連記事

  1. パン

    WEB

    MAGでトップページのみ、パンくずリストを非表示にする方法

    TCDさんのテーマ『MAG』は、デフォルトのままだとトップページにもパ…

  2. カレンダー

    WEB

    WordPressのテーマ『MAG』で最終更新日を表示する方法

    このブログでも使用しているTCDさんのWordPressのテーマ『MA…

  3. fontAwesome

    WEB

    超簡単!!Font Awesome(Version 5)の使い方

    アイコンフォント『Font Awesome』の使い方について説明します…

  4. 腕を交差させる草原に座った男性

    WEB

    データベース内の文字列の書き換えに便利な『Search Replace DB』の使い方

    データベース内の文字列の書き換えに便利な『Search Replace…

  5. 洗濯物

    WEB

    横並びさせた要素の端のマージンを調整する方法

    幅が 960px の inner の中に、幅が 300px、右側のマー…

  6. ドアに差し込まれた封筒

    WEB

    Contact Form 7 のメールが届かない?『WP Mail SMTP』で即解決!!

    WordPressでは『Contact Form 7』というプラグイン…



== WORDPRESS 完全マニュアル ==

wordpress

よく読まれている記事

  1. 空にかざした水晶
  2. カレンダー
  3. コントローラー
  4. 404
  5. wordpress,ワードプレス
  6. ガッツポーズする男性
  7. ガネーシャ
  8. pencils
  9. 郵便受け
  10. 子猫をのせた乳母車を押す親猫

当サイトで使用しているテーマはこちら!!

アフィリエイトサイトにはDiverもお勧め!!

WordPressでブログ始めてみませんか?

パソコンを覗き込む二人の女子
  1. ブランコに乗る女の子

    WEB

    エックスサーバーで『サブドメイン』を設定して、WordPressをインストールし…
  2. いいえ、結構です。

    WEB

    お名前.comの自動更新の設定を解除する方法
  3. タイプライター

    WEB

    font-weight プロパティについて
  4. サーバー

    WEB

    エックスサーバー(XSERVER)でサーバー契約してみよう!!
  5. 郵便受け

    WEB

    『WP Mail SMTP』のテスト送信でのエラー表示(Could not au…
PAGE TOP