design

css table レスポンシブデザイン 0001

<style> .fa.fa-arrow-circle-o-right {color:#008fde; margin-right: 10px;font-size:22px;} .t_table_01 {width: 100%; } .t_table_01 tr {border-bottom: 2px solid #dedede;} .t_table_01 th {padding: 20px;width: 30%;border-bottom: 2.5px solid #dedede; ma…

wordpress ビズベクトル ヘッダー画像の大きさを変える

/* ヘッダー画像のサイズを変更 */ function my_biz_vektor_customheader_size() { return array(1500, 300); } add_filter('biz_vektor_customheader_size', 'my_biz_vektor_customheader_size');

wordpress テンプレート ビズベクトル 全体100% css

全体の幅を100%にする /* 外枠を100%に */#headerTop,#header,#topMainBnrFrame,#topMainBnr img,#main,#footMenu{ width: 100% !important;} /* 内枠を少し小さく */.innerBox,#header .innerBox,#pageTitBnr .innerBox,#panList .innerBox,#footMenu .inne…

CSS テーブル レスポンシブ

<style> .box_A {width:100%;} .box_b {width:45%; float:left;margin-right: 20px;} .boxb p {font-size: 28px; color:#008fde;} .box_bb {width:45%;float: left;} .t-table{width: 100%;max-width: 100%; margin-bottom: 20px;} .t-table th{border-top: 1px sol…

WordPRESS 日付別 条件分岐タグ

・日付別アーカイブページが表示されている場合(例:月、年、日、時間) is_data() ----- ・年別アーカイブが表示されている場合 is_year() ----- ・月別アーカイブページが表示されている場合 is_month() ----- ・日別のアーカイブが表示されている場合 is…

WordPRESS サムネイル

<div class="th_img_top"> <figure> <a href="<?php the_permalink(); ?>"></a> <a href="<?php the_permalink(); ?>"><img src="<?php echo get_template_directory_uri(); ?>/img/noimage_180x180.png" height="180" width="180"></a> …</figure></div>

テンプレートパーツの読み込み 作成

loop-main.phpを読み込む 任意のテンプレート名-任意の名前.php get_template_part('loop', 'main');

sidebar.php 月別アーカイブ 表示

single.php ------ ------ sidebar-archives.php <ul> 'monthly', // 月別を指定 'show_post_count' => true, // 投稿数を表示 ); wp_get_archives($args); ?> </ul>

wordpress sidebar.php カテゴリー 一覧読み込み

single.php ----- <div> </div> ------ sidebar-categories.php <section> <h1>カテゴリー一覧</h1> <ul> '', // 見出しを削除 'show_count' => true, // 投稿ス ); wp_list_categories($args); ?> </ul> </section>

WordPRESS テンプレ コピペ用

<img src="<?php echo get_template_directory_uri(); ?>/img/" alt=""> ---- <p></p> ----- <title> -----

WordPRESS sidebar.php

<div class="side_content"></div>

WordPRESS テンプレ css

/*--------------------- wp tossy ----------------------*/ /* コンテイナー */.container{width: 1000px; margin-left:auto; margin-right: auto;} /*- コンテンツ */.content{padding:0; box-sizing:border-box;} /*-- gaiyou large 大サイズ */.gaiyou-…

jQuery デバイス 判別

<p><img src="img/p_sp.jp" class="switch"></p> <styel> .switch{visibility: hidden; } </style> var setImg = $('.switch') , namePc = '_pc' , // PC用 nameSp = '_sp' , // スマホ用 switchwidth = 767; // 判別 setImg.each(function(){ var selfImg = $(this); function switchImg() { if(window.innerWidth > swit…

WordPRESS header.php メタ og

・og:type 記事の種類。 content属性値:ブログや、ニュースの記事はarticleと指定。 ------ ・og:title 記事のタイトル。 で記事のタイトルを出力。 ------ ・og:url 記事のURL。 で記事の個別URLを出力。 ------- ・og:description 記事の概要。 で記事の…

wordpress メモリンク

・高さをそろえる 参考 [jQuery] レスポンシブ:複数横並びdiv枠の高さを取得、最大値に揃える | ジュウロクデザイン www.webantena.net ---------- ・home.php に固定ページ出力 [WordPress]特定の固定ページの内容を取得して表示する | ホームページ制作 W…

wordpress ショートコード home.phpに出力

ショートコードを do_shortcode() 関数に引数として渡して、その出力を表示する必要があります。次のように: 1

WordPRESS カテゴリー テンプレタグ

single.php ◯記事が属するカテゴリーIDを取得 term_id; } } ?> /* get_the_category()で表示中の記事が属するカテゴリーに関するデータを取得し、IDを取り出して、$catkwdsに代入する。記事が複数の場合カテゴリーに属している場合は、すべてのカテゴリーID…

single.php ページ分岐

<h3 style="margin:5px;padding:0;">関連動画</h3> <div class="gr3 clearfix"> <div> 2, // 表示件数 'category' => 23, // カテゴリIDもしくはスラッグ名 'order' => 'ASC' )); ?> </div></div>

jQuery アニメーション メモ

<html lang="ja"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css/style.css"> </link></meta></meta></meta></head></html>

wordpress サムネイル メモ

functions.php /* 再度作成するサムネイルのサイズ設定 */ // 'large-feature'という名前で幅300px、高さ200pxのサムネイルを作成 add_image_size( 'large-feature', 300, 200 ); // 'middle-feature'という名前で幅200px、高さ100pxのサムネイルを作成 add_…

wordpress 文字数制限 PHP mb_strimwidth

1 2 3 4 5 6 //抜粋文の文字制限 add_filter('the_excerpt', 'my_the_excerpt'); function my_the_excerpt($postContent) { $postContent = mb_strimwidth($postContent, 0, 140, "…","UTF-8"); return $postContent; }

wordpress TOP メモ home.php

<div id="main_sec" class="main_section_<?php if ( get_option( 'column_position' ) == 0 ) : ?>0<?php endif; ?><?php if ( get_option( 'column_position' ) == 1 ) : ?>1<?php endif; ?>"> <h1 class="m1">見直し実績 2405社 見直しポイント<…</h1></div>

memo wordpress トップページ

<div id="main_sec" class="main_section_<?php if ( get_option( 'column_position' ) == 0 ) : ?>0<?php endif; ?><?php if ( get_option( 'column_position' ) == 1 ) : ?>1<?php endif; ?>"> <h1 class="m1"></h1> </div>

JS メモ web

<script type="text/javascript">/* 消し */$(document).ready(function(){jQuery("#got").delay(7000).fadeOut(1000);});</script> <script>/*-- 画面サイズ ピシャリ ---*/$(function(){ $(document).ready(function(){ hsize = $(window).height(); $("#to_img").css("height",hsize + "px"); }); $(window…

jQuery パララックス下地

<section> <div class="scrEvent area1"><p>コンテンツエリア_1</p></div> <div class="scrEvent area2"><p>コンテンツエリア_2</p></div> <div class="scrEvent area3"><p>コンテンツエリア_3</p></div> <div class="scrEvent area4"><p>コンテンツエリア_4</p></div> <div class="scrEvent area5"><p>コンテンツエリア_5</p></div> </section>

jQuery 2月メモ 01

<html lang="ja"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css/style.css"> </link></meta></meta></meta></head></html>

jQuery アンカー先情報 ニュースティッカー

<html lang="ja"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> </meta></meta></meta></head></html>

jQuery animate hover メモ

<html lang="ja"> <head> <meta charset="utf-8"> <title>Jquery メモ</title> <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script> </head> <body> <style>/*- fadeBTN フェードボタン hover*/ .fadeB…</body></html>

Jquery hover メモ

html ----- <html lang="ja"> <head> <meta charset="utf-8"> <title>ホバーで表示</title> <link rel="stylesheet" href="css/style.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> </head> <body> <div class="col-4 gallery-item"> </div></body></html>

HTML CSS メモ

html ----- <html lang="ja"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css/youso.css"> <title>CSS 子要素</title></head><body> <ul> <li>HELOO</li> </ul></body></html>

レスポンシブ メニュー 3

<html lang="ja"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css/font-awesome.min.css"> <title>ハンバーガーメニュー 2</title> <style> body { padding: 0; mar…</link></meta></meta></meta></head></html>

jQuery memo_03 hover

index.html ----- <html lang="ja"> <head> <meta charset="utf-8"> <title>ホバーで表示</title> <link rel="stylesheet" href="css/style.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> </head> <body> <div class="col-4 gallery-item"> </div></body></html>

jQuery memo_02

index.html --- <html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/style.css"> <title>クリックで表示</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> </head> <body> <div id="read-more">もっと読む</div> <div id="more-text">…</div></body></html>

css memo 2*2カラム

.container { .container width: 1170px; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } .interview-box { display: inline-block; vertical-align: top; width: 44%; margin-left: 65px; margin-bottom: 60px; -----…