【アメブロカスタマイズ】文字の大きさとリンクの色の変更
内藤勲メルマガ【特典プレゼント!】 個人ビジネスのための時間と場所にとらわれない!便利ツールの使い方

【アメブロカスタマイズ】文字の大きさとリンクの色の変更

アメブロカスタマイズ

内藤です。

まずはやっておきたい必要最低限のカスタマイズです。

・文字を読みやすい大きさ(15px)にする
・リンクの色を目立つ色にする

をやっていきます。

記事とメッセージボードの文字を読みやすい大きさにする

こちらのCSSをコピーして貼り付けます

/* 記事、メッセージボードの文字 */
.skin-entryBody,.skin-message{
font-size: 15px; /*文字サイズ*/
line-height:1.5; /*行間*/
color:#000000;
}

記事、メッセージボードの
文字サイズを: 15px
行間を: 1.5
文字色を:黒

にするCSSになります。

※サイドバーのプロフィール画像が丸いCSS編集用デザインを使っている場合のCSSです。

(旧デザイン)記事とメッセージボードの文字を読みやすい大きさにする

サイドバーのプロフィール画像が四角のCSS編集用デザインを使っている場合はこちらになります。

/* 記事、メッセージボードの文字 */ 
.articleText,.skinMessageBoard{
font-size: 15px; /*文字サイズ*/
line-height:1.5; /*行間*/
color:#000000;
}

リンクを青文字、太字、下線にする

記事やメッセージボードのリンクは特に目立って欲しい部分です。

こちらのCSSをコピーして貼り付けます

/* 記事、メッセージボードのリンク文字 */
.skin-entryBody a,.skin-message a{
font-size:15px; /*文字サイズ*/
font-weight:bold; /*文字の太さ*/
color:#0000ff; /*文字色*/
text-decoration:underline; /*文字装飾*/
}
/*リンクマウスオーバー時の半透明無効*/
a:hover{
opacity:1;
}
.skin-linkList li a:hover{
opacity:1;
}
.skin-headerTitle:hover{
opacity:1;
}

リンク文字が青文字、太字、下線になります。

※サイドバーのプロフィール画像が丸いCSS編集用デザインを使っている場合のCSSです。

(旧デザイン)リンクを青文字、太字、下線にする

サイドバーのプロフィール画像が四角のCSS編集用デザインを使っている場合はこちらになります。

/* 記事、メッセージボードのリンク文字 */
.articleText a,.skinMessageBoard a{
font-size:15px; /*文字サイズ*/
font-weight:bold; /*文字の太さ*/
color:#0000ff; /*文字色*/
text-decoration:underline; /*文字装飾*/
}

これら2つのカスタマイズをするだけでも、パソコンで見た場合に読みやすくなりますので試してみてくださいね

 

内藤勲メルマガ
登録特典プレゼント中!
個人ビジネスのための時間と場所にとらわれない!
便利ツールの使い方(一部ツールの解説動画付き)
お名前とメールアドレスを入力して登録ボタンを押してください

※お名前はアルファベットでの登録はできません。
Gmailがおすすめです。

アメブロカスタマイズ
タイトルとURLをコピーしました