style.css ・ tag
> Master Course > style.css ・ tag◆Google の地図（画像でも可）をモノクロにする
マップのソースの style に追加する。
もしくは、テーマの style.css に追加する。
filter:grayscale(100%);-webkit-filter:grayscale(100%)
iframe{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}
◆page.php に追加（固定ページを100% 使うタグ）
<div id=”primary” style=”width: 100% !important;”>
◆表作成タグ
<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
border-radius: 50%; 画像など丸にする
background: rgba(255, 255, 255, 0.8);
!important 重なった場合優先するタグ ;（セミコロン） の前に半角空けて貼る
２段空けたい時のタグで、ビジュアルモードなら２回エンターを押すと自動でタグが入る
※テキストモードからビジュアルモードにして戻ると消えてしまう
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 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>