イントコーポレーション株式会社
このサイトはワードプレスのテーマの中でもフルサイト編集ができる公式テーマを採用しました。
ファーストビューの背景パララックスはJQueryを使ったカスタムスクリプトです。
トップページの物件群はスクロールに応じて明度を変化させています。これもJQueryを使ったカスタムスクリプトです。
カテゴリーページネーションはオリジナルブロックをプラグインとして開発しました。
パララックス
リロードランダム画像
スライドイン
スクロールアニメ（明度変化）
カテゴリーページネーション
スティッキー
ふきだしアニメーション
テーマTwenty Twenty Fourを編集することがある場合は、子テーマを作成します。子テーマを作成しないとと親テーマのTwenty Twenty Fourがアップデートされたときに編集内容がリセットされてしまうためです。
1.子テーマのフォルダを作成します。このフォルダ名はその後変更しないようにします。
2.子テーマフォルダにstyle.cssをアップロードします。
Theme Nameは自由に付けてください。
/*
Theme Name: Twenty Twenty-Four Child
Template: twentytwentyfour
*/3.子テーマフォルダにfunctions.phpをアップロードします。
<?php
function enqueue_theme_styles() {
// 親テーマのスタイル
wp_enqueue_style( 'style-parent', get_template_directory_uri() . '/style.css' );
// 子テーマのスタイル
wp_enqueue_style( 'style-child', get_stylesheet_directory_uri() . '/style.css', array('style-parent') );
}
add_action( 'wp_enqueue_scripts', 'enqueue_theme_styles' );以上ですが、あとは必要に応じてcustom-scripts.jsやtheme.jsonを加えます。
ワードプレスの公式テーマTwenty Twenty Fourは、header.phpやfooter.phpがないため従来の方法ではGoogle Analyticsのトラッキングコードを設定できません。
プラグインを使う方法もありますが、次のようにfunction.phpに記述することで</head>の前にスクリプトを埋め込むことができます。
function add_google_analytics() {
?>
<!-- Google Analytics -->
ここにトラッキングコードを記述します
<!-- End Google Analytics -->
<?php
}
add_action('wp_head', 'add_google_analytics');
キャンプやグランピングの魅力を味わいながらも、より快適な空間で心地よい休息が得られることが特長のロッヂです。
カラフルなロッヂの色合いを元に、空と海や緑あふれる大自然を感じてもらえるよう明るいイメージで作成し、画像の縁は大きめの角丸にしてやさしい印象を演出しました。
ズームイン
スライドイン
１文字アニメーション
水平スライダー
フロート予約ボタン（スマートフォンではフッタに固定）
アコーディオン
ルートマップ
2005年に制作のご依頼をいただいてから何回目かの全面リニューアルです。
ファーストビューは、お料理の写真をズームインしていますが、この写真の縁にある透過枠は設置が少し大変でした。
この部分はswiperを使っているので、簡単にスライドショーにすることができます。
ズームイン
スライドイン
１文字アニメーション
水平スライダー
垂直スライダー
ゆらゆらアニメーション
フロート予約ボタン（スマートフォンではフッタに固定）
トピックス投稿機能
マイマップでおすすめ観光スポット作成
安心・安全をイメージしたグリーンをベースに、丸みを帯びた優しいデザインにしました。
ファーストビューは、右からスライドインしてズームアップします。キャッチコピーは時間差で下からのスライドインです。
スライドインアニメーション
１文字アニメーション
水平スライダー
パララックス
ファーストビューは、ズームインスライドショーにキャッチコピーがスライドインします。
施設はカテゴリーで分類されており、カテゴリーの一覧表示は自動生成です。
内部的なことになりますが、編集画面には英字と日本語の両方の入力欄がありサイトは英字欄のみを表示する仕様です。
ズームインスライドショー
水平スライダー
垂直スライダー
スライドインアニメーション
ふわふわアニメーション
ファーストビューは、ズームインスライドショーにキャッチコピーがスライドインします。スライドショーの下部は曲線の図形を重なあわせデバイスの幅に応じて微妙な調整をしています。
施設はカテゴリーで分類されており、カテゴリーの一覧表示は自動生成です。
内部的なことになりますが、編集画面には繁体字と日本語の両方の入力欄がありサイトは繁体字欄のみを表示する仕様です。
ズームインスライドショー
水平スライダー
垂直スライダー
スライドインアニメーション
ふわふわアニメーション
ファーストビューのモルタル造形の写真は、微妙なパララックスをして時間差でキャッチコピーがスライドインします。
このサイトはコンテンツがある程度できた段階で、スギヨシ工業様にも文章の加筆修正をしていただきながら並行して作業を進めました。
パララックス
施工事例投稿
ホバーズーム
Instagram組込み
スライドインアニメーション
①トップページの施工事例4件は、単純に新しい順の4件ではなく特定の事例を指定できます。
②「スギヨシ工業ができること」では、写真と説明を左右に配置し、この配置を互い違いに表示しています。
このメンテナンスが難しくならないよう、編集画面では、左に説明右に画像で入力フォーマットを統一してあり、クラス名で配置を左右に振り分けてています。
ファーストビューはオリジナルイラストです。実際に建立されたストゥーパ（仏塔）に光が差している様子を描きました。
パノラマ写真はスライスして分割したものを合成して無限スクロールしています。
このサイトは、施設の工事と並行して制作が進んだため公開まで１年ほどを要しました。
水平スライダー
パノラマ写真無限スクロール
サムネイル付きスライダー
スライドインアニメーション
イラストマップ