コーディング – ページ 65 – クリエイター：コーディング備忘録ブログ

Crayon Syntax Highlighter

2016/12222016/1222 admin コメントをする

Crayon Syntax Highlighterは、記事の中でソースコードを綺麗に表示できるプラグインです。
使い方は簡単です。プラグインをインストールすると、記事編集エディタに専用のボタンが追加され、
そのボタンを押すと表示される挿入画面から表示するソースコードを登録します。

このプラグインを利用すると、ソースコードがエディタがのように綺麗に表示できます。
見栄えと使い勝手が良いので非常に役に立つプラグインです。
Webサイト上でHTML/CSSやプログラミングのコードを解説する機会が多い方は、このプラグインを活用しましょう。

１、crayonをインストールできたら、右上にある【crayon】をクリック

２、Paste your code here, or type it in manually.と書かれている所に入れたいソースを記入します。
３、右上にあるAddをクリックします。

４、更新すればこのように表示されます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>クレアネット</title>
</head>

<body>
</body>
</html>

参考サイト：http://netaone.com/wp/crayon-syntax-highlighter/
参考サイト：http://naifix.com/crayon-syntax-highlighter/

【CSS】clearfixの方法【float回り込み解除】

2016/12212016/1222 admin コメントをする

floatの回り込みを解除したい（clear:bothをかける）時の方法

【１】:afterを使用

・floatを解除したいセレクタに：afterをつけ以下のプロパティ値を使用する。

セレクタ:after{
content: “”;
display: block;
height: 0;
font-size:0;
clear: both;
visibility:hidden;
}

【参考】floatを解除する手法のclearfix と次世代のレイアウトの話
【２】その他の解除方法

・以下のdivタグを回り込み解除したいタグの直後に記述する

・CSSで.clear を設定する

.clear{
clear:both;
}

テキストを画像に置換する方法

2016/12212016/1221 admin コメントをする

テキストを画像に置換する方法

htmlソース

<li class="text_indent"><a href="#">価格帯から選ぶ</a></li>

CSS記述例

.text_indent a｛
url:("指定する画像のＵＲＬ") no-repeat left top;　/* ←画像のURLとリピートしない、画像の位置は左の上 */
width:180px; /*←画像の横幅180px*/
height:44px; /*←画像の縦幅44px*/
display:block; /*←img要素はインライン要素なので、blockと書くことでブロック要素にすることができる。
text-indent:-9999px; /*←テキストの段落を下げる */
｝

この記述方法で、htmlの記述変更ができない場合にテキストの文字は見えないようにし、
画像をクリックすれば、リンク先に飛ぶことでできます。

参考サイト：http://html-coding.co.jp/knowhow/tips/rollover/
参考サイト：http://delaymania.com/201209/web/textindent-9999/

【計測タグ】設置方法、タグ出力後

2016/12202016/1220 admin コメントをする

【１】注意点

・サイトの内、FTPで操作する際、WPで管理されている部分を触らないよう気を付ける。

・フォームやCGIの部分は触らない

・バックアップはしっかり！

【２】設置場所

・bodyタグ内、</body>の上あたり

・ｐｈｐでフッターを表示している場合、footer.phpなどの内部にタグを設置すると全ページに反映される。

・WPで管理している部分がある場合は（ブログなど）、WPの管理画面からも計測タグを設置する。

【３】チェック方法

・計測タグだけの場合、テストサイトにアップせず、本アップをしてから確認する

・Chrome拡張機能の「Tag Assistant」が便利

・翌日など時間をあけてAdwords側からもチェック

共有>ユーザーリストから見る

【html】テーブルタグの上の余白が消えないときチェックする点

2016/12202016/1220 admin コメントをする

・paddingもmarginもかかってない時に、tableタグの上部に余白が発生している

・他のブラウザでチェックしても変わらない

→tableタグを整える際に全角スペースを使用したかどうかチェックする

・tableタグは内部の全角スペースの情報が文字として認識され、それがテーブルの上にでることがある。

【参考】http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1212784262

今回は整える際Tabキーを使用し、全角スペースが入っていた為、空白ができていた。

クロームのキャッシュは最強

2016/12202016/1220 admin コメントをする

テストアップしても残ってるケースが多いクロームブラウザ。
画像変更したのに、変えたのに、常に表示が残っているグーグルクロームブラウザ。
なので変更して完了しても結構面倒なことがあります。

そういう場合には履歴を削除します、ただ履歴溜まってると結構長時間になります。
いろいろ便利なのですが、ときどき不便なときも。コーディング関係ないのですが、最強過ぎてなかなか。

【CSS】マウスオーバーした時に、テキストだけで表示切替する方法【Gナビなどで使用】

2016/12192016/1219 admin コメントをする

テキストのみで切り替える方法の備忘録です。

【１】ダイナミック疑似クラス:after (:before)を使用する方法

ex) aタグに使用する

・html

でテキストを入れないようにします。

・css

a:after {

content:”切り替え前”;

}

a:hover:after{

content:”切り替え後”;

}

以上の設定で切り替えができます。

他の方法はまだ知らないので、覚え次第追記していきます。

HTML言語について

2016/12192016/1219 admin コメントをする

HyperText Markup Language（ハイパーテキストマークアップランゲージ）。
HTML言語について、ですが、上司から聞きました。

HTML　＝　言語　なので　机を英語で言えばデスク、の感覚でいろんな言葉をまず覚えるべき、と教えてもらいました。
そのとおりなので、いくつかの言葉をしっかり記憶して今度のテストに備えたいと思います。

【備忘録】cssで上下中央にする方法

2016/12162016/1216 admin コメントをする

これまで使用したcssで上下中央に配置する方法をまとめました。

【１】テキストの場合（１行）

・height と line-height を同値で設定する。

【２】positionを使用する方法

・親要素に

position:relative;

height:○○;

を設定します。

・子要素（上下中央にしたい要素）に

position:absolute;

top: 0;

bottom; 0;

margin: auto 0;

を設定します。

以上で上下中央になります。

【おまけ】vertical-align:middle; を使用して揃える場合

・vertical-align プロパティはインライン要素かテーブルセルにしか効きません。

インライン要素は高さが設定できないので、displayでテーブルセルにしてから使用します。

height:○○;

display:table-cell;

vertical-align:middle;

で中央になります。

FTPアクセス制限設定

2016/12162016/1216 admin コメントをする

FTPアクセス制限設定です。
レンタルサーバなどは設定でついていますが、よくよく忘れることがあると「アクセスできない！こんなはずはない！」と焦ることはよくあります。
アクセスをどこでも何でも自由にできるのは便利な反面、結構危険性があります。セキュリティが厳しく要求されるべき場所は当然FTPアクセス制限設定かけます。

例えば、大学、学校、病院、大企業さんなんかもそうです。そういう場合には訪問してアップ作業等行うのが普通です。
そういう場合にはアップ作業が本番環境で行うので、テストアップ通りうまくいかないぞこれは、ということがありえます。エンジニアの本領発揮な部分と、前もって環境確認が必要な部分です。

危険項目は、サーバ周り、レスポンシブ周り、ワードプレスなどのCMS周りです。