HTML/CSS

aタグに指定
<a href="#" class="selectBtn">選択</a>
inputタグに指定
<form action="#">
<input class="selectBtn" name="input" type="submit" value="選択" />
</form>

aタグに指定

inputタグに指定

</form>

/*
選択ボタン
デザイン上青色グラデーションのボタン
*/
.selectBtn, a.selectBtn {
	display: inline-block;
	cursor: pointer;
	background: #0058D4;
	background: -moz-linear-gradient(#639FE8, #0058D4);
	background: -webkit-gradient(linear, left top, left bottom, from(#639FE8), to(#0058D4));
	border: none;
	color: #FFF;
	font-weight: 400;
	font-size: 16px;
	font-family: "メイリオ", "Meiryo", verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
	text-align: center;
	line-height: 100%;
	padding: 18px 0px 16px;
	width: 7em;
}
.selectBtnKanri:hover, a.selectBtnKanri:hover {
	background: #3280E2;
	background: -moz-linear-gradient(#94BDEF, #3280E2);
	background: -webkit-gradient(linear, left top, left bottom, from(#94BDEF), to(#3280E2));
	text-decoration: none;
}

選択ボタン

デザイン上青色グラデーションのボタン

.selectBtn, a.selectBtn {

display: inline-block;

cursor: pointer;

background: #0058D4;

background: -moz-linear-gradient(#639FE8, #0058D4);

background: -webkit-gradient(linear, left top, left bottom, from(#639FE8), to(#0058D4));

border: none;

color: #FFF;

font-weight: 400;

font-size: 16px;

font-family: "メイリオ", "Meiryo", verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳＰゴシック", "MS PGothic", Sans-Serif;

text-align: center;

line-height: 100%;

padding: 18px 0px 16px;

width: 7em;

}

.selectBtnKanri:hover, a.selectBtnKanri:hover {

background: #3280E2;

background: -moz-linear-gradient(#94BDEF, #3280E2);

background: -webkit-gradient(linear, left top, left bottom, from(#94BDEF), to(#3280E2));

text-decoration: none;

}

未分類

WordPressの投稿記事にプログラミングソースを書く方法

2015年2月28日 yellow

WordPressのプラグイン「Crayon Syntax Highlighter」を使う

[操作手順]
→プラグイン「Crayon Syntax Highlighter」をインストールする。

→プラグイン「Crayon Syntax Highlighter」を有効にする。
※→WordPressログイン＞プラグイン　の順にアクセスして、対象の有効化ボタンを押す

→WordPressログイン＞投稿＞新規追加＞テキストタブ＞crayonボタン（灰色ボタン）　の順にアクセスする。

→Crayon Syntax Highlighterの「挿入画面」の窓が現れる。

→コード「ここに、コードを記入してください。」　の箇所に投稿するソースコードを書く。

→右上の挿入ボタン（黒色ボタン）を押す。

→WordPressの新規投稿フォームにコードが挿入される。

→公開ボタン（青色ボタン）を押す。

以上で完了です。

以下のような投稿記事を書けるようになります。

ボタンの実物

選択

<a href="#" class="selectBtn">選択</a>

1	<a href="#" class="selectBtn">選択</a>

/*
選択ボタン
デザイン上青色グラデーションのボタン
*/
.selectBtn, a.selectBtn {
	display: inline-block;
	cursor: pointer;
	background: #0058D4;
	background: -moz-linear-gradient(#639FE8, #0058D4);
	background: -webkit-gradient(linear, left top, left bottom, from(#639FE8), to(#0058D4));
	border: none;
	color: #FFF;
	font-weight: 400;
	font-size: 16px;
	font-family: "メイリオ", "Meiryo", verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
	text-align: center;
	line-height: 100%;
	padding: 18px 0px 16px;
	width: 7em;
}
.selectBtnKanri:hover, a.selectBtnKanri:hover {
	background: #3280E2;
	background: -moz-linear-gradient(#94BDEF, #3280E2);
	background: -webkit-gradient(linear, left top, left bottom, from(#94BDEF), to(#3280E2));
	text-decoration: none;
}

選択ボタン

デザイン上青色グラデーションのボタン

.selectBtn, a.selectBtn {

display: inline-block;

cursor: pointer;

background: #0058D4;

background: -moz-linear-gradient(#639FE8, #0058D4);

background: -webkit-gradient(linear, left top, left bottom, from(#639FE8), to(#0058D4));

border: none;

color: #FFF;

font-weight: 400;

font-size: 16px;

text-align: center;

line-height: 100%;

padding: 18px 0px 16px;

width: 7em;

}

.selectBtnKanri:hover, a.selectBtnKanri:hover {

background: #3280E2;

background: -moz-linear-gradient(#94BDEF, #3280E2);

background: -webkit-gradient(linear, left top, left bottom, from(#94BDEF), to(#3280E2));

text-decoration: none;

}

[確認環境]
WordPress 4.0.1
Crayon Syntax Highlighter 2.6.6

HTML/CSS

[HTML/CSS]ID名とクラス名の違いと注意点について

2015年2月28日 yellow

——– ID名について ——–

・HTML属性に複数のID名を記述してはいけない

<div id="sample1 sammple2"></div>

1	<div id="sample1 sammple2"></div>

・1ページ内に1度しか記述してはいけない

<div id="sample"></div>
～
<div id="sample"></div>
～

～

～

——– クラス名について ——–

・HTML属性に複数のクラス名を記述してよい

<div class="sample1 sammple2"></div>

1	<div class="sample1 sammple2"></div>

・１ページ内に何度でも記述してよい

<div class="sample"></div>
～
<div class="sample"></div>
～

～

～

HTML/CSS

[HTML/CSS]内部リンクのアンカーの設置の仕方について

2015年2月26日 yellow

リンクボタン
<a href=”#work”>仕事</a>
アンカー
<a name=”work” id=”work”></a>

アンカーの設置場所は、対象のタグの外側の直前につける

例）対象（h2タグ）の外側の直前につけている
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
<a name=”work” id=”work”></a>
<h2 class=”contentTitle”>仕事</h2>
<p>テキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキストテキスト</p>
<a name=”study” id=”study”></a>
<h2 class=”contentTitle”>勉強</h2>
<p>テキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキストテキスト</p>
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