【Blogger×JetTheme】Homeのトップ画面をカード形式にしたい。
【Blogger×JetTheme】Homeのトップ画面をカード形式にしたい。
カード形式にしてかっこいい感じにしたい
こんなお悩みにお答えします。
今回は、Blogger×JetThemeで作成するブログのトップ画面をカード形式にしたいを分かりやすく紹介します。
コピペでOK！です。
［Google広告]
方法 / 画像を作成 /
「新しいデザインを作成」をクリックします。
512×327ピクセルの白い長方形が出てきたら準備完了です。
おすすめ無料画像
おしゃれなものからコメディまで ぱくたそさま海外系の画像が多い O-DANさま
方法 / HTML /
HTMLの貼り付け先： 【投稿】→【新しい投稿】
CSSのデザインに合わせて、テキストを入力します
<div class="container">
<div class="section-title">
<span>Categories</span>
</div>
<div class="grid-layout">
<article class="card">
<a href="ここにリンク先URL">
<div class="card-image bg-cream">
<img src="ここに画像URL" alt="Tool Icon">
</div>
<h2 class="card-title">ここにタイトル</h2>
</a>
</article>
<article class="card">
<div class="card-image bg-pink">
<a href="ここにリンク先URL">
<img src="ここに画像URL" alt="Recipe Icon">
</a>
</div>
<h2 class="card-title">ここにタイトル</h2>
</article>
</div>
</div>方法 / 画像の入れ方 /
画像を挿入ボタンをクリックし、保存先をえらびます
＊今回は、パソコンに保存しているので、パソコンからアップロードを選びます。
ファイルを選びます。
画像サイズが選べます。
ポイント：
画像サイズは、記事に合わせていろいろ試してください。
ポイント： 今回は、「中」 ・「中央」を選びます。
「OK」をクリックします。
画像のリンクをコピー「Ctrl＋C」します。
コピーする箇所は、https:// ～ .pngです。
例：https://blogger.googleusercontent.com/img/bbbbb/151.pngです。
コピーする箇所は、https:// ～ .pngです。
例：https://blogger.googleusercontent.com/img/bbbbb/151.pngです。
ポイント：
たくさんある文字の中から、 src というのを探してください。
<img src="ここに画像URL" alt="Tool Icon"> に画像を入れます。
ポイント：
<img src="https://blogger.googleusercontent.com/img/bbbbb/151.png" alt="Tool Icon">です。
方法 / CSS /
【テーマ】→【カスタマイズ】→【バックアップ】
CSSの貼り付け先： Blogger管理画面 ＞ テーマ ＞ カスタマイズ ▼ ＞ HTMLを編集
どこでもいいので、テキストがあるところをクリック ＞ 検索「Crtl＋F」 ＞ 画面左上にある検索窓に「CSS」と入力してください。
「/*Your custom CSS is here*/」 を探してください。
/*Your custom CSS is here*/の下をクリック ＞ 2～3回ほどEnterキーを押して、改行します。
改行したところに、CSSを「貼り付け」します。
/* 全体のベース */
body {
background-color: #ffffff;
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
color: #333;
margin: 0;
padding: 0px;
}
.container {
max-width: 1000px;
margin: 0 auto;
}
/* タブ部分 */
.header-tabs {
display: flex;
background: #fff;
border-radius: 4px;
overflow: hidden;
margin-bottom: 30px;
}
.tab {
flex: 1;
text-align: center;
padding: 15px;
font-weight: bold;
cursor: pointer;
border-bottom: 4px solid transparent;
}
.tab.active {
color: #3498db;
border-bottom-color: #3498db;
}
/* 中央のタイトル線 */
.section-title {
display: flex;
align-items: center;
text-align: center;
margin-bottom: 20px;
font-weight: bold;
}
.section-title::before, .section-title::after {
content: "";
flex: 1;
border-bottom: 2px solid #333;
}
.section-title span {
padding: 0 15px;
}
/* グリッドレイアウト */
.grid-layout {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 横並び。狭くなると1列に */
gap: 20px;
}
/* カードのデザイン */
.card {
background: #fff;
border-radius: 8px;
overflow: hidden;
transition: transform 0.2s;
}
.card:hover {
transform: translateY(-5px);
}
.card-image {
aspect-ratio: 16 / 9; /* 画像の比率を固定 */
overflow: hidden; /* はみ出し防止 */
display: block; /* flexを解除するか、中のimgを制御する */
}
.card-image img {
width: 100%; /* 横幅をカードいっぱいに */
height: 100%; /* 高さを親要素に合わせる */
object-fit: cover; /* 比率を保ったまま隙間なく埋める */
display: block; /* 下部の謎の隙間を消す */
}
/* 背景色のバリエーション */
.bg-cream { background-color: #fff9eb; }
.bg-pink { background-color: #ffb1b1; }
.card-title {
padding: 15px;
font-size: 1rem;
line-height: 1.4;
margin: 0;
}まとめ
トップ画面がかっこよくなりました。もし、うまく表示できないときは、
Gemini で確認すれば大丈夫です。
CSSコードなどをコピペして、Geminiにうまく表示されません。と、メッセージを入力したら、色々アドバイスしてくれます。
公式サイト ＞＞ Gemini
最後まで読んでいただきありがとうございました。
はつごかんでした。
関連記事はこちら
［Google広告]
Menu
