ガーリーなサイトで使いたい！おしゃれなGoogle Fontsまとめ
かわいいくておしゃれなフォントをサイトに表示させるには、フォントをダウンロードして画像にしたり…なんてめんどくさいことをしていました。しかし、もはやそんなことは不要で、Webフォントを使えば文字としてサイトに表示させることが出来る世の中です。Google Fontsをながめていてぐっときたフォントを、わたしの独断と偏見でまとめておきます。
※フォントサイズはすべて40pxです。
ガーリー
Lily Script One
sample font
Sofia
sample font
Sacramento
sample font
シンプル
Kite One
sample font
Amatic SC
sample font
Wire One
sample font
Megrim
sample font
関連記事：
Google Fontsが驚異的な簡単さ - spinyhearts and geek log
ファッション誌にでてきそうなあのおしゃれフォントまとめ - spinyhearts and geek log
WordPressのカスタマイズする時に入れる必須中の必須プラグイン
WordPressでサイトの構築をはじめました。大学生のときに卒論でちょっとだけかじっていただけあって、とっかかるのにはあまり障壁はありませんでした。
しかし…カスタマイズを進めるにあたって、これめんどくさい仕様だな～とか思うところもありました。探せばたくさん入れるべきプラグインはあると思いますが、その中でも特に助かったプラグインをメモです。
Bluesome | Exec-PHP plugin for WordPress
固定ページでPHPを書くためのプラグインです。
固定ページ内でPHPは書けません！このプラグインを入れれば書けるので、ブログというよりはサイトを構築する方は入れておいて損なしです。
URLからzipファイルをダウンロードし、プラグイン→新規追加でzipファイルをアップロード＆インストールします。
Modify paragraph formatting plugin “PS Disable Auto Formatting” | WordPress Plugin for CMS
固定ページ、投稿ページで勝手にpタグは入るのを辞めさせるプラグインです。
テキストで入力しても勝手にpタグが挿入されます。せっかくカスタマイズしたのにレイアウトが崩れて泣いているところこのプラグインに助けられました。
プラグイン→新規追加で「PS Disable Auto Formatting」を検索するとインストールできます。
ファッション誌にでてきそうなあのおしゃれフォントまとめ
時代によっておしゃれなフォントの定義って違いますよね。フォントをみれば時代がわかるといっても過言ではないのではないでしょうか。最近よくファッション誌やお店に出ているTシャツなどで見かけるあの系統？のフォントをまとめてみました。
Tell me a secret Font | dafont.com
Lightly Awkward Font | dafont.com
See You At The Movies Font | dafont.com
フォントによってちょっとずつ違っているので同じ系統といえど、好みは分かれてきますね。
上記のフォントは「dafont.com」からダウンロードできます。個人的にフォントサイトの中で一番よく使っています。よくまとまっているし、ダウンロードボタンがわかりやすい(笑)
クロスドメインを回避してくれる「xdomainajax.js 」
Ajax通信でXMLなど取得したいのにクロスドメインだから拒否されてしまう、ということを回避してくれるjsがありました。ありがたや…
jQuery-Plugins/cross-domain-ajax/jquery.xdomainajax.js at master · padolsey/jQuery-Plugins · GitHub
使い方はこんなかんじ。
1.上記のjsをダウンロード
2.htmlでjsを読み込む
＜script type="text/javascript" src="js/jquery.xdomainajax.js">
これだけで外部ドメインのAjax通信が可能となります。
jQuery導入時のscriptタグを一発でコピーしてくれる「scriptsrc.net/」
jQuery google api and other google hosted javascript libraries. - ScriptSrc.net
jquery-1.9.1.min.jsをダウンロードしてサーバーに置いて…なんて、めんどくさいですよね。それを解決してくれるサイトを発見しました。素敵です。使いたいスクリプトのcopyボタンを押せば、こんなかんじでコピーしてくれます。
＜script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
あとは、htmlのhaedタグ内にペーストすれば完了ですね。めちゃくちゃ簡単です。
他にも、Chrome FrameとかYUIなんかもコピペできます。
ワイヤーフレームがサクッと作れるWebサービス「Cacoo」
Webサイト設計図 – ワイヤーフレームの作り方 | Webクリエイターボックス
ワイヤーフレームを作ることになり、でも手書きじゃうまくかけないし、Photoshop使うまでもないし…って調べていたらManaさんの記事にたどり着いた。
「Cacoo - Web上でフローチャートやUMLなど様々な図を作成」は、Web上でワイヤーフレームを作成することができて、共有、共同編集まで出来ちゃう。
Webサイト用のパーツも揃っていました。SNSアイコンもあり、手書き風パーツもあり、はたまたネットワークパーツやオフィスの間取りパーツ、フローチャートパーツまで、いろんなものが作れます。
共有も簡単なので、エクセルでちまちま作るよりビジネスの場で使えるかもしれませんね。
eclipse＋PHPのXDebugでブレークポイントが止まらないときに確認したこと
やっと環境が整ったと思ったらXDebugでブレークポイントが止まらない！ってことで、いろんなところをチェックしたらサクッと直ってくれました。チェック項目をメモメモ。
- php.iniをチェック
この構成ファイルはxampp/phpのなかにあります。zent_extensionはパスを正確に。わたしの場合は、xamppをC直下に置いたので下記のように書きました。あとはxdebug.remote_enableは1にする必要があるようです。他の項目はコメントアウトのままで動きました。
略
[XDebug]
zend_extension = "C:\xampp\php\ext\php_xdebug.dll"
;xdebug.profiler_append = 0
;xdebug.profiler_enable = 1
;xdebug.profiler_enable_trigger = 0
;xdebug.profiler_output_dir = "C:\xampp\tmp"
;xdebug.profiler_output_name = "cachegrind.out.%t-%s"
xdebug.remote_enable = 1
;xdebug.remote_handler = "dbgp"
;xdebug.remote_host = "127.0.0.1"
;xdebug.trace_output_dir = "C:\xampp\tmp"
略
- eclipseのデバック構成を確認
Sever Debuggerがxdebugになっているかチェックです。わたしはここがZend Debuggerになっていてブレークポイントがきいてませんでした。こんなかんじで設定したら動きました。
