😊
Vueを触ってみたいけど、よくわからない人。とりあえず、コンポーネントがわかれば、サイト作成が爆速になりますよ。
Vueで、コンテンツ内容のみを変更し、最小限のコストでブログを作成する方法。
まずは、テンプレとなる全体のHTMLを用意。
ない場合は「 ワンページのhtmlブログデザインを作って。」っとAIに言ったらすぐ作ってくれる。
ファイル構成
index.html
js
-vue.js
-app.js
css
-style.css
下記を、app.jsを作成し、張り付ける。rootは一つのみなので、適当なタグで全体を囲むのが重要です。
Vue.component('hello-world', {
// テンプレートでプロパティを使用
template: `
<div>
<header>
<div class="container header-inner">
<div class="logo">Simple Blog</div>
<a href="index.html" class="home-link">HOME</a>
</div>
</header>
<div class="container">
<main class="main-content">
<article class="rep_content">
<slot>
<h1>ブログ記事のタイトル</h1>
<p>ここにブログ記事の本文が入ります。シンプルで読みやすいデザインを心がけています。青白を基調とした配色で、落ち着いた雰囲気を演出しています。</p>
<p>レスポンシブデザインに対応しているので、スマートフォンでも快適に閲覧できます。フォントサイズも適切に調整してあります。</p>
</slot>
</article>
<aside class="sidebar">
<section class="related-posts">
<h2>Other</h2>
<div class="related-post">
<a href="#">関連記事タイトル1</a>
</div>
<div class="related-post">
<a href="#">関連記事タイトル2</a>
</div>
<div class="related-post">
<a href="#">関連記事タイトル3</a>
</div>
</section>
</aside>
</main>
</div>
<footer>
<div class="container">
<p>© 2023 Simple Blog. All rights reserved.</p>
</div>
</footer>
</div>
`
});
var app = new Vue({
el: '#app',
});
バッククォートでhtmlは囲みましょう。コレ→「 ` 」
記事本文のところ、つまり変更したいところに、
<slot></slot>
を追加します。
これは、インライン要素を編集するための目印です。
あとは、vue.jsを公式からダウンロードしてきて、
jsフォルダを作成し二つとも入れておいてください。
次に、index.htmlを作ります。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<title>Welcome to Vue</title>
<link rel="stylesheet" href="css/style.css">
<meta charset="UTF-8">
</head>
<body>
<div id="app">
<hello-world>test</hello-world>
</div>
<script src="js/vue.js"></script>
<script src="js/app.js"></script>
</body>
</html>
これで完了です。
<hello-world>test</hello-world>
を
<hello-world>
<h1>HelloWorld</h1>
<p>テスト文字列</p>
</hello-world>
のように変えてあげると、実際のサイトのほうも、変化します。
あとは、index.htmlをコピーして量産できます。
一応、サンプル用のcssも貼っておきます
css/style.css
/* 基本設定 */
:root {
--main-color: #4a89dc;
--sub-color: #e6f2ff;
--text-color: #333;
--light-gray: #f5f7fa;
--white: #ffffff;
}
body {
font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
line-height: 1.6;
color: var(--text-color);
background-color: var(--white);
margin: 0;
padding: 0;
font-size: 16px;
}
a {
color: var(--main-color);
text-decoration: none;
}
/* レイアウト */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
/* ヘッダー */
header {
background-color: var(--white);
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
position: sticky;
top: 0;
z-index: 100;
}
.header-inner {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
}
.logo {
font-size: 1.5rem;
font-weight: bold;
color: var(--main-color);
}
/* ナビゲーション - HOMEリンクのみ */
.home-link {
font-size: 1rem;
padding: 8px 15px;
border: 1px solid var(--main-color);
border-radius: 4px;
transition: all 0.3s;
}
.home-link:hover {
background-color: var(--main-color);
color: var(--white);
}
/* メインコンテンツ */
.main-content {
display: grid;
grid-template-columns: 1fr;
gap: 30px;
padding: 30px 0;
min-height: 100vh;
}
@media (min-width: 768px) {
.main-content {
grid-template-columns: 2fr 1fr;
}
}
article {
background-color: var(--white);
padding: 25px;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
article h1 {
color: var(--main-color);
margin-top: 0;
font-size: 1.8rem;
}
article p {
margin-bottom: 1.5em;
}
/* サイドバー */
.sidebar {
display: flex;
flex-direction: column;
gap: 20px;
}
.related-posts {
background-color: var(--light-gray);
padding: 20px;
border-radius: 5px;
}
.related-posts h2 {
font-size: 1.3rem;
margin-top: 0;
color: var(--main-color);
border-bottom: 1px solid var(--sub-color);
padding-bottom: 10px;
}
.related-post {
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px solid var(--sub-color);
}
.related-post:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.related-post a {
display: block;
font-size: 0.95rem;
}
/* フッター */
footer {
background-color: var(--main-color);
color: var(--white);
text-align: center;
padding: 20px 0;
margin-top: 30px;
}
Discussion