◆頻繁に使うタグは手打ちできるように慣れておく( 半角の <> の中に入れる)
div, p, span などの属性 /div, /p, /span で閉じる
img src=" " 画像ソース
a href=" " リンク
style=" " スタイル設定
class=" " クラス設定
color:#****; 色の指定
font
margin padding 余白設定
width height 幅と高さ設定
left right center 位置の設定
◆よく使うタグ
!important 重なった場合優先するタグ ; の前に半角空けて貼る
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