はてなブログで画像に枠線を自動的につける超簡単な方法

こんばんは、内藤です。

カスタマイズはあらかた終了したかなと思ってブログを書いていて気付いたのですが、すげー画像が見にくいと言うことに。どこら辺が見にくいかと言いますと、『記事コンテンツ部分の背景が白+画像の余白』が思った以上に見にくかった。

こういう時にワードプレスならどうしてたかというと、新しいクラス書いて、画像1個1個にスタイルを適用させていったのですが、はてなブログではMarkdownで記事を書いているので、htmlの調整が効かないのでどうしようかと。

とりあえず応急処置的な形で、はてなブログでは画像に枠線を自動的につけることにしました。せっかくなのでブログ上で公開もしておきます。今回のやり方はコピペで一発で出来るので、画像に枠線をつけてみたーいという人は試してみて下さい。

基本のソースコード

/* 画像の枠線 */
img.hatena-fotolife {
border:2px #000 solid;
}

これをカスタマイズ画面にて挿入していきます。

ソースコードの挿入場所

CSSは管理画面から、【デザイン > カスタマイズ > デザインCSS】にコピペして挿入してください。

なおスマホ版の表示は、【デザイン > スマートフォン > ヘッダ > タイトル下】の部分にコピペします。
スマホ版の場合は、HTMLに記述しなければならないので、次をコピペして使ってください。

<style type="text/css">
/* 画像の枠線 */
img.hatena-fotolife {
border:2px #000 solid;
}
</style>

これでPCからもスマホからも画像を挿入したら、自動的に画像に枠線がつくようになりました。
ラインの太さを変えたい場合は、borderのピクセル数を変えて下さい。

こんな感じで表示されるようになったら正常にスタイルが適用されている状態です。

おまけ

枠線の種類を変えてみる。

ドット

<style type="text/css">
/* 画像の枠線 */
img.hatena-fotolife {
border:2px #000 dotted;
}
</style>

破線

<style type="text/css">
/* 画像の枠線 */
img.hatena-fotolife {
border:2px #000 dashed;
}
</style>

最後に

以上が、はてなブログで画像に枠線を自動的につける方法でした。

難点は、記事コンテンツ内全部の画像にスタイルが適用されちゃうことですね。
やはりクラスは個別に作って、HTML編集するのがベターなやりかたかもしれない。

興味ある人はやってみてください!

メディア運営

はてなブログで画像に枠線を自動的につける超簡単な方法
こんばんは、内藤です。 カスタマイズはあらかた終了したかなと思ってブログを書いていて気付いたのですが、すげー画像が見にくいと言うことに。どこら辺が見にくいかと言いますと、『記事コンテンツ部分の背景が白+画像の余白』が思った以上に見にくかった。 こういう時にワードプレスならどうしてたかというと、新しいクラス書いて、画像1個1個にスタイルを適用させていったのですが、はてなブログではMarkdownで記事を書いているので、htmlの調整が効かないのでどうしようかと。 とりあえず応急処置的な形で、はてなブログでは画像に枠線を自動的につけることにしました。せっかくなのでブログ上で公開もしておきます。今回のやり方はコピペで一発で出来るので、画像に枠線をつけてみたーいという人は試してみて下さい。 基本のソースコード /* 画像の枠線 */ img.hatena-fotolife { border:2px #000 solid; } これをカスタマイズ画面にて挿入していきます。 ソースコードの挿入場所 CSSは管理画面から、【デザイン > カスタマ

続きを読む

はてなブログをスマホから見た時に、邪魔なウィジェットを非表示にする方法

「はてなカスタマイズ」記事をもっと見る