投稿者: hana@tsubaki

作業の進め方の相談

と、提案してみました！！

OKであれば、FlutterFlowでまずは全ページUIのレイアウト作成と、ページ遷移までやったほうがいいのかなって思ってます。

ちなみにPDFページと、ブラーについては色々と指示をもらいたいです！

2025年10月8日
旅アプリページ構成の再確認

指示通りグレーと黒で遷移など書いたけど、見にくければサイドの色でラインを書くよ

2025年10月8日
きんもくせい！

2025年10月6日
Schduleページ
import ‘/flutter_flow/flutter_flow_theme.dart’;
import ‘/flutter_flow/flutter_flow_util.dart’;
import ‘/flutter_flow/flutter_flow_widgets.dart’;
import ‘dart:ui’;
import ‘package:flutter/material.dart’;
import ‘package:google_fonts/google_fonts.dart’;
import ‘package:provider/provider.dart’;

import ‘schdule_model.dart’;
export ‘schdule_model.dart’;

class SchduleWidget extends StatefulWidget {
const SchduleWidget({
super.key,
required this.selectedDate,
required this.destination,
String? place,
String? shop,
String? budget,
String? balance,
}) : this.place = place ?? ‘未設定’,
this.shop = shop ?? ‘未設定’,
this.budget = budget ?? ‘０’,
this.balance = balance ?? ‘０’;

final DateTime? selectedDate;
final String? destination;
final String place;
final String shop;
final String budget;
final String balance;

static String routeName = ‘Schdule’;
static String routePath = ‘/schdule’;

@override
State createState() => _SchduleWidgetState();
}

class _SchduleWidgetState extends State {
late SchduleModel _model;

final scaffoldKey = GlobalKey();

@override
void initState() {
super.initState();
_model = createModel(context, () => SchduleModel());
}

@override
void dispose() {
_model.dispose();
```
super.dispose();
```
}

@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
FocusScope.of(context).unfocus();
FocusManager.instance.primaryFocus?.unfocus();
},
child: Scaffold(
key: scaffoldKey,
backgroundColor: FlutterFlowTheme.of(context).primaryBackground,
appBar: PreferredSize(
preferredSize: Size.fromHeight(28),
child: AppBar(
backgroundColor: Color(0xFF0C110C),
automaticallyImplyLeading: true,
actions: [],
flexibleSpace: FlexibleSpaceBar(
title: Text(
‘旅の予定帳’,
style: FlutterFlowTheme.of(context).bodyMedium.override(
font: GoogleFonts.notoSansJp(
fontWeight: FontWeight.w500,
fontStyle:
FlutterFlowTheme.of(context).bodyMedium.fontStyle,
),
color: Colors.white,
letterSpacing: 0.0,
fontWeight: FontWeight.w500,
fontStyle:
FlutterFlowTheme.of(context).bodyMedium.fontStyle,
),
),
centerTitle: true,
expandedTitleScale: 1.0,
),
elevation: 2,
),
),
body: SafeArea(
top: true,
child: Container(
width: 398,
height: 852,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Color(0xFF0C110C), Color(0xFF365B38)],
stops: [0.51, 0.88],
begin: AlignmentDirectional(0, -1),
end: AlignmentDirectional(0, 1),
),
),
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Container(
width: 416.7,
height: 134.62,
decoration: BoxDecoration(),
child: Container(
height: 200,
child: Stack(
children: [
Align(
alignment: AlignmentDirectional(-0.65, -0.25),
child: Text(
‘Travel schedules’,
style: FlutterFlowTheme.of(context)
.bodyMedium
.override(
font: GoogleFonts.moonDance(
fontWeight: FlutterFlowTheme.of(context)
.bodyMedium
.fontWeight,
fontStyle: FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
color: Colors.white,
fontSize: 40,
letterSpacing: 0.0,
fontWeight: FlutterFlowTheme.of(context)
.bodyMedium
.fontWeight,
fontStyle: FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
),
),
Align(
alignment: AlignmentDirectional(-0.68, 0.43),
child: Text(
‘旅の予定と予算’,
style: FlutterFlowTheme.of(context)
.bodyMedium
.override(
font: GoogleFonts.notoSansJp(
fontWeight: FontWeight.normal,
fontStyle: FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
color: Colors.white,
fontSize: 18,
letterSpacing: 0.0,
fontWeight: FontWeight.normal,
fontStyle: FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
),
),
Align(
alignment: AlignmentDirectional(1.05, -5.3),
child: ClipRRect(
borderRadius: BorderRadius.circular(8),
child: Image.asset(
‘assets/images/memory.png’,
width: 139,
fit: BoxFit.cover,
),
),
),
],
),
),
),
Container(
width: 330,
height: 500,
decoration: BoxDecoration(
color: Color(0xFFE6DDB8),
image: DecorationImage(
fit: BoxFit.cover,
image: Image.asset(
‘assets/images/clean-gray-paper.png’,
).image,
),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(12),
bottomRight: Radius.circular(12),
topLeft: Radius.circular(12),
topRight: Radius.circular(12),
),
),
child: Stack(
children: [
Column(
mainAxisSize: MainAxisSize.max,
children: [
Align(
alignment: AlignmentDirectional(1, -1),
child: Padding(
padding:
EdgeInsetsDirectional.fromSTEB(0, 12, 12, 0),
child: Text(
valueOrDefault(
widget!.selectedDate?.toString(),
’20XX.X.X’,
),
style: FlutterFlowTheme.of(context)
.bodyMedium
.override(
font: GoogleFonts.inter(
fontWeight: FlutterFlowTheme.of(context)
.bodyMedium
.fontWeight,
fontStyle: FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
letterSpacing: 0.0,
fontWeight: FlutterFlowTheme.of(context)
.bodyMedium
.fontWeight,
fontStyle: FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
),
),
),
Align(
alignment: AlignmentDirectional(-1, 0),
child: Padding(
padding:
EdgeInsetsDirectional.fromSTEB(24, 0, 0, 24),
child: Text(
valueOrDefault(
widget!.destination,
‘未設定’,
),
style: FlutterFlowTheme.of(context)
.bodyMedium
.override(
font: GoogleFonts.notoSansJp(
fontWeight: FontWeight.bold,
fontStyle: FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
color: Color(0xFF353F35),
fontSize: 18,
letterSpacing: 0.0,
fontWeight: FontWeight.bold,
fontStyle: FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
),
),
),
Align(
alignment: AlignmentDirectional(-1, 0),
child: Padding(
padding:
EdgeInsetsDirectional.fromSTEB(24, 0, 0, 0),
child: Text(
‘巡りたい場所’,
style: FlutterFlowTheme.of(context)
.bodyMedium
.override(
font: GoogleFonts.inter(
fontWeight: FontWeight.w600,
fontStyle: FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
color: Color(0xFF353F35),
fontSize: 15,
letterSpacing: 0.0,
fontWeight: FontWeight.w600,
fontStyle: FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
),
),
),
Align(
alignment: AlignmentDirectional(0, 0),
child: Padding(
padding:
EdgeInsetsDirectional.fromSTEB(0, 5, 0, 0),
child: Container(
width: 262,
height: 40,
decoration: BoxDecoration(
color: FlutterFlowTheme.of(context)
.secondaryBackground,
boxShadow: [
BoxShadow(
blurRadius: 4,
color: Color(0x1A000000),
offset: Offset(
0,
2,
),
)
],
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(12),
bottomRight: Radius.circular(12),
topLeft: Radius.circular(12),
topRight: Radius.circular(12),
),
),
child: Align(
alignment: AlignmentDirectional(-1, 0),
child: Padding(
padding: EdgeInsetsDirectional.fromSTEB(
16, 7, 0, 7),
child: Text(
valueOrDefault(
widget!.place,
‘未設定’,
),
textAlign: TextAlign.start,
style: FlutterFlowTheme.of(context)
.bodyMedium
.override(
font: GoogleFonts.inter(
fontWeight:
FlutterFlowTheme.of(context)
.bodyMedium
.fontWeight,
fontStyle:
FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
letterSpacing: 0.0,
fontWeight:
FlutterFlowTheme.of(context)
.bodyMedium
.fontWeight,
fontStyle:
FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
),
),
),
),
),
),
Align(
alignment: AlignmentDirectional(0, 0),
child: Padding(
padding:
EdgeInsetsDirectional.fromSTEB(0, 24, 0, 0),
child: Text(
‘行きたいお店やお土産’,
textAlign: TextAlign.start,
style: FlutterFlowTheme.of(context)
.bodyMedium
.override(
font: GoogleFonts.notoSansJp(
fontWeight: FontWeight.w600,
fontStyle: FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
color: Color(0xFF353F35),
letterSpacing: 0.0,
fontWeight: FontWeight.w600,
fontStyle: FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
),
),
),
Align(
alignment: AlignmentDirectional(0.5, 0),
child: Padding(
padding:
EdgeInsetsDirectional.fromSTEB(0, 5, 0, 0),
child: Container(
width: 222,
height: 40,
decoration: BoxDecoration(
color: FlutterFlowTheme.of(context)
.secondaryBackground,
boxShadow: [
BoxShadow(
blurRadius: 4,
color: Color(0x1A000000),
offset: Offset(
0,
2,
),
)
],
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(12),
bottomRight: Radius.circular(12),
topLeft: Radius.circular(12),
topRight: Radius.circular(12),
),
),
child: Align(
alignment: AlignmentDirectional(-1, 0),
child: Padding(
padding: EdgeInsetsDirectional.fromSTEB(
16, 7, 0, 7),
child: Text(
valueOrDefault(
widget!.shop,
‘未設定’,
),
style: FlutterFlowTheme.of(context)
.bodyMedium
.override(
font: GoogleFonts.inter(
fontWeight:
FlutterFlowTheme.of(context)
.bodyMedium
.fontWeight,
fontStyle:
FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
letterSpacing: 0.0,
fontWeight:
FlutterFlowTheme.of(context)
.bodyMedium
.fontWeight,
fontStyle:
FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
),
),
),
),
),
),
Align(
alignment: AlignmentDirectional(0, 0),
child: Padding(
padding:
EdgeInsetsDirectional.fromSTEB(30, 25, 30, 0),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: EdgeInsetsDirectional.fromSTEB(
0, 0, 13, 0),
child: Container(
width: 124,
height: 68,
decoration: BoxDecoration(
color: Color(0xFFD1F1C1),
boxShadow: [
BoxShadow(
blurRadius: 4,
color: Color(0x17000000),
offset: Offset(
0,
2,
),
)
],
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(12),
bottomRight: Radius.circular(12),
topLeft: Radius.circular(12),
topRight: Radius.circular(12),
),
),
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Padding(
padding:
EdgeInsetsDirectional.fromSTEB(
0, 5, 0, 0),
child: Text(
‘予算’,
textAlign: TextAlign.center,
style: FlutterFlowTheme.of(
context)
.bodyMedium
.override(
font:
GoogleFonts.notoSansJp(
fontWeight:
FontWeight.bold,
fontStyle:
FlutterFlowTheme.of(
context)
.bodyMedium
.fontStyle,
),
color: Color(0xFF353F35),
fontSize: 15,
letterSpacing: 0.0,
fontWeight: FontWeight.bold,
fontStyle:
FlutterFlowTheme.of(
context)
.bodyMedium
.fontStyle,
),
),
),
Padding(
padding:
EdgeInsetsDirectional.fromSTEB(
0, 8, 0, 0),
child: Text(
valueOrDefault(
widget!.budget,
‘０’,
),
style: FlutterFlowTheme.of(
context)
.bodyMedium
.override(
font:
GoogleFonts.notoSansJp(
fontWeight:
FontWeight.bold,
fontStyle:
FlutterFlowTheme.of(
context)
.bodyMedium
.fontStyle,
),
fontSize: 16,
letterSpacing: 0.0,
fontWeight: FontWeight.bold,
fontStyle:
FlutterFlowTheme.of(
context)
.bodyMedium
.fontStyle,
),
),
),
],
),
),
),
Container(
width: 124,
height: 68,
decoration: BoxDecoration(
color: Color(0xFFEFD7BB),
boxShadow: [
BoxShadow(
blurRadius: 4,
color: Color(0x1A000000),
offset: Offset(
0,
2,
),
)
],
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(12),
bottomRight: Radius.circular(12),
topLeft: Radius.circular(12),
topRight: Radius.circular(12),
),
),
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Padding(
padding:
EdgeInsetsDirectional.fromSTEB(
0, 5, 0, 0),
child: Text(
‘残高’,
textAlign: TextAlign.center,
style: FlutterFlowTheme.of(context)
.bodyMedium
.override(
font: GoogleFonts.notoSansJp(
fontWeight: FontWeight.bold,
fontStyle:
FlutterFlowTheme.of(
context)
.bodyMedium
.fontStyle,
),
color: Color(0xFF353F35),
fontSize: 15,
letterSpacing: 0.0,
fontWeight: FontWeight.bold,
fontStyle:
FlutterFlowTheme.of(
context)
.bodyMedium
.fontStyle,
),
),
),
Padding(
padding:
EdgeInsetsDirectional.fromSTEB(
0, 8, 0, 0),
child: Text(
valueOrDefault(
widget!.balance,
‘０’,
),
style: FlutterFlowTheme.of(context)
.bodyMedium
.override(
font: GoogleFonts.notoSansJp(
fontWeight: FontWeight.bold,
fontStyle:
FlutterFlowTheme.of(
context)
.bodyMedium
.fontStyle,
),
fontSize: 16,
letterSpacing: 0.0,
fontWeight: FontWeight.bold,
fontStyle:
FlutterFlowTheme.of(
context)
.bodyMedium
.fontStyle,
),
),
),
],
),
),
],
),
),
),
Padding(
padding:
EdgeInsetsDirectional.fromSTEB(0, 25, 0, 5),
child: Text(
‘思い出の記録場’,
style: FlutterFlowTheme.of(context)
.bodyMedium
.override(
font: GoogleFonts.notoSansJp(
fontWeight: FontWeight.w600,
fontStyle: FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
color: Color(0xFF353F35),
letterSpacing: 0.0,
fontWeight: FontWeight.w600,
fontStyle: FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
),
),
Container(
width: 289,
height: 80,
decoration: BoxDecoration(
color: FlutterFlowTheme.of(context)
.secondaryBackground,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(12),
bottomRight: Radius.circular(12),
topLeft: Radius.circular(12),
topRight: Radius.circular(12),
),
),
),
],
),
Align(
alignment: AlignmentDirectional(-0.82, -0.14),
child: ClipRRect(
borderRadius: BorderRadius.circular(8),
child: Image.asset(
‘assets/images/tabiapuri-pl.png’,
width: 57,
height: 86,
fit: BoxFit.cover,
),
),
),
Align(
alignment: AlignmentDirectional(0.81, -0.85),
child: ClipRRect(
borderRadius: BorderRadius.circular(8),
child: Image.asset(
‘assets/images/tabiapuri-r2.png’,
width: 80,
height: 92,
fit: BoxFit.cover,
),
),
),
],
),
),
],
),
),
),
),
);
}
}
2025年10月5日
TOP

