【保存版/随時更新】よく使うスタイル集（WordPress）

2021.01.06

▶︎▶︎▶︎【Webデザインでよく使うスタイル集デモサイト】◀︎◀︎◀︎

在宅ワーク主婦・ゆっぱーです。

何件か仕事をしてみてまとめておいたら便利！！と思ったものを集めました。

該当スタイルの画像の下にHTMLとCSSを解説しています。
コピペOK！

スタイルは随時更新し、増やしていく予定です。

※すべてWordPress化したサイトを想定しています

「Webサイト制作の基礎をまだ身につけてないよ！」という方はこちら↓をCheck！！！

目　次

１）メニューバー

２）バナー

３）インデックス

４）たがい違い

５）カード型

６）フロー

７）よくあるご質問

８）問い合わせフォーム

９）ハンバーガーメニュー

１０）TOPに戻るボタン

１１）お知らせ／NEWS

１２）代表者あいさつ（カスタムフィールド使用）

その他）jQuery

１）メニューバー

メニューバー

メニューとメニューの間の縦線の上下に余白を入れるため、[main-nav] を [nav_wrapper] で包み、 [heigt（高さ）] の差を余白にしました。

【HTML】

<nav class="nav_wrapper" id="container">
    <ul class="main-nav">
        <li><a href="#banner">バナー</a></li>
        <li><a href="#style01">たがい違い</a></li>
        <li><a href="#style02">カード型</a></li>
        <li><a href="#style03">フロー</a></li>
        <li><a href="#style04">よくあるご質問</a></li>
        <li><a href="#style05">問い合わせフォーム</a></li>
    </ul>
</nav>

【CSS】

.nav_wrapper {
    height: 5rem;
    background-color: #cf9ae7;
} 

.main-nav {
    display: flex;
    list-style: none;
    margin: 0.05rem 0 0;
    padding-top: 1.6rem;
}

.main-nav li {
    flex-grow: 1;
    text-align: center;
    background-color: #cf9ae7;;

}

.main-nav li a {
    color: white;
    font-size: 1.6rem;
    padding: 0.8rem; 
    line-height: 1.8rem;
}

/*メニューにマウスを合わせたら色が変わる*/
.main-nav li a:hover {
    color: rgb(82, 81, 90); 
    background-color: rgba(169, 169, 169, 0.383);
}

/*メニューの左に縦線挿入*/
.main-nav li+li {
    border-left: 0.5px solid white;
}

２）バナー

バナー

画像を組合せてクリックボタンを入れたバナー。
バナーの中は [grid] で設定。左右のmarginを [ calc(100%/30);] で指定しています。

【HTML】

<div class="banner" id="banner">
    <div class="banner_01">
        <img src="<?php echo get_template_directory_uri(); ?>/assets/img/banner.png" alt="在宅ワーク主婦">
    </div>
    <div class="banner_02">
        <div class="banner_title">バナー見本</div>
        <div class="banner_text">[grid] で画像組合せバナー<br>[grid] で画像組合せバナー</div>
        <div class="click"><a href="https://yupparworks.com/" target="blank"><img src="<?php echo get_template_directory_uri(); ?>/assets/img/click.png" alt="在宅ワーク主婦"></a></div>
    </div>
</div>

【CSS】

/*バナー全体*/
.banner {
    background-color: #dcf8fc;
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    margin:13rem calc(100%/30);
}

/*バナー内左側*/
.banner_01 {
    text-align: center;
    margin: calc(100%/4);
}

/*バナー内右側*/
.banner_02 {
    text-align: center;
    background-color: #cf9ae7;
    margin: calc(100%/20);
}

.banner_title {
    font-size: 2.5rem;
    padding: calc(100%/30);
}

.banner_text {
    font-size: 1.5rem;
    padding: 0 2rem;
}

/*クリックボタン*/
.click {
    width: 70%;
    margin: auto;
    padding-top: 1.8rem;
}

.click:hover {
    position : relative;
    top : 3pt;
    left : 3pt;
}

３）インデックス

インデックス

【HTML】

 <h1 class="index">たがい違いスタイル</h1>

【CSS】

.index {
    position: relative;
    padding: 1rem calc(100%/30) 0.5rem;
    font-size: 2.5rem;
  }
  
