KURABIZ Template のバックアップ(No.1)

バックアップ一覧
差分を表示
現在との差分を表示
ソースを表示
KURABIZ Template へ行く。
- 1 (2018-10-19 (金) 13:47:37)
- 2 (2018-10-19 (金) 15:33:49)
- 3 (2018-10-19 (金) 17:58:18)

KURABIZ Template †

↑

インストール手順 †

↑

Wordpress初期設置（さくらインターネットの場合） †

サーバーコントロールパネル（https://secure.sakura.ad.jp/rscontrol/）にログイン。
左メニュー [アプリケーションの設定/データベースの設定] より｢データベースの設定」を確認。
データベースがない、または別途新しく作成する場合はデータベースを新規作成。
1. [データベースの新規作成] をクリック。
2. 各項目を入力、[同意する] にチェックを入れて [データベースを作成する] ボタンをクリック。※入力内容は任意。パスワードは必ず控えておく。
サーバーに、Wordpressをインストール。
1. 左メニュー [運用に便利なツール/クイックインストール] をクリック。
2. ｢カテゴリメニュー｣の [ブログ] をクリック。
3. [ WordPress] をクリック。
4. [確認] にチェック。以下の項目を入力し、[インストール] ボタンをクリック。
  - インストール先 ･･･ http://<設置するドメイン名>/<インストールするフォルダ名(任意 ※半角英数字)>
  - データベース ･･･使用するデータベースを選択
  - データベースパスワード ･･･（3）で作成したデータベースのパスワード
  - テーブルの接頭語 ･･･データテーブルの識別子（1つのデータベースで、複数のWordpressを管理している場合は、必ずユニークな文字列を入力）
5. ｢WordPress インストール完了｣で、[>> アプリケーションの設定へ進む <<] をクリック。
6. Wordpressのインストール画面で各項目を入力後、[Wordpressをインストール] ボタンをクリック。（ひとまず適当でOK）
7. インストール完了後、[ログイン] ボタンをクリック。

↑

.block †

適用タグを強制的にブロック化（display: block;）

↑

データベースの準備 †

サーバーコントロールパネル（https://secure.sakura.ad.jp/rscontrol/）にログイン。

左メニュー [運用に便利なツール/クイックインストール] をクリック

↑

.block †

適用タグを強制的にブロック化（display: block;）

↑

.inline-block †

適用タグを強制的にインラインブロック化（display: inline-block;）

↑

.pt-0 †

適用タグの上余白(padding-top) を強制的に打ち消し(0px)

↑

.pb-0 †

適用タグの下余白(padding-bottom) を強制的に打ち消し(0px)

↑

.space　 .space-half †

適用タグに余白(padding-top) を入れる。 ※単独で使用することで、行間に大きめの余白を入れることができる。

↑

.block-box †

適用タグの上下に大幅な余白を入れる。 ※主には、コンテンツ内のブロック分けで使用。 ※pt-0、またはpb-0を組み合わせることで、上(または下)のみに大幅な余白入れることができる。

↑

テキスト関連 †

↑

.font-(-3～0～7) †

適用タグ内のテキストのフォントサイズを(親要素に対する)相対値に設定。

		.font--3	.font--2	.font--1	.font-0	.font-1	.font-2	.font-3	.font-4	.font-5	.font-6	.font-7
設定値（相対）		0.625em	0.75em	0.875em	1em	1.125em	1.3125em	1.5em	1.875em	2.25em	3em	3.75em
相当値(約)	親要素が16pxの場合	10px	12px	14px	16px	18px	21px	24px	30px	36px	48px	60px
相当値(約)	〃が24pxの場合	15px	18px	21px	24px	27px	31px	36px	45px	54px	72px	90px

↑

.bold †

適用タグ内のテキストを太字に設定。

↑

.bold-off †

適用タグ内のテキストの太字を解除。 ※SEO的に使用する<strong>タグでインライン要素を太字にしたくない場合などに使用。

↑

.mincho †

適用タグ内のテキストを明朝体に設定。

↑

.tAc　 .tAl　 .tAr †

適用タグ内のインライン要素をセンタリング(.tAc)、左寄せ(.tAl)、右寄せ(.tAr)に設定。 ※スマホの場合は無効。

↑

.xtAc　 .xtAl　 .xtAr †

適用タグ内テキストをセンタリング(.xtAc)、左寄せ(.xtAl)、右寄せ(.xtAr)に設定。 ※端末にかかわらず常時有効。

↑

その他 †

↑

.remove †

（例えばSEO対策用に）テキスト要素を疑似画像化する場合の共通クラスとして使用。

.remove {

position: relative; /* 要素のrelative化 */

overflow: hidden; /* はみ出し要素を非表示 */

display: block; /* 要素をブロック化 */

width: 100%; /* 横幅を親要素いっぱいに */

height: 0; /* 高さを無効（個別にpadding-topを指定することで、親要素に合わせた等倍拡大縮小が可能） */

font-size: 0.5em; /* フォントサイズを極小に（0pxだとスパム判定になるのでこの数値） */

text-align: left; /* テキストを左寄せ */

text-indent: -9999px; /* テキストを要素外に飛ばす */

background-position: center; /* 背景を中央合わせ */

background-repeat: no-repeat; /* 背景の繰り返しなし */

background-size: cover; /* 縦横比はそのままで、領域いっぱいに背景を描画 */

}

※上記プロパティを要素ごとに個別に指定する必要がない。

使用例

↓html

<a href="http://kurabiz.jp/" id="test" class="relative block">

<span class="remove">SEO対策用の隠しテキスト</span>

</a>

↓CSS

#test { width: 300px; }

#test > span {

padding-top: 75%; /* 4:3の比率 */

background-image: url(../img/logo.png);

}

※各要素ごとに余白値と背景画像を設定するだけ。

このページを編集

KURABIZ Template のバックアップ(No.1)