ポイビュー開設から6ヶ月。SWELLカスタマイズの変遷をまとめてみた。

リニューアルしたばかりのポイビューは、記事数も大した数ではなかったので、SWELLユーザーなら誰しもが憧れる「サイト型トップページ」のカスタマイズは時期尚早。

せめて、メインビジュアルだけでもカッコよくしたいと思い、SWELLでの初めてのカスタマイズにチャレンジしました。

詳しい内容は以下の記事をご参照ください。

あわせて読みたい

メインビジュアルをミニマル風にカスタマイズ！ – SWELLカスタマイズ せめてメインビジュアルだけでもカッコよくしたいと思い、はじめてSWELLのカスタマイズにチャレンジしてみました。メインビジュアルの画像をサイトのロゴ文字で切り抜いて表示するカスタマイズです。

せっかくSVGでロゴ画像を作成したので、SVGアニメーションで動きのあるファーストビューにして、スマホでもレスポンシブ化しました。

あとは、トップページのみjQueryを使用して、ファーストビューのScrollボタンを変更したり、表示するたびに代わる「季節の一文」を配置。自己満足の極み的な無駄なギミックですね。

詳細は以下の記事でまとめています。

あわせて読みたい

メインビジュアルを「自己満足型」にカスタマイズ！ – SWELLカスタマイズ 前回、マスクした背景を動画にしたので、せっかくならともう少し動きを加え、マスク部分をアニメーション化してみました。これこそ、アクセスしてきた人にとってはどーでもいい、自己満足型カスタマイズの極みです。

投稿記事数も増えてきたので、メインビジュアルのカスタマイズと並行して、いよいよ「サイト型トップページ」のカスタマイズに着手しました。

カスタマイズ前

カスタマイズ後

詳細は以下の記事でまとめています。

あわせて読みたい

トップページをオシャレに！サイト型でカスタマイズする方法 – SWELLカスタマイズ こんなSWELLユーザーに読んでほしい「SWELLでトップページをサイト型でオシャレにカスタマイズしたい」「トップページをスクロールアニメーションで動きを持たせたい」

ブログをリニューアルするきっかけにもなった、Linustockさんのイラストが好きすぎて、Linustockさんのイラストを使用しているブロガーさんにご協力いただき、特設コンテンツ「I LOVE Linustock」を公開しました。

ご協力いただきましたブロガーの皆様、ありがとうございました。

アイ・ラブ・ライナストック

アイ・ラブ・ライナストック – POINT OF VIEW　略して、ポイビュー。 シンプルでオシャレ、かつハイクオリティな線画イラストを無料でダウンロードできる「Linustock.com」。ステキなイラストを無償で提供してくれる「Linustock」さんへの敬意…

また、コンテンツ内で紹介するみなさんのフルスクリーンショットを、「ブラウザ風」スタイルを使って自動スクロールするカスタマイズも実装しました。

詳しくは、以下の記事でまとめています。

あわせて読みたい

画像ブロックの「ブラウザ風・デスクトップ風」スタイルをカスタマイズ – SWELLカスタマイズ 2022/01/28 ご案内 SWELL 2.5.8 リビジョンアップで、「デスクトップ風」スタイルが変更されました！ これにより、デフォルトのスクロールバーが表示されてしまう不具合…

この頃より、SWELLのカスタマイズ小ネタ集を「SWELL TIPS」としてシリーズ化してました。

「TIPS」と「ポテトチップス」をかけて、こんなアイキャッチも作ってました。途中でネタ切れしましたが…。

以前 「ScrollReveal」 でスクロールエフェクトも挿入していましたが、「Blocks Animation」での実装に変更しました。

詳しくは、以下の記事でまとめています。

あわせて読みたい

ブロックエディタ対応「Blocks Animation」でスクロールアニメーションもお手軽に！（サンプルあり） こんな人に読んでほしい！ SWELLなどのブロックエディタに対応したテーマでブログを書いているスクロールアニメーションでページに動きのある演出を加えたいでも、スク…

「カスタマイズは男のロマン」ということで、トップページに隠しギミックを仕込みました。

メインビジュアルをダブルクリックするととマスク部分を解除するといった内容になります。

ダブルクリックでマスクを反転

超自己満足なカスタマイズですね…。でも、チューする動画は男性陣にはウケがよかったです（笑）

詳しくは、以下の記事でまとめています。

あわせて読みたい

トップページに隠しギミックを仕込む – SWELLカスタマイズ こんなSWELLユーザーに読んでほしい！ トップページに自己満足的な遊び心を持たせたいSWELLのカスタマイズ沼にハマっている 【トップページを自己満足的にカスタマイズ…

商品リンクツールの救世主「Pochipp ポチップ」にまで、自己満足カスタマイズしちゃいました。

他のアフィリエイトボタンを追加

「ヨメレバ」風のボタン配置

詳しくは、以下の記事でまとめています。

あわせて読みたい

ポチップTIPS – 自己満足カスタマイズ 小ネタ集（あったらいいな編） こんなPochippユーザーに読んでほしい！ Pochippをゴリゴリ使い倒している Pochippで本を紹介することが多い Pochippでもっと売上をあげたい 【どんどん高機能になって…

スマホの固定フッターメニューもいろいろカスタマイズしました。

詳しくは、以下の記事でまとめています。

あわせて読みたい