.index:after {
    position: absolute;
    bottom: 0;
    left: calc(100%/60);
    width: 97%;
    height: 5px;
    content: '';
    background-image: -webkit-gradient(linear, left top, right top, from(#d560f8), to(#fee140));
    background-image: -webkit-linear-gradient(left, #d370fa 0%, #fee140 100%);
    background-image: linear-gradient(to right, #d370fa 0%, #fee140 100%);
  }

４）たがい違い

ブラウザ版
モバイル版

これは本当によく使うスタイルです。
[display: flex;] でテキストと画像を横並びにし、[nth-of-type(2n)] で偶数だけ [flex-direction: row-reverse;] を設定、テキストと画像の位置を逆にします。
モバイル版では [上：テキスト、下：画像] で統一するため、 [flex-direction: column;] を指定し、横並びを解除します。

【HTML】

<div id="style01">
    <div class="style01">
        <h1 class="index">たがい違いスタイル</h1>

        <div class="style01-1">
            <div class="style01_left">
                <h2>たがい違い１</h2>
                <p class="style01_text">[nth-of-type] で簡単にレスポンシブ対応<br><br>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
            </div>
            <div class="style01_right"><img src="<?php echo get_template_directory_uri(); ?>/assets/img/demo_img.png" alt="yupparworks"></div>
            </p>
        </div>

        <div class="style01-1">
            <div class="style01_left">
                <h2>たがい違い２</h2>
                <p class="style01_text">[nth-of-type] で簡単にレスポンシブ対応<br><br>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
            </div>
            <div class="style01_right"><img src="<?php echo get_template_directory_uri(); ?>/assets/img/demo_img.png" alt="yupparworks"></div>
            </p>
        </div>

        <div class="style01-1">
            <div class="style01_left">
                <h2>たがい違い３</h2>
                <p class="style01_text">[nth-of-type] で簡単にレスポンシブ対応<br><br>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
            </div>
            <p><img src="<?php echo get_template_directory_uri(); ?>/assets/img/demo_img.png" alt="yupparworks" class="tokucho_right">
            </p>
        </div>

【CSS】

.style01 {
    margin: 8rem 2rem 10rem;
}

.style01-1 {
    display: flex;
    margin: 4rem;
}

/*偶数のみテキストと画像を逆に*/
.style01-1:nth-of-type(2n) {
    display: flex;
    flex-direction: row-reverse;
}

.style01_left {
    margin-right: 0;
    width: 50rem;
}

#style01 h2 {
    text-align: center;
    color: #9C83DE;
    font-size: 2rem;
}

.style01_text {
    font-size: 1.2rem;
    padding: 2.5rem 2rem;
    line-height: 2rem;
}

モバイル版
横並びを解除

.style01-1 {
   flex-direction: column;
}

.style01-1:nth-of-type(2n) {
   flex-direction: column;
}

５）カード型

ブラウザ・iPad版
モバイル版

カード型は [display: flex;] で３列に並べて、モバイル版では [flex-direction: column;] で１列にしています。

【HTML】

<div id="style02">
    <div class="style02">
        <h1 class="index">カード型</h1>
        <div class="card-container">

            <section class="card-list">
                <figure class="card-figure"><img src="<?php echo get_template_directory_uri(); ?>/assets/img/demo_img.png" alt="yupparworks"></figure>
                <h3 class="card-title">カードレイアウト１</h2>
                    <p class="card-text">[flexbox] で簡単にレスポンシブ対応カードレイアウト　テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                    </a>
            </section>

            <section class="card-list">
                <figure class="card-figure"><img src="<?php echo get_template_directory_uri(); ?>/assets/img/demo_img.png" alt="yupparworks"></figure>
                <h3 class="card-title">カードレイアウト２</h2>
                    <p class="card-text">[flexbox] で簡単にレスポンシブ対応カードレイアウト　テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                    </a>
            </section>

            <section class="card-list">
                <figure class="card-figure"><img src="<?php echo get_template_directory_uri(); ?>/assets/img/demo_img.png" alt="yupparworks"></figure>
                <h3 class="card-title">カードレイアウト３</h2>
                    <p class="card-text">[flexbox] で簡単にレスポンシブ対応カードレイアウト　テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                    </a>
            </section>

        </div>
    </div>
</div>

【CSS】

.style02 {
    margin: 8rem 2rem 6rem;
}

.card-container {
    margin: 5rem 4rem 8rem;
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

.card-title {
    text-align: center;
    padding: 0.6rem;
    font-size: 1.5rem;
}

.card-text {
    font-size: ２rem;
    padding: 0 0.2rem;
}

モバイル版

.card-container {
    margin: 4rem 1.8rem 3rem;
    flex-direction: column;
}

６）フロー

ブラウザ・iPad版
モバイル版

フローはテキストと画像を [display: grid;] で横並びにし、モバイル版では [rid-template-columns: 1fr;] で、 [上：テキスト、下：画像]にしています。

【HTML】

<div id="style03">
    <div class="style03">
        <h1 class="index">フロー</h1>
        <div class="flow_box flow_1st">
            <div class="flow_left">
                <div class="flow_left_index">１）フロータイトル</div>
                <hr>
                <div class="flow_left_text">[grid] で簡単にレスポンシブ対応フローレイアウト<br>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
            </div>
            <div class="flow_right">
                <img src="<?php echo get_template_directory_uri(); ?>/assets/img/demo_img.png" alt="yupparworks">
            </div>
        </div>
        <div class="under"><img src="<?php echo get_template_directory_uri(); ?>/assets/img/flow_under.png"></div>

        <div class="flow_box">
            <div class="flow_left">
                <div class="flow_left_index">２）フロータイトル</div>
                <hr>
                <div class="flow_left_text">[grid] で簡単にレスポンシブ対応フローレイアウト<br>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
            </div>
            <div class="flow_right">
                <img src="<?php echo get_template_directory_uri(); ?>/assets/img/demo_img.png" alt="yupparworks">
            </div>
        </div>
        <div class="under"><img src="<?php echo get_template_directory_uri(); ?>/assets/img/flow_under.png"></div>

        <div class="flow_box">
            <div class="flow_left">
                <div class="flow_left_index">３）フロータイトル</div>
                <hr>
                <div class="flow_left_text">[grid] で簡単にレスポンシブ対応フローレイアウト<br>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
            </div>
            <div class="flow_right">
                <img src="<?php echo get_template_directory_uri(); ?>/assets/img/demo_img.png" alt="yupparworks">
            </div>
        </div>
        <div class="under"><img src="<?php echo get_template_directory_uri(); ?>/assets/img/flow_under.png"></div>

        <div class="flow_box">
            <div class="flow_left">
                <div class="flow_left_index">４）フロータイトル</div>
                <hr>
                <div class="flow_left_text">[grid] で簡単にレスポンシブ対応フローレイアウト<br>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
            </div>
            <div class="flow_right">
                <img src="<?php echo get_template_directory_uri(); ?>/assets/img/demo_img.png" alt="yupparworks">
            </div>
        </div>
        <div class="under"><img src="<?php echo get_template_directory_uri(); ?>/assets/img/flow_under.png"></div>

        <div class="flow_box">
            <div class="flow_left">
                <div class="flow_left_index">５）フロータイトル</div>
                <hr>
                <div class="flow_left_text">[grid] で簡単にレスポンシブ対応フローレイアウト<br>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
            </div>
            <div class="flow_right">
                <img src="<?php echo get_template_directory_uri(); ?>/assets/img/demo_img.png" alt="yupparworks">
            </div>
        </div>
    </div>
</div>
</div>

【CSS】

.style03 {
    margin: 8rem 2rem;
}

.flow_box {
    margin: 0 auto;
    border: solid 1px #9C83DE;
    border-radius: 18px;
    width: 63rem;
    height: 15rem;
    display: grid;
    grid-template-columns: 2fr 1fr;
}

.flow_1st {
    margin-top: 5.4rem;
}

.flow_left {
    margin: 2rem 1rem;
}

.flow_right {
    margin: 2rem 2rem 1rem;
    height: 80%;
    width: 80%;
    text-align: center;
}

.flow_left_index {
    font-size: 1.8rem;
    color : #9C83DE;
    font-weight: bold;
}

.flow_left_text {
    font-size: 1.15rem;
    margin-top: 2rem;
    padding-left: 1rem;
}

.flow hr {
    height: 1.8px;
    background-color: #703ff7;;
    border: none;
}

.under {
    text-align: center;
    margin: 0.5rem 0 1rem;
}

モバイル版

.flow_box {
    height: 30rem;
    grid-template-columns: 1fr;
}

７）よくあるご質問

ブラウザ版
モバイル版

「Q.」の画像と「質問文」のテキストを [vertical-align: bottom;] で下揃えしています。
質問文の下線は [background:linear-gradient( )] で蛍光ペンの線のようにしています。
ピンクの回答はモバイル版のみ改行するように、HTMLの改行部分に [ br class=”br-sp” ] と設定、 CSSはブラウザ[display: none;]、モバイル [display: block;] と指定しています。

【HTML】

<div id="style04">
    <div class="style04">
        <h1 class="index">よくあるご質問</h1>
        <div class="qa">
            <div class="question">
                <img src="<?php echo get_template_directory_uri(); ?>/assets/img/question.png" alt="yupparworks">
                <span>質問文（imgとspan(文字)を<br class="br-sp">[vertical-align: bottom;]で下揃え）</span>
            </div>
            <div class="answer">
                回答：質問文の下線は[background:linear-gradient]
            </div>
            <p class="answer-text">質問文はモバイル版のみ改行 回答文テキスト回答文テキスト回答文テキスト回答文テキスト回答文テキスト回答文テキスト回答文テキスト回答文テキスト回答文テキスト回答文テキスト回答文テキスト回答文テキスト回答文テキスト回答文テキスト回答文テキスト回答文テキスト</p>
        </div>
        <div class="qa">
            <div class="question">
                <img src="<?php echo get_template_directory_uri(); ?>/assets/img/question.png" alt="yupparworks">
                <span>質問文（imgとspan(文字)を<br class="br-sp">[vertical-align: bottom;]で下揃え）</span>
            </div>
            <div class="answer">
                回答：質問文の下線は[background:linear-gradient]
            </div>
            <p class="answer-text">質問文はモバイル版のみ改行 回答文テキスト回答文テキスト回答文テキスト回答文テキスト回答文テキスト回答文テキスト回答文テキスト回答文テキスト回答文テキスト回答文テキスト回答文テキスト回答文テキスト回答文テキスト回答文テキスト回答文テキスト回答文テキスト</p>
        </div>
    </div>
</div>

【CSS】

.style04 {
    margin: 8rem 2rem;
}

.qa {
    margin: 3rem 8rem 5rem;
}

/*質問文の「Q.」を下揃え*/
.question img {
    width: 4%;
    margin-right: 0.4rem;
    vertical-align: bottom;
}

/*質問文のテキストを下揃え*/
.question span {
    vertical-align: bottom;
}

/*質問文の下線蛍光ペン風に*/
.question {
    font-size: 1.6rem;
    background:linear-gradient(transparent 80%, #9C83DE 100%);
    padding-bottom: 0.4rem;
}

.answer {
    margin: 1.5rem 2rem;
    font-size: 1.8rem;
    font-weight: bold;
    color: #FF66C4;
}

.answer-text {
    margin: 0 2rem;
    font-size: 1.3rem;
    text-indent: left;
}

/*回答の改行はブラウザ版では表示しない*/
.br-sp {
    display: none;
}

モバイル版

/*回答の改行を表示する*/
.br-sp {
    display: block;
}

８）問い合わせフォーム

問い合わせフォーム

WordPressのお問合せフォームのプラグイン「Contact Form 7」を使用しています。
「郵便番号を入力したら自動で住所が出る」設定は「YubinBangoライブラリ」を使用しています。
（プラグイン「zipaddr-jp」はdo_shortcodeを使って動的にテンプレートを読み込んでいるサイトの設定が難しく今回は使用していません）

【YubinBangoライブラリ設定】
１）「functions.php」に以下を入力し、YubinBangoライブラリを読み込む

wp_enqueue_script( 'yubinbango', 'https://yubinbango.github.io/yubinbango/yubinbango.js', array(), null, true );


２）HTMLのclass指定の中に h-adr を入れる
３）form中に以下を入れる 

<span class="p-country-name" style="display:none;">Japan</span>


４）郵便番号入力欄のclass指定の中に p-postal-code を入れる

[text your-zipcode class:p-postal-code minlength:7 size:8 id:zip placeholder"郵便番号"]


５）住所欄のclass指定の中に、都道府県名(p-region)、市町村区(p-locality)、町域(p-street-address)、以降の住所(p-extended-address) を入れる

[text your-address1 class:p-region placeholder"都道府県"]
[text your-address2 class:p-locality placeholder"以降の住所"]

【HTML】

<div id="style05">
    <div class="contact_form">
        <h1 class="index">問い合わせフォーム</h1>
        <div class="contact_form_7">
        <?php echo do_shortcode('[contact-form-7 id="5" title="コンタクトフォーム 1" html_class="h-adr"]'); ?>
        </div>
    </div>
</div>

【CSS】

.contact_form {
    margin: 1rem 2rem;
}

.contact_form_7 {
    margin: 5rem 12rem;
    padding: 4rem 10rem;
    font-weight: bold;
    border: solid 3px #cf9ae7;
    border-radius: 4px;
}

.contact_form_7 label{
    font-size: 1.3rem;
    color: rgb(144, 144, 204);
    padding: 1rem 0;
    margin-top: 2rem;
}

/*必須のラベル*/
.wpcf7 .must {
    background-color:#FF66C4;
    border-radius: 4px;
    color: white;
    font-size: 0.8rem;
    padding: 0.2rem;
}

/*入力欄の設定*/
input[type="text"],
input[type="email"]
{
    width: 100%;
    height: 2.4rem;
    border: 0.6px solid #cf9ae7;
    border-radius: 0.5rem;
    padding:1rem;
    font-size: 1rem;
    margin-bottom: 1.9rem;
}

textarea {
    width: 100%;
    max-height: 7.5rem;
    border: 0.6px solid #cf9ae7;
    border-radius: 0.5rem;
    padding:1rem;
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

input[type="text"].p-postal-code {
    width: 40%;
    margin: 0 0 0.9rem 0.2rem;
}

input[type="text"].p-region {
    margin-bottom: 0.9rem;
}

９）ハンバーガーメニュー

モバイル版
ハンバーガーメニュー開いた状態

モバイル版ではハンバーガーメニューを設定しています。

【HTML】

<div class="humb-menu">
    <input id="gnav-input" type="checkbox">
    <label for="gnav-input" id="gnav-btn">
        <div i class="fas fa-bars"></div>
    </label>

    <div id="gnav-content">

        <div class="humb-menu__title">yupparworks<br>よく使うスタイル集</div>

        <label>
            <p><a href="#banner">バナー</a></p> </a></p>
        </label>

        <label>
            <p><a href="#style01">たがい違い</a></p>
        </label>

        <label>
            <p><a href="#style02">カード型</a></p>
        </label>

        <label>
            <p><a href="#style03">フロー</a></P>
        </label>

        <label>
            <p><a href="#style04">よくあるご質問</a></p>
        </label>

        <label>
            <p><a href="#style05">問い合わせフォーム</a></p>
        </label>

    </div>

</div>

【CSS】

.humb-menu {
    display: inline; 
}

#gnav-btn {
    color: #FF66C4;
    padding: 10px;
    font-size: 34px;
    position: fixed;
    top: 0.8rem;
    right: 1rem;
    z-index: 100;
    background-color: white;
    border: solid 3px #cf9ae7;
    border-radius: 8px;
}

#gnav-input:checked ~ #gnav-content {
    top: 0;
}

#gnav-content {
    position: fixed;
    top: -100%;
    left: 0;
    z-index: 10;
    transition: 0.3s;
    width: 100%;
}

.humb-menu__title {
    padding: 1rem 0.5rem 0.5rem;
    font-size: 1.3rem;
    background-color: white;
    color: #782da3;
}

.humb-menu label {
    display: flex;
    justify-content: space-between;
    font-size: 1.3rem;
    padding: 0.5rem;
    cursor: pointer;
    border-top: 0.5px solid white;
    background-color: #cf9ae7;
}

.humb-menu input {
    display: none;
}

.humb-menu {
    height: 0;
    overflow: hidden;
}

.humb-menu p {
    padding: 0.2rem;
}

.humb-menu a {
    color:white;
}

.humb-menu a:hover {
    color: orange; 
    background-color: rgba(169, 169, 169, 0.383);
}

#gnav-btn :checked +  {
    height: auto;
}

１０）TOPに戻るボタン

ブラウザ・iPad版のTOPに戻るボタン

ブラウザ版とiPad版は「TOPに戻るボタン」を設定しています。
画像はAdobe XDで作成。

【HTML】

<p id="pagetop"><a href="#container">
<img src="<?php echo get_template_directory_uri(); ?>/assets/img/top-button.png" height="50" width="70" 　alt="ページトップボタン"></a></p>
<button type="button" class="btn js-btn">
    <span class="btn-line"></span>
</button>

【CSS】

#pagetop {
    position: fixed;
    bottom: 4rem;
    right: 2rem;
}

１１）お知らせ／NEWS （投稿ページ）

ブラウザ版TOPページ
モバイル版TOPページ

投稿ページは手間がかかるので（今回実感しました…既存テーマで作った方がいい！）CSSは一部 省略しているところがあります。
下記の解説で不明な点があれば、Twitter（@YupparW）からご質問ください。

１）TOPページに投稿を表示する
管理画面から投稿ページを新規追加し、TOPページに記事一覧を表示させます。
「設定 ＞ 表示設定 ＞ 1ページに表示する最大投稿数」を４件に設定しています。

【HTML】

<div id="style06">
    <div class="style06">
        <h1 class="index">お知らせ／NEWS</h1>

            <div class="news">

                <div class="row">
                    <?php if (have_posts()) : ?>
                        <?php while (have_posts()) : the_post(); ?>
                            <div class="col-md-4">
                                <?php get_template_part('template-parts/loop', 'news'); ?>
                            </div>
                        <?php endwhile; ?>
                    <?php endif; ?>
                </div>

                <p class="sec_btn">
                    <?php
                    $news = get_term_by('slug', 'news', 'category');
                    $news_link = get_term_link($news, 'category');
                    ?>
                    <a href="<?php echo $news_link; ?>" class="btn btn-default">最新情報の一覧<i class="fas fa-angle-right"></i></a>
                </p>

            </div>

    </div>
</div>

【CSS】
ここでも「display: grid;」で横並びにしています。
「grid-template-columns: repeat(auto-fill,minmax(300px, 1fr));」とし、モバイル版では１列になるように設定しています。

.style06 {
	margin: 8rem auto;
}

.row {
	margin: 4rem calc(100%/30);
	display: grid;
	gap: 30px;
	grid-template-columns: repeat(auto-fill,minmax(300px, 1fr));
}

.col-md-4 li{
    list-style: none;
}

.col-md-4 img {
    text-align: center;
    width: 100%;
    height: 100%;
}

.news_title {
    text-align: center;
	font-size:1.1rem;
}

２）「loop-news.php」を作成

<article id="post-<?php the_ID(); ?>" <?php post_class('news'); ?>>
    <div class="news_pic">
        <a href="<?php the_permalink(); ?>">
            <?php if ( has_post_thumbnail() ): ?>
                <?php the_post_thumbnail('medium'); ?>
            <?php else: ?>
                <img src="<?php echo get_template_directory_uri(); ?>/assets/img/common/noimage_600x400.png" alt="">
            <?php endif; ?>
        </a>
    </div>
    <div class="news_meta">
        <?php the_category(); ?>
        <time class="news_time" datetime="<?php the_time('Y-m-d'); ?>"><?php the_time('Y年m月d日'); ?></time>
    </div>
    <h2 class="news_title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    <div class="news_desc">
        <?php the_excerpt(); ?>
        <p><a href="<?php the_permalink(); ?>">[続きを読む]</a></p>
    </div>
</article>

３）投稿ページを編集

ブラウザ版投稿ページ
モバイル版投稿ページ

「single.php」「sidebar-archives.php」「sidebar-categories.php」をそれぞれ作ります。

【single.php】

<?php get_header(); ?>

<h2 class="pageTitle">最新情報<span>／NEWS</span></h2>

<?php get_template_part('template-parts/breadcrumb'); ?>

<main class="news_main">
    <div class="news_container">
        <div class="news_row">
            <div class="col-12 col-md-9">
                <?php if ( have_posts() ) : ?>
                    <?php while ( have_posts() ) : the_post(); ?>
                        <article id="post-<?php the_ID(); ?>" <?php post_class('article'); ?>>
                            <header class="article_header">
                                <h2 class="article_title"><?php the_title(); ?></h2>
                                <div class="article_meta">
                                    <?php the_category(); ?>
                                    <time datetime="<?php the_time('Y-m-d'); ?>"><?php the_time('Y年m月d日'); ?></time>
                                </div>
                            </header>
                            <div class="article_body">
                                <div class="content">
                                    <?php the_content(); ?>
                                </div>

                                <?php comments_template(); ?>
                            </div>
                            <div class="postLinks">
                                <div class="postLink postLink-prev"><?php previous_post_link('<i class="fas fa-chevron-left"></i>%link'); ?></div>
                                <div class="postLink postLink-next"><?php next_post_link('%link<i class="fas fa-chevron-right"></i>'); ?></div>
                            </div>
                        </article>
                    <?php endwhile; ?>
                <?php endif; ?>
            </div>

            <div class="col-12 col-md-3">
                <?php get_sidebar('categories'); ?>
                <?php get_sidebar('archives'); ?>
            </div>
            
        </div>
    </div>
</main>

<?php get_footer(); ?>

【sidebar-archives.php】

<aside class="archive">
    <h2 class="archive_title">月別アーカイブ</h2>
    <ul class="archive_list">
        <?php
        $args = array(
            'type' => 'monthly', //月別を指定
        );
        wp_get_archives( $args );
        ?>
    </ul>
</aside>

【sidebar-categories.php】

<aside class="archive">
    <h2 class="archive_title">カテゴリ 一覧</h2>
    <ul class="archive_list">
        <?php
        $args = array(
            'title_li' => '', //見出しを削除
        );
        wp_list_categories( $args );
        ?>
    </ul>
</aside>

「single.php」「sidebar-archives.php」「sidebar-categories.php」それぞれをCSSで指定して編集します。
ここでは省略します。（もし必要でしたらご連絡ください）
サイドバーはモバイル版では記事の下になるように設定しています。

４）インデックスのページ（記事一覧）を作成

記事の一覧ページを「index.php」で作成するため、TOPページを「front-page.php」に変更。

【index.php】

<?php get_header(); ?>

<h2 class="pageTitle">最新情報<span>NEWS</span></h2>

<main class="main">
    <div class="container">
        <div class="index-row">
            <div class="col-12 col-md-9">
                <?php if ( is_month() ): ?>
                    <h2 class="main_title"><?php the_time('Y年m月'); ?></h2>
                <?php else: ?>
                    <h2 class="main_title"><?php wp_title(''); ?></h2>
                <?php endif; ?>

                
                <div class="index-row">
                    <?php if ( have_posts() ) : ?>
                        <?php while ( have_posts() ) : the_post(); ?>
                            <div class="col-md-4">
                                <?php get_template_part('template-parts/loop', 'news'); ?>
                            </div>
                        <?php endwhile; ?>
                    <?php endif; ?>
                </div>
            </div>

            <div class="col-12 col-md-3">
                <?php get_sidebar('categories'); ?>
                <?php get_sidebar('archives'); ?>
            </div>
        </div>
    </div>
</main>

<?php get_footer(); ?>

ここもCSSは省きます。必要であればご連絡くださいね。

１２）代表者あいさつ（カスタムフィールド使用）

ブラウザ版
モバイル版

代表者あいさつのテキスト部分をクライアントがワードプレスの管理画面から入力できるよう、入力欄を作成。カスタム投稿タイプとプラグイン「Advanced Custom Fields」を使用しています。

１）管理画面に入力欄を作るためfunction.phpに下記を入力

/*カスタム投稿タイプ */
add_filter( 'wpcf7_support_html5_fallback', '__return_true' );

add_action( 'init', 'create_post_type' );
function create_post_type() {
  register_post_type( 'president_text',
    array(
      'label' => '代表者あいさつ',
      'has_archive' => true,
      'public' => true,
      'menu_position' => 5,
    )
  );
}

管理画面（ダッシュボード）に代表者あいさつが追加される。

２）プラグイン「Advanced Custom Fields」をインストール、フィールドグループを作成

「位置」を［投稿タイプ］［等しい］［代表者あいさつ（１で作成したカスタム投稿タイプ）］と設定。
今回はテキストエリアを設置しています。
カスタム投稿タイプのテキストエリアに表示させたい文章（テキスト）を入力しておきます。

３）phpを追加する

代表者あいさつのテキストを表示させたい部分に下記を入力。

<?php echo html_entity_decode(get_field('president_text',36));?>

数字の「36」はカスタム投稿タイプのURL欄「post=36」のことです。

代表者あいさつの部分全体は以下のとおり。

【front-page.php】

       
 <h1 class="index">代表者あいさつ</h1>
    <div class="sytle07_wrapper">
        <div class="style07_img">
            <img src="<?php echo get_template_directory_uri(); ?>/assets/img/president_img.png" alt="yupparworks">
        </div>
        <div class="style07_text">
            <h2>代表者あいさつ</h2>
            <p class="president_text">
            <?php echo html_entity_decode(get_field('president_text',36));?>
            </p>
         </div>
 </div>

CSSで「.sytle07_wrapper」を「display:grid;」で設定しています。

その他）jQuery

メニューバーのリンクの「スムーススクロール」や「リンク先のズレ（見出しの上に飛ぶように設定）」は以下の設定をしています。

【main.js】

   //メニューバーの設定　ヘッダーの高さ
    var headerHight = 100;

    jQuery('a[href^="#"]').click(function () {

        //スクロールのスピード
        var speed = 800;
        var href = jQuery(this).attr("href");
        var target = jQuery(href == "#" || href == "" ? 'html' : href);

        //表示位置＝ブラウザTOPーヘッダーの高さ
        var position = target.offset().top-headerHight;
        jQuery('body,html').animate({
            scrollTop: position
        }, speed, 'swing');
        return false;
    });


    jQuery('#gnav-content a').on('click', function (event) {
        jQuery('#gnav-input').prop('checked', false);
    });

TOPに戻るボタンを「スクロールしたら表示させる」「スムーススクロール」は以下の設定しています。

【main.js】

   //トップへ戻るボタンの設定
    var topBtn = jQuery('#pagetop');

    //トップへ戻るボタンを非表示にする
    topBtn.hide();

    //スクロールしてページトップから200に達したらボタンを表示
    jQuery(window).scroll(function () {
        if (jQuery(this).scrollTop() > 200) {
　　　　　　　//フェードインで表示
            topBtn.fadeIn();
        } else {
　　　　　　　//フェードアウトで非表示
            topBtn.fadeOut();
        }
    });

    //スクロールしてトップへ戻る
    topBtn.click(function () {
        jQuery('body,html').animate({
            scrollTop: 0
        }, 500);
        return false;
    });

よく使うスタイル集はここまで。
随時更新して増やしていく予定です。

何か聞きたいことがありましたら、Twitterからお気軽に質問してください。

>>ゆっぱ〜／在宅ワーク主婦（@YupparW）｜Twitter

■独学でプログラミング（Web制作）を学習していく上でTwitterでフォローしておくべき方々

めがねん・めがねログ管理人

めがねんさんのブログにそってプログラミング学習をし、案件獲得にいたりました。

たにぐち まこと／学ぶ。をちゃんと

プログラミングを学習していく上でも、実際にWeb制作を始めてからもたくさんお世話になる方です！動画の声は優しく癒しのひととき！

マナブ@バンコク

Webで稼ぐプロの方！ブログもYouTubeもWebで稼ぐ方法でいっぱいです。

祐太@はらブログ

実際の案件獲得についてのむっちゃくちゃためになるブログ書かれています。

こばやしさん

Webデザイナーさん。とにかく役立つWebデザインをツイートされています。
その画像を保存して実際の案件で見ながらコーディングしました！

アキユキ@Webデザイナー/エンジニアさん


Webデザイナーさん。YouTubeで初心者用の役立つ動画をたくさん配信されています。

タイトルとURLをコピーしました