[HTML/CSS]青色グラデーションのボタンのソースコード(aタグ、inputタグ共通)

選択

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

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

 

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

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

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

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

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

→右上の挿入ボタン(黒色ボタン)を押す。

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

→公開ボタン(青色ボタン)を押す。

以上で完了です。

 

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

ボタンの実物

選択

 

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

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

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

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

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

 

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

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

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

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

リンクボタン
<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>
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑

メーラー「Thunderbird」でメールをタグ付け整理する方法

メールを選択状態にして、ショートカットキーを押すことでタグが付き、もう一度押すと外れます。(トグル動作)
ツールバーの メッセージ>タグ の順にアクセスして、タグの種類、動作を確認することができます。

以下、デフォルト設定のタグとそのショートカットキーです。
0キー    すべてのタグを削除
1キー    重要(赤色フォント)
2キー    仕事(黄色フォント)
3キー    プライベート(緑色フォント)
4キー    ToDo(青色フォント)
5キー    後で(紫色フォント)

 

[確認環境]
Windows 7 SP1
Thunderbird 31.3.0

[Mac]メーラー「Thunderbird」でメールをタグ付け整理する方法

メールを選択状態にして、ショートカットキーを押すことでタグが付き、もう一度押すと外れます。(トグル動作)
ツールバーの メッセージ>タグ の順にアクセスして、タグの種類、動作を確認することができます。

以下、デフォルト設定のタグとそのショートカットキーです。
0キー    すべてのタグを削除
1キー    重要(赤色フォント)
2キー    仕事(黄色フォント)
3キー    プライベート(緑色フォント)
4キー    ToDo(青色フォント)
5キー    後で(紫色フォント)

 

[確認環境]
Mac OS X 10.9 Mavericks
Thunderbird 31.4.0

[Mac]使われていないCSSを削除できるFirefoxアドオン「Dust-Me Selectors」の使い方

英語のツールですのでとっつきにくいですが、最短で操作手順のみを紹介します。

 

[操作手順]
→ブラウザ「Firefox」をインストールする。
https://www.mozilla.org/ja/firefox/new/

→Firefoxアドオン「Dust-Me Selectors」をインストールする。
以下サイトの「Add to Firefox」ボタンを押す。
https://addons.mozilla.org/ja/firefox/addon/dust-me-selectors/

→Firefoxを再起動する。

→テストしたいWebページをFirefoxで普通に表示する。
※Webページによっては下記の通りに進まないこともあるようです。

→ショートカット command+option+N を押す。
※ツール>Web開発>Dust-Me Selectors>Scan this page の順にアクセスしても同様です。
※右上ツールバーの「ピンクのほうき」アイコンをクリックしても同様です。

→「Dust-Me Data」窓が表示される。
Unused Selectors タブが不使用のCSSです。(注意:JavaScript、jQuery、PHP等で動的に使用されるCSSも不使用と判定される)
Used Selectors タブが使用中のCSSです。

→Cleanボタンを押す。
※Cleanボタンが複数ある場合は、CSSファイルを複数読み込んでいることを示しています。

→Commented-out を選択して、Saveボタンを押した場合。。
CSSファイルが保存できます。
undefinedの記述が行頭に挿入されて、不使用のCSSはコメントアウトされて残ります。

→Removed を選択して、Saveボタンを押した場合。。
CSSファイルが保存できます。
undefinedの記述が行頭に挿入されて、不使用のCSSは削除されて消えます。
※どちらにしてもundefinedの記述は残ります。

→保存したCSSを元にして手作業で確認する。
最終的には手作業、目視での確認となります。

以上で完了です。

 

[確認環境]
Mac OS X 10.9 Mavericks
Firefox 35.0.1
Dust-Me Selectors 4.1

使われていないCSSを削除できるFirefoxアドオン「Dust-Me Selectors」の使い方

英語のツールですのでとっつきにくいですが、最短で操作手順のみを紹介します。

 

[操作手順]
→ブラウザ「Firefox」をインストールする。
https://www.mozilla.org/ja/firefox/new/

→Firefoxアドオン「Dust-Me Selectors」をインストールする。
以下サイトの「Add to Firefox」ボタンを押す。
https://addons.mozilla.org/ja/firefox/addon/dust-me-selectors/

→Firefoxを再起動する。

→テストしたいWebページをFirefoxで普通に表示する。
※Webページによっては下記の通りに進まないこともあるようです。

→ショートカット Ctrl+Alt+N を押す。
※ツール>Web開発>Dust-Me Selectors>Scan this page の順にアクセスしても同様です。
※右上ツールバーの「ピンクのほうき」アイコンをクリックしても同様です。

→「Dust-Me Data」窓が表示される。
Unused Selectors タブが不使用のCSSです。(注意:JavaScript、jQuery、PHP等で動的に使用されるCSSも不使用と判定される)
Used Selectors タブが使用中のCSSです。

→Cleanボタンを押す。
※Cleanボタンが複数ある場合は、CSSファイルを複数読み込んでいることを示しています。

→Commented-out を選択して、Saveボタンを押した場合。。
CSSファイルが保存できます。
undefinedの記述が行頭に挿入されて、不使用のCSSはコメントアウトされて残ります。

→Removed を選択して、Saveボタンを押した場合。。
CSSファイルが保存できます。
undefinedの記述が行頭に挿入されて、不使用のCSSは削除されて消えます。
※どちらにしてもundefinedの記述は残ります。

→保存したCSSを元にして手作業で確認する。
最終的には手作業、目視での確認となります。

以上で完了です。

 

[確認環境]
Windows 7 SP1
Firefox 35.0.1
Dust-Me Selectors 4.1