スマホの固定フッターメニューをオリジナルにカスタマイズ – SWELLカスタマイズ こんなSWELLユーザーに読んでほしい！ SWELLでスマートフォンの固定フッターメニューを設定しているオリジナリティのある固定フッターメニューを表示したいSWELLのカス…

この頃より、SVGアニメーションにハマりだし、SWELLの「境界線：波」など、流体シェイプを「ウネウネ・モフモフ」動かしました。

サンプルとして、「つきみにまる。」さんにご協力いただきました。つきみさん、ご協力ありがとうございました。

詳しくは、以下の記事でまとめています。

あわせて読みたい

SVGモーフィングで「流体シェイプ」をモフモフさせる – SWELLカスタマイズ こんなSWELLユーザーに読んでほしい！ 流体シェイプを使ってデザインしている流体シェイプに動きを加えたいSVGモーフィングについて知りたい 【SVGモーフィングで流体シ…

あわせて読みたい

SVGモーフィングで「流体シェイプ」をウネウネさせる – SWELLカスタマイズ 今回もSVGモーフィングを使って、SWELL特有のデザイン要素でもある「境界線の波形状」をウネウネさせるカスタマイズです。

あわせて読みたい

SVGモーフィング　モフモフ　ウネウネ　サンプル

「SWELL TIPS」が増えてきたので、「自己満足カスタマイズ集」としてひとつのコンテンツとしてまとめました。

モフモフ、ウネウネ、スウェラー君も活躍しています。

あわせて読みたい

SWELL 自己満足カスタマイズ集 #ヤモヲのひとりあそび TOPへ

通常の「ギャラリー」ブロックが使いずらかったのでカスタマイズしました。

「ギャラリー」ブロックを1枚目だけ表示し、拡大画像をレスポンシブ化

• 

• 

詳しくは、以下の記事でまとめています。

あわせて読みたい

「ギャラリー」画像を1枚目だけ表示する – SWELLカスタマイズ 2022/05/26 ご案内 WordPress 6.0 メジャーバージョンアップで、「ギャラリー」ブロックのDOM構成が変更されました。 これにともない、CSSの内容を修正しました。 【「…

トップページのカテゴリ記事一覧を、デフォルトの3列表示から4列表示にカスタマイズしました。

詳しくは、以下の記事でまとめています。

あわせて読みたい

「投稿リスト」ブロックを「4列」表示にする – SWELLカスタマイズ 【「投稿リスト」ブロックを「4列」表示にする】 トップページなどで「投稿リスト」ブロックを使っている方も多いと思います。 当ブログのトップページでも多用していま…

SWELLのメインビジュアルに使用されているランダム画像表示「Lorem Picsum」を、特定ジャンルのフリー画像をランダム表示できる「Unsplash Source」に変更しました。

ポイビューのメインビジュアルは動画を使用しているので、トップの「ピックアップ」エリアの背景画像に使用しています。

詳しくは、以下の記事でまとめています。

あわせて読みたい

メインビジュアルに特定ジャンルのランダム画像を表示する – SWELLカスタマイズ 【メインビジュアルにSWELLデフォルトのランダム画像を使う】 SWELLERの方なら、わざわざメインビジュアルの画像をオリジナルで作成しなくても、カッコいい画像がランダ…

「カスタマイズリンク集」や「アイ・ラブ・ライナストック」に表示されているサイト一覧やブロック要素の並び順を、アクセスの度にランダムに並び変わるカスタマイズを実装しました。

リッチカラムの要素をランダムに並び替える

登録順だと

ランダム順で表示

フルワイドブロックをランダムに並び替える

登録順だと

ランダム順で表示

詳しくは、以下の記事でまとめています。

あわせて読みたい

ブロック要素をランダムに並び替える – SWELLカスタマイズ 【ブロック要素をランダムに並び替える】 例えば、サイトやブログのリンク集のページで、掲載数が増えてくるとページの下の方に表示されているリンクが見てもらえない状…

シンプルなティッカーを実装できる「jquery.simpleTicker.js」というjQueryプラグインを使用して、メインビジュアルにティッカーを実装しました。

詳しくは、以下の記事でまとめています。

あわせて読みたい

メインビジュアルにティッカーを表示 – SWELLカスタマイズ 【ティッカーとは】 「ティッカー」をご存じない方のために、簡単に説明すると ティッカーとは、特定範囲内に文字列を流して表示させる表示方式のことである。右から左…

画像だけでなく「投稿リスト」ブロックや「リッチカラム」ブロック自体をスライド表示したかったので、「Flickity」プラグインを導入してカスタマイズしました。

詳しくは、以下の記事でまとめています。

あわせて読みたい

Flickityでブロック要素をスライダー表示 – SWELLカスタマイズ 画像だけでなく「投稿リスト」ブロックや「リッチカラム」ブロック自体をスライダー表示できたらいいなということで、「Flickity」プラグインを使ったカスタマイズです。

「カスタマイズ集」ではまだ紹介していませんが、ずっと前から「音楽の流れるブログ」にしたかったので、YouTube APIとカスタムフィールドで実装しました。

サイドバーで各記事のBGMとして設定しています。ぜひYouTube動画を流しながらブログを読んでみてください。記事の印象もグッとかわると思います。
設定していないページはデフォルトの「ヘビーローテーション」動画が表示されます。
（現在、自動再生はOFFにしています）

クリスマス期間限定のトップページを公開しました。

マウスの動きに反応する雪の3Dは、「PLUSBLOG」さんの記事を参考に実装。Chrome限定にはなりますが、ジョンとヨーコのクリスマスソングも流れます。