アイコンをWebfontで実装する

スマートフォン案件などでアイコンを使用する際Webfontを導入すると解像度とか色とか考えなくていいから楽。

商用可のアイコンWebfont

とかで矢印アイコンをダウンロードして使用。

導入方法

  1. FontelloでWebfontをダウンロード・fontフォルダとかを作って格納
  2. cssファイルに以下を記述(webfontをダウンロードした際に同梱されているものを参考)
    @font-face {
    	font-family: 'fontello';
    	src: url("../font/fontello.eot");
    	src: url("../font/fontello.eot?#iefix") format('embedded-opentype'), url("../font/fontello.woff") format('woff'), url("../font/fontello.ttf") format('truetype'), url("../font/fontello.svg#fontello") format('svg');
    	font-weight: normal;
    	font-style: normal;
    }
    [class^="icon-"]:before,
    [class*=" icon-"]:before {
    	font-family: 'fontello';
    	font-style: normal;
    	font-weight: normal;
    	speak: none;
    	display: inline-block;
    	text-decoration: inherit;
    	width: 1em;
    	margin-right: 0.2em;
    	text-align: center;
    	opacity: 0.7;
    }
    
  3. リストとかの要素の:beforeとか:afterに使用
    	.list li a:after {
    		font-family: 'fontello';
    		color:#666666; /* アイコンの色味 */
    		content: 'e75e';  /* アイコンの種類の指定 */
    	}
    

:afterを使用するとコンテンツのすぐ横にアイコンが配置されるため、リストなどで横幅が可変で常にアイコンを右寄せかつ縦中央に配置しておきたい場合はcssのtable-cellを使用

html

<ul>
	<li><a href="#"><div class="wrap">hogehoge</div></a></li>
	<li><a href="#"><div class="wrap">hogehoge</div></a></li>
	<li><a href="#"><div class="wrap">hogehoge</div></a></li>
</ul>

css

	.list li a {
		display:table;
		width:100%;
	}
	.list li a .wrap {
		display:table-cell;
		width:auto;
		padding:10px; /* 余白調整 */
	}
	.list li a:after {
		font-family: 'fontello';
		color:#666666;
		content: 'e75e';
		display:table-cell;
		vertical-align:middle; /* 文章が2行以上になった場合のアイコンの縦中央寄せ */
		width:15px; /* アイコンの大きさ分横幅指定 */
	}

WordPressでSSLを使用する際に使うプラグイン

admin SSLが楽。
共有SSLの場合は上記のほかにも作業がありそう

参考

スマートフォン案件で導入・カスタマイズが楽だったjs覚書き

  • jQuery.jcflick … コンテンツスライダー(自動可)・フリック対応
  • jQuery SmartImage … 画像の拡大・縮小(マルチタッチ可)
  • ISCROLL 4 … fixed対応用

その他よく使うjs

読み込み完了時のアドレスバー非表示用js

$(function() {
  setTimeout(function() {
    if ((document.documentElement.scrollTop || document.body.scrollTop) === 0) {
      scrollTo(0, 1);
    }
  }, 100);
});

WordPress + SSL導入参考

Sass導入参考サイト

レスポンシブwebデザイン参考サイト

Mobile Safariでのlabelの実装

Mobile Safariだとデフォルトでは label要素をタップしても関連付けたcheckbox等のclickイベントが発生しない。
labelを使用してclickイベントを起こすにはlabel要素に「onclick=””」を追加。

jsでは以下の様に対応

参考

Twitterの公式ウィジェットの高さを可変にする方法

Twitterの公式ウィジェットの高さが固定だと途中で内容が切れてしまう。
ので、高さを可変にする方法の覚書。

CSSで以下の場所の高さの指定をimportantで上書きすればOK。

.twtr-timeline { height:auto!important; }

TypeSquare使用方法

作業の流れ

  1. http://typesquare.com/ でユーザ登録
  2. マイページでWebサイトのURLを登録
  3. マイページの「導入方法」で発行されるjsコードを貼り付け
  4. 使用したいフォントを探し、フォント名をcssの「font-family」に記述

めも

  • 表示されるまでに1秒ほどのラグがある → 気になる場合はページ表示時にフェード効果をかけてごまかすなどなどした方が良いかも
  • カタカナの字間が気になる → HTMLで文字詰めするタイポグラフィー用JS

サムネイルがない場合に「no image」画像を表示

以下のようにif文で分岐させる

<?php if ( has_post_thumbnail() ):?>
<?php the_post_thumbnail('表示するサムネイル名');>
<?php else : ?>
<img src="noimage画像のパス" alt="noimage" />
<?php endif; ?>