さんログ

色々と発信する雑記ブログ。食レポ、おすすめ発信や情報、メンタル/不思議系など。

タイトルのテキスト
タイトルのテキスト
タイトルのテキスト

【はてなカスタマイズ】ブログ画像に影をつける方法

f:id:sanrisesansan:20201024204436p:plain

「サイトの画像に影をつけたい。」

このカスタマイズをはてなブログでする方法をご紹介します。 手順は下記の2つで、

・画像URLのクラス名を書き換える

CSSコードを貼り付ける

こちらはワードプレスでの方法ですが、はてなブログでも同じようにできたので、その方法を紹介します。 完成したのはこちらになります。 f:id:sanrisesansan:20201024201547j:plain この記事を読めば、画像に簡単に影を付けることができますので、試してみてください。


スポンサードリンク

【手順① 】画像のクラス名を書き換える

まずは、画像のクラス名を書き換えます。

クラス名とは、そのコードを適用させる名前のようなもので、

class=“〇〇”

上記の部分ことです。

今回は、サイドバーにHTMLで貼り付けた画像に影を付けていきます。

書き換え方→はてなブログの編集ページで画像を貼り付ける→HTML編集にして、コードのクラス名の部分を下記に変更

「 class="hatena-fotolife”」→「class="blockArea"」

このように書き換えます。

f:id:sanrisesansan:20201024193546p:plain

サイドバーに貼り付けるので、このクラス名ですが、他にも場所によってクラス名が色々あるので下記のサイトを参考にしてみてください。

<参考サイト>

【CSS】class名とid名に使える名前一覧 - 備忘録

次に管理画面からカスタマイズサイドバーから「モジュールを追加」でHTMLに先ほどのコードを貼り付けて適用→変更を保存します。

【手順② 】CSSコードを貼り付ける

続いて、デザイン→カスタマイズ→CSSデザインに下記を貼り付けます。

img.blockArea {
box-shadow: 1px 1px 5px #000, -1px -1px 5px #000;
}

これで完成です。

f:id:sanrisesansan:20201024201547j:plain

影をつけたい画像にクラス名を変更することにより、影をつけることができました。

参考にさせていただいたサイトを載せておきます。

<参考サイト>

WordPress記事内の画像に影をつける方法 | vdeep

まとめ

今回はサイドバーに貼り付けましたが、記事内の画像やフッタなどにも同じようにクラス名を書き換えて影をつけることができます。

少しの手間でサイトの印象が見やすく変わりますよ。

最後まで読んでいただき、ありがとうございます。

合わせて読みたい

www.sunrise033.com


この記事が良いと思ったら、ポチっ!してくれると嬉しいです!

 ブログ村ランキング」参加中!

PVアクセスランキング にほんブログ村