あめつくのブログ

  • このエントリーをはてなブックマークに追加

アメブロの記事内の画像に影をつける CSS(その4)

広告

ここでは「アメブロの記事内の画像に影をつける方法(その4)」を説明します。今回紹介するcssを利用すると、画像に枠がつき、枠の周り(上下左右)に影をつけることができます。

【変更前(影なし)】

【変更後(影あり )】

なお、cssを編集するにはブログデザインを「CSS編集用デザイン」にする必要があります。ブログのデザインをCSS編集用デザインにする方法は、「アメブロのcssを編集するための設定」を参考にしてください。

広告

アメブロの記事内の画像に影をつける方法(その4)

マイページ右上の「アメーバのサービス一覧」をクリックします。
サービス一覧(PC編)

[デザインの変更]をクリックします。
デザインの変更(PC編)

[cssの編集]をクリックします。

cssの編集画面が表示されます。ここから、アメブロの記事内の画像に影をつけるためのcssの編集に入ります。

まず、下の赤枠の内容をコピーします。これが画像に影をつけるcssです。

.articleText img{
box-shadow:0 0 5px 1px rgba(0, 0, 0, 0.2);
padding:5px;
border:1px solid #ccc;
border-radius:5px;
}

なお、記事内で絵文字を使う場合は、上の赤枠の内容ではなく下の赤枠の内容をコピーして利用してください。上の赤枠と下の赤枠の内容の違いは、赤い太文字の部分([src^=“http://stat.ameba.jp/user_images/”])が有るか無いかだけです。既に上の赤枠の内容を利用している場合は、赤文字の部分を追加してご利用ください。

.articleText img[src^="http://stat.ameba.jp/user_images/"]{
box-shadow:0 0 5px 1px rgba(0, 0, 0, 0.2);
padding:5px;
border:1px solid #ccc;
border-radius:5px;
}

コピーした内容はcssの一番下の部分に貼り付けます。
貼り付けが終わったら、[保存]ボタンをクリックして追加したcssを保存します。

保存できたらブログを表示し、ブラウザの更新ボタンをクリックします。(古いデータが残っていると変更したcssが反映されませんので、ブラウザの更新ボタンをクリックして最新の状態に更新します。)

これで、アメブロの記事内の画像に影をつけることが出来ます!

ここまでの内容を動画でも確認できます。
よかったら、参考にしてください!
⇒ 記事内の画像に影をつける(その4)

広告

関連記事

コメント

  • トラックバックは利用できません。

  • コメント (4)

    • kiki
    • 2014年 6月 13日

    こんばんは。
    kikiと申します。
    初めてご連絡いたします。
    先月からブログを始めてこちらのページを拝見し、とてもシンプルでわかりやすく、お世話になっております。
    「アメブロの記事内の画像に影をつける方法(その4)」で、おかげさまで成功しましたが、記事内の絵文字も影が付いてしまいます。
    写真だけ影を付けて、絵文字はそのままということはできますでしょうか?
    急ぎませんので、何かしら答えをいただけたらと思います。
    宜しくお願い致します。

      • あめつく
      • 2014年 6月 14日

      kikiさん、はじめまして。
      コメントありがとうございます。

      「アメブロにアップロードした写真や画像のみに影が付くようにする方法」を追記いたしました。この記事の2番目の赤枠の内容をご利用ください。

      なお、不明な点などございましたら、再度コメントいただければと思います。

      アメブロもやっておりますので、何かありましたお気軽にご連絡ください。
      http://ameblo.jp/first—–blog/

        • kiki
        • 2014年 6月 14日

        あめつくさん、こんにちは。
        追記していただいた方法で、おかげさまでできました!
        早々にありがとうございましたm(__)m
        ブログもこれから拝見いたします♪
        ますますのご活躍、期待しております。
        これからも宜しくお願い致します!

          • あめつく
          • 2014年 6月 14日

          kikiさん、こんばんは。

          できましたか!よかったです^^
          わざわざ報告してくださりありがとうございました。

          こちらこそ、今後ともよろしくお願いいたします。

カテゴリー