1. >
  2. >
  3. サマリーページやサイドカラムでアイキャッチの角にワンポイント装飾を付けたい

サマリーページやサイドカラムでアイキャッチの角にワンポイント装飾を付けたい

均等に並んだ画像のイメージ

アイキャッチをにワンポイントで目立たせたい

サイドカラムとかに最新の投稿をアイキャッチ付きで呼び出しているときに、過度にNEWとかpickUPとか書きたい時ありますよね。
数分でできるものだけど、コピペで一瞬で終わらせたい時ようにコピペメモ。

サイズの調整は必要だけど、大体こんな感じ。

ワンポイントを付けたイメージ

角にポイントを付けたイメージ

リボンっぽい装飾にしてもいいし、丸で付けているサイトも見かけます。
カテゴリごとに色を変えて付けてあげるのもかわいいかも。やりようはたくさんありますね。

NEWとかの場合は新規投稿記事一覧で呼び出しているウィジェットにnth-childで1番目だけとかにつけてあげればOK

ワンポイントを付けるcss

アイキャッチにaタグが付いている前提で作っています。

 
a{
    position: relative;
    display: inline-block;
    overflow: hidden;
}
a:after{
   content: "point" !important;
   position: absolute;
   z-index: 1;
   width: 180px;
   height: auto;
   background: #c82e10;
   text-align: center;
   color: #fff;
   font-family: 'Arial';
   font-weight: bold;
   padding: 1rem 1rem;
   left: -90px;
   top: -5px;
   transform: rotate(-40deg);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

注意点

imgにaタグが付いている前提で書いていますが、ない場合はimgにafterとかbeforeはつけれないので気を付けましょう。

検索語を上に入力し、 Enter キーを押して検索します。キャンセルするには ESC を押してください。

トップに戻る