【iPhoneユーザー必見!】プライム会員でAmazon ミュージック Unlimitedを月額880円にする手順

【はてなブログ】記事やサイドバーの画像に影をつける方法

どうも、ブログ運営者のポチ(@sunrise_033)です。

[jin_icon_checkcircle color=”#66cdaa” size=”18px”]この記事の信用性

2019年4月から「コスパ・お得」をテーマに発信している当サイト「さんログ」を運営、月間平均36000PVの雑記ブロガーです。
うさぎ
はてなブログで記事やサイドバーの画像に影をつけるにはどうすれば良いのだろう?

そんな疑問にお答えします。

この記事では、はてなブログで『ブログ画像に影をつける方法』を画像付きで解説します。

手順は下記の2つです。

・画像URLのクラス名を書き換える
・CSSコードを貼り付ける

こちらの方法はワードプレスのカンスタマイズなのですが、はてなブログでも同じようにできます。

完成したのはこちらになります。
f:id:sanrisesansan:20201024201547j:plain
この記事を読めば、画像に簡単に影を付けることができますので、試してみてください。

目次

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

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

クラス名とは、そのコードを適用させる名前のようなもので、「class=“〇〇”」上記の部分ことです。

このクラス名を書き換えて、サイドバーにHTMLで貼り付けた画像に影を付けていきます。

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

実際には下のように書き換えていきます。

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

f:id:sanrisesansan:20201024193546p:plain

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

次に管理画面からカスタマイズサイドバーから「モジュールを追加」で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;
}

これで完成です。

f:id:sanrisesansan:20201024201547j:plain

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

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

まとめ

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

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

NEXT→記事内の画像を浮かせる

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

あわせて読みたい
はてなブログ基本カスタマイズ、手順まとめ【初心者向け】 今回は、はてなブログの基本カスタマイズ記事をまとめてみました。 いろんな方のブログから情報を得て、自分なりにカスタマイズした内容をくわしく見ていきたいと思います。

 

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

↓「ブログ村ランキング」参加中!
PVアクセスランキング にほんブログ村

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

カスタマイズ性の高いテンプレートやSEO対策機能で、プロフェッショナルなブログを作り、ブログの魅力と集客力を高めましょう!

\ サーバーやインストール不要、2年版でお得!

\ はてなPROで出来るカスタマイズまとめ

コメント

コメントする

目次