みっちぇのWebデザイン研究所

はてなブログのカスタマイズを中心に、ウェブデザインについて研究するブログ

擬似要素でアーチの上に画像を載せたフッターを作る

覚書シリーズ。
当ブログで採用しているアーチ型のフッターの作り方。

▼こういうやつ

f:id:micche-labo:20210922102516p:plain:w300
アーチ型フッター

完成形とコード

まずは完成形とコード。

See the Pen by MarumiMusic (@marumimusic) on CodePen.

※SCSSタブクリック後、View CompiledクリックでSCSSからCSSに変換できます。

はてなブログのフッターに適応させる場合

上記のコードまるっとコピペ後、画像urlをご自身の画像アドレスに変更でOK。

画像をはてなフォトライフでアップロードし、アドレスをコピー、cssbackground-image:url();のカッコ内へペーストしてください。

フォトライフでの画像アップロードとアドレスの確認方法がわからない方は以下参考にどうぞ。(PCでのやりかたになります。当方Mac使用なので、Windowsの方は違うかもしれません。)

はてなフォトライフの使い方

1.右上らへんにあるアイコンクリックで表示される「利用中のサービス」から「はてなフォトライフ」クリック。

f:id:micche-labo:20210922110043p:plain
はてなフォトライフ表示の仕方

2.右上アップロードクリック。

f:id:micche-labo:20210922110108p:plain:w300
はてなフォトライフアップロードの仕方

3.画像をアップロード。

f:id:micche-labo:20210922110254p:plain:w300
はてなフォトライフアップロードの仕方2

画像のアドレスコピー方法

アップロード後画像表示されたら、右クリックで「画像のアドレスをコピー」を選択。

f:id:micche-labo:20210922110626p:plain:w300
画像アドレスコピーの仕方
これで画像のアドレスがコピーできたので、先ほどのcssのurl()のカッコ内にペーストしてください。

その他ブログ・ホームページで使用する場合

htmlのidやclassにそってcssも変更。 画像のサイズやフッターのサイズに従って位置調整やサイズ調整を行ってください。

解説

順を追ってcssの解説。 手順は以下。

1.Footer全体の設定

footerをposition:relative;で配置。

#footer {
  width: 100%; /*フッター横幅いっぱい*/
  position: relative;
  margin-top: 3em; /*フッターの丸い部分と記事との間隔*/
  padding: 4em 0; /*フッター内の余白*/
  text-align: center; /*文字真ん中寄せ*/
  font-size: 0.8rem; /*文字少し小さめ*/
  color: #好きな色;
  background: #好きな色;
}

余白・色は好きなようにでOK。
文字は真ん中寄せの方がバランス的に良いと思います。
テキストサイズは本文より小さめで主張弱めに。

2.擬似要素(丸の部分・画像の部分)の設定

そのあと、擬似要素をposition:absolute;で配置。
位置は左右真ん中寄せにするため、right:50%;transform:translate(50%,0);を指定。

#footer::before,
#footer::after {
    display: block;
    content: "";
    position: absolute; /*footerに対して絶対配置にする*/
    right: 50%; /*真ん中寄せ*/
    transform: translate(50%, 0); /*真ん中寄せ*/
  }

transformをつけないと、完全な真ん中にならないので注意。

3.丸い部分の設定

丸を擬似要素::beforeで作る。
高さのポジションはtopで調整。
横幅・縦幅はwidthheightで好みのサイズに。
丸にするため、border-radius:50%;設定。
丸の色はfooterの背景色と合わせる。

#footer::before {
    top: -40%;
    width: 120px;
    height: 120px;
    border-radius: 50%; /*50%で完全な丸*/
    background-color: フッターの背景色と同じ色;
  }

4.画像部分の設定

画像部分はbackground-imageで設定。
高さのポジションはtopで調整。
横幅・縦幅は丸より少し小さめに調整。
画像自体のサイズ・位置・リピートなしを設定。

#footer::after {
/*画像の位置とサイズ*/
background-image: url(画像のurl);
background-position: center;
background-repeat: no-repeat;
background-size: cover; /*画像のサイズをボックスのサイズに合わせる*/
top: -30%; /*高さ調整*/

/*画像の入るボックスのサイズ*/
width: 70px;
height: 70px;
}

5.フッター文字の設定・完成

最後に、フッターの文字に擬似要素が被り見えなくなるのを防ぐため、position:relative;を設定。

#footer-inner {
    position: relative;
  }

完成。

まとめ

イメージとしては、フッターの上に、::beforeと::afterでそれぞれ要素をのっけてる感じです。

f:id:micche-labo:20210922133304p:plain:w300
重ね順のイメージ

他にやり方あればぜひご教授ください🙇‍♀️

追記:2021/9/22 23:13

はてなブログでログインしていない状態で見た時にとんでもないことになってたので修正。

  1. #footerに指定していた擬似要素を#footer-innerへ移動。
  2. top:〜;で指定していたが、ログインしていない状態だと間に強制的にはてなブログの文章が入るため位置がずれる。 そのためbottomで高さ指定することで解決。
  3. calcを使い、計算式で高さを調整。

修正後のコード

まだ調整の余地があるかもしれないが眠たいのでここらへんで。

#footer {
    position:relative;
    margin-top: 5em; //広告との被り回避
    padding: 4em 0 1em; //上の青色背景を伸ばしておく
    text-align: center;
    font-size: 0.8rem;
    color: $background;
    background: $Primary-color;
    a {
        color: $background;
    }
    p {
        margin: 0.5em auto;
    }
    
    
    #footer-inner{
        position:relative;

        .guest-footer{
            position:relative; //被り回避
        }

        &::before,&::after{
            margin:0 auto;
            display:block;
            content:"";
            position:absolute;
            right:50%;
            transform:translate(50%,0);
        }
        &::before{
            bottom:calc(100% - 6px); //下から100%の位置に6px分見栄え調整
            width:120px;
            height: 120px;
            border-radius:50%;
            background-color:$Primary-color;
            z-index: 0;
        }
        &::after{
                background-image: url(https://cdn-ak.f.st-hatena.com/images/fotolife/m/micche-labo/20210922/20210922001157.png);
                background-position: center;
                bottom: calc(100% - -29px); //下から100%の位置から、画像の高さ70pxを2で割った35pxから、上で擬似要素::beforeの時に引いた-6px分を引いた数をひく。
                width: 100%;
                background-repeat: no-repeat;
                height: 70px;
                z-index: 2;
                background-size: 70px;
        }
        
        address{position:relative;} //被り回避
    }
}

眠たい頭で書いたのでおかしいところがあるかもしれない…
明日確認します。おやすみなさい。