ヘッダー
ヘッダーロゴをPCとモバイルで使い分ける
❷ 同じく1023px以下でモバイル用のロゴを表示させる
❶ 画面の幅が1023px以下で通常のロゴを消す
/1023px以下でロゴを消す/
@media screen and (max-width: 1023px){
img.site-logo-image{
visibility: hidden;
}
}
/1023px以下でモバイル用のロゴ表示/
@media screen and (max-width: 1023px){
.logo-menu-button.menu-button{
background-image: url(https://paybackforex.net/wp-content/uploads/2022/12/5b2c99075f217de00a3d0ee0d94201b5.png);
background-size: auto 30px;
background-position: center;
background-repeat: no-repeat;
}
}
.header-in {
position: relative;
}
.header-in .search-box {
position: absolute;
top: 50%;
right: 16px;
margin: 0;
width: 280px;
transform: translateY(-50%);
}
.header-in input[type=”text”] {
padding: 8px 14px 8px 40px;
font-size: 14px;
background: #edf6f9;
border: 1px solid #9fcde1;
border-radius: 16px 16px 16px 16px / 50% 50% 50% 50%;
}
.header-in .search-submit {
left: 3px;
right: auto;
color: #378cb0;
}
/1023px以下/
@media screen and (max-width: 1023px) {
.header-in .search-box {
display: none;
}
}
トップページ
トップページに新着情報を表示する
ずっと右から左に流れ続けるアニメーション（追加CSSのみ）
.slider1 {
display: flex;
margin: 0 calc(50% - 50vw);
width: 100vw;
height:200px;
overflow: hidden;
}
.slider1 ul{
display:flex;
padding: 0;
margin:0;
}
.slider1 li{
width:300px;
list-style: none;
}
.slider1 ul:first-child {
animation: slide1 150s -75s linear infinite;
}
.slider1 ul:last-child {
animation: slide2 150s linear infinite;
}
@keyframes slide1 {
0% {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}
@keyframes slide2 {
0% {
transform: translateX(0);
}
to {
transform: translateX(-200%);
}
}
CSSのアニメーションを使って、2セットのスライド画像を途切れ
フッター
フッター ロゴ右 メニュー＆クレジット中央配置
.footer {
margin-top: 40px; /フッターとコンテンツの間に余白追加/
background: #08F7FE; /フッター背景色/
border-top: 4px solid #08F7FE; /上部にボーダー追加/
}
.footer-bottom {
margin-top: 14px; /フッター内上部の余白を詰める/
}
.footer-bottom-logo .logo-image {
padding: 0;
max-width: 500px; /ロゴ画像を少し大きく/
margin: 0 auto;
}
.footer-bottom-content { /メニュー＆クレジットの位置調整/
float: none;
text-align: center;
}
.navi-footer-in > .menu-footer { /メニューの位置調整/
justify-content: center;
margin-bottom: 1em;
}
.navi-footer-in a {
color: #aab3b9; /メニューの文字色/
}
.navi-footer-in a:hover { /メニューのマウスホバー時の指定/
color: #aab3b9; /文字色を通常時と同じに/
background: none; /背景色をなしに/
text-decoration: underline; /アンダーラインを追加/
}
.footer-bottom.fnm-text-width .menu-footer li {
line-height: 1; /メニューの区切りボーダーの高さを1文字分にする/
}
.copyright {
color: #aab3b9; /クレジットの文字色/
}
@media screen and (max-width: 834px) {
.navi-footer-in > .menu-footer li.menu-item {
border: none; /モバイルでメニューのボーダーを消す/
}
}
@media screen and (max-width: 460px) {
.navi-footer-in > .menu-footer li.menu-item { /モバイルでメニューを1カラムにする/
width: 100%;
display: block;
flex: auto;
padding: 0.3em 0;
}
}
トップページに戻るボタン変更
/************************************************
トップへ戻るボタン
*************************************************/
.go-to-top {
right: 20px; /*右から20px*/
bottom: 55px; /*下から55px*/
}
.go-to-top-button {
border-radius: 50%; /*丸くする*/
width: 60px; /*横幅*/
height: 60px; /*高さ*/
font-size: 30px; /*アイコンフォントのサイズ*/
opacity:0.9; /*透明度*/
box-shadow: 2px 2px 4px rgba(0, 0, 0, .2); /*影*/
}
/*ホバー時*/
.go-to-top-button:hover {
color: #333; /*アイコンフォントの色*/
background-color:#aaa; /*背景色*/
}フッターデザイン数種類をCSS付きで解説
画像横並びはギャラリーでできる
グローバルメニュー
ヘッダーとグローバルメニューの間に余白を入れる
#header
border-bottom: solid 2px #ffffff
}
グローバルメニュー左右(外側も含め)を縦ラインで区切る
#navi .navi-in > ul > li{
border-right: 1px solid #000000;
}
#navi .navi-in > ul > li:last-child{
border-right-width: 0;
}
.navi-in > ul > .menu-item-has-children > a::after{
right: 10px;
}
グローバルメニューを縦ラインで区切る
#navi .navi-in > ul > li{
border-right: 1px solid #000000;
}
#navi .navi-in > ul > li:last-child{
border-right-width: 0;
}
.navi-in > ul > .menu-item-has-children > a::after{
right: 10px;
}
グローバルメニューメニューの間隔
/*グローバルナビメニュー メニュー項目の間隔*/
#navi .navi-in>ul>li>a{
padding: 0 2.0em;
}
選択中のグローバルメニューにアンダーラインを出す
/*グローバルナビメニュー マウスオーバーでアンダーライン*/
#navi .navi-in a:after{
position: absolute;/*線の位置を絶対配置に*/
content: “”;/*文字はなし*/
left: 0px;/*線の位置*/
bottom: 1px;/*線の位置*/
height: 1px;/*線の高さ*/
width: 100%;/*幅いっぱいに線を引く*/
background: #1b68ae;/*線の色*/
transform: scale(0,1);/*マウスオーバーの前は線を消す*/
transition: 0.3s;/*線が0→100%になるまでの秒数*/ }
#navi .navi-in a:hover:after{
transform: scale(1);/*マウスオーバー後、線を100%出す*/
}
グローバルメニュー選択中のカテゴリーがわかるアンダーライン
/*選択中のカテゴリーにアンダーライン*/
.current-menu-item:not(:first-child):after{
position: absolute;/*線の位置を絶対配置に*/
content: “”;/*文字はなし*/
left: 0px;/*線の位置*/
bottom: 1px;/*線の位置*/
height: 1.5px;/*線の高さ*/
width: 100%;/*幅いっぱいに線を引く*/
background: #1b68ae;/*線の色*/
}
グローバルメニュー背景の高さ
/* メニューバー背景の高さ */
.navi-in>ul li {
height: 40px;
line-height: 40px;
}
グローバルメニューマウスオーバー時 背景色と文字色が変わる
#navi .navi-in a:hover{
color: #ff0000!important; background:
#000000; transition: all 0.5s ease;
}
グローバルメニュー 文字サイズ変更
#navi .navi-in >
.menu-header .item-label{
font-size: 13px;
}
グローバルナビ（メニューバー）の上下に線を入れるカスタマイズ
nav#navi, .menu-header .sub-menu{
border-bottom:1px solid #ffffff;
border-top:1px solid #ffffff;
}
※黄色アンダーライン部は自分で追加入力 lineの色を指定する
グローバルメニュー色グラデーション
.navi {
background-image: linear-gradient(to right, #3ab5b0 0%, #3d99be 31%, #56317a 100%);
}
上記の｛｝の間に
HTML色彩コードを貼り付ける。
グローバルメニュー 上下
/*グローバルメニューのグラデーション*/
.navi.cf{
background-image: linear-gradient(#ffffff 0%, #4D4D4F 40%, #000000 100%);
}グローバルメニューグラデーション 左右
/*グローバルメニューのグラデーション（左右）*/
#navi.navi.cf{
background-image: linear-gradient(to right, #ffffff 0%, #4D4D4F 40%, #000000 100%);
}グローバルメニュー アイコン
アイコン設置方法
アイコンサイト
グローバルメニュー：サブメニュー
サブメニュー 背景・区切り線
/
** ●ヘッダーサブメニューのカスタマイズ
/
.sub-menu {
background-color: #282728!important; /背景色/
}
.navi-in>ul .sub-menu li {
border-bottom: 2px groove #000000!important; /パーティション（仕切り線）/
height: 45px; /高さ/
}
#navi .navi-in > ul > li{
border-left: 1px solid #eee;
}
#navi .navi-in > ul > li:last-child{
border-right: 1px solid #eee;
}
.navi-in > ul > .menu-item-has-children > a::after{
right: 10px;
}
固定ページ
固定ページ事に表示するカテゴリ
無限スライドショー 【横に流れる】
固定ページに記事の一覧を挿入する
ウィジェット
サイドバー
サイドバー 文字色・線・背景・文字の位置
.sidebar h3{
background-color:#000000;/*好きな背景色にする*/
padding:7px 10px;/*見出しの内側の余白を調整する*/
text-align:center;
margin:16px 0;
}
#sidebar{
text-align:center;/*中央配置*/
}
サイドバー フォントサイズ
.sidebar .widget-entry-card-title{
font-size: 80%; /* 通常の80％のサイズとします */
}
.widget-sidebar ul li a {
font-size: 0.9em;
}
サイドバーにTwitterのタイムラインを表示
ページネーションのカスタマイズ
.pagination-next-link {
background-color: #49add1;
color: #fff;
border: none;
border-radius: 30px;
}
.pagination-next-link:hover {
background-color: #68caee;
transition: all 0.5s ease;
color: #fff;
}
.page-numbers {
color: #49add1;
border: 1px solid #49add1;
border-radius: 50%;
}
.pagination .current {
background-color: #49add1;
color: #fff;
}
.page-numbers.dots {
opacity: 1;
background: none;
}
.pagination a:hover {
background-color: #49add1;
color: #fff;
}
フォント
フォントサイズ
#sidebar {
font-size: 16px;
}
Style CSS
@charset "UTF-8";
/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template: cocoon-master
Version: 1.1.3
*/
.header-in .tagline {
text-align:left;
padding-left: 10px;
}
.header-in .logo {
text-align: left;
padding-left: 5px ;
}
functions.php
<?php //子テーマ用関数
if ( !defined( 'ABSPATH' ) ) exit;
//子テーマ用のビジュアルエディタースタイルを適用
add_editor_style();
//以下に子テーマ用の関数を書く
add_theme_support( 'custom-header' );
//ウィジェットを作成
if ( !function_exists( 'register_header_widget_area' ) ):
function register_header_widget_area(){
register_sidebars(1,
array(
'name' =>'ヘッダーエリア',
'id' => 'header-widget',
'description' => 'ヘッダーに表示するコンテンツエリアです。',
'before_widget' => '<aside id="%1$s" class="widget widget-header widget-header-area %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-header-area-title widget-title">',
'after_title' => '</h3>',
));
}
endif;
register_header_widget_area();
function add_header_contents() {
get_template_part('searchform');
}
add_filter('wp_header_logo_after_open','add_header_contents', 10, 2);
main-before.php
アピールエリアをスライドショーにする
<?php
echo do_shortcode('[ここにショートコード入力]');
?>
その他
ブログの文章コピー不可
/**********************
コピー防止
***********************/
.entry-content {
user-select:none;
-moz-user-select:none;
-webkit-user-select:none;
-khtml-user-select:none;
}
①画像の保存はできる
②印刷はできる
画像保存・印刷もできないようにするには、プラグインで
WP Content Copy Protection & No Right Click
を追加する
背景に雪を降らせる
通知エリアを横に流れるようにする
私の場合何度も試しましたが、子テーマに【tmp】ファイルを作成し、「notice.php」をコピペしたのですが、どうしても反映されず、親テーマの「notice.php」を変更しています。
24行目にある「$msg」を「”<span>{$msg}</span>”」に書き換えて保存しています。
変更前親テーマ tmp>ntice.php
<div id="notice-area" class="notice-area nt-<?php echo get_notice_type(); ?>">
<?php echo $msg; ?>
</div>
変更後親テーマ tmp>ntice.php
<div id="notice-area" class="notice-area nt-<?php echo get_notice_type(); ?>">
<?php echo "<span>{$msg}</span>"; ?>
</div>
親テーマをいじると崩れることがありますので、もし親テーマを変更しくずれてしまったら
上記のCSSをコピペしてもとに戻してください。
23行目から25行目を上書保存でなおります。
cocoonの機能を紹介しているサイト様
cocoon機能
タブ見出しボックス カラー変更
/****************
タブ見出しボックス
****************/
.tab-caption-box-label{
padding: 6px 16px; /*タブ内側余白*/
font-size: 16px; /*タイトル文字の大きさ*/
font-weight: bold; /*タイトル文字の太さ*/
border-radius: 4px 4px 0px 0px; /*タブ角丸*/
}
.tab-caption-box-content {
position: relative; /*配置に関するもの（ここを基準に）*/
top: 1px; /*上から(1px）移動*/
border: 2px solid; /*ボックス線*/
padding: 48px 24px; /*ボックス内側余白*/
border-radius: 4px; /*ボックス角丸*/
border-top-left-radius: 0px; /*ボックス左上角丸*/
}
コメント