仕様01

テーマ

Twenty Twenty-Four を複製してテーマを作成

function.php

function.php


// headタグ内に挿入したいコード処理
function add_wp_fontawesome() {
    ?>
    
    <!-- ◆ここにFont Awesomeを読み込ませるためのコードを設置 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" />
<?php
}

// add_actionにてwp_headにadd_wp_fontawesomeの処理を追加
add_action('wp_head', 'add_wp_fontawesome');

/**
 * bodyタグ開始に挿入
 */
add_action( 'wp_body_open', function() {
  ?>
  <!-- ここから挿入したいソースコードなどスタート -->
  <a class="pagetop" href="#"><div class="pagetop__arrow"></div></a>
  <!-- ここまで -->
  <?php
});

function add_link_files() {
  // CSSの読み込み
  wp_enqueue_style( 'my-style', get_template_directory_uri() . '/style.css' );
}

add_action( 'wp_enqueue_scripts', 'add_link_files' );

テーマCSS

管理画面の「管理画面>ツール>テーマファイルエディター」を選択して、「Stylesheet」を選択して編集する。

style.css


/* heade画像の角丸をなくす */
.wp-post-image{
border-radius: 0px;
}

/* ページトップに戻る*/
html {
    scroll-behavior: smooth;
}
.pagetop {
    height: 50px;
    width: 50px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    background: #fff;
    border: solid 2px #000;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.pagetop__arrow {
    height: 10px;
    width: 10px;
    border-top: 3px solid #000;
    border-right: 3px solid #000;
    transform: translateY(20%) rotate(-45deg);
}

.wp-site-blocks {
        margin-top: -20px;
}

/* マウスオーバーで色を変える */
@media (hover: hover) and (pointer: fine) {
    .pagetop:hover, .pagetop:hover .pagetop__arrow {
        border-color: #3293e7;
    }
}



:where(.wp-site-blocks) > :first-child {
  margin-block-start: -20px;
}        

/* マウスオンで画僧を暗くする */
.image-hober-shadow img:hover{
        opacity:0.5;
        transition:0.3s;
}

.user-select-none {
    user-select: none;
}

font

https://fonts.google.com

https://fontawesome.com

<i class="fa-solid fa-house"></i>

プラグイン

使用しているプラグイン

Simple CSS

サイト全体とページごとにCSSを追加出来る。

Flexible Spacer Block

XO Slider

サイト全体とページごとにCSSを追加出来る。

Flexible Table Block

タブスタイルでコンテンツを表示するためのカスタム Gutenberg ブロック
https://ja.wordpress.org/plugins/advanced-tabs-block/
タブデザインの参考例
https://webdesigngarden.com/blog02/

WP Fastest Cache

最もシンプルで速い WP キャッシュシステム

SEO SIMPLE PACK

とてもシンプルなSEOプラグインです。ページごとのmetaタグやOGPタグを簡単に設定・カスタマイズできます。

CSSの利用方法

電話番号の取り扱い

電話番号は

  • テキストコピーを防止
  • PCでの電話発信を無効にする

カテゴリー

カレンダー

2025年1月
 12345
6789101112
13141516171819
20212223242526
2728293031  

タグクラウド

css gutenberg html JavaScript カスタマイズ カラム テーマ プラグイン ページビルダー

Beabo

コンテンツへスキップ