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. 404

    WEB

    Broken Link Checker でリンクエラーになってしまう?その対処法について

    Broken Link Checker というプラグインで、リンクエラ…

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

    WEB

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

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

  3. 空にかざした水晶

    WEB

    Retinaディスプレイでもロゴ画像がぼやけないように、クッキリと表示させる方法

    一生懸命作ったブログのロゴ画像。残念ながらそのままアップしても、Mac…

  4. ドメイン

    WEB

    お名前.com でドメインを取得する方法

    WordPress でブログを始めるには、独自ドメインを取得しなくては…

  5. 緑のドア

    WEB

    ドメインって何? どうやって決めるの?

    WordPress でブログを始めるには、レンタルサーバーとの契約、ド…

  6. コントローラー

    WEB

    WordPress でレイアウトが崩れる自動整形を回避する方法

    WordPress で固定ページを作成しようと思い、コードを記述して表…



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

wordpress

よく読まれている記事

  1. サーバー
  2. crayon,クレヨン
  3. カレンダー
  4. 404
  5. ドアに差し込まれた封筒
  6. タイプライター
  7. パン
  8. 海に浮かぶ男性
  9. いいえ、結構です。
  10. 緑のドア

カテゴリー

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

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

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

パソコンを覗き込む二人の女子
  1. カメラ

    WEB

    WordPressで最低限おさえておきたい画像処理について
  2. ドメイン

    WEB

    エックスサーバー(エックスドメイン)でドメインを取得しよう
  3. 窓

    WEB

    TCDのテーマ『MAG』で『関連記事カードリンク』を新しいタブで表示する方法
  4. タイプライター

    WEB

    font-weight プロパティについて
  5. ケーブル

    WEB

    『お名前.com』で取得したドメインを『エックスサーバー』に紐付けする方法
PAGE TOP