GeneratePressは多くのプロフェッショナルサイトで採用されており、そのシンプルさと拡張性を活かして様々な成功例があります。実際のサイト例とそこから学べる具体的なカスタマイズTipsをご紹介します。
成功サイト例と活用テクニック
1. テクノロジーブログ「CSS-Tricks」
CSS-Tricksは、ウェブデザインやコーディングに関する情報を提供する人気サイトです。GeneratePressをベースに、独自のデザインを施しています。
取り入れたいTips:
- ヘッダー部分に独自のSVG（ベクター画像）ロゴを配置
- 記事カードにホバーエフェクト（マウスを乗せると反応する動き）を追加
- コードスニペット（プログラムコードの断片）を見やすく表示するためのカスタムCSS
- 目次機能で長い記事も読みやすく構成
CSS例:
/* カード型記事にホバーエフェクトを追加 */
.post-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.post-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}Code language: CSS (css)2. ビジネスサイト「XYZ会社」
企業のウェブサイトとしてGeneratePressを採用したケースです。シンプルで高速な読み込みが特徴です。
取り入れたいTips:
- トップページにフルスクリーンの画像と重ねたテキストで強いインパクト
- サービスセクションを「GenerateBlocks」のグリッドで整然と表示
- お問い合わせフォームをヘッダーに固定して常に表示
- モバイルメニューのアニメーションをカスタマイズして洗練された印象に
CSS例:
/* ヒーローセクション（トップ画像）のスタイル */
.hero-section {
height: 100vh;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
position: relative;
}
.hero-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.4);
}
.hero-content {
z-index: 1;
color: white;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}Code language: CSS (css)3. 料理ブログ「クッキングライフ」
料理レシピとライフスタイルを発信するブログです。画像を多用しながらも表示速度を維持しています。
取り入れたいTips:
- カテゴリーアイコンを使って視覚的なナビゲーション
- レシピ用の独自テンプレートでステップごとに分かりやすく表示
- ニュースレター登録フォームがスクロールに合わせて表示される機能
- 関連記事を画像付きグリッドで自動表示
functions.phpへの追加コード例:
// レシピ用のカスタム投稿タイプを追加
function register_recipe_post_type() {
register_post_type('recipe', [
'labels' => [
'name' => 'レシピ',
'singular_name' => 'レシピ'
],
'public' => true,
'has_archive' => true,
'menu_icon' => 'dashicons-food',
'supports' => ['title', 'editor', 'thumbnail', 'excerpt']
]);
}
add_action('init', 'register_recipe_post_type');Code language: PHP (php)実践的なカスタマイズTips集
デザイン改善Tips
- ヘッダーのスティッキー化と半透明効果
.site-header {
position: sticky;
top: 0;
background-color: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(5px);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
z-index: 999;
transition: all 0.3s ease;
}Code language: CSS (css)- サイドバーの目立つウィジェットデザイン
.sidebar .widget {
border-radius: 8px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
padding: 20px;
margin-bottom: 30px;
background: #fff;
}
.sidebar .widget-title {
border-bottom: 2px solid #e9e9e9;
padding-bottom: 10px;
margin-bottom: 15px;
position: relative;
}
.sidebar .widget-title:after {
content: "";
position: absolute;
bottom: -2px;
left: 0;
width: 50px;
height: 2px;
background: #4285f4;
}Code language: CSS (css)- 記事タイトル下の投稿情報をスタイリッシュに
.entry-meta {
display: flex;
flex-wrap: wrap;
gap: 15px;
font-size: 14px;
color: #666;
margin-bottom: 20px;
}
.entry-meta > span {
display: flex;
align-items: center;
}
.entry-meta > span:before {
content: "";
display: inline-block;
width: 18px;
height: 18px;
margin-right: 5px;
background-size: contain;
background-repeat: no-repeat;
}
.posted-on:before {
background-image: url('calendar-icon.svg');
}Code language: CSS (css)機能拡張Tips
- サイト内検索の強化 functions.phpに追加:
// 検索バーにプレースホルダーテキストを追加
function custom_search_form($form) {
$form = '<form role="search" method="get" class="search-form" action="' . home_url('/') . '">';
$form .= '<input type="search" class="search-field" placeholder="キーワードで記事を検索..." value="' . get_search_query() . '" name="s">';
$form .= '<button type="submit" class="search-submit"><span class="screen-reader-text">検索</span><i class="fa fa-search"></i></button>';
$form .= '</form>';
return $form;
}
add_filter('get_search_form', 'custom_search_form');Code language: HTML, XML (xml)- 記事内の目次を自動生成 functions.phpに追加:
function auto_toc_content($content) {
if (!is_singular('post')) return $content;
$headings = [];
preg_match_all('/<h[2-3].*?id="([^"]+)".*?>(.*?)<\/h[2-3]>/i', $content, $matches, PREG_SET_ORDER);
if (empty($matches)) return $content;
$toc = '<div class="toc-container"><div class="toc-title">目次</div><ul class="toc-list">';
foreach ($matches as $match) {
$id = $match[1];
$title = strip_tags($match[2]);
$toc .= '<li><a href="#' . $id . '">' . $title . '</a></li>';
}
$toc .= '</ul></div>';
return $toc . $content;
}
add_filter('the_content', 'auto_toc_content');Code language: PHP (php)- SNSシェアボタンの追加 functions.phpに追加:
function add_social_share_buttons($content) {
if (!is_singular('post')) return $content;
$url = urlencode(get_permalink());
$title = urlencode(get_the_title());
$buttons = '<div class="social-share">';
$buttons .= '<a href="https://twitter.com/intent/tweet?url=' . $url . '&text=' . $title . '" target="_blank" class="share-twitter">Twitter</a>';
$buttons .= '<a href="https://www.facebook.com/sharer/sharer.php?u=' . $url . '" target="_blank" class="share-facebook">Facebook</a>';
$buttons .= '<a href="https://www.linkedin.com/sharing/share-offsite/?url=' . $url . '" target="_blank" class="share-linkedin">LinkedIn</a>';
$buttons .= '</div>';
return $content . $buttons;
}
add_filter('the_content', 'add_social_share_buttons');Code language: PHP (php)レイアウト改善Tips
- ブログ記事一覧をグリッドレイアウトに functions.phpに追加:
function add_grid_layout_class($classes) {
if (is_home() || is_archive()) {
$classes[] = 'grid-layout';
}
return $classes;
}
add_filter('body_class', 'add_grid_layout_class');Code language: PHP (php)CSSに追加:
.grid-layout .site-main {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 30px;
}
.grid-layout .inside-article {
display: flex;
flex-direction: column;
height: 100%;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.grid-layout .inside-article:hover {
transform: translateY(-5px);
}Code language: CSS (css)- フッターウィジェットのレスポンシブデザイン
.footer-widgets-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
}
@media (max-width: 768px) {
.footer-widgets-container {
grid-template-columns: 1fr;
}
}Code language: CSS (css)- ページ上部に戻るボタンを追加 functions.phpに追加:
function add_back_to_top() {
echo '<a href="#" id="back-to-top" title="ページ上部へ">↑</a>';
}
add_action('wp_footer', 'add_back_to_top');Code language: PHP (php)CSSに追加:
#back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
background: #333;
color: #fff;
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
border-radius: 50%;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 9999;
}
#back-to-top.show {
opacity: 1;
visibility: visible;
}Code language: CSS (css)JavaScriptの追加:
document.addEventListener('DOMContentLoaded', function() {
var backToTop = document.getElementById('back-to-top');
window.addEventListener('scroll', function() {
if (window.pageYOffset > 300) {
backToTop.classList.add('show');
} else {
backToTop.classList.remove('show');
}
});
backToTop.addEventListener('click', function(e) {
e.preventDefault();
window.scrollTo({top: 0, behavior: 'smooth'});
});
});Code language: JavaScript (javascript)パフォーマンス最適化Tips
- 画像の遅延読み込み functions.phpに追加:
function add_lazy_loading_to_images($content) {
return preg_replace('/<img(.*?)src=/i', '<img$1loading="lazy" src=', $content);
}
add_filter('the_content', 'add_lazy_loading_to_images');Code language: PHP (php)- フォントの最適化
/* システムフォントを使用してWebフォント読み込みを回避 */
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}Code language: CSS (css)- 不要なスクリプトの読み込みを停止 functions.phpに追加:
function disable_unused_scripts() {
if (!is_admin()) {
wp_deregister_script('wp-embed');
// WordPressの絵文字機能を無効化
remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('wp_print_styles', 'print_emoji_styles');
}
}
add_action('wp_enqueue_scripts', 'disable_unused_scripts');Code language: JavaScript (javascript)まとめ
GeneratePressの成功事例から見えてくるのは、シンプルさを基盤にしながらも、ターゲットオーディエンスに合わせたカスタマイズが効果的だということです。
特に効果的な手法は：
- 目的に合わせたレイアウト設計（グリッド、カード型など）
- 独自のカラーパレットとタイポグラフィで一貫したブランドイメージ作り
- GenerateBlocksを活用した視覚的なコンテンツ構成
- ユーザー体験を向上させる小さなインタラクション要素の追加
- 必要最低限のプラグインと軽量なコードでの最適化
これらのTipsを組み合わせて、あなただけの個性的なGeneratePressサイトを作ってみてください。シンプルながらも魅力的で、訪問者の心に残るウェブサイトが実現できるでしょう。