カテゴリー: コーディング

WEBアイコンフォントが使えるFontAwesomeというものがあります。
種類が豊富なので、色々なサイトの用途に使用できます。

■FontAwesomeの使い方

HTMLソース中にア表示用のcssを追加する必要があります、
疑似要素:beforeを利用して特定のタグやクラスに対してアイコンを表示することが可能です。

.fa-home:before {
content: “\f015”;
}

例えばホームアイコンを表示させたい場合は上記を記入します。

content: “”;に記入するアイコンの種類は書きサイドで調べることができます。

http://fontawesome.io/icon/chevron-right/

フォームの入力場所を複数作るとき、部分部分でクリアしたいときがあると思います。
そういった場合には,jqueryを利用してフォームを部分的にクリアすることができます。

今回はその方法を紹介します。

■html

<tr id=”form_area”>
<th class=”form_01″>1</th>
<td class=”form_02″>[input type=”text” name=”お名前” size=”60″]</td>
<td class=”form_03″><input type=”radio” name=”example” value=”選択肢1″></td>
<td class=”form_04″><input type=”radio” name=”example” value=”選択肢1″></td>
<td class=”form_05″ ><button type=”button” id=”clear”>クリア</button></td>
</tr>

■JS
$(function () {
$(“#clear”).click( function() {
$(‘#form_area’)
.find(“textarea, :text, select, radio, checkbox”).val(“”).end().find(“:checked”).prop(“checked”, false);
});
});

<br>は改行するのに便利ですが、レスポンシブサイトを構築するのには不向きかもしれません

今回はを使用して改行するテクニックを紹介したいと思います。

■html

<p><span>テキスト<span>テキスト</p>

■css
span{
display:block;
}

これだけで、
テキスト
テキストと改行されるのでスマホサイトの構築で役に立つテクニックです。

cssでの記述でプロパティで計算をしてくれる方法があります。
calc()を使うことで100%の値からpxを差し引いたりできるので、便利なセレクタとなっています。

例えば左に200pxのサイドバーがある場合に、右に背景を100%表示にしたいときは、

.test {
width: 100%;
background-size: calc(100% – 200px);
background-position: 200px center;
}

とすれば左から200px横に画像が100%表示になってくれます。

Fireworksをまだまだ現役で使用されているwebデザイナーの方も多いかと思われます。

今回は使っておくと便利なFireworksの拡張機能について紹介していきたいと思います。

オブジェクトの大きさが簡単にわかりる「SPECCTR」

スライスした画像の大きさなどコーディングをしていてすぐ知りたいなんて場面も多いと思います。
そんな時、この拡張機能を入れておけば、文字やオブジェクトの数値を自動で書き出してくれます。

クリックするだけでスライスに連番が付けられる「SequenceNumSlice」

クリックした順番に連番を振るので、gnaviなどの連番をよく使うようなスライスに便利ですね。

カンバスカラーすぐ切り替えられるコマンド機能「change_canvas_color 」

カンバスカラーをコマンドひとつで透明・白に切り替えることができます。
最近では透過pngで書き出すことも多くなってきたので、スグに切り替えられるのは便利ですね。

wpの記事一覧などで文字を省略して表示することが多いと思いますが、
だと表示させたい文字数が決められないと思います。

そこで今回は、ブログなどに使える記事の表示させたい文字数を決定できる、書き方を紹介します。

<p id=”blog_text”><?php echo mb_substr(strip_tags($post-> post_content),0,100).’…’; ?></p>

post_content),0,100)のところで文字数を決定できます。

今回は0～100までの文字数を指定しているので100文字表示となります。

固定ページでパーマリンクを変更していない場合のページャーの書き方を紹介します。

<div id=”pager”>
<?php
if ($the_query->max_num_pages > 1) {
echo paginate_links(array(
‘base’ => get_pagenum_link(1) . ‘%_%’,
‘format’ => ‘&paged=%#%’,
‘current’ => max(1, $paged),
‘total’ => $the_query->max_num_pages
));
}
?>
<?php wp_reset_postdata(); ?>
</div>

get_pagenum_linkでページャーの番号を収得し、

‘&paged=%#%’,でリンクを付与しています。

グラデーションを取り入れることで、よりサイトを魅力的に見せたりすることができます。
さらにアニメーションさせることで、視覚効果を与え、よりサイトの見栄えが良くなったりするので、
スマートフォン専用などcss3に対応したサイトで使用していきたいですね。

■アニメーションのさせ方

@keyframesとanimetion-nameでanimetionとのリンクをして、変化させたい要素を0%〜100%で指定します。

gifアニメーションを作成される方はあまりいないと思いますが。

いざ作るとなったとき、作り方がわからない、psやfwでの作りかたを調べても、うまくいかなかったりなどで、時間をとられてしまったという方もいるかもしれません。

まったくgifアニメーションを生成したことが無いような方でも画像を用意するだけで簡単に作成できるサイトを紹介します。

それはアルパカ動画です。

画像をアップロードするだけで再生速度など調整することができ簡単にgifアニメが作れちゃいます。

時間が無いといった方や、作り方がわからないといった方はwebサービスを利用してみてはいかがでしょうか。

クラスが同じ物が並んでいて、例えば

タグ内のテストの.test01を.test02に変更したりできれば、
cssやhtmlで調整できないところでもcss変更ができるので変更できれば便利ですね。

<p class=”.test01″>クラス<p>
<p class=”.test01″>クラス<p>
<p class=”.test01″>クラス<p>

$(function() {
var result;
result = $(“class.test01”).text();
if (result = ‘クラス’) {
$(‘.test01’).addClass(.test02);

}
});

wpなど動的に書き出されるものに対してjqeryで変更できるテクニックを身に着けておけば色々なことができそうです。