Bloggerに「この記事は◯分で読めます」と自動表示させるスクリプト (約 3時間前)
この記事は何分で読める？読了時間表示スクリプトの紹介ブログ記事やウェブサイトに「この記事は約○分で読めます」と表示するJavaScriptスクリプトです。読者が記事の長さを事前に把握できるため、読むか (...続く)
Blogger×JavaScript ： XMLエラーを防ぐ予備知識まとめ (約 3時間前)
BloggerはテンプレートがXML形式のため、普通にJavaScriptを書くだけでは文字列がエスケープされずにエラーになってしまうことがあります。これを回避するために、以下のいずれかの方法で対 (...続く)
プロフィールカード ジェネレーター (約 3時間前)
プロフェッショナル・オーバーレイ・カードfull-widthカバー写真の境界線をプロフィールアイコンが大胆に跨ぐ、レイヤー構造のモダンなデザイン。 (...続く)
ガジェット検索フォームで検索結果件数を確実に反映させる方法+Navbar版 (約 3時間前)
イントロダクションBloggerのNavbarにある検索ボックスは便利ですが、Blogger独自の仕様のため、検索結果の表示件数の指定やデザインのカスタマイズが思い通りにできない場合があります。この記 (...続く)
レトロタイピング・404ページ (約 10時間前)
レトロタイピング・404ページ タイプライターのように1文字ずつテキストが打ち出され、点滅するカーソルがアクセントとなる、ミニマルで物語性のあるエラーページデザイン。シンプルながらも、黒背景に映える (...続く)
フローティング・ミュージックプレイヤー (約 10時間前)
デザインのタイプアルバムアートが回転し、再生に合わせて情報パネルがスライド展開する、立体的でインタラクティブなデザイン。レコードがスピンするような情緒的な演出と、モダンなフラットUIを融合させた、視覚 (...続く)
デザインテンプレート : プロフィールカード (約 10時間前)
セレクト・シングル・プロフカード4つの異なるスタイルから、自分のブログに最適な1枚を選んで設置できる自己紹介カードセット。Bloggerのメインカラムやサイドバーなど、限られたスペースで表示されるよう (...続く)
GSAP : フルスクリーンスライダー (約 10時間前)
トップページやランディングページで、画面いっぱいに写真とコピーを流し込みたい——そんなときに使える「方向性トランジション付きフルスクリーンスライダー」を紹介します。単なるフェード切り替えではなく、「左 (...続く)
GSAP : コンパクトスライダー (約 10時間前)
GSAPエッジレス・スライダー高さを400pxに最適化し、画像の中央を軸とした精密なトリミングを施したスタイリッシュなスライダー。GSAPによる滑らかな視差効果とフェードを組み合わせることで、高級感の (...続く)
スプリット・ダイアゴナル・ヒーロー (約 10時間前)
スプリット・ダイアゴナル・ヒーロー画面を対角線で大胆に分割し、マウスホバーに合わせて左右の領域がダイナミックに伸縮する、視認性とインパクトを両立させたヒーローセクションです。 (...続く)
YouTube サムネイルグリッド (約 10時間前)
レスポンシブ・ビデオサムネイル・グリッド16:9のアスペクト比率を維持したまま、画面サイズに応じて流動的に変化する、一覧性と操作性に優れたギャラリーレイアウト。Bloggerのメインカラムに最適化され (...続く)
SNSフォローボタン : ポップアウトSNSフォローボタン (約 10時間前)
放射状ポップアウト・プロフィール・ウィジェット一点集中から展開するソーシャルアイコン・アニメーション。プロフィール画像の中心からアイコンがスッと飛び出し、整列する躍動感のあるインターフェースを提供しま (...続く)
パステル・マテリアル・ミュージックプレーヤー (約 10時間前)
パステル・マテリアル・ミュージックプレーヤー丸みを帯びたカードデザインと、温かみのあるパステルグラデーションを基調とした、モダンで親しみやすいオーディオプレーヤー。シンプルながらも、マテリアルアイコン (...続く)
インタラクティブ・ニュース・カード (約 10時間前)
インタラクティブ・ニュース・カード記事のアイキャッチ、タイトル、そして詳細文を階層的に配置し、ホバーアクションによって情報を段階的に開示する、動的なマガジンスタイルのカードデザインです。読者の目を引く (...続く)
デザインテンプレート : アコーディオンタイプFAQ (約 10時間前)
CSSピュア・FAQアコーディオンJavaScriptを一切使用せず、HTMLとCSSのみで開閉ロジックを完結させた、超軽量で堅牢なFAQセクションです。スクリプト干渉の心配がないため、Blogger (...続く)
エクスパンダブル・アコーディオン・カード (約 10時間前)
エクスパンダブル・アコーディオン・カード クリックしたカードが横方向にダイナミックに広がり、画像と詳細情報が連動して表示されるインタラクティブなスライダーデザインです。限られたスペースで複数のコンテ (...続く)
デザインテンプレート : タイムライン ネオン (約 10時間前)
ネオン・ダーク・タイムライン漆黒の背景に映えるディープ・シアンのアクセント。中央の軸から左右へ交互に展開されるアニメーションが、情報の「流れ」をドラマチックに演出します。モダンな開発実績やステップ紹介 (...続く)
デザインテンプレート : ボーダーアニメーション・オーバーレイカード (約 10時間前)
ボーダーアニメーション・オーバーレイカードホバーした瞬間に四方の枠線が光を放つように駆け巡り、画像が暗転して詳細なテキストが浮かび上がるドラマチックなカードデザイン。Bloggerとの干渉を完全に (...続く)
このブログの関連タグ
[デザイン] [#プロフィールカード] [#デザインライブラリ] [#CSS] [#CodePen]