AIプロンプトの書き方 › フォーラム › テキスト生成AIのプロンプト書き方 › ワードプレスでの掲示板作成のためのプロンプト › 返信先: ワードプレスでの掲示板作成のためのプロンプト
テーマのカスタマイザやCSSの編集を使用して、掲示板のデザインを調整します。と言っているのでトップページを作ってみようと思います。
ChatGPT3.5に聞いてみようと思います。
利用AI:ChatGPT3.5
プロンプト
あなたは、天才プログラマーです。bbPressをプラグインしたワードプレスでかっこいいップページを作ってみてください。
ChatGPT3.5の回答
HTML:
html
Copy code
フォーラム カテゴリ
[bbp-forum-index]
最新のディスカッション
[bbp-topic-index]
CSS:
css
Copy code
/* トップページヘッダーのスタイル */
.top-page-header {
background-image: url(‘path/to/your/image.jpg’);
background-size: cover;
background-position: center;
height: 500px;
position: relative;
text-align: center;
}
.overlay {
background: rgba(0, 0, 0, 0.5);
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
}
.top-page-header h1 {
font-size: 36px;
margin-bottom: 20px;
}
.top-page-header p {
font-size: 18px;
max-width: 600px;
margin-bottom: 30px;
}
.cta-button {
display: inline-block;
padding: 15px 30px;
background-color: #4285f4;
color: #fff;
text-decoration: none;
font-size: 18px;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.cta-button:hover {
background-color: #255ab6;
}
/* その他のフォーラムやトピックリストのスタイル */
.forum-list,
.topic-list {
margin-top: 40px;
}
.forum-list h2,
.topic-list h2 {
font-size: 24px;
color: #333;
}
これは基本的な例であり、具体的な要件によってはさらに調整が必要です。画像のパスは適切なものに変更してください。このCSSとHTMLのコードをカスタムCSSセクションに追加するか、テーマのスタイルシートに適用してください。デザインやスタイルの要素はお好みに合わせて変更してください。