読者です 読者をやめる 読者になる 読者になる

丸ニッキ

小林丸々の日記用ブログ

はてなブログで「記事内の写真」に外枠を付けた

ブログ改造

ブログ自身のカスタマイズに関して、記事を書いたときに思いました。
スクリーンショットの写真を文中に貼ると、『混乱する』と。

↓もし灰色の枠が無かったら「どこが写真なんだ?」と混乱しますよね。
f:id:kbysoo:20160310174048p:plain

ということで、「記事内の写真」に外枠が付くようにCSSをいじりました。

適用する場所を記事内に限定

トップページやサイドバーに表示されている写真にまで外枠をつけたくありません。
個別の記事を表示しているときは、bodyタグにpage-entryクラスがつきます。
なので、これの下の記事内(entry-contentクラス)の、そのまた下の写真(imgタグ)を指定して外枠(border)を付けます。

CSS

上記を踏まえて、CSSファイルに追記する内容はこんな感じです。

.page-entry .entry-content img {
    border: 1px solid rgba(0, 0, 0, 0.1);
}

CSSファイルは、デザインの中の「ココをクリック」すると編集できます。
f:id:kbysoo:20151127212504p:plain

まとめ

なんか、こんなのデフォルトの機能として、はてなさんに提供してほしい気もします。

広告を非表示にする