【SWELL】スマホ開閉メニュー端に画像をひょっこりさせるカスタマイズ

SWELLでスマホの開閉メニューを開いたときに、端っこから画像がひょっこりするカスタマイズをご紹介します。

下記の動画をご覧ください。

開閉メニューの端っこに、可愛いわんこがひょっこりしています。(当初は意図していなかった挙動ですが、最後なごり惜しそうにちょっと残るのもかわいい)

サイズや位置、傾きなどは画像ごとに微調整する必要がありますが、基本的にどんな画像でもひょっこりさせられます。CSSだけで実装していますので、割と簡単です。

ちなみに上記デモ動画でひょっこりしているわんこの画像は、フリー素材ぴよたそさまの「犬っころ」をつかわせていただきました。

かわいい。

そんなカスタマイズについて解説していきます。

お知らせ

この記事は、当サイト文亭の賛助会員さん限定で「会報」として公開しています。
500円払いきりで、すべての会報がずっと読み放題になります。

  • カスタマイズ内容は、記事最終更新日時点のSWELL最新バージョンで動作確認しております。
  • カスタマイズは自己責任にてお取り組みください。心配な方は、作業前にバックアップを取っておくことをおすすめします。
テーマを作りました

「シンプルすぎるWordPressテーマ」がコンセプトの無料WordPressテーマを制作しました。

自作・カスタマイズを前提としたテーマになっています。テーマ制作の学習やベーステーマに興味がある方は、ぜひ活用してみてください。

記事をシェア
  • URLをコピーしました!
  • URLをコピーしました!
時間割