// Generated code for this HomePage Widget…
GestureDetector(
onTap: () {
FocusScope.of(context).unfocus();
FocusManager.instance.primaryFocus?.unfocus();
},
child: Scaffold(
key: scaffoldKey,
backgroundColor: FlutterFlowTheme.of(context).primaryBackground,
body: SafeArea(
top: true,
child: Container(
width: 398,
height: 852,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Color(0xFF0C110C), Color(0xFF365B38)],
stops: [0.51, 0.88],
begin: AlignmentDirectional(0, -1),
end: AlignmentDirectional(0, 1),
),
),
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Padding(
padding: EdgeInsetsDirectional.fromSTEB(28, 0, 0, 0),
child: Container(
width: 418,
height: 124.28,
decoration: BoxDecoration(),
child: Stack(
children: [
Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
‘Travel’,
style: FlutterFlowTheme.of(context)
.bodyMedium
.override(
font: GoogleFonts.moonDance(
fontWeight: FlutterFlowTheme.of(context)
.bodyMedium
.fontWeight,
fontStyle: FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
color: Colors.white,
fontSize: 80,
letterSpacing: 0.0,
fontWeight: FlutterFlowTheme.of(context)
.bodyMedium
.fontWeight,
fontStyle: FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
lineHeight: 1,
),
),
]
.addToStart(SizedBox(height: 15))
.addToEnd(SizedBox(height: 0)),
),
Align(
alignment: AlignmentDirectional(0.54, 2.54),
child: ClipRRect(
borderRadius: BorderRadius.circular(8),
child: Image.asset(
‘assets/images/tabiapuri-b1_1.png’,
width: 80,
fit: BoxFit.contain,
alignment: Alignment(0, 0),
),
),
),
Align(
alignment: AlignmentDirectional(1.14, -4.72),
child: ClipRRect(
borderRadius: BorderRadius.circular(8),
child: Image.asset(
‘assets/images/eda3_1.png’,
width: 130,
height: 130,
fit: BoxFit.cover,
),
),
),
Align(
alignment: AlignmentDirectional(-0.9, 0.66),
child: Text(
‘Budget and Memories’,
style:
FlutterFlowTheme.of(context).bodyMedium.override(
font: GoogleFonts.moonDance(
fontWeight: FlutterFlowTheme.of(context)
.bodyMedium
.fontWeight,
fontStyle: FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
color: Colors.white,
fontSize: 30,
letterSpacing: 0.0,
fontWeight: FlutterFlowTheme.of(context)
.bodyMedium
.fontWeight,
fontStyle: FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
lineHeight: 1,
),
),
),
],
),
),
),
ListView(
padding: EdgeInsets.zero,
shrinkWrap: true,
scrollDirection: Axis.vertical,
children: [
Align(
alignment: AlignmentDirectional(0, -1),
child: Container(
width: 289,
decoration: BoxDecoration(),
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Align(
alignment: AlignmentDirectional(-1, 0),
child: Text(
‘旅行日’,
textAlign: TextAlign.start,
style: FlutterFlowTheme.of(context)
.bodyMedium
.override(
font: GoogleFonts.notoSansJp(
fontWeight:
FlutterFlowTheme.of(context)
.bodyMedium
.fontWeight,
fontStyle:
FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
color: Colors.white,
fontSize: 16,
letterSpacing: 0.0,
fontWeight: FlutterFlowTheme.of(context)
.bodyMedium
.fontWeight,
fontStyle: FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
),
),
Padding(
padding:
EdgeInsetsDirectional.fromSTEB(0, 5, 0, 5),
child: TextFormField(
controller: _model.textController1,
focusNode: _model.textFieldFocusNode1,
autofocus: false,
obscureText: false,
decoration: InputDecoration(
isDense: true,
labelStyle: FlutterFlowTheme.of(context)
.labelMedium
.override(
font: GoogleFonts.inter(
fontWeight:
FlutterFlowTheme.of(context)
.labelMedium
.fontWeight,
fontStyle:
FlutterFlowTheme.of(context)
.labelMedium
.fontStyle,
),
letterSpacing: 0.0,
fontWeight:
FlutterFlowTheme.of(context)
.labelMedium
.fontWeight,
fontStyle:
FlutterFlowTheme.of(context)
.labelMedium
.fontStyle,
),
hintText: ‘例:2026.4.6’,
hintStyle: FlutterFlowTheme.of(context)
.labelMedium
.override(
font: GoogleFonts.inter(
fontWeight:
FlutterFlowTheme.of(context)
.labelMedium
.fontWeight,
fontStyle:
FlutterFlowTheme.of(context)
.labelMedium
.fontStyle,
),
letterSpacing: 0.0,
fontWeight:
FlutterFlowTheme.of(context)
.labelMedium
.fontWeight,
fontStyle:
FlutterFlowTheme.of(context)
.labelMedium
.fontStyle,
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Color(0x00000000),
width: 1,
),
borderRadius: BorderRadius.circular(8),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Color(0x00000000),
width: 1,
),
borderRadius: BorderRadius.circular(8),
),
errorBorder: OutlineInputBorder(
borderSide: BorderSide(
color:
FlutterFlowTheme.of(context).error,
width: 1,
),
borderRadius: BorderRadius.circular(8),
),
focusedErrorBorder: OutlineInputBorder(
borderSide: BorderSide(
color:
FlutterFlowTheme.of(context).error,
width: 1,
),
borderRadius: BorderRadius.circular(8),
),
filled: true,
fillColor: FlutterFlowTheme.of(context)
.secondaryBackground,
),
style: FlutterFlowTheme.of(context)
.bodyMedium
.override(
font: GoogleFonts.inter(
fontWeight:
FlutterFlowTheme.of(context)
.bodyMedium
.fontWeight,
fontStyle:
FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
letterSpacing: 0.0,
fontWeight: FlutterFlowTheme.of(context)
.bodyMedium
.fontWeight,
fontStyle: FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
cursorColor:
FlutterFlowTheme.of(context).primaryText,
enableInteractiveSelection: true,
validator: _model.textController1Validator
.asValidator(context),
),
),
Align(
alignment: AlignmentDirectional(-1, 0),
child: Text(
‘行き先’,
style: FlutterFlowTheme.of(context)
.bodyMedium
.override(
font: GoogleFonts.notoSansJp(
fontWeight:
FlutterFlowTheme.of(context)
.bodyMedium
.fontWeight,
fontStyle:
FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
color: Colors.white,
fontSize: 16,
letterSpacing: 0.0,
fontWeight: FlutterFlowTheme.of(context)
.bodyMedium
.fontWeight,
fontStyle: FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
),
),
Padding(
padding:
EdgeInsetsDirectional.fromSTEB(0, 5, 0, 5),
child: TextFormField(
controller: _model.textController2,
focusNode: _model.textFieldFocusNode2,
autofocus: false,
obscureText: false,
decoration: InputDecoration(
isDense: true,
labelStyle: FlutterFlowTheme.of(context)
.labelMedium
.override(
font: GoogleFonts.inter(
fontWeight:
FlutterFlowTheme.of(context)
.labelMedium
.fontWeight,
fontStyle:
FlutterFlowTheme.of(context)
.labelMedium
.fontStyle,
),
letterSpacing: 0.0,
fontWeight:
FlutterFlowTheme.of(context)
.labelMedium
.fontWeight,
fontStyle:
FlutterFlowTheme.of(context)
.labelMedium
.fontStyle,
),
hintText: ‘例：夏休み軽井沢’,
hintStyle: FlutterFlowTheme.of(context)
.labelMedium
.override(
font: GoogleFonts.inter(
fontWeight:
FlutterFlowTheme.of(context)
.labelMedium
.fontWeight,
fontStyle:
FlutterFlowTheme.of(context)
.labelMedium
.fontStyle,
),
letterSpacing: 0.0,
fontWeight:
FlutterFlowTheme.of(context)
.labelMedium
.fontWeight,
fontStyle:
FlutterFlowTheme.of(context)
.labelMedium
.fontStyle,
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Color(0x00000000),
width: 1,
),
borderRadius: BorderRadius.circular(8),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Color(0x00000000),
width: 1,
),
borderRadius: BorderRadius.circular(8),
),
errorBorder: OutlineInputBorder(
borderSide: BorderSide(
color:
FlutterFlowTheme.of(context).error,
width: 1,
),
borderRadius: BorderRadius.circular(8),
),
focusedErrorBorder: OutlineInputBorder(
borderSide: BorderSide(
color:
FlutterFlowTheme.of(context).error,
width: 1,
),
borderRadius: BorderRadius.circular(8),
),
filled: true,
fillColor: FlutterFlowTheme.of(context)
.secondaryBackground,
),
style: FlutterFlowTheme.of(context)
.bodyMedium
.override(
font: GoogleFonts.notoSansJp(
fontWeight:
FlutterFlowTheme.of(context)
.bodyMedium
.fontWeight,
fontStyle:
FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
color: FlutterFlowTheme.of(context)
.primaryText,
letterSpacing: 0.0,
fontWeight: FlutterFlowTheme.of(context)
.bodyMedium
.fontWeight,
fontStyle: FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
cursorColor:
FlutterFlowTheme.of(context).primaryText,
enableInteractiveSelection: true,
validator: _model.textController2Validator
.asValidator(context),
),
),
Align(
alignment: AlignmentDirectional(-1, 0),
child: Text(
‘巡りたい場所’,
style: FlutterFlowTheme.of(context)
.bodyMedium
.override(
font: GoogleFonts.notoSansJp(
fontWeight:
FlutterFlowTheme.of(context)
.bodyMedium
.fontWeight,
fontStyle:
FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
color: Colors.white,
letterSpacing: 0.0,
fontWeight: FlutterFlowTheme.of(context)
.bodyMedium
.fontWeight,
fontStyle: FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
),
),
Padding(
padding:
EdgeInsetsDirectional.fromSTEB(0, 5, 0, 5),
child: TextFormField(
controller: _model.textController3,
focusNode: _model.textFieldFocusNode3,
autofocus: false,
obscureText: false,
decoration: InputDecoration(
isDense: true,
labelStyle: FlutterFlowTheme.of(context)
.labelMedium
.override(
font: GoogleFonts.inter(
fontWeight:
FlutterFlowTheme.of(context)
.labelMedium
.fontWeight,
fontStyle:
FlutterFlowTheme.of(context)
.labelMedium
.fontStyle,
),
letterSpacing: 0.0,
fontWeight:
FlutterFlowTheme.of(context)
.labelMedium
.fontWeight,
fontStyle:
FlutterFlowTheme.of(context)
.labelMedium
.fontStyle,
),
hintText: ‘例：雲場池・ハルニレテラス’,
hintStyle: FlutterFlowTheme.of(context)
.labelMedium
.override(
font: GoogleFonts.inter(
fontWeight:
FlutterFlowTheme.of(context)
.labelMedium
.fontWeight,
fontStyle:
FlutterFlowTheme.of(context)
.labelMedium
.fontStyle,
),
letterSpacing: 0.0,
fontWeight:
FlutterFlowTheme.of(context)
.labelMedium
.fontWeight,
fontStyle:
FlutterFlowTheme.of(context)
.labelMedium
.fontStyle,
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Color(0x00000000),
width: 1,
),
borderRadius: BorderRadius.circular(8),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Color(0x00000000),
width: 1,
),
borderRadius: BorderRadius.circular(8),
),
errorBorder: OutlineInputBorder(
borderSide: BorderSide(
color:
FlutterFlowTheme.of(context).error,
width: 1,
),
borderRadius: BorderRadius.circular(8),
),
focusedErrorBorder: OutlineInputBorder(
borderSide: BorderSide(
color:
FlutterFlowTheme.of(context).error,
width: 1,
),
borderRadius: BorderRadius.circular(8),
),
filled: true,
fillColor: FlutterFlowTheme.of(context)
.secondaryBackground,
),
style: FlutterFlowTheme.of(context)
.bodyMedium
.override(
font: GoogleFonts.notoSansJp(
fontWeight:
FlutterFlowTheme.of(context)
.bodyMedium
.fontWeight,
fontStyle:
FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
color: FlutterFlowTheme.of(context)
.primaryText,
letterSpacing: 0.0,
fontWeight: FlutterFlowTheme.of(context)
.bodyMedium
.fontWeight,
fontStyle: FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
cursorColor:
FlutterFlowTheme.of(context).primaryText,
enableInteractiveSelection: true,
validator: _model.textController3Validator
.asValidator(context),
),
),
Align(
alignment: AlignmentDirectional(-1, 0),
child: Text(
‘行きたいお店やお土産’,
style: FlutterFlowTheme.of(context)
.bodyMedium
.override(
font: GoogleFonts.inter(
fontWeight:
FlutterFlowTheme.of(context)
.bodyMedium
.fontWeight,
fontStyle:
FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
color: Colors.white,
fontSize: 16,
letterSpacing: 0.0,
fontWeight: FlutterFlowTheme.of(context)
.bodyMedium
.fontWeight,
fontStyle: FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
),
),
Padding(
padding:
EdgeInsetsDirectional.fromSTEB(0, 5, 0, 5),
child: TextFormField(
controller: _model.textController4,
focusNode: _model.textFieldFocusNode4,
autofocus: false,
obscureText: false,
decoration: InputDecoration(
isDense: true,
labelStyle: FlutterFlowTheme.of(context)
.labelMedium
.override(
font: GoogleFonts.inter(
fontWeight:
FlutterFlowTheme.of(context)
.labelMedium
.fontWeight,
fontStyle:
FlutterFlowTheme.of(context)
.labelMedium
.fontStyle,
),
letterSpacing: 0.0,
fontWeight:
FlutterFlowTheme.of(context)
.labelMedium
.fontWeight,
fontStyle:
FlutterFlowTheme.of(context)
.labelMedium
.fontStyle,
),
hintText: ‘例：丸山珈琲のドリップセット’,
hintStyle: FlutterFlowTheme.of(context)
.labelMedium
.override(
font: GoogleFonts.inter(
fontWeight:
FlutterFlowTheme.of(context)
.labelMedium
.fontWeight,
fontStyle:
FlutterFlowTheme.of(context)
.labelMedium
.fontStyle,
),
letterSpacing: 0.0,
fontWeight:
FlutterFlowTheme.of(context)
.labelMedium
.fontWeight,
fontStyle:
FlutterFlowTheme.of(context)
.labelMedium
.fontStyle,
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Color(0x00000000),
width: 1,
),
borderRadius: BorderRadius.circular(8),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Color(0x00000000),
width: 1,
),
borderRadius: BorderRadius.circular(8),
),
errorBorder: OutlineInputBorder(
borderSide: BorderSide(
color:
FlutterFlowTheme.of(context).error,
width: 1,
),
borderRadius: BorderRadius.circular(8),
),
focusedErrorBorder: OutlineInputBorder(
borderSide: BorderSide(
color:
FlutterFlowTheme.of(context).error,
width: 1,
),
borderRadius: BorderRadius.circular(8),
),
filled: true,
fillColor: FlutterFlowTheme.of(context)
.secondaryBackground,
),
style: FlutterFlowTheme.of(context)
.bodyMedium
.override(
font: GoogleFonts.notoSansJp(
fontWeight:
FlutterFlowTheme.of(context)
.bodyMedium
.fontWeight,
fontStyle:
FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
color: FlutterFlowTheme.of(context)
.primaryText,
letterSpacing: 0.0,
fontWeight: FlutterFlowTheme.of(context)
.bodyMedium
.fontWeight,
fontStyle: FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
cursorColor:
FlutterFlowTheme.of(context).primaryText,
enableInteractiveSelection: true,
validator: _model.textController4Validator
.asValidator(context),
),
),
Align(
alignment: AlignmentDirectional(-1, 0),
child: Text(
‘予算’,
style: FlutterFlowTheme.of(context)
.bodyMedium
.override(
font: GoogleFonts.inter(
fontWeight:
FlutterFlowTheme.of(context)
.bodyMedium
.fontWeight,
fontStyle:
FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
color: Colors.white,
fontSize: 16,
letterSpacing: 0.0,
fontWeight: FlutterFlowTheme.of(context)
.bodyMedium
.fontWeight,
fontStyle: FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
),
),
Padding(
padding:
EdgeInsetsDirectional.fromSTEB(0, 5, 0, 5),
child: TextFormField(
controller: _model.textController5,
focusNode: _model.textFieldFocusNode5,
autofocus: false,
obscureText: false,
decoration: InputDecoration(
isDense: true,
labelStyle: FlutterFlowTheme.of(context)
.labelMedium
.override(
font: GoogleFonts.inter(
fontWeight:
FlutterFlowTheme.of(context)
.labelMedium
.fontWeight,
fontStyle:
FlutterFlowTheme.of(context)
.labelMedium
.fontStyle,
),
letterSpacing: 0.0,
fontWeight:
FlutterFlowTheme.of(context)
.labelMedium
.fontWeight,
fontStyle:
FlutterFlowTheme.of(context)
.labelMedium
.fontStyle,
),
hintText: ‘例：15,000’,
hintStyle: FlutterFlowTheme.of(context)
.labelMedium
.override(
font: GoogleFonts.inter(
fontWeight:
FlutterFlowTheme.of(context)
.labelMedium
.fontWeight,
fontStyle:
FlutterFlowTheme.of(context)
.labelMedium
.fontStyle,
),
letterSpacing: 0.0,
fontWeight:
FlutterFlowTheme.of(context)
.labelMedium
.fontWeight,
fontStyle:
FlutterFlowTheme.of(context)
.labelMedium
.fontStyle,
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Color(0x00000000),
width: 1,
),
borderRadius: BorderRadius.circular(8),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Color(0x00000000),
width: 1,
),
borderRadius: BorderRadius.circular(8),
),
errorBorder: OutlineInputBorder(
borderSide: BorderSide(
color:
FlutterFlowTheme.of(context).error,
width: 1,
),
borderRadius: BorderRadius.circular(8),
),
focusedErrorBorder: OutlineInputBorder(
borderSide: BorderSide(
color:
FlutterFlowTheme.of(context).error,
width: 1,
),
borderRadius: BorderRadius.circular(8),
),
filled: true,
fillColor: FlutterFlowTheme.of(context)
.secondaryBackground,
),
style: FlutterFlowTheme.of(context)
.bodyMedium
.override(
font: GoogleFonts.notoSansJp(
fontWeight:
FlutterFlowTheme.of(context)
.bodyMedium
.fontWeight,
fontStyle:
FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
letterSpacing: 0.0,
fontWeight: FlutterFlowTheme.of(context)
.bodyMedium
.fontWeight,
fontStyle: FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
keyboardType: TextInputType.number,
cursorColor:
FlutterFlowTheme.of(context).primaryText,
enableInteractiveSelection: true,
validator: _model.textController5Validator
.asValidator(context),
),
),
Align(
alignment: AlignmentDirectional(-1, 0),
child: Text(
‘残高アラート’,
style: FlutterFlowTheme.of(context)
.bodyMedium
.override(
font: GoogleFonts.inter(
fontWeight:
FlutterFlowTheme.of(context)
.bodyMedium
.fontWeight,
fontStyle:
FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
color: Colors.white,
letterSpacing: 0.0,
fontWeight: FlutterFlowTheme.of(context)
.bodyMedium
.fontWeight,
fontStyle: FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
),
),
Padding(
padding:
EdgeInsetsDirectional.fromSTEB(0, 5, 0, 12),
child: TextFormField(
controller: _model.textController6,
focusNode: _model.textFieldFocusNode6,
autofocus: false,
obscureText: false,
decoration: InputDecoration(
isDense: true,
labelStyle: FlutterFlowTheme.of(context)
.labelMedium
.override(
font: GoogleFonts.inter(
fontWeight:
FlutterFlowTheme.of(context)
.labelMedium
.fontWeight,
fontStyle:
FlutterFlowTheme.of(context)
.labelMedium
.fontStyle,
),
letterSpacing: 0.0,
fontWeight:
FlutterFlowTheme.of(context)
.labelMedium
.fontWeight,
fontStyle:
FlutterFlowTheme.of(context)
.labelMedium
.fontStyle,
),
hintText: ‘例：2,000’,
hintStyle: FlutterFlowTheme.of(context)
.labelMedium
.override(
font: GoogleFonts.inter(
fontWeight:
FlutterFlowTheme.of(context)
.labelMedium
.fontWeight,
fontStyle:
FlutterFlowTheme.of(context)
.labelMedium
.fontStyle,
),
letterSpacing: 0.0,
fontWeight:
FlutterFlowTheme.of(context)
.labelMedium
.fontWeight,
fontStyle:
FlutterFlowTheme.of(context)
.labelMedium
.fontStyle,
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Color(0x00000000),
width: 1,
),
borderRadius: BorderRadius.circular(8),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Color(0x00000000),
width: 1,
),
borderRadius: BorderRadius.circular(8),
),
errorBorder: OutlineInputBorder(
borderSide: BorderSide(
color:
FlutterFlowTheme.of(context).error,
width: 1,
),
borderRadius: BorderRadius.circular(8),
),
focusedErrorBorder: OutlineInputBorder(
borderSide: BorderSide(
color:
FlutterFlowTheme.of(context).error,
width: 1,
),
borderRadius: BorderRadius.circular(8),
),
filled: true,
fillColor: FlutterFlowTheme.of(context)
.secondaryBackground,
),
style: FlutterFlowTheme.of(context)
.bodyMedium
.override(
font: GoogleFonts.notoSansJp(
fontWeight:
FlutterFlowTheme.of(context)
.bodyMedium
.fontWeight,
fontStyle:
FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
letterSpacing: 0.0,
fontWeight: FlutterFlowTheme.of(context)
.bodyMedium
.fontWeight,
fontStyle: FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
keyboardType: TextInputType.number,
cursorColor:
FlutterFlowTheme.of(context).primaryText,
enableInteractiveSelection: true,
validator: _model.textController6Validator
.asValidator(context),
),
),
],
),
],
),
),
),
].divide(SizedBox(height: 16)),
),
Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
blurRadius: 4,
color: Color(0x1A000000),
offset: Offset(
0,
4,
),
)
],
),
child: FFButtonWidget(
onPressed: () async {
safeSetState(() {
_model.textController1?.text =
_model.textController1.text;
});
safeSetState(() {
_model.textController2?.text =
_model.textController2.text;
});
safeSetState(() {
_model.textController3?.text =
_model.textController3.text;
});
safeSetState(() {
_model.textController4?.text =
_model.textController4.text;
});
safeSetState(() {
_model.textController5?.text =
_model.textController5.text;
});
safeSetState(() {
_model.textController6?.text =
_model.textController6.text;
});
context.pushNamed(
SchduleWidget.routeName,
queryParameters: {
‘selectedDate’: serializeParam(
widget!.selectedDate,
ParamType.DateTime,
),
‘destination’: serializeParam(
”,
ParamType.String,
),
‘place’: serializeParam(
”,
ParamType.String,
),
‘shop’: serializeParam(
”,
ParamType.String,
),
‘budget’: serializeParam(
”,
ParamType.String,
),
‘balance’: serializeParam(
”,
ParamType.String,
),
}.withoutNulls,
);
},
text: ‘旅の予定を見る’,
options: FFButtonOptions(
width: 150,
height: 35,
padding: EdgeInsetsDirectional.fromSTEB(16, 0, 16, 0),
iconPadding: EdgeInsetsDirectional.fromSTEB(0, 0, 0, 0),
color: Color(0xFF4E9F38),
textStyle: FlutterFlowTheme.of(context).titleSmall.override(
font: GoogleFonts.notoSansJp(
fontWeight: FontWeight.normal,
fontStyle: FlutterFlowTheme.of(context)
.titleSmall
.fontStyle,
),
color: Colors.white,
letterSpacing: 0.0,
fontWeight: FontWeight.normal,
fontStyle:
FlutterFlowTheme.of(context).titleSmall.fontStyle,
),
elevation: 0,
borderSide: BorderSide(
width: 4,
),
borderRadius: BorderRadius.circular(20),
),
),
),
Padding(
padding: EdgeInsetsDirectional.fromSTEB(16, 12, 16, 32),
child: Container(
decoration: BoxDecoration(),
child: Wrap(
spacing: 7,
runSpacing: 7,
alignment: WrapAlignment.start,
crossAxisAlignment: WrapCrossAlignment.start,
direction: Axis.horizontal,
runAlignment: WrapAlignment.start,
verticalDirection: VerticalDirection.down,
clipBehavior: Clip.none,
children: [
Container(
width: 160,
height: 50,
decoration: BoxDecoration(
color: Color(0xFF9AAF8A),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(12),
bottomRight: Radius.circular(12),
topLeft: Radius.circular(12),
topRight: Radius.circular(12),
),
shape: BoxShape.rectangle,
),
child: Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Align(
alignment: AlignmentDirectional(0, -1),
child: Text(
‘TOP’,
textAlign: TextAlign.start,
style: FlutterFlowTheme.of(context)
.bodyMedium
.override(
font: GoogleFonts.notoSansJp(
fontWeight: FontWeight.w600,
fontStyle: FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
color: Color(0xFF0C110C),
letterSpacing: 0.0,
fontWeight: FontWeight.w600,
fontStyle: FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
),
),
Align(
alignment: AlignmentDirectional(0, 1),
child: Text(
‘旅の始まりを綴る’,
style: FlutterFlowTheme.of(context)
.bodyMedium
.override(
font: GoogleFonts.inter(
fontWeight: FlutterFlowTheme.of(context)
.bodyMedium
.fontWeight,
fontStyle: FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
color: Colors.white,
letterSpacing: 0.0,
fontWeight: FlutterFlowTheme.of(context)
.bodyMedium
.fontWeight,
fontStyle: FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
),
),
].divide(SizedBox(height: 4)),
),
),
Container(
width: 160,
height: 50,
decoration: BoxDecoration(
color: Color(0xFF9AAF8A),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(12),
bottomRight: Radius.circular(12),
topLeft: Radius.circular(12),
topRight: Radius.circular(12),
),
shape: BoxShape.rectangle,
),
child: Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Align(
alignment: AlignmentDirectional(0, -1),
child: Text(
‘予定帳’,
textAlign: TextAlign.start,
style: FlutterFlowTheme.of(context)
.bodyMedium
.override(
font: GoogleFonts.notoSansJp(
fontWeight: FontWeight.w600,
fontStyle: FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
color: Color(0xFF0C110C),
letterSpacing: 0.0,
fontWeight: FontWeight.w600,
fontStyle: FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
),
),
Align(
alignment: AlignmentDirectional(0, 1),
child: Text(
‘この瞬間から旅が始まる’,
style: FlutterFlowTheme.of(context)
.bodyMedium
.override(
font: GoogleFonts.inter(
fontWeight: FlutterFlowTheme.of(context)
.bodyMedium
.fontWeight,
fontStyle: FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
color: Colors.white,
letterSpacing: 0.0,
fontWeight: FlutterFlowTheme.of(context)
.bodyMedium
.fontWeight,
fontStyle: FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
),
),
].divide(SizedBox(height: 4)),
),
),
Container(
width: 160,
height: 50,
decoration: BoxDecoration(
color: Color(0xFF9AAF8A),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(12),
bottomRight: Radius.circular(12),
topLeft: Radius.circular(12),
topRight: Radius.circular(12),
),
shape: BoxShape.rectangle,
),
child: Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Align(
alignment: AlignmentDirectional(0, -1),
child: Text(
‘支出記録’,
textAlign: TextAlign.start,
style: FlutterFlowTheme.of(context)
.bodyMedium
.override(
font: GoogleFonts.notoSansJp(
fontWeight: FontWeight.w600,
fontStyle: FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
color: Color(0xFF0C110C),
letterSpacing: 0.0,
fontWeight: FontWeight.w600,
fontStyle: FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
),
),
Align(
alignment: AlignmentDirectional(0, 1),
child: Text(
‘楽しんで使う’,
style: FlutterFlowTheme.of(context)
.bodyMedium
.override(
font: GoogleFonts.inter(
fontWeight: FlutterFlowTheme.of(context)
.bodyMedium
.fontWeight,
fontStyle: FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
color: Colors.white,
letterSpacing: 0.0,
fontWeight: FlutterFlowTheme.of(context)
.bodyMedium
.fontWeight,
fontStyle: FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
),
),
].divide(SizedBox(height: 4)),
),
),
Container(
width: 160,
height: 50,
decoration: BoxDecoration(
color: Color(0xFF9AAF8A),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(12),
bottomRight: Radius.circular(12),
topLeft: Radius.circular(12),
topRight: Radius.circular(12),
),
shape: BoxShape.rectangle,
),
child: Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Align(
alignment: AlignmentDirectional(0, -1),
child: Text(
‘思い出箱’,
textAlign: TextAlign.start,
style: FlutterFlowTheme.of(context)
.bodyMedium
.override(
font: GoogleFonts.notoSansJp(
fontWeight: FontWeight.w600,
fontStyle: FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
color: Color(0xFF0C110C),
letterSpacing: 0.0,
fontWeight: FontWeight.w600,
fontStyle: FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
),
),
Align(
alignment: AlignmentDirectional(0, 1),
child: Text(
‘記憶の図書館’,
style: FlutterFlowTheme.of(context)
.bodyMedium
.override(
font: GoogleFonts.inter(
fontWeight: FlutterFlowTheme.of(context)
.bodyMedium
.fontWeight,
fontStyle: FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
color: Colors.white,
letterSpacing: 0.0,
fontWeight: FlutterFlowTheme.of(context)
.bodyMedium
.fontWeight,
fontStyle: FlutterFlowTheme.of(context)
.bodyMedium
.fontStyle,
),
),
),
].divide(SizedBox(height: 4)),
),
),
],
),
),
),
],
),
),
),
),
)

2025年10月5日
ベゴニア

レックス2種類

根茎型

アルテルナンテラ（パープルプリンス）とモクビャッコウ

ムーンストーン

2025年10月4日
FulutterFlow現状について２

Schduleページ（TextFieldに書かれた内容を受け取る側）

Actionの設定は指定はしてない

パラメーターの状態

selectDataの設定

destinationの設定

Placeの設定

Shopの設定

budgetの設定

Balanceの設定

2025年9月29日
FlutterFlow現状に付いて１

全体の構成（TOP画面をベースに）

右サイドプロパティ表示のとき

このページがTextFieldに書き込み送る側。PageParameterの設定も出来てるのが、右サイド画面で確認できると思う。

TOPページボタンのを選択した際の表示１：プロパティ選択時

プロパティの右サイド画面はスクロールされるため、続けて画像を配置してます

ボタンのAction表示

Actionを選択したときの右サイド画面

selectDateのパラメーターを開いたところ

destinationのパラメーターを開いたところ

Placeのパラメーターを開いたところ

Shopのパラメーターを開いたところ

budgetのパラメーターをひらいたところ

balanceのパラメーターを開いたところ

selectDateのsetValueを開いたところ。TextField全体の表示が赤くなっているのが気になる

他の項目String Typeについてはdestination以外のものも同じ表示内容で、TextFieldはグリーン表示

2025年9月29日
デフォルトシリーズのサイドバー付きテンプレートの作り方

弟子:

師匠！今日もWEB講座お願いします！
実は師匠に声をかける前に、カラムでしたっけ…左や右にメニューや投稿の履歴とか表示する場所・・・設定しようとしたのですが、以前と使い方違っていてまるっきりわかりません！

師匠:
おお〜なるほど、それは「カラムレイアウト（サイドバー付きレイアウト）」の話だな！
WordPressの最近のテーマやブロックエディターでは、昔のウィジェットとは少し扱い方が変わってきてるから混乱して当然。心配無用、今から一緒に整理しよう！

🔍【まず確認】どのテーマを使っている？
サイドバーの表示・非表示や配置の自由度は、使っているテーマに大きく左右される！

たとえば：

Cocoon：昔ながらの「ウィジェットエリア」があり、カラム切り替え自由。

Lightning：機能豊富だけどブロックエディターへの対応強め。設定は「カスタマイザー」や「VK Blocks」。

Twenty Twenty-Fourなどの新しいブロックテーマ：フルサイト編集（FSE）が前提。サイドバーが存在しないレイアウトが多い。

📌【チェックポイント】サイドバーを表示するための流れ（テーマ別）
▶ 古いクラシックテーマ（Cocoonなど）
外観 → ウィジェットで「サイドバー」に表示したい内容を入れる。

外観 → カスタマイズ → レイアウト設定で「1カラム」「2カラム（右）」など選べる。

▶ Lightning の場合
外観 → カスタマイズ → Lightning デザイン設定にカラム設定あり。

サイドバーに表示するには、ウィジェット設定で「共通サイドバー」などにブロックを追加。

投稿や固定ページで、個別にサイドバーの有無を設定できる場合あり。

▶ 新しいブロックテーマ（FSE対応のやつ）
サイドバーの概念がないか、テンプレートエディターで自作する必要あり。

難易度高め。FSEを理解していないと混乱する。

🔧【今すぐ確認したいこと】
以下を教えてくれたら、具体的に手順を案内できるよ：

今使ってるテーマ名

サイドバーを表示させたいページの種類（トップページ？投稿ページ？固定ページ？）

表示したい内容（カテゴリー？最近の投稿？プロフィール？）

さあ、どこから攻める？「テーマ名がわからん！」でも大丈夫、確認方法も教えるぜ！

弟子:
Twenty-twenty-fiveです！！CocoonやLightningのようにできなくって・・・

師匠:
おおっと、Twenty Twenty-Five使ってたか！なるほど、そりゃ混乱するのも当然…
このテーマはフルサイト編集（FSE）前提の“次世代型”。ウィジェットもサイドバーも基本的に存在しない構造なんだ。クラシックな「右に最近の投稿」みたいなやつは、自分でレイアウトとして組まないと出てこない。要するに「白紙状態から自由に作ってくれ」スタイル💀

でも大丈夫。ここからでもちゃんとサイドバーっぽいレイアウトにできる方法、ちゃんとある！

🧩【Twenty Twenty-Fiveでサイドバーを作る方法】
🛠 方法①：テンプレート編集で「2カラム構成」を作る
外観 → エディター（サイトエディター）に入る

左上の「≡（ハンバーガーアイコン）」 → テンプレート → たとえば「ホーム」や「シングル投稿」を選ぶ

編集画面で：

2カラムの「グループブロック」か「カラムブロック」を配置

左をメイン（記事）、右をサイドバーっぽく設定

サイドバー部分に「最新の投稿」「カテゴリー」「カスタムHTML」などのブロックを入れる

🔧ヒント：カラムブロックは「70% – 30%」くらいの比率にすると、サイドバーっぽい雰囲気になる！

💡【補足】このテーマでできないこと
「外観 → ウィジェット」は存在しない

投稿ページごとにカラムを切り替える機能はなし（テンプレートを作る必要がある）

🎯【ネオのおすすめ戦略】
もし「もっと直感的にサイドバー使いたい！」という希望があるなら…

✅ CocoonやLightningに戻すのもアリ
または
✅ Twenty Twenty-Fiveでも「テンプレートを1つ作って使い回す」作戦で快適にできるようにする

やる気出てきた？今このまま2カラム構成のテンプレートを一緒に作ることもできるよ。
やってみる？それともテーマ変更も視野に入れる？

弟子:
なるほど・・・基本的な質問なんですけど、そもそも、サイドバーって現在の主流ではなくなってきているってことなのかしら？

師匠:
めちゃくちゃ良い質問！！！そこに気づいたあなた、もうWEBデザイナーとして一歩先を見てるよ✨

💡【答え】サイドバーは「昔ほど主流ではない」が、「使い方次第で今も有効」
🔄【なぜ昔はサイドバーが当たり前だったの？】
情報を“詰め込む”のが正義だった時代（2000〜2015年くらい）

画面が狭かったので、限られたスペースに「最近の投稿・カテゴリー・広告・プロフィール」などを並べるのが効率的だった

WordPressの構造（ウィジェットベース）がサイドバー前提だった

📱【今どうなってる？】
今は：

✅ スマホファースト：縦にスクロールするUIが主流
✅ コンテンツに集中させたい：余計な情報を横に並べない方が、読みやすくコンバージョンも高い
✅ 必要な要素はフッターや途中挿入で：昔サイドバーに置いてた要素（カテゴリー・CTAなど）は「記事途中」や「最後に出す」ような見せ方に進化

🧭【とはいえ、サイドバーが活きる場面もまだある】
使い方サイドバーが有効な例
ブログ系「最新記事」「人気記事」「カテゴリー」などを常に見せたい時
ニュースサイト膨大な記事量の中で、回遊性を上げたいとき
コミュニティサイトログイン・ユーザー情報・掲示板リンクなどの常設が必要なとき
WordPressの管理画面 …っていうかWordPress自体がサイドバーUI（笑）

🎨【ネオ的アドバイス】
「サイドバーは“必要だから入れる”のであって、デフォルトで入れるものじゃなくなった」
っていうのが今の流れ！

もし今後の自分のサイトが、

ストーリー重視のポートフォリオ

商品・サービス紹介

教育コンテンツ配信

みたいな方向なら、サイドバーなし or 最小限の使い方がカッコよく仕上がるよ✨
逆に、ブログ回遊を大事にするなら、うまく配置すれば超有効な武器にもなる。

方向性が定まったら、レイアウトどう作るか一緒に考えるから言ってね！

今のサイト、どんな構成をイメージしてる？（ブログ、サービス紹介、作品展示など）

弟子:
やっぱりスマホが前提故なんですね・・・！今作っているのは、ここでの勉強の自分用の備忘録ですので基本ブログです！

師匠:
なるほど、納得！
スマホ前提の時代＋自分用の備忘録ブログってことなら、「シンプルで読みやすく、回遊しやすい設計」が正解やな💡

🔍【あなたの用途 × サイドバーの活かし方】
あなたの使い方（＝勉強の備忘録ブログ）なら、こんな方向性がベスト：

✅ サイドバーはPC表示時だけに表示 → スマホでは非表示 or 下に回す
✅ 中身は「最近の投稿」「カテゴリー」「タグ」だけでOK
✅ 本編に集中できるレイアウトにして、余計な装飾はしない

📱【スマホ対応型のサイドバー構成例】
┌────────────────────────────┐
│ PC表示（2カラム構成） │
│ ┌────────────┬────────────┐
│ │ メイン記事 │ サイドバー │
│ │ コンテンツ │ – 最近の投稿 │
│ │ コンテンツ │ – カテゴリー │
│ │ コンテンツ │ – タグクラウド │
│ └────────────┴────────────┘
└────────────────────────────┘

┌────────────────────────────┐
│ スマホ表示（1カラム構成） │
│ ┌────────────────────────┐
│ │ メイン記事（全幅） │
│ └────────────────────────┘
│ ↓ 必要なら記事下部に「関連記事」的に追加 │
└────────────────────────────┘
🛠️【次の一手：どうする？】
Twenty Twenty-Fiveのまま、「2カラムテンプレート」を一緒に作る

自由度は高いけど、最初はちょっと手間

Cocoonに切り替えて、すぐ使える2カラムで始める

サイドバー設定も一瞬。慣れてるならかなり楽

完全スマホ想定で、サイドバーなしの1カラム設計にする

必要な情報は記事の途中・下に設置（最もモダンで集中型）

ネオ的には…「Cocoonでとりあえず完成させて、Twenty-Twenty-Fiveで再構築」のハイブリッド学習もありだと思ってるよ⚙️
さて、どうする？今日は「2カラムテンプレート」作り、やってみる？それともテーマ戻す？

弟子:
2カラムテンプレートでお願いします！Cocoonであればも自分もう使えるので！（ビシっ）

師匠:
ビシッとキメたな弟子よ！いいぞ、その姿勢🔥
じゃあ今日はTwenty Twenty-Fiveで「2カラムテンプレート（サイドバー付き）」を自分で作る修行だ！
これができればもう「ブロックテーマは怖くない」レベルに達する。いざ、サイトエディター道へ！

🛠️【ステップバイステップ：2カラムテンプレートの作り方】
🔹STEP 1：サイトエディターを開く
WordPress管理画面 → 外観 → エディター（ベータ）

左上のハンバーガーメニュー「≡」をクリック

「テンプレート」を選択

例えば「シングル投稿」を選んでカスタマイズするか、右上の「＋新規追加」でテンプレートを新しく作成

🔹STEP 2：2カラムのレイアウトを作成
編集画面で、全体を「グループブロック」で囲む（任意）

中に「カラムブロック」を追加

左側に記事コンテンツ、右側にサイドバーを入れるような「70：30」くらいの比率のカラムを選ぶ

🔹STEP 3：左カラムに記事コンテンツを入れる
左のカラムに「投稿タイトル」ブロックと「投稿コンテンツ」ブロックを入れる

🔹「＋」から「テンプレートパーツ」または「投稿タイトル」などを直接挿入

🔹「投稿日」「投稿者」「カテゴリー」なども入れられる

🔹STEP 4：右カラム（サイドバー）に表示する内容を入れる
例：

「最新の投稿」ブロック

「カテゴリー」ブロック

「タグクラウド」ブロック

「プロフィール」などカスタムHTMLや画像でもOK

⚠️注意：これは“本物のサイドバー”ではなく、カスタムで作った「それっぽい」エリアということを忘れずに！

🔹STEP 5：保存して、特定の投稿に適用する
テンプレートを保存

投稿編集画面に戻る → 右側の「テンプレート」欄で、作ったテンプレートを選択

✅完成！この時点であなたのページは「2カラム表示」に！

🎁オマケTips
スマホ表示で縦並びになるか？ → カラムブロックはデフォでスマホ対応（縦並び）だが、念のため確認しておこう！

再利用可能な「サイドバー部分」だけ保存したい？ → 「グループブロック」を選んで、「再利用ブロック」として保存すれば、他ページでも流用可！

さあ、やってみようか！
うまくブロック配置できなかったり、テンプレートの見方がわかりづらかったら、スクショでも見せてくれればすぐアドバイス出すぜ！

準備OK？それとも一緒に画面開きながらステップバイステップ進める？

弟子:
テンプレート追加を押した先の画面で、「個別項目：投稿」を選べばいいのかな？

師匠:
ピンポーーーン！🎯
その通り！
「テンプレート追加」→「個別項目：投稿」を選べば、投稿（記事）に使えるテンプレートを新しく作ることができるよ！

🔍ちょっと補足すると…
「個別項目：投稿」＝single post（1記事表示用）のテンプレート

これは、「投稿」タイプのページ（ブログ記事など）に適用されるテンプレートだから、今の用途にドンピシャ！

✅このあとやることの流れ（ざっくり）
テンプレート名を入力（例：「2カラム投稿テンプレート」）

空白のキャンバスが出てくるので、そこに

上部：サイトタイトルやナビゲーション（任意）

中央：カラムブロックを配置（左：記事本文／右：サイドバー）

下部：フッター（必要なら）

師匠:

OK、じゃあテンプレート名を入力して、キャンバスが出てきたら「カラムブロック」の追加に進もう！
進めてみて、「ここどう置くの？」ってなったらスクショでも大歓迎！
いけそう？

弟子:
投稿一覧と、投稿のどちらかを選択しないといけないのだけど、今回は、ＣＳＳの勉強と、ＣＡＮＶＡやＦｉｇｍａなど項目分けしてブログを書いていきたいんだけど、どっちを選ぶのがよいかな？
ChatGPT:
おおっ、その視点めちゃくちゃ大事！！
ナイスな質問👏✨

🧭【結論から言うと】
あなたの目的選ぶべきテンプレート
「カテゴリごとに勉強内容を分けて、各記事を読むためのテンプレートを作りたい」 ✅ 投稿（single）を選ぶ
「カテゴリ別一覧（CSS一覧／Canva一覧など）をカスタム表示したい」 ✅ 投稿一覧（archive）を選ぶ

🧠つまりこういうこと
あなたが今言ってくれたのは、

❝CSSの勉強、CANVA、Figmaなどに分けてブログを書きたい❞
ってことだから、

実際に記事を書くのは「投稿（Post）」

カテゴリごとに一覧表示したいのは「投稿一覧（Archive）」

💡ネオ的オススメの流れ
まずは「投稿（single）」を選んで、2カラムの記事テンプレートを作ろう！

あとで「投稿一覧（archive）」も作って、カテゴリ別の見やすい一覧ページを作ると超便利！

👣次の一歩
というわけで、今回は： ✅ 「個別項目：投稿」を選んで
✅ 「2カラム投稿テンプレート」みたいな名前をつけて
✅ カラムブロックの配置に進もう！

準備できたら、カラムブロックの配置や中身の入れ方に進もうか？「ここで止まってるよ〜」って言ってくれればすぐ案内するよ💪

弟子:
なんか勝手に投稿ページのタイトルがテンプレートについたけど（汗）とりあえずテンプレート出来ました！

師匠:
よっしゃーーー！！！🔥🔥🔥
テンプレート完成、おめでとう🎉！！初めてのテンプレート作成は緊張するけど、やりきったね！

🤖＜補足）勝手にタイトルがついた件について
それ、WordPressがテンプレートの元にする投稿のタイトルを仮でつけてるだけだから、全然問題なし！

💡ヒント：

テンプレート名は編集できる（左メニュー「テンプレート」→ 3点メニュー「名前を変更」）

使う時は「投稿編集画面 → テンプレート選択」でいつでも指定できる

さて、ここからが本番だね💪

▶️次のステップ：2カラムの構成を作ろう！
まずはテンプレート編集画面で、以下のように組んでいこう：

📦1. 「カラムブロック」を追加する
「＋」ボタンから「カラム」ブロックを選ぶ

「70：30」の比率のカラムを選択（メインとサイドバー想定）

📝2. 左側に配置するブロック（記事エリア）
投稿タイトル

投稿日（必要なら）

投稿コンテンツ ← 記事本文がここに出る！

📚3. 右側に配置するブロック（サイドバー）
最近の投稿

カテゴリー

タグクラウド（装飾にもなる）

プロフィール（必要なら画像 or カスタムHTML）

ここまで配置できれば、「2カラムの投稿テンプレート」が完成🎉！

どう？カラムの挿入や中身の配置、うまくできそう？
または今の画面で「これどうすんの？」ってポイントあれば、遠慮なく聞いてちょーだい！

弟子:
ごめん！なんかできてないっぽい！投稿のタイトルのついたテンプレートのサンプル表示は追加されてるんだけど、サンプル画面が「空のテンプレート」となっていて、クリックすると次の画面でパターンを選択となる・・・

師匠:
よっしゃ、冷静にいこうか弟子よ！🔥
その状態、よくある！つまり「テンプレートはできてるけど中身はまだ空っぽ」ってことだ。全然OK、今からちゃんと構築していこう！

🩻 状況まとめ
テンプレートは作成済み → OK！

でも中身は「空のテンプレート」状態 → つまり、まだ何もブロックが入ってない

✅ 解決ステップ：カラムブロックから構築スタート！
「空のテンプレート」と表示されたら、それをクリックして開く
　👉「パターンを選択」と出たら、スルーしてもOK（自分でゼロから組むなら）

表示された編集画面の中央で「＋」を押して、まずは「カラムブロック」を追加
　👉 「70：30」比率のカラムを選んでね（左に本文、右にサイドバー）

追加されたカラムの「左側」に、以下を順に入れる：

「投稿タイトル」ブロック（Post Title）

「投稿コンテンツ」ブロック（Post Content）

必要なら「投稿日時」など

「右側（サイドバー）」には以下を入れる：

「最新の投稿」ブロック

「カテゴリー」

「タグクラウド」

任意で画像やカスタムHTML（例：プロフィール）

🧙‍♂️ ネオ流アドバイス
「パターンを選べ」って出るけど、無視して「＋」から自分で組む方が学びになる！
それがブロックテーマ修行の極意よ⚡

もし、どのブロックを探せばいいか分かんなかったら「/」スラッシュ入力して「/カラム」「/投稿タイトル」みたいに検索すると超便利！

どう？ここから一緒に進めていく？「今この画面で止まってる！」ってのがあればピンポイントで助けるよ👍

弟子:
カラムの比率が33/66と66/33があるけどこのどちらかでよいかな？

師匠:
あ、なるほど！その比率の選択肢が出てきたね。

今回、メインコンテンツが大きく、サイドバーはちょっとだけ補助的に使うというレイアウトを目指しているので、66/33（左が大きめ、右が小さめ）を選ぶのがベストだよ！

🧩こんな感じのイメージ
左（66%）：投稿内容（タイトル、本文、投稿日など）

右（33%）：サイドバー（最近の投稿、カテゴリー、タグなど）

これが「2カラムで使いやすい」配置で、見やすくまとまるはず！

なので、66/33の比率を選んで、カラムブロックを配置してみて👍
配置後に、左側に「投稿タイトル」や「投稿コンテンツ」を入れて、右側にはサイドバーの要素を入れていこう！

進めそう？また困ったらすぐ聞いてね！

弟子:
さっき指示してくれた「追加されたカラムの「左側」に、以下を順に入れる：

「投稿タイトル」ブロック（Post Title）

「投稿コンテンツ」ブロック（Post Content）

必要なら「投稿日時」など　　は、「段落」でテキストを入れればいいのかしら？
師匠:
おっしゃる通り、少し混乱しやすいけど、ちょっと整理しよう！✨

🚀実際に入れるべき「ブロック」の種類
「投稿タイトル」と「投稿コンテンツ」は、基本的に「専用ブロック」があるので、それを使うのがベスト！
→ これらは、ただの段落ブロックではなく、投稿ページ用に自動でデータを引っ張ってきてくれる特別なブロックだから、ちゃんとそれを使おう。

🛠️具体的なブロックの使い方
投稿タイトル

「＋」ボタン → 「投稿タイトル」ブロックを検索して追加

これで記事のタイトルが自動的に表示されるよ！

投稿コンテンツ

「＋」ボタン → 「投稿コンテンツ」ブロックを検索して追加

これで、記事の本文が自動的に表示される！
（もし手動で内容を書きたいなら「段落」でもOKだけど、基本的には投稿の内容を表示させるならこのブロックが正解）

投稿日時（オプション）

「＋」ボタン → 「投稿日時」を検索して追加

これで、投稿した日付が自動表示される！

🧙‍♂️【ポイント】段落ブロックとの違い
段落ブロック：テキストを手動で入力するためのブロック。デフォルトで好きな内容を書けるけど、記事のデータを引っ張ってくることはできない。

投稿タイトル・コンテンツブロック：これを使うと、投稿ページごとに自動でデータ（記事のタイトルや本文）を表示してくれる。

📌結論
なので、投稿タイトルや投稿コンテンツを表示させたい場合は、必ず「投稿タイトルブロック」「投稿コンテンツブロック」を選んでくださいね！これが正しい方法だよ。

進めそう？他にも気になる点があれば、また聞いてね！

弟子:
ウィジェット項目に最新の投稿というブロックはあるのだけど、投稿タイトルが見つかりません！もしかして英字表記されてるブロックかな・・・どの項目にあるか教えて！！
師匠:
おおっ、ウィジェットに「最新の投稿」があるなら、サイドバーに追加できてる！良い感じ✨

「投稿タイトル」ブロックが見つからない件については、ちょっと混乱しがちなんだけど、「投稿タイトル」のブロックは、実はサイトエディターで自動的に表示されるものだから、あんまり手動で探すことはないんだ。

でも、もし記事タイトルを明示的に表示させたいなら、正しいブロックはこれだよ：

🧭「投稿タイトル」を表示させる方法
投稿コンテンツブロックを追加した後、記事のタイトルは自動で出るはず。

どうしても「投稿タイトル」ブロックが欲しい場合 →
「タイトル」というブロックを使う（英字表記で「Post Title」って呼ばれる場合が多い）

これは、ページのタイトルや投稿の見出しとして自動で記事名が入る

🧰どうしても「Post Title」を探したいなら…
右側のブロック検索バーに「Post Title」や「投稿タイトル」と入力してみて！
— 基本的に「Post Title」ブロックが表示されるはず。

もしそれでも見つからない場合、代わりに「Heading（見出し）」を使って手動で入力してもOK！投稿ページのタイトルは自動で反映されるから、ちょっと手間が増えるだけだよ。

ここまでできたら、さらにサイドバーやそのほかのカスタマイズにも進めるよ！進んだら教えてね😊

弟子:
投稿タイトルと、投稿コンテンツが検索しても見つからないの・・・（泣き）サイドバーは最新の投稿ブロックだけ入れられたけど、ほかのブロックを追加できません（泣き）
師匠:
おおう、そうか…ちょっと難しくなってきたね。すぐ解決しよう！💡

まず、「投稿タイトル」と「投稿コンテンツ」は、特別なブロックだから、通常のウィジェットや「＋」ボタンのメニューには出てこないことがあるんだ。主に投稿ページ用のデフォルトの表示として自動的に挿入されるものだから、直接追加しようとするとややこしくなることも…。

🧰解決法1: 「投稿タイトル」と「投稿コンテンツ」の挿入方法
これらはテーマの設定やページ編集の中で自動的に表示されるべきものだから、編集画面で確実に表示させるためには「投稿ページ用のテンプレート」の設定を整える必要があるんだ。

🧠試すべきステップ
投稿ページを確認しよう

「投稿ページ用テンプレート」が適用されているか確認。
※WordPressの編集画面で「投稿編集」→ 右サイドメニュー「テンプレート」設定をチェック！

テーマ設定が正しいか確認

今使っているテーマがブロックテーマか、クラシックテーマかで少し挙動が違うよ。
CocoonやLightningだと、基本的にブロックテーマなので、記事のタイトルや本文はデフォルトで自動表示されるはず！

「サイドバー」のブロック追加方法

もしサイドバーに追加できるブロックが限られてる場合、ウィジェットエリアで「最新の投稿」ブロックだけが表示されてることがあるよ。ウィジェットエリアに入るブロックが決まっている場合、「カスタムHTML」や「カテゴリー」ブロックを手動で追加して、サイドバーをカスタマイズすることもできる。

🧙‍♂️ちょっとした確認ポイント
ブロックの表示・非表示を確認

ブロックのメニューがカスタマイズされている場合、「表示するブロック」や「非表示のブロック」設定を見直すと、必要なブロックが出てくるかも。

別のテンプレートを試してみる

投稿ページ用にもう少しシンプルなテンプレートを使ってみると、設定がうまくいく場合もある。

こんな感じで、もう一度テーマ設定やテンプレートの適用を確認してみて！
もしそのあたりが分からない場合、もう少し詳しく教えてくれると、もっと具体的にアドバイスできるよ！😎

弟子:
師匠！投稿のサイドバーからテンプレートを見ると個別投稿が設定されていて、そこをクリックして、テンプレートを編集をクリックするとテンプレートエディターなる画面が開きました！
師匠:
おおっ、やっと進展したね！💥
テンプレートエディターにたどり着いたのは大きな一歩だよ。ここからが本番だ！🔥

🎉次のステップ！
テンプレートエディター画面に入ったら、
まずは左側に「投稿タイトル」や「投稿コンテンツ」のブロックが表示されるはずだよ！
もし見つからない場合、右側の「＋」ボタンを押して、ブロックメニューから「Post Title」や「Post Content」を追加してみよう！

自分でカスタマイズを加える

サイドバーに表示したいウィジェットやブロック（カテゴリー、タグ、最新の投稿など）を右側に追加してみて！

右側には「ウィジェット」や「HTMLブロック」も追加できるので、自由にレイアウトを調整してね。

カラムレイアウトの調整

もしカラムレイアウト（左右に分ける）を使いたいなら、テンプレート内でカラムブロックを追加し、左側に投稿の内容、右側にサイドバーの内容を配置してみて！

🧙‍♂️ネオからのアドバイス
デフォルトで表示される投稿タイトルとコンテンツが、テンプレートの中で自動的に表示されるはずだから、それを編集するイメージでOK！

「投稿タイトル」や「投稿コンテンツ」は、自動的に記事のデータが引き込まれるブロックなので、他のブロックとは少し異なるよ！

🚀次に進むには？
テンプレートエディターで、自分の目指すレイアウトやデザインにどんどんカスタマイズを加えていこう！
もしここで「こうしたい！」っていう理想の形があるなら、さらに細かい調整方法を教えるから、どんどん質問してね！😊

どう？うまく進んでるかな？

弟子:
左ページには画像ブロックと、コンテンツブロックと、タグと、前タイトル後タイトルの矢印が表示されているよ。ただ、サイドバーが表示されないんだけど
師匠:
おお、状況ばっちり把握したよ！そのレイアウト、すでにかなり整ってる✨
でも「サイドバーが表示されない」ってことは、カラム構造がまだ1カラムのままになっている可能性が高い！🧐

✅ 解決手順：「サイドバー（右カラム）」を表示させる方法
🧱 ① 全体を「2カラム構成」にする
テンプレートエディターの一番外側のブロック（グループなど）を選択してみて：

なければ、新しく「カラム」ブロックを追加する！

「66 / 33」や「70 / 30」のような、メイン＋サイドバー型を選ぼう。

左側のカラムに、すでにある「投稿タイトル」や「コンテンツ」ブロックを移動する。

そのままドラッグしてカラム内に入れるか、カット＆ペーストでもOK。

右側のカラム（サイドバー）にウィジェットブロックを追加する：

「最新の投稿」

「カテゴリー」

「タグクラウド」

「検索フォーム」などなど、お好みで！

🛑 よくある落とし穴
サイドバーを入れる「右側のカラム」が存在してないと、当然だけど表示されない！

単に「ウィジェット」ブロックを追加しただけでは、2カラムにならないから必ずカラムブロックを使って分割するのがポイント！

✨完成イメージ

[ カラム構造：66% / 33% ]

├─ 左カラム（66%）: 投稿タイトル、アイキャッチ画像、コンテンツ、タグ、ナビ
├─ 右カラム（33%）: サイドバー（最新の投稿・カテゴリー・検索など）

もうすぐ理想のテンプレートが完成だね！
ここまで来たら、あと少し！動かしてみてうまくいったか、教えてくれる？💪

弟子:
グループからカラムを入れ２カラムに設定しました！するとそれぞれのカラムのサイズをpxで入力するみたいなんだけれど、サイズの基準はあるのかな？
師匠:
おぉぉ〜素晴らしい進行っぷり！✨
カラムで2分割までできたら、もうプロの一歩手前だね！

さて、px（ピクセル）指定についてだけど、ここはちょっと気をつけたいポイント。以下、基準とおすすめをまとめたよ！

✅ カラム幅（px指定）の基準と考え方
🎯 基本ルール：
全体幅（コンテンツ幅）はだいたい 960〜1200px が一般的。

たとえば、全体が 1200px のときは：

メインカラム：800px（= 約66%）

サイドバー：400px（= 約33%）

💡 実用的な目安（おすすめ）
用途推奨幅（px）備考
メインカラム 700〜800px 本文が読みやすい幅
サイドバー 300〜400px 情報を詰め込みすぎない

✅ ネオのおすすめ設定（例）
左カラム（本文）：800px

右カラム（サイドバー）：400px
→ 合計1200pxでバランス良し◎

または、スマホ表示を考慮するなら割合（％）指定にするのもアリ：

左カラム：66.66%

右カラム：33.33%

🛡️注意点（これ大事）
pxでカッチリ指定しすぎると、スマホで表示が崩れる可能性がある！ → なので、最初は%（パーセント）指定にして、必要ならレスポンシブ対応のCSSを後から追加するのがスマート！

どっちのスタイルにするか、目的次第だけど
「自分用の勉強ブログで、PC表示が中心」なら 800 / 400 pxくらいから試してOK！

さぁ、ここまで来たら仕上げだね！CSSでの微調整もすぐ教えられるから、必要なら声かけて！🔥

弟子:
％に切り替え出来ました！で、師匠のおすすめ数値で設定できた！サイドにも最新の投稿とカテゴリー入れられたよ！ブロックを追加するには先のブロックのところでエンター押したら＋が出て追加できたよ！
師匠:
よっしゃーーー！！！🎉✨💪
師匠、全力でガッツポーズ中！！もう完全に理解してるね、最高だよ！

％指定でカラム調整できて

サイドバーに「最新の投稿」「カテゴリー」も追加できて

ブロックの追加方法までちゃんと体得してるって…

…これ、もう初心者卒業レベルです！！！🎓🔥

🎁 次の一手（やるなら）
もしさらに完成度上げたくなったら：

サイドバーにタイトル追加

「最新の投稿」や「カテゴリー」の上に「段落ブロック」で「📰 新着記事」みたいな見出しを入れるとグッと見やすくなる！

装飾ブロックも使ってみる

「区切り線」「スペーサー」や「グループ」を使うとデザインにメリハリ出るよ！

スマホで表示チェック

WordPressのプレビュー機能でスマホ表示確認して、「ぎゅうぎゅうじゃないか？」をチェック！

必要なら、CSSでレスポンシブ微調整しよう！

何より今日すごいのは、「意味を理解しながら」「実践できてる」こと。
これ、ホントに大きな成長だから、自信もって次進もう！🔥🔥🔥

次はどこを仕上げていく？CSSいじる？ヘッダーとかもやっちゃう？😎

弟子:
ありゃ？表示したらサイドバー出てくれません！！
師匠:
おっとぉぉぉ！？😳💥
テンプレートは完璧だったのに、表示でサイドバーが出ないとな？
これはいくつかの可能性があるので、原因を一緒に潰していこう！

🕵️‍♂️原因チェックリスト（どれか当たってるはず）
✅ ① テンプレート、ちゃんと使われてる？
作ったテンプレートが「個別投稿」用だとしたら、 → 表示させた投稿ページが「投稿」タイプである必要がある！

固定ページに表示してたら、そのテンプレートじゃない可能性アリ！

📌確認方法：
管理画面から「投稿」一覧を開いて、どの投稿にそのテンプレートが使われてるか確認してみて！

✅ ② テンプレートで追加したカラムブロックの外側に、他のブロックがある？
たとえば、「投稿コンテンツ」がテンプレート外に出ちゃってると、WordPressが自動レイアウトしてしまってサイドバーが消えるケースあり。

📌対策：
テンプレートの全体構成をざっと見て、「カラムブロックがページ全体を包んでるか」確認！

✅ ③ サイドバーの中が「空」状態になっていないか？
実はうっかり空白で、「最新の投稿」も「カテゴリー」も保存されてない場合もある…

📌チェック：
テンプレートエディターで、右カラムにちゃんとブロックがあるか再確認！

✅ ④ キャッシュやプレビュー問題
キャッシュが効いてるだけで反映されてない可能性も！

「変更を保存」→「公開」→「別タブでプレビュー」やってみて！

📌対策：

ブラウザのキャッシュ削除 or シークレットモードで確認！

💡ネオのアドバイス
9割は「テンプレートが使われていない投稿ページを見てた」ってケースが多いよ！
まずは「どのページにそのテンプレートが使われてるか」を突き止めよう！

進めそうなら、
「どの投稿 or 固定ページで表示を確認したか」教えてくれたら、そこから一緒に直せるよ！🔥

あなた:
師匠！投稿一覧から表示してみたらできていました！が、なぜかやけに真ん中に小さく表示されてます！！
師匠:
出たーー！！✨🔥やっと表示されたね！！！
…が、謎の「中央にちっさく表示される現象」、これはありがちだけど厄介なやつ！

🧠 原因：幅指定 or コンテナの制約かも
この「中央に小さく表示」は、だいたい次のどれか：

🛠️ 原因①：テンプレート全体の幅が狭く設定されている
親ブロック（特に「グループ」や「カラム」）に「幅」や「最大幅（max-width）」のpx指定がされてることがある。

📌 チェック方法：

テンプレートエディターで一番外側のブロック（たとえば「グループ」）をクリック。

右側の設定パネルで「レイアウト」や「寸法（幅）」の欄を見る。

もし「幅：600px」とか小さい数値なら、100%、auto、1200pxあたりに変更！

🛠️ 原因②：中央寄せのスタイルが勝手に適用されてる
親ブロックに「中央揃え（align center）」がついていて、なおかつ横幅が狭いと、中央にギュッと小さくなる。

📌 対策：

「配置」設定が「中央揃え」になっていたら「幅いっぱい」に変更！

🛠️ 原因③：カラムの個別幅が固定（px）で、かつ画面サイズより小さい
たとえば 800px / 400px で設定していても、「全体幅」より狭いと小さく見える。

📌 対策：

外側の「カラム」ブロックを選んで、右の設定で「全体に広げる（全幅 or ワイド幅）」を試してみよう！

✅ ネオのおすすめ解決ステップ（確実）
テンプレートエディターを開く

一番外側のブロック（グループ or カラム）を選択

右サイドバー →「幅」→ 最大幅を 1200px〜1400pxに変更

「配置」を「全幅」または「ワイド幅」に設定

変更を保存 → プレビューで確認！

あと一息で完璧なレイアウトになるぞ！
ここ直ったら、次はトップページやカテゴリーページも攻めちゃう？😏🔥

弟子:
親ブロックの指定を１００％に変更したらページいっぱいにメインとサブちゃんとレイアウトされました！これを自分好みに調整するには再度、それぞれのカラムの数値を見直すのかしら？（現在親ブロックもメインもサイドも１００％にしてある）
師匠:
バッチリやーー！！ページいっぱいに美しく表示されたって、最高にキマってるじゃん！！🎯✨
ここまできたら、もう師匠は「WordPressレイアウト流派」初段だよ！

🎯 さて、お好みレイアウトに調整するには？
ズバリその通り、各カラムの幅（％）を再設定するのが王道だよ！

🛠 基本構成でいうと：
名前幅の目安説明
親ブロック（グループ） 100%（または最大幅 1200px など）ページ全体の幅。これは今のままでOK！
カラム全体 100% 親グループに対しての幅指定なのでOK。
左：メインコンテンツ 66%（例：2/3）記事本文・画像・タイトルなどの主なエリア
右：サイドバー 33%（例：1/3）最新の投稿・カテゴリーなど補足情報用

✅ 調整のやり方（再確認）
カラムブロック全体をクリック

各カラムの「幅」を 66%（メイン）と 33%（サイド）などに設定

レスポンシブ対応も考えて、必要なら 60/40 や 70/30 にしてみるのもアリ！

💡おすすめレイアウト例
メインサイドバー雰囲気
70% / 30% 情報たっぷり派に◎
66% / 34% バランス重視
60% / 40% サイドバー重視型
75% / 25% ビジュアル重視なブログにおすすめ

そして、今のあなたならもう「%だけじゃなく、px・em・vw」も試せるはず！
あとは好みとコンテンツの量でベストバランス見つけよう🔥

いよいよ、自分だけのレイアウトの世界に踏み込んだね！
次に触ってみたいのは、ヘッダー？フッター？それともCSSで細かい見た目カスタムいく？😎

弟子:
ありがとう！！数値はもう少しムフフと悩んでみます！今日はここまででタイムアップです！あ、最後に、実は積読状態だったCSSのテキストを見たらCSS２がベースになってました。これって古いのかな？
師匠:
おつかれーーーッした！！🔥
今日も最高のWEB道場だったよ。自分の手でレイアウト決めていけるようになってるの、めっちゃ進化してるから誇ってOK！✨

さて最後の質問にズバッと答えるね：

💡CSS2ベースのテキスト → 正直、もう古いです！
✅ なぜかというと…
CSS2は1998年に策定された超・初期の仕様。

その後の20年以上で、CSSは劇的に進化した。

Flexbox（2012〜）やGrid（2017〜）がない時点で、現代のWEB制作には不十分。

🔥 CSS3や現代CSSの主な進化ポイント
トピック CSS2 現代CSS（CSS3以降）
レイアウト float, position だけ Flexbox, Grid, container queries など
メディア対応なしメディアクエリでスマホ対応可能
アニメーションなし @keyframes、transition
カスタム変数なし –my-color: red; とか書ける
セレクターや疑似要素少ない :not(), :nth-child(), ::before など強化

✅ どうするべき？
その本は「歴史資料」として置いておいてOK（笑）

学ぶなら CSS3以降＋現代レイアウト（Flexbox、Grid）対応のテキストが絶対おすすめ！

📚 おすすめの学習テーマ（次回以降）
ヘッダー・フッターのレイアウトとスタイル

Flexboxでの横並び＆中央揃え

自作クラス名でCSSを書く方法（WordPressでも大活躍）

明後日、また一緒にがっつりやろう！！
積読の供養はネオが引き受ける！🔥📘（笑）
CSSの新時代、迎えにいこうぜ！次回も楽しみにしてるよ！！

弟子:
あ～古文書レベルか…。道理でFlexBoxとか書いてないと思った（汗）後でやりたいことすぐ探せるように本一冊探してみます（笑）今日もありがとう！
師匠:
まさにそれ、古文書（巻物）レベル⚔️！！
でも、それを手にしたあなたはもう「CSS史の知識を継ぐ者」…間違いなく強くなる予兆だよ😎✨

Flexbox書いてない → それ、平成の技術止まりです（笑）

📘 現代CSS本選びのコツ（本探しの旅で役立てて！）

タイトルに「Flexbox」「Grid」「レスポンシブ」ってあると当たり。

2020年以降に出版された本だとかなり実用的。

コード例がカラーで多く載ってるものが使いやすいよ！

こちらこそ、今日も本当にありがとう！！
ムフフな数値調整、楽しんでね（笑）
じゃあ、ネオは未来のCSSステージで待ってるよ！またねー！！👋🌈

2025年5月5日

TwentyシリーズのTOPページの作り方（Heroセクション編）

今日は何を進めたい？子テーマ編集の実践かな？✨

弟子:

じゃあ、前回伝えておいたTwentyシリーズのTOPページの作り方を、さわりだけでも教えてください！

いままではLihgtningとBizVectorとCocoonで特に先の二つはTOPページの作り方が変わっていたので・・・

師匠:

おっしゃキターーーッ！！🔥🔥🔥
TwentyシリーズのTOPページの仕組みね、これはLightningやBizVektorとはかなり考え方が違うから、最初ちょっと混乱するのも無理ないよ！

🧠【まずは前提】Twentyシリーズは「素朴で手動カスタム型」！

LightningやBizVektorみたいに**「ウィジェット」や「専用エリア」**でTOPページを作るんじゃなくて、

WordPressの標準機能でシンプルに構築するスタイル。

つまり、
👉「固定ページを作って、それをTOPに設定する」＝フル手動スタイル！

✅ さわりだけ：TwentyシリーズでTOPページを作る流れ

① 固定ページを作成

管理画面 → 固定ページ → 「新規追加」
たとえば「ホーム」という名前でページ作成
中身は自由（ブロックエディタで文章・画像など配置）

② そのページを「TOPページ」に設定

管理画面 → 設定 → 表示設定
「ホームページの表示」 → 「固定ページ」
- ホームページ → 作った「ホーム」ページを選択
- 投稿ページ → 必要なら「ブログ」ページを別途用意

③ 完了！

これで、WordPressのTOPがその固定ページになる
Twentyシリーズのテーマは、その固定ページの内容をそのままシンプルに表示してくれる

🔍 さらに進むとこうなる：

ブロックエディタでHeroっぽいレイアウト作ったり
子テーマでfront-page.phpを作って専用TOPレイアウトにしたり

…っていうふうに、「拡張型のシンプル設計」って感じなのよ。

⚠️ LightningやBizVektorとの違い

比較項目	Lightning / BizVektor	Twentyシリーズ
TOPページの構成	ウィジェットやテーマ独自機能で構築	固定ページ＋カスタマイズ
ブロック対応	部分対応（Lightningは独自ブロックあり）	完全ブロックエディタ前提
初心者向けガイド	多め	少なめ（自由すぎる）

さわりのつもりがちょっと語りすぎた…🤣
このあと、「HeroセクションっぽいTOP」や「front-page.phpでレイアウト変更」もやっていけるよ！やる？🔥

弟子:

あ、じゃあ、Cocoonと同じなんだね！なんとなくわかったけど、Cocoonはいろいろな人のヘルプ情報やサイトのカスタマイズツールがすでに用意されててわかりやすかったのよね…ぜひ、ご提案のHeroセクション（そもそもなんだろう…？）をお願いします！

師匠:

そうそう！まさにそれ！！！✨
**CocoonとTwentyシリーズのTOPページ構成は「ベースは同じ」**で、
決定的な違いは 👉 「サポートや機能が手厚いかどうか」 ってだけ！

👑 では…いざ「Heroセクション」へ！

✅ Heroセクションとは？

**サイトのトップにドーンと表示される「目玉の見出しエリア」**のこと！

ほら、よくあるでしょ？

大きな背景画像
キャッチコピー（「あなたの未来を変えるデザイン」みたいなやつ）
「詳しくはこちら」みたいなボタン

🔽 こんなイメージ：

+-----------------------------------------------------+
| 背景画像 or カラー                                  |
| [大見出し] ここがあなたの可能性のスタート地点       |
| [小見出し] あなたのビジネスをデザインで支援します     |
| [ボタン] サービスを見る                             |
+-----------------------------------------------------+

これが Heroセクション！

🛠️ TwentyシリーズでHeroセクションを作る方法

✅ 方法①：ブロックエディタで作る（初心者向け）

固定ページ「ホーム」を編集
最初のブロックで「カバーブロック」を挿入！
- 背景画像 or 色を設定
- 中に「見出し」「段落」「ボタンブロック」などを入れていく

✅ 方法②：子テーマで `front-page.php` を作る（中級者以上）

これは「コードで完全にTOPだけのレイアウトをつくる方法」なので、
本格的にデザインしたくなったらこのステップへGO！

💡カバーブロック使用時のコツ

項目	設定ポイント
背景画像	1920px × 1080px 以上推奨（画質良く）
テキストカラー	白 or 黒、背景とコントラスト強め
上下パディング	たっぷり取る（例：80px）
中央揃え	水平・垂直ともに中央が◎

🎁 Heroセクション構築テンプレート（コピペOK）

html
<!-- ブロックエディタのHTML編集に貼り付けてOK -->
<div class="hero-section" style="text-align: center; padding: 100px 20px; background-image: url('画像URL'); background-size: cover; color: white;">
  <h1>ここがあなたの可能性のスタート地点</h1>
  <p>あなたのビジネスをデザインで支援します</p>
  <a href="#service" style="display: inline-block; background-color: #0073aa; color: white; padding: 12px 24px; text-decoration: none; border-radius: 8px;">サービスを見る</a>
</div>

※カスタマイズは後からCSSでいくらでも！

Heroセクションって、一番目立つ場所＝第一印象の勝負エリアだから、
ここを押さえられると**サイトの見栄えが一気にプロ感✨**になるよ！

やってみたいHeroのイメージある？画像メイン？文字多め？
ネオが一緒にブロックエディタで組むよ💪💙

弟子:

むむ！特定の画像を用意してなかったので、画像を後から入れる前提でお願いできるかな？

師匠:

よっしゃ任せて！！😎✨
画像はあとで入れる前提で、まずは構造だけバッチリ整えて、あとで背景画像を「ぺたっ」と貼り付けるだけの状態を作るよ！

✅ WordPressブロックエディタでのHeroセクション構成（画像なしバージョン）

🔧 操作手順：

固定ページ「ホーム」を編集
最初のブロックとして「カバー」ブロックを挿入
「背景画像を選択」画面では、**「スキップ」**して背景なしで作成
以下のように中身を入れる：

💬 Heroの中身（例）：

plaintext
[見出し]  
あなたの未来を変えるデザインを。

[段落]  
ビジネスやブランドに寄り添いながら、あなたらしさをカタチにします。

[ボタン]  
▶ サービスを見る（リンクは#serviceなど）

💡補足設定（必ずやっておきたい）

項目	設定内容
中央揃え	見出し・段落・ボタン全て中央に
パディング	上下80px以上にして余白を取る
背景色	仮にグレーや薄いブルーなどにしておくと雰囲気つかみやすい
テキスト色	黒 or 白、背景とのコントラストで選ぶ

🖼️ 画像をあとで追加する場合

カバーエリアをクリック → 「背景を変更」→「画像を選択」
ここで画像を追加するだけ！サイズは横幅1920px前後がベター！

✨仕上がりイメージ

diff
+--------------------------------------------------------+
| グレー背景（後で画像に変更）                          |
|                                                        |
|     あなたの未来を変えるデザインを。                  |
|  ビジネスやブランドに寄り添いながら、あなたらしさを。   |
|     [ サービスを見る ]                                 |
+--------------------------------------------------------+

どう？この構成で一旦組んでおいて、後日背景画像をドン！と入れるだけでもうHero完成🔥
今すぐ組む？それとも画像を探してから整える？一緒に動いてもいいよ💪

弟子:

今やっちゃいます！

カバーブロック（フォルダに付箋みたいなアイコン）を入れたら、画像を選択する表示になったよ（アップロード・メディアライブラリ・アイキャッチ画像を使用と、その下に丸で色の選択）

師匠:

よっしゃ、そこだーッ！！🔥
その画面こそがHeroセクションの入り口、いわば「カバーの布を選ぶ」儀式だね（笑）

✅ ここではこう操作しよう！

🎯 今は「後で画像を入れる」前提なので…

👉 画像は選ばず、丸い「色」の方から背景色を選択する！

💡おすすめの背景色：

薄いグレー：やさしくプロっぽい雰囲気（#f5f5f5）
薄めの水色：爽やかで視線を引く（#e0f7fa）
薄いベージュ：ナチュラル系（#fdf6ec）

※色はあとで画像に置き換えられるので、とりあえずなんでもOK！

次のステップ：

色を選択したら「カバー」ブロックがページに入る
その中に：
- 「見出しブロック」
- 「段落ブロック」
- 「ボタンブロック」

…この3つを入れていこう！

📋 テキスト例（そのままでも使える）

見出し：

コピーする編集するあなたの未来を変えるデザインを。

段落：

コピーする編集するビジネスやブランドに寄り添いながら、あなたらしさをカタチにします。

ボタン：

テキスト → サービスを見る
リンク先 → #service（後でセクションIDに対応させる）

画面上でそれぞれを中央寄せしておけば、すでにもうプロ感✨でてくるよ！

できたら「できたよ！」って声かけて～！
次はボタンのカスタム or 背景画像入れまでいけるぜ💙

弟子:

出来たよ！カバーの画像か、色を決めるとその中に見出しなど入れ込めるんだね！とりあえずボタンのカスタマイズお願いします！

師匠:

ナイス！！🎉✨もう完全にHeroの扉を開けたね！
そうそう、カバーブロックの中にコンテンツを重ねて配置できるのがこのブロックの強み！
ここまで来たら、あとは「ボタンに魂を込める」だけだ…😎🔥

✅ WordPress ブロックエディタ：ボタンカスタマイズ方法

👇 ボタンをクリックした状態で右側サイドバーを見ると…

項目	説明	おすすめ設定
スタイル	塗りつぶし or アウトライン	まずは「塗りつぶし」がおすすめ
色	背景色＆文字色を変更	背景：`#0073aa`、文字：`#ffffff`（白）
境界線の半径	丸みの度合い	`10px` くらいでやさしい印象に
パディング（余白）	カスタムが可能	上下`10px`、左右`20px` がバランス◎

✨ 見た目の例（こうなるよ）

plaintext
+---------------------------+
|   [ サービスを見る ]      | ← 背景：青、文字：白、角丸ボタン
+---------------------------+

🎯 プロっぽく見せたいならこんな工夫も：

ホバー時に背景色を少し濃くする（カスタムCSSで対応）
ボタンのリンクに #service を入れておけば、後日セクションジャンプも実装できる！
複数ボタンを横並びにすることも可能（例：「サービスを見る」＋「お問い合わせ」）

✨ さらに一歩進むとこうもできる（CSSちょい技）

cssコピーする編集する.wp-block-button__link {
  transition: background-color 0.3s ease;
}

.wp-block-button__link:hover {
  background-color: #005a87; /* 濃い目の青に変化 */
}

これを「外観 > 追加CSS」に入れるだけで、ふわっと色変化するオシャレなボタンになる！

さてさて…次は背景画像の用意？それともこのままセクション増やして下にサービス紹介とかいく？
ネオが下地つくるの手伝うよ✌️

あなた:

師匠！外観カスタマイズで出たページが今まで見たことないものになってます！追加cssの場所がわかりません！！！

ChatGPT:

おおっと、それは驚くのも無理ない！😅
Twenty Twenty-One 以降のテーマとかだと、「外観カスタマイズ」の見た目がちょっとスッキリしすぎてて、最初びっくりするんだよね。

でも安心して！ちゃんと追加CSSを書く場所あるよ🔥

✅ 追加CSSの場所（新しいUIの場合）

WordPressの管理画面へ
サイドバーの「外観」→「カスタマイズ」をクリック
開いたカスタマイザーの左下の方をよ～く探してみて… 👉 **「追加CSS」**って書いてある項目があるはず！ ※テーマによっては一番下までスクロールしないと見つからないこともある

🧭 見つからなかった場合（裏技）

それでも見つからなかったら…

WordPress管理画面で
　👉「外観」→「**テーマファイルエディター（旧：テーマエディター）」
子テーマが選択されていることを確認
style.css というファイルに、直接書き込んでもOK

css
/* ボタンホバーで色が変わる */
.wp-block-button__link {
  transition: background-color 0.3s ease;
}
.wp-block-button__link:hover {
  background-color: #005a87;
}

⚠️ この方法はバックアップ済みの状態で使おう！（Cyberduckでバックアップしたから安心だね！）

CSSの追加、できそう？見つけられた？
必要なら画面のスクショも見ながら一緒に探すよ📷💪

弟子:

師匠！すっきりとデザインという見出しで、ナビゲーション、スタイル、固定ページ、テンプレート、パターンと表示されてて追加cssがありません！！！

師匠:

おお、きたか！そう、まさにそれが最近の「ブロックテーマ（FSE＝フルサイトエディティング）」専用カスタマイザーの姿だ！！
つまり君が今使っているテーマは、**「ブロックエディター完全対応型」**になっているんだね。🔥✨
（Twenty Twenty-Threeとか、Twenty Twenty-Fourとか！）

✅ つまり結論！

👉 このカスタマイザー画面には「追加CSS」はない！！

正しい対応はこうだ：

📖 追加CSSを書く別の正しい方法（ブロックテーマの場合）

方法①：プラグインを使う

一番安全でラク！

WordPress管理画面に行く
「プラグイン」→「新規追加」
検索バーに Simple Custom CSS と入れる
出てきたらインストール＆有効化
すると「外観」メニューか、専用メニューにCSS書き込み画面ができる！

そこに好きにCSSを書けばOK👍

方法②：子テーマの style.css に直接書く

すでに子テーマを作ってくれたから、これもアリ！

WordPress管理画面 → 「外観」→「テーマファイルエディター」
右側から style.css を開く
ファイルの一番下に、さっきのCSSコードをペタッと貼る

css
/* ボタンホバー時に色が変わる */
.wp-block-button__link {
  transition: background-color 0.3s ease;
}
.wp-block-button__link:hover {
  background-color: #005a87;
}

保存！

🚨 注意ポイント

子テーマの style.css に書くときは、途中で消したり間違えたりしても、すぐCyberduckでバックアップ戻せるから安心！
プラグインを使うと、管理画面からスマートに追記・編集できる！（初心者にめちゃ優しい）

ここまできたら次、
「方法①（プラグイン）」でいくか、
「方法②（子テーマstyle.css）」でいくか、
選ぼうか？🔥

どっちがいい？（素直な気持ちで教えてね！）

弟子:

ありがとうございます！プラグインでやったことあるかもです！残念ながら弟子、タイムアップのため、子テーマのstyle.cssでまた明日改めてお願いします！

師匠:

了解です、弟子！👍
子テーマの style.css はいつでも書き込めるから、次回の学びの時間にしっかり進めていこう！
お疲れ様でした💪 明日また待ってるね！

弟子:

今日は朝から一日付き合ってもらってありがとう！！！また、明日もよろしく！！お疲れさまでした～！！

師匠:

こちらこそ、たっぷり一日付き合ってくれてありがとう！💙
進捗がめちゃくちゃ良かったし、楽しかったよ～！
また明日、さらに進められるのを楽しみにしてるね！お疲れ様～！！😊🌟

おやすみなさい！

2025年4月29日