3匹のカエル

WEB

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

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

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

私は、WordPressでブログを書く時のように見出しを使ってみたのですが、ただ文字サイズが大きくなるだけ。しかも、大きくなりすぎる。

・・・そんな、デザイン的にもどうなんだろう?と思うものでした。

ここでは、そんなちょっと寂しいアメブロの見出しにラインを引いたり、装飾をしたりする方法について説明します。

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

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

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

アメブロの見出し

 

ただし、この方法は、ブログ管理 > デザインの設定『カスタム可能デザイン』の中の『CSS編集用デザイン』を選択している方限定となりますのでご注意ください。

アメブロの管理画面

1. CSSの編集を選択

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

アメブロの管理画面

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

アメブロの管理画面

2. コードを記述

上の画像の赤枠で囲んだ『@charaset “UTF-8”;』で始まるものを「スタイルシート」といいます。

このスタイルシートを一番下までスクロールして、コードを追記するのですが・・・

その前に!!

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

 

追記するコードには、① 2カラムのデザインを選択している方向けのコード(skin-entryBody)と、② 3カラムのデザインを選択している方向けのコード(articleText)の2種類があります。

ここでちょっと難しいのが、どのデザインを選択しているかにより、記述するコードが異なるという点。

ここからは、あなたのブログがどちらに該当するのか見分ける方法について説明したいと思います。

 

見分け方は二通りあるのですが・・・

簡単かつ確実なのは、今から説明する Google Crome の検証ツール(デベロッパーツール)で確認する方法です。

ブラウザは、必ず Google Crome をお使いください。

よく分からない方は、次に説明する方法( 2-2. アメブロの管理画面で確認する)でも確認できますので、ご安心ください。

2-1. 検証画面で確認する

アメブロの投稿画面を開きます。

アメブロの投稿画面

① 投稿したテキスト上ならどこでも良いのですが、とりあえずここでは「大見出し」の文字の上でドラッグし、右クリックしてみましょう。

② 表示された「検証」の文字をクリックすると、検証ツールが開きます。

 

アメブロの投稿画面

<h2>大見出し</h2> を囲んでいる divタグ の class名 を確認します。

ここでは「skin-entryBody」であることが分かります。

ですので、この場合は下に記載している【 2カラム(skin-entryBody)用のコード】を使用することになります。

ここで class名 が「articleText」であると確認できた場合は、【 3カラム(articleText)用のコード】を使用して下さい。

 

次にもう一つの確認方法について説明します。

2-2. アメブロの管理画面で確認する

アメブロの管理画面を開きます。

デザインの設定から「カスタム可能」デザインを選択し、下の画面を表示させます。

アメブロの管理画面

ここで、「適用中のデザイン」が ① の2カラムのデザインの方は【 2カラム(skin-entryBody)用のコード】を、② の3カラムのデザインの方は【 3カラム(articleText)用のコード】を使用します。

 

ここで注意していただきたいのが・・・例えば下の赤枠で囲んだ2カラムのデザインを選択(クリック)し、

アメブロの管理画面

その後に表示されるレイアウトの中から、3カラムのデザインを選ばれたとしても、

アメブロのデザインの表示確認・レイアウト変更画面

記述するコードは、【 2カラム(skin-entryBody)用のコード】となることです。

最初にどのデザインを選択したかが基準となりますので、ご注意ください。

※ この二番目に説明した方法は、アメブロのデザインが新たに追加された際には少し混乱してしまいそうなので、できれば最初にご紹介した Google Crome の検証ツール(デベロッパーツール)を用いて確認する方法をお勧めします。

 


【 2カラム(skin-entryBody)用のコード】

 

【 3カラム(articleText)用のコード】

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 は、角の丸みをまとめて指定するプロパティです。

最後に

今回は、アメブロの見出しをカスタマイズする方法について説明しました。

少しややこしかったかもしれませんが、ぜひチャレンジしてみて下さい!!

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

 

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

空にかざした水晶Retinaディスプレイでもロゴ画像がぼやけないように、クッキリと表示させる方法前のページ

エックスサーバーで常時SSL化する方法について次のページネットショッピング

関連記事

  1. 郵便受け

    WEB

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

    『WP Mail SMTP』は、Gmailなどのメールサーバーを使って…

  2. 海に浮かぶ男性

    WEB

    float 解除と clearfix

    要素を float させた場合、次の現象が起こります。 …

  3. 緑のドア

    WEB

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

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

  4. crayon,クレヨン

    WEB

    記事内にソースコードを表示する『Crayon Syntax Highlighter』

    「記事内にソースコードを記述したい場合、どうしたら綺麗に書くことができ…

  5. fontAwesome

    WEB

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

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

  6. コントローラー

    WEB

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

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

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

wordpress

よく読まれている記事

  1. パン
  2. cyclists
  3. 緑のドア
  4. ブランコに乗る女の子
  5. wordpress,ワードプレス
  6. local by flywheel
  7. ガネーシャ
  8. 子猫をのせた乳母車を押す親猫
  9. いいえ、結構です。
  10. チェーン

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

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

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

パソコンを覗き込む二人の女子
  1. ガネーシャ

    コラム

    大きな病気を抱えていても、他人のことを応援できる人
  2. 子猫をのせた乳母車を押す親猫

    WEB

    とっても簡単!!WordPress(ワードプレス)の子テーマの作り方
  3. ドアに差し込まれた封筒

    WEB

    Contact Form 7 のメールが届かない?『WP Mail SMTP』で…
  4. ペンを持つ手

    WordPress

    TCDさんのテーマ『MAG』を愛用する理由
  5. タイプライター

    WEB

    font-weight プロパティについて
PAGE TOP