スタイルシート・タグ

table {border: solid 1px #555555; border-collapse: collapse;}
td {border: solid 1px #555555; padding: 5px 15px;}
th { border: solid 1px #555555; text-align-last: center; font-weight: 500; }

caption,
td {
font-weight: normal;
text-align: left;

}

※スタイルシートの下記の段を削除

73/ 75/ 78/ 79/ 80/
345 の th 全部


<table>
<tbody>
<tr>
<td></td><td>

</td>
</tr>
</tbody>
</table>

補足
半角のカタカナは使わない
半角の &(and) \ (円マーク) % などは文字化けするので、全角もしくはコードを使う
特殊文字リファレンス
文字間の余白は、半角・・・一回のみ有効/全角・・・回数分有効

◆頻繁に使うタグは手打ちできるように慣れておく( 半角の <> の中に入れる)

div, p, span などの属性 /div, /p, /span で閉じる ※タグは全て半角です

img src=” “  画像ソース
a href=” “   リンク
style=” “ スタイル設定
class=” “   クラス設定
color:#****;  色の指定
font
margin padding   余白設定
width  height   幅と高さ設定
left right center 位置の設定

◆よく使うタグ

background:url(http://interior-washio.tank.jp/wp-content/uploads/2018/03/mono.jpg) no-repeat scroll top center #ffffff; background-size:cover

!important  重なった場合優先するタグ ;(セミコロン) の前に半角空けて貼る
&nbsp;   2段空けたい時のタグで、ビジュアルモードなら2回エンターを押すと自動でタグが入る
※テキストモードからビジュアルモードにして戻ると消えてしまう
target=”_blank” 外部リンク先を別タブで開く(wordpress の編集画面は外部リンク選択有)
<hr />   水平線
<div style=”clear: both”;></div>  回りこみを防ぐセットでコピーして貼り付ける
※画像の配置やブロックを並べた場合、その下の回り込みを防ぎたいときに使う

◆フォント

読みやすいゴシック系
font-family: Meiryo,‘メイリオ’, Hiragino Kaku Gothic Pro, ‘ヒラギノ角ゴ Pro W3’,sans-serif;

明朝系(見出しによく使うが、線が細くなるので、サイズや太さ、色でカバーする)
font-family: YuMincho,Yu Mincho,’游明朝’,”ヒラギノ明朝 ProN W6″,HiraMinProN-W6,”HG明朝E”,”MS P明朝”,MS PMincho,”MS 明朝”,serif;

font-weight: bold;    フォント太
font-weight: normal;   h・・・に指定の太さ普通
letter-spacing: 0.1em;  文字間隔
line-height: 1.7;      行間 100% と 1 はフォントサイズと同じで他に 15px・・・フォントより大きく指定
font-size: 12px;     フォントの大きさ(12pxは標準)
color: #555555;      フォントの色 (# は16進法 原色の色名 red などでも表記できる)
vertical-align: baseline; テキストなどの位置指定 右は right 指定しなければ左寄せ
vertical-align: middle; 画像に対しての高さ位置指定 top middle bottom (上 真ん中 下)
font-style: italic;    イタリック
text-align:justify; text-justify:inter-ideograph; 長文などで改行した際の幅揃え(英字は単語単位になるので使わない)

◆英単語表記

text-transform: none; 記述した通りに表示します。これが初期値です。
text-transform: capitalize; 単語の先頭文字を大文字で表示します。
text-transform: lowercase; 全てを小文字で表示します。
text-transform: uppercase; 全てを大文字で表示します。

◆ヘッダー情報追加

<meta name=”description” content=”検索した際のコピー文”>
<meta name=”keywords” content=”複数のキーワードをカンマで区切る”>

◆フッターにキャッシュ

<?php echo get_theme_mod(“prestro_copyright”,’Copyright © ‘. date_i18n( ‘Y’ ) .’ サイト名 All Rights Reserved. Since_開設年月 ‘,”); ?>

◆リンク

a,
a:visited {
color: #7599c5;
text-decoration: none; underline
}
a:hover,
a:focus,
a:active {
color: #424242;
text-decoration: none;
outline: 0;
}
a:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}

TELリンク(携帯からアクセル用に)
<a href=”tel:電話番号”>ここをクリック</a>

トップに戻る
戻りたい位置へ <a name=”top”></a>
<div style=”text-align: right;”><a href=”#top”>▲TOP</a></div>
<a name=”section-319″></a>
<a href=”#privacy” title=””>

◆透過色・フィルター

background: rgba(255, 255, 255, 0.7);
background-color:#89B6AD; filter:alpha(opacity=80);-moz-opacity:0.8; opacity:0.8;

◆余白 上から時計回りで設定

margin: ***;   使うスペース外の余白(ボックス内の幅に含まれる)
padding: ***;   使うスペース内の余白(幅に含まれる)

※上・下・左・右が同じ   margin: 10px 0 20px 15px;
※上下と左右が同じ     margin: 10px 20px;
※上下が違い左右は同じ   margin: 10px 20px;

width: ***px;       幅指定(単位は px が分かりやすい)
heght: ***px;       高さ指定
background: #******;  背景の色(# は16進法で6桁 3桁・もしくは色単語)
background: transparent; 透明
text-align: ***;   テキストなどの位置指定 right center 指定しなければ左寄せ
vertical-align: ***; 並んだ画像やブロックの高さを揃える指定 top center bottom (上 真ん中 下)

display: inline;     ブロックを横並びにする
display: none;      表示させない
visibility:collapse;   **
clear: both;       回りこみを防ぐ

◆ボーダー関連(上下左右指定、指定しなければ四方になる)

border: 1px solid #ededed;  線の高さ・種類・色の順 solid・点線の種類 double dotted
border-top: 1px solid #ddd;  上だけボーダー/ top right left bottom
borde: none;         ボーダー無し(画像で使われることが多い)

◆背景・フィルター

※<body> とは、ブラウザ(IE・Google Ahrome・ Mozilla Firefox など)のウィンドウ全体のこと
※サイトで使う領域と各ブロック(ヘッダー・コンテンツ・メイン・サイドバー・フッター)

background: #******;   #555555 のように同じ数値の場合は #555 と省略できる

background: rgba(250, 250, 250, 0.4);・・・(16進法の R, G, B, 濃度)
※透過色は、ヘッダー画像とメニューなどブロックの重なりで使うことが多い
#2356fb などの16進法から調べるサイト WEB 色見本

◆画像にフィルター

img src=”フィルターを掛ける画像” width=”横サイズ” height=”縦サイズ” style=”filter: 色();”

◆閉じるボタン

<input type=”button” onclick=”window.close()” value=” 閉じる ”></div>

◆Googl map・You Tube

どちらも「共有」で埋め込みコードをコピーして、テキストモードでリンクを貼る
更新すると、ページや投稿記事に反映される
サイズは、width(幅) height(高さ)で指定できるが、地図の幅に関しては 100% で

◆プラグインの Sugar Events Calendar Lite for WordPress を一部カスタマイズ

コピーしてスタイルシートの一番下にペースト
※現在 wordpress がサポートを切っていてダウンロードできない
#wp-calendar a { color: #777; }
#sc_events_calendar_head {
height: 55px;
padding-bottom: 10px;
}
#sc_calendar_title {
font-family: “Open Sans”, sans-serif;
font-size: 20px;
font-weight: 400;
padding-top: 10px;
}
.calendar-day-head { ont-weight: 400;
}


◆iframe・・・部分的に他のページを入れたい時(wordpressでは使わない)

<iframe src=”ファイルの場所と名.html” name=”ファイル名.html” scrolling=”no” frameborder=”0″ marginwidth=”0″ marginheight=”0″ width=”300″ height=”460″ align=”center” alt=””>
</iframe>

◆BGM挿入 mp3・・・最近はBGMを使わない

<BGSOUND SRC=”mp3の名前” LOOP=”回数”>
コントロールバー
<EMBED SRC=”データの場所/データの名前” PANEL=”0″ AUTOSTART=”true” REPEAT=”2″ LOOP=”2>