基本設定の構成

ブログの外観をカスタマイズするための主要設定をJavaScriptオブジェクトで定義します。以下のコードスニペットは、ユーザー情報、ナビゲーションメニュー、アニメーション効果を一元管理する構成を示しています。

<script type="text/javascript">
window.profileConfig = {
  profile: {
    username: 'TechEnthusiast',
    joinDate: '2022-03-15',
    avatarUrl: 'https://example.com/avatar.jpg',
    siteIcon: 'https://example.com/favicon.png'
  },
  navigation: {
    backgroundImg: 'https://example.com/header-bg.jpg',
    menuItems: [
      ['個人サイト', 'https://example.com'],
      ['技術ブログ', 'https://example.com/blog'],
      ['GitHubプロフィール', 'https://github.com/username'],
      ['技術コミュニティ', 'https://community.example.com']
    ]
  },
  header: {
    home: {
      backgrounds: [
        "https://example.com/home-bg1.jpg",
        "https://example.com/home-bg2.jpg"
      ]
    }
  },
  effects: {
    banner: {
      enabled: true,
      params: { radius: 18 }
    },
    pageBackground: { enabled: true },
    imageEffects: { enabled: true }
  },
  progressBar: { color: '#5a9bff' }
};
</script>
<script src="https://cdn.example.com/theme-engine.js" defer></script>

CSSカスタマイズの実装

レスポンシブデザインを実現するためのCSSルールを以下に示します。特に注目すべきは、モバイル端末での表示を最適化するメディアクエリと、コードブロックの視覚的強調です。

/* レスポンシブレイアウトの基本設定 */
body {
  font-family: 'Noto Sans JP', sans-serif;
  color: #333;
  line-height: 1.6;
  background: #f8f9fa;
}

.article-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background: white;
  box-shadow: 0 2px 15px rgba(0,0,0,0.08);
}

/* コードブロックのスタイリング */
.code-block {
  border-radius: 6px;
  overflow: hidden;
  margin: 1.2em 0;
  position: relative;
}

.code-header {
  background: #2d3748;
  color: #e2e8f0;
  padding: 8px 12px;
  font-size: 14px;
  display: flex;
  align-items: center;
}

.code-header::after {
  content: '';
  position: absolute;
  top: 10px;
  left: 12px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fc5252;
  box-shadow: 20px 0 #fdbc40, 40px 0 #48bb78;
}

pre {
  background: #1a202c;
  color: #e2e8f0;
  padding: 1.2em;
  overflow-x: auto;
  margin: 0;
  font-family: 'Fira Code', monospace;
  font-size: 15px;
  line-height: 1.5;
}

/* モバイル対応 */
@media (max-width: 768px) {
  .article-container {
    padding: 15px;
  }
  
  .sidebar {
    display: none;
  }
  
  .post-content {
    width: 100% !important;
  }
}

インタラクティブ要素の追加

ユーザー操作に反応する動的要素を実装するためのスクリプト例を示します。クリック位置に技術キーワードが表示されるエフェクトを、パフォーマンスを考慮して最適化しています。

<script>
document.addEventListener('click', function(e) {
  const techTerms = [
    '⚡DevOps', '🌐WebAPI', '🐳Docker', 
    '📈Monitoring', '🔐Security', '🤖Automation'
  ];
  
  const randomTerm = techTerms[Math.floor(Math.random() * techTerms.length)];
  const color = `rgb(${Math.random()*200+55}, ${Math.random()*200+55}, ${Math.random()*200+55})`;
  
  const element = document.createElement('span');
  element.textContent = randomTerm;
  element.style.cssText = `
    position: absolute;
    top: ${e.clientY - 20}px;
    left: ${e.clientX}px;
    color: ${color};
    font-weight: bold;
    pointer-events: none;
    z-index: 9999;
    transition: all 1.2s ease;
  `;
  
  document.body.appendChild(element);
  
  setTimeout(() => {
    element.style.opacity = '0';
    element.style.transform = 'translateY(-150px)';
  }, 10);
  
  setTimeout(() => element.remove(), 1200);
});
</script>

マルチメディア機能の統合

ブログに音楽プレーヤーを追加するための実装例です。Meting.jsライブラリを利用し、最小限の設定で動作するよう構成しています。

<link rel="stylesheet" href="https://cdn.example.com/aplayer.css">
<script src="https://cdn.example.com/aplayer.js"></script>
<script src="https://cdn.example.com/meting.js"></script>

<div class="music-player">
  <meting-js
    server="netease"
    type="playlist"
    id="503838841"
    fixed="true"
    mini="true"
    volume="0.7">
  </meting-js>
</div>