htmlとcssの練習で作成しました。
WordPressのオリジナルテーマとして作成する際に、どうやればより効率的に導入に繋げられるか考えながら作成しました。
それぞれのphpコードを意識し、どこに何を挿入するか、投稿ページのループをどうするかなど、このポートフォリオサイト作成で得た知識を使いながらコードを記入しています。
コメントアウトで幾つか記入もしています。
作成日：2024年11月23日
作成時間：1時間
各ボタンをクリックすると、表示されているページ横（スマートフォンでは下）にソース、またはcssがテキスト形式で表示されるようにしています。
<!DOCTYPE html>
<html lang="ja"> <!-- <?php languege_attributes(); ?> -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="オリジナルテーマ案Aを作成中"> <!-- <?php bloginfo('description'); ?>-->
<title>これはサンプルです</title><!-- titleを削除し、functions.phpに theme_setup add_theme_support('title-tag'); 記入 -->
<link rel="stylesheet" href="style4.css">
</head>
<body>
<!-- <?php wp_body_open(); ?> -->
<header id="top">
<div id="header-img-area"><a href="sample4.html"><img src="" alt="ヘッダーロゴ"></a></div>
<nav> <!-- navは wp_nav_menu arrayを使用 -->
<ul>
<li><a href="sample4.html">Home</a></li>
<li><a href="#sitemap">Sitemap</a></li>
<li><a href="#about">About</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<!-- <?php get_header(); ?>-->
<div id="site-title">
<h1>ここにサイトタイトルが入ります</h1> <!-- <?php bloginfo('name'); -->
<p>ここはサイトディスクリプションが入ります</p> <!-- <?php bloginfo('description');?> -->
</div>
<h2>ここにサイトのテーマを表示</h2>
<aside id="sitemap">
<h2>SiteMap</h2>
<div id="site-map-area">
<div class="site-map-area-01">
<h3>Profile</h3>
<div class="aside-img-area"><img src="" alt="asideエリアのimgが入ります"></div>
<p>ここから自己紹介ページへリンク</p>
</div>
<div class="site-map-area-01">
<h3>Gallery</h3>
<div class="aside-img-area"><img src="" alt="asideエリアのimgが入ります"></div>
<p>ここからギャラリーへリンク</p>
</div>
<div class="site-map-area-01">
<h3>Support</h3>
<div class="aside-img-area"><img src="" alt="asideエリアのimgが入ります"></div>
<p>ここからサポートページへリンク</p>
</div>
</div>
</aside>
<main>
<section id="about">
<h2>What is this page?</h2>
<p>このページは、あくまでもサンプルで作成しています。ここはSlideShowにします。</p>
</section>
<article id="blog">
<h2>Blog</h2>
<section><!-- <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>-->
<div class="blog-area">
<a href="#"><!-- <?php echo esc_url(get_permalink()); ?>--><div class="blog-img-area"><img src="" alt="投稿ページのThumbnailが入ります"><!-- <?php the_post_thumbnail(); ?> --></div>
<p>ここは投稿ページのタイトルが入ります<!-- <?php the_title(); ?> --></p></a>
</div>
<div class="blog-area">
<a href="#"><div class="blog-img-area"><img src="" alt="投稿ページのThumbnailが入ります"></div>
<p>ここは投稿ページのタイトルが入ります</p></a>
</div>
<div class="blog-area">
<a href="#"><div class="blog-img-area"><img src="" alt="投稿ページのThumbnailが入ります"></div>
<p>ここは投稿ページのタイトルが入ります</p></a>
</div>
</section><!-- <?php endwhile; else :?> <p>記事はありません</p> <?php endif; ?> -->
</article>
</main>
<!-- <?php get_footer();?> -->
<footer>
<p>サイトのタイトルが入ります</p>
<nav>
<ul>
<li><a href="#">企業概要</a></li>
<li><a href="#">採用情報</a></li>
<li><a href="#">プライバシーポリシー</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
<ul>
<li class="sns-area"><a href="#"><img src="" alt="Xのロゴ"></a></li>
<li class="sns-area"><a href="#"><img src="" alt="instaのロゴ"></a></li>
<li class="sns-area"><a href="#"><img src="" alt="youtubeのロゴ"></a></li>
</ul>
</nav>
<small><a href="#top">copyright © MKB Project</a></small>
</footer>
<!-- <?php wp_footer(); ?> スクリプトを読み込むために必要 -->
</body>
</html>
charset "UTF-8";
body {
font-family: Arial, sans-serif;
line-height: 1.5;
color: #333333;
margin: 0 auto;
padding: 0;
}
* {
box-sizing: border-box;
}
header {
display: flex;
justify-content: space-between;
margin: 0;
padding: 5px 10px;
width: 100%;
height: 80px;
background-color: #121d7d;
color: #ffffff;
align-items: center;
}
#header-img-area {
margin: 0;
width: 200px;
height: 50px;
background-color: #cfd1e2;
}
#header-img-area a {
text-decoration: none;
color: #fff;
}
#header-img-area a:hover {
color: #dfcc20;
}
header nav {
margin: 0;
padding: 0;
}
header nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
}
header nav ul li {
margin: 0 10px;
}
header nav ul li a {
text-decoration: none;
color: #fff;
}
header nav ul li a:hover {
color: #dfcc20;
}
main {
margin: 0 0 30px 0;
}
#site-title, h2 {
text-align: center;
font-size: 1.2rem;
}
#site-title{
align-items: center;
height: 300px;
}
#sitemap {
max-width: 800px;
background-color: #121d7d;
color: #fff;
margin: 0 auto;
padding: 5px 0 50px 0;
}
#site-map-area {
display: flex;
justify-content: space-evenly;
margin: 0;
}
.site-map-area-01 {
background-color: #fff;
color: #333;
text-align: center;
}
.aside-img-area {
background-color: #cfd1e2;
margin: 0 auto;
width: 150px;
height: 150px;
}
#about {
text-align: center;
height: 200px;
}
#blog {
max-width: 1200px;
margin: 0 auto;
background-color: #121d7d;
color: #fff;
padding: 5px 0 50px 0;
}
#blog section {
display: flex;
justify-content: space-evenly;
color: #333;
}
.blog-area {
background-color: #fff;
}
.blog-img-area {
background-color: #cfd1e2;
width: 200px;
height: 200px;
margin: 10px auto 0 auto;
}
footer {
margin: 0 auto;
padding: 30px 0;
width: 100%;
background-color: #121d7d;
color: #ffffff;
align-items: center;
}
footer p {
text-align: center;
font-size: 1.5rem;
}
footer nav {
width: 80%;
margin: 0 auto;
display: flex;
justify-content: space-evenly;
}
footer nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
footer nav ul li {
margin: 15px 0;
}
.sns-area {
background-color: #cfd1e2;
width: 50px;
height: 50px;
margin: 0 auto;
}
footer small {
display: block;
text-align: center;
}
footer a {
text-decoration: none;
color: #fff;
}
footer a:hover {
color: #dfcc20;
}
@media (max-width:768px ) {
header {
display: flex;
flex-direction: column;
}
#sitemap {
padding: 0;
}
#blog {
padding: 0;
}
#blog section {
display: flex;
flex-direction: column;
}
.blog-area p {
text-align: center;
}
.blog-img-area {
width: 300px;
height: 300px;
}
.aside-img-area {
width: 100px;
height: 100px;
}
}