アメブロのフォントや文字、リンクの色を変更するカスタマイズ

アメブロのフォントや文字、リンクの色を変更するカスタマイズ

今回はアメブロのフォント、文字の大きさ、文字の色、それから行間(行の高さ)を変更するカスタマイズです。ついでにリンクの色や装飾も変更していきます。

この部分を変更するだけでも見た目も変わりますし文字も非常に読みやすくなります。

この部分はどのブログでも必須のカスタマイズです。最初に元の状態でブログを表示しておき、カスタマイズ後のページと比べてみるとその違いがはっきり分かると思います。

一応CSSの記述の注意点などを前回書いておいたのでそれを読んでおく事をおすすめします。

アメブロカスタマイズ CSSの記述の仕方基本

アメブロのフォントを変更する

アメブロのマイページから「ブログ管理」⇒「デザイン設定」⇒「CSSの編集」をクリック。

アメブロのCSS編集

まずは一番基本となる文字のフォントをカスタマイズします。CSSの一番下に次の記述を追加して下さい。

フォントは沢山記述してみましたが、これはウィンドウズやMac等各デバイスで使えるフォントが違うため、それぞれに適応できるフォントを記述してあります。

リンクの色やアンダーラインを入れるカスタマイズ

続きましてアメブロのリンクの色を変更したり、太字にしたり、アンダーラインを入れたりするカスタマイズを解説していきます。

記事内で色々なカラーを使っている人は特にこの部分が大事。訪問者にリンクがリンクとして認識されていないとクリックもされません。そのため、私の場合はリンクの色を青色、太字にしてさらにアンダーラインを入れてリンクとして認識されるようにカスタマイズしています。

リンクのカスタマイズの基本

リンクの色を変更する時に覚えておきたいのが次の点です。

  • 普通のリンクの色
  • カーソルが乗ったときの色
  • 訪問済みの色

この3箇所を別々に記述する必要がありますので、先に知っておいてそれぞれのカラーを変更していく事をおすすめします。

リンクの色や装飾を変更するカスタマイズ

CSSの一番下に次のコードを追加します。

色は好きな色のカラーコードに変更して使って下さい。それから「font-weight:bold」が太字にする記述で「text-decoration:underline」がリンク部分にアンダーラインを入れる仕様になっていますので、この太字やアンダーラインが不要であればこの部分の記述を削除して下さい。

以上アメブロのフォントや文字の大きさ、リンクの色などを変更するカスタマイズでした。

次回はサイドバータイトルの文字色や背景色を変更するカスタマイズを紹介していきます。

最終更新日:2018/02/03

アメブロのフォントや文字、リンクの色を変更するカスタマイズ”に3件のコメントがあります。

コメントの反映には時間がかかる場合があります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. Okinagatarashi

    しげぞう様
    こんにちは!
    いつも本当にありがとうございました。
    しげぞう様が???って事は私には無理ですね!
    サックと諦める事にします。
    見てくれただけでも有難い!ありがとうございました!
    ちょっとホームページ内で聞いてみることにします。
    運よく教えてくれる人がいて解決したらお知らせします!

    冷たすぎる天候の冬であちこち大変だし
    インフルエンザや風邪も!
    ご自愛くださいね。

  2. しげぞう 投稿作成者

    Okinagatarashi様

    あけましておめでとうございます。サイト見てみたんですが、これはちょっとよく分かりませんでした。なぜ1つ飛ばしに薄くなっているのか?日本語だから?それとも全部英語だと色変わる?テーマの仕様?という部分がよく分かりません。ちょっとあれこれやってみましたが、ナビの文字色を統一したりするのも上手くいきませんね。ナゼダロウ?参考にならずすみません。

  3. Okinagatarashi

    しげぞう様
    こんにちは!
    明けましておめでとうございます。 おっそ!
    私にだけは今年も宜しくされたくない感じの私です。
    ご無沙汰をしています。

    Ameba Ownd のサイトなのですが
    グローバルナビゲーションでアルファベット表記の文字色が薄すぎて・・・
    ひらがな・漢字は問題ないのです。

    検証をしても私には手に負えなさそうです。
    ご教授頂けると幸せます。
    宜しくお願いします。