「このブログの読者」「お気に入りブログ」のリンクを全て1行表示にする方法

「このブログの読者」「お気に入りブログ」のリンクを全て1行表示にする方法

アメブロカスタマイズのわざめーばです。

こんにちは。

アメブロのサイドバーの「このブログの読者」や「お気に入りブログ」の各ブログへのリンクは、タイトルの短いブログは1行表示ですが、ある程度以上長いタイトルのブログは2行表示になります。

今回は、「このブログの読者」や「お気に入りブログ」の各ブログへのリンクを全て1行で表示されるようにカスタマイズする方法をご紹介します。

また、1行にした際にブログタイトルが1行に収まらず枠からはみ出した場合、末尾に省略記号「…」が付いてタイトルが途中までしか表示されていないことが分かるようにします。

それでは早速やり方です。

今回は、CSSによるカスタマイズとなります。

ユーザーCSSの末尾に以下のコードを追加して保存して下さい。

/* 読者・お気に入りのリンクを1行にする */
.favoriteMenu li a, .readerMenu li a {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  word-wrap: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}

これで終了です。

(ユーザーCSSについてわからない場合はこちらをご参照ください)

なお、こちらは、新デザイン(CSS編集用デザイン)向けの方法ですので、旧デザインの場合は次項をご覧ください。

旧デザインの場合

旧デザインの場合、残念ながら新デザインと全く同様にはできそうにありません(特にIEでの表示が)が、似た感じにする方法はありますのでご紹介します。

/* 読者・お気に入りのリンクを1行にする(旧) */
#reader li a, #favorite li a {
  position: absolute;
  display: block;
  width: 160px;
  white-space: nowrap;
  word-wrap: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}

こちらは、赤文字の「160px」の部分に、リンクの表示幅を設定して下さい。

以上、アメブロの新デザイン及び旧デザインで、「このブログの読者」や「お気に入りブログ」の各ブログへのリンクを全て1行で表示されるようにカスタマイズする方法をご紹介しました。

よかったら参考にして下さいね。

関連記事

CSSを編集してアメブロをカスタマイズする方法
アメブロカスタマイズ目次
アメブロカスタマイズで成功するブログを作ろう トップページ