サイト制作TIPS

HTML/CSS 一般記述例

参考サイト

サルワカ

上下左右中央寄せ参考サイト

蛍光ペン風マーカー

 

Flexbox

参考サイト

 

記述例

上下中央寄せ

vertical-align

div内での上下中央寄せ

display: table-cel; を追記することで vertical-align が効く

 

div の左寄せ・右寄せ・中央寄せ

ブロック要素にwidthを指定

  • 左寄せ:margin-right: auto;
  • 中央寄せ:margin-left: auto;  margin-right: auto;
  • 右寄せ:margin-left: auto;

 

aタグ

text-decoration: none;

color: inherit;

a:hover {
color: royalblue;
}

 

リスト
ul

list-style-type: none;

list-style-image: url ( );

li

display: inline-block;

 

リストイメージの縦方向中央揃え

li {
list-style-type: none;
background-image: url ();
background-repeat: no-repeat;
background-position: left center;
padding-left: ;
}

 

FAQテンプレート

.question {
list-style-type: none;
}

.question > li {
padding-left:40px;
background:url(http://...faq-q.png) no-repeat;
background-size:35px auto;
line-height:38px;
}

.answer {
list-style-type: none;
}

.answer > li {
padding-left:40px;
background:url(http://...faq-a.png) no-repeat;
background-size:35px auto;
line-height:38px;
}

 

tableの罫線

(1)divで囲んでidを指定

(2)css

#id table, #id td, #id th {
border: 1px solid #333;
}

 

一行でスタイル設定

<span style="font-size: 14pt; color: #0000ff;">文字</span>

 

見出しの右にイメージ

#top-mida h1::before {
content: url(http://cuco.jp/wp/wp-content/uploads/2020/01/health1-50.png);
vertical-align: middle;
padding-right:1em;
}

トップページのみ背景

.home main {
background:#222 !important;
}

参考サイト

 

メディアクエリ

全デバイス共通のCSS→スマホ向け

//幅768px以上に適用されるCSS(タブレットサイズ以上)

@media screen and (min-width:768px) {
}

//幅990px以上に適用されるCSS(PCサイズ以上)

@media screen and (min-width:990px) {
}

 

iframeのメディアクエリ

@media screen and (max-width: 600px) {
iframe {
width: 330px;
}
}

 

WPテーマ

AFFINGER5

ヘッダーメニューをセンター位置

header .smanone ul.menu {
display:flex;
justify-content:center;
}

ヘッダーメニューを一段に収める

header .smanone ul.menu {
display: flex;
text-align: center;
}

header .smanone ul.menu li {
width: 100%;
}

ヘッダーメニューの マウスオーバー

header .smanone ul.menu li a:hover {
background: #e57373;
}

ヘッダーをパララックス

参考サイト

 

Lightning

投稿ドロップキャップ解除

h1.entry-title:first-letter,
.single h1.entry-title:first-letter {
color:inherit;
}

フッターの背景色

.section.siteFooter{
background:#000000;
color:#ffffff;
}

フッターメニューの文字色

.widget_nav_menu ul li a {
color:#fff;
}

ヘッダーロゴ中央

参考サイト

ヘッダーの背景色(1)

.siteHeader {
background-color: #000;
}

ul.gMenu > li > a {
background-color:#000;
}

ヘッダーの背景色(2)

.navbar {
background: black;
}

ul.gMenu a {
background:#000000;
color:#ffffff;
}

.headerTop {
color: #fff;
background-color: #000;
margin-top: -7px;
border-bottom: 1px solid #f000;
}

ヘッダー右に連絡先や画像

参考サイト1

親テーマから子テーマにheader.phpコピー

<div class="container siteHeadContainer">
<div class="navbar-header">

上記の間に参考サイトのコードを挿入

参考サイト2

ヘッダーロゴのサイズ変更

.navbar-brand img {
max-height: 150px;
}

固定ページ見出し削除

.page-header_pageTitle, h1.page-header_pageTitle:first-child {
margin: 30px 0 25px;
font-size: 0px;
}

見出しの装飾クリア

.subSection-title:after, h3:after {
content: initial;;
line-height: initial;
display: initial;;
overflow: initial;
position: initial;
bottom: initial;
width: initial;
border-bottom: initial;
}

背景画像(ヘッダー)

.siteHeader {
background: url(http://...png);
}

背景画像(メインエリア)

functions.phpに以下のコードを記述

add_theme_support('custom-background');

「外観」→「カスタマイズ」に「背景画像」が表示

ヘッダー画像、スライドショー上の文字サイズ

.slide-text-title {
font-size: 3.0vw;
}

.slide-text-caption {
font-size: 1.6vw;
}

参考サイト

ロゴを原寸のまま表示

/*ロゴ画像を元画像どおりのサイズで表示*/

.navbar-brand img {
max-height: none !important;
}

参考サイト

コピーライト削除(無料版)

footer .copySection p:nth-child(2) {
display:none !important;
}

ヘッダー画像内タイトル位置

.slide-text-title {
margin-left: 50px;
}

.slide-text-caption {
margin-left: 50px;
}

.slide .btn-ghost {
margin-left: 50px;
}

Cocoon

テーブルの行を色違いさせない

.container table tr {
background-color: transparent;
}

 

STINGER8

参考サイト

ヘッダーロゴ画像

header.php内の46行目付近 <?php echo esc_attr( get_bloginfo( 'name' ) ); ?> をコメントアウト

<img src="https://.....png"> を挿入

 

投稿日、執筆者などを非表示

「個別投稿ページ page.php 」「個別投稿 single.php」内で、それぞれをコメントアウト

 

WPプラグイン

Contact form 7 / reCAPTCHA

reCAPTHA キー取得

https://www.google.com/recaptcha/admin/create

 

全てスパム判定の現象

https://nldot.info/contact-form-7-5-1-1-and-recaptcha-v3/#toc3

 

What The File

テーマで編集するファイルを見つけるプラグイン「What The File」

 

Tablepress

装飾参考サイト

 

表示幅

[table id=◯◯ column_widths="10%|10%|30%|40%|10%" /]

CSS記述サンプル

.tablepress-id-1 .row-2 .column-4,
.tablepress-id-1 .row-5 .column-3 {
background-color: #40E0D0 !important;
color: #ffffff !important;
}

レスポンシブ対応:拡張プラグイン

参考サイト

<記述の例>

[table id=sample1 responsive="phone" /]
ブレークポイント:768px

[table id=sample2 responsive="tablet" /]
ブレークポイント:980px

[table id=sample3 responsive="desktop" /]
ブレークポイント:1200px

 

CSSでスクロール

<div style="overflow: scroll;">
[table id=sample4 /]
</div>

 

上下中央揃え

.tablepress-id-2 td{
vertical-align:middle;
}

.tablepress-id-2 tbody td{
vertical-align:middle;
}

 

Google関連

Google Map API

【準備】

下記のページに接続し、「プロジェクトの選択」
https://console.cloud.google.com/?hl=ja

 

プロジェクト選択画面の「新しいプロジェクト」

 

【APIの有効化】

「Googleアカウント作成とプロジェクト作成」作業が完了していることが前提。
また、下記のGoogle APIコンソールに接続していることが前提。
https://console.cloud.google.com/?hl=ja

作成したプロジェクトが選択されていることを確認し、「APIとサービス」

「APIとサービスの有効化」

Maps Java Script APIを選択して、「有効にする」

【APIキーの作成】

「認証情報」リンクをクリックして、「認証情報を作成」メニューから「APIキー」を選択

 

Google カレンダー

style.css(1)

.cal_wrapper {
max-width: 960px; /* 最大幅 */
min-width: 300px; /* 最小幅 */
margin: 2.0833% auto;
}

.googlecal {
position: relative;
padding-bottom: 100%; /* 縦横比 */
height: 0;
}

.googlecal iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}

/* 画面幅が768px以上の場合の縦横比の指定 */

@media only screen and (min-width: 768px) {
.googlecal { padding-bottom: 75%; }
}

個別ページ

<div class=”cal_wrapper”>
<div class=”googlecal”>
<発行されるGoogleカレンダーのiframeのコード>
</div>
</div>

style.css(2)

/* Googleカレンダー */
.google-cal {
text-align:center;
}

.google-cal iframe {
width:98%;
height:600px;
}

@media (min-width: 768px) {
.google-cal {
text-align:left;
}

.google-cal iframe {
width:90%;
}
}

個別ページ(2)

<div class="google-cal">
<発行されるGoogleカレンダーのiframeのコード>
</div>

 

画像関連

WP画像の劣化防止

function.php に以下を追加

add_filter( 'jpeg_quality', function( $arg ){ return 100; } );

 

フォント関連

フォントの選び方

 

便利プラグイン

Category Order and Taxonomy Terms Order

Show Current Template

 

© 2020 ビュークリエイト