
はてなブログで記事やサイドバーの画像に影をつけるにはどうすれば良いのだろう?
そんな疑問にお答えします。
どうも、ブログ運営者のポチ(@sunrise_033)です。
結論からいうと、はてなブログで記事やサイドバーの画像に影をつける手順は下記の2つです。
- 画像URLのクラス名を書き換える
- CSSコードを貼り付ける
完成したのはこちらになります。

この記事では、はてなブログで『ブログ画像に影をつける方法』を画像付きで解説します。
この記事を読めば、画像に簡単に影を付けることができますので、試してみてください。

「高コスパ」・「日常の節約」をテーマにブログを運営
Amazonサービス・Yahooトラベル・節約Wi-Fi・ダイソー・ワークマン
食べること大好き。レビュー記事を更新中
月間平均54,000PV/収益5桁達成
【手順① 】画像のクラス名を書き換える
まずは、画像のクラス名を書き換えます。
クラス名とは、そのコードを適用させる名前のようなもので、「class=“〇〇”」上記の部分ことです。
このクラス名を書き換えて、サイドバーにHTMLで貼り付けた画像に影を付けていきます。
はてなブログの編集ページで画像を貼り付ける→HTML編集にして、コードのクラス名の部分を下記に変更
実際には下のように書き換えていきます。
「 class=”hatena-fotolife”」→「class=”blockArea”」

サイドバーに貼り付けるので、このクラス名ですが、他にも場所によってクラス名が色々あるので下記のサイトを参考にしてみてください。
次に管理画面からカスタマイズ→サイドバーから「モジュールを追加」でHTMLに先ほどのコードを貼り付けて適用→変更を保存します。
【手順② 】CSSコードを貼り付ける
続いて、デザイン→カスタマイズ→CSSデザインに下記を貼り付けます。
<pre class="code lang-html" data-lang="html" data-unlink="">img.blockArea {
box-shadow: 1px 1px 5px #000, -1px -1px 5px #000;
}
これで完成です。

影をつけたい画像にクラス名を変更することにより、影をつけることができました。
参考にさせていただいたサイトを載せておきます。
WordPress記事内の画像に影をつける方法 | vdeepvdeep

コメント