スタイルシート・タグ

◆頻繁に使うタグは手打ちできるように慣れておく( 半角の <> の中に入れる)
div, p, span などの属性 /div, /p, /span で閉じる

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

◆よく使うタグ

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

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

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>

補足半角のカタカナは使わない
   半角の & \ % などは文字化けするので、全角もしくは「キーワード」を使う ⇒ 特殊文字リファレンス

   文字間の余白は、半角・・・一回のみ有効/全角・・・回数分有効
   px, em などの単位換算
   facebook 埋め込みタイムライン
   Instagram は仕様変更でマイページで取得もしくはプラグインにて
   QRコード作成
   連続のコピ・ペは、ショートカットキーを使う・・・ctrl + c/ctrl + v