月別アーカイブ: 2013年2月

Tumblrの投稿をサイトの新着情報として読み込んでみる–JSON–

json

今回はJSONのご利用です。
そして、読み込む対象はテキストだけ!
jsとかそうゆうHTMLじゃないものはなんとなくしか分からん程度の人です。私。
昔、若かりし頃は、VBとかASPとかの時代に3ヶ月くらい学校かよってましたが
言語もちゃうし、自分ではもうさっぱりかけない。

◆スクリプト
これを記述したい箇所にいれるだけー。

http://yayoix.tumblr.com/api/read/json?num=5&type=text

↑ 1行目の「yayoix.tumblr.com」ここを自分のに変える。
じゃないと私のステキなはずかしい記事が投稿されちゃいますよと。

json?num=5&type=text

これは、テキストを5件表示ですという意味。
空タイトル対応していません。はい。なせなら、テキストしか読み込まないからです。
写真とかは、たぶん予想、regular-titleに対応するデータはないんだよね?
なので写真とかは記事タイトルひろってこれないんだよねーー。

<script type="text/javascript" src="http://yayoix.tumblr.com/api/read/json?num=5&type=text"></script>
<script type="text/javascript" src="js/jquery.json-2.4.js"></script>

<script type="text/javascript">// <![CDATA[
show_number = 5; 
for (i = 0; i < show_number; i++) {
label = tumblr_api_read["posts"][i]["regular-title"];
url = tumblr_api_read["posts"][i]["url"];
date = tumblr_api_read["posts"][i]["date-gmt"].substr(0, 10).split("-").join("/");
document.write('<li><a href="', url , '"><span>'+date+'</span>  ' , label , '</a></li>');
}
// ]]>
</script>

◆参考サイト
大変お世話になったサイト。勉強させていただきました。
こういう表示もさせたいです。はい。カテゴリーごとに表示、タイトル空処理まで。
すてき!jsonの存在もおしえていただきました。
タンブラーって記事の検索できないんですかね??
http://seven-color-tears.tumblr.com/post/21720175228/tumblr

json.jsのDL先がぜんぜんみつけれないところに天使のようなブログ。
こちらのサイトでダウンロード先とjsonってなにしてんの??なにすんの?
ってことをさっくり学びました。ありがとうございます。

記事:jQueryを使ってPHPとJSON形式のデータをやり取りする方法
http://se-suganuma.blogspot.jp/2010/01/jqueryphpjson.html

ファビコンをフォトショでつくるる。

favicon

favicon自分でつくりたいじゃん!
なんでも自分でやりたい年頃です、はい。

フォトショでfaviconを作る方法です。
透過も余裕ですす♪

ファビコンをわざわざ生成するためのツールを利用するのもめんどくさい。
最初に画像調整をフォトショでしてから変換だもの。

そこで。
フォトショで.ico形式のファイル扱えるプラグインがあるのさ。

ICO (Windows Icon) Format

海外サイトです。日本語はみあたりません。

◆ やり方
0 フォトショを閉じる
1 ページ右下のほうにMAC,WIN用DLがあるのでそっから対応してるのを落とす。
2 フォトショのデータはいってるとこにつっこむ
Adobe Photoshop cs(とかバージョン)/Plug-ins/File Formats/
のなかにDLしたフォルダの中にあった”ICOFormat.8bi”をつっこむ
3 起動

ちなみに私は、以下の箇所にありました。みんなだいたい同じではなかろーか。
マイコンピュータ/プログラムファイル/adobe/Adobe Photoshop cs/Plug-ins/File Formats/

◆ ちゃんと登録できたか確認方法
フォトショのメニューで確認できる

ヘルプ>プラグインについて>ICO (Windows Icon)

が表示されてればOK!!
おめでと!!ありがとう!!

◆ 保存方法
サイズは16px*16pxで表示されるのでそのサイズか、同じ比率で32*32、64*64pxとかでつくっって
保存はメニューの

ファイル>保存>ファイル形式を ”ICO (Windows Icon)”

を選択して保存。ファイル名は任意でfavicon.icoとか。

以上!

ステキなプラグインをありがとうございます。
DLサイト

http://www.telegraphics.com.au/sw/product/ICOFormat

貴重な情報をありがとうございます!
参考サイト

http://2xup.org/blog/

単位:rem(CSS3)

rem

WordPressのテーマ”twentytwelve”はHTML5・CSS3
このブログもこの記事を書いてる時点ではそれ

cssみててremの単位を利用しているが、小数点以下がめっちゃながっ・・・

remって?
「rem」とは、「root」+「em」を省略したもののよう。
相対的にサイズが指定できるのが魅力。

最初、この小数点の算出方法がわからずめちゃぐぐったけど・・
style.css 17行目~解説ついてた


$rembase: 14;
$line-height: 24;

これこれ。
px / 変数 = rem

例えば。


font-size: 11px;
font-size: 0.785714286rem;

計算すると、11px/14=0.785714286rem

だから長いんだね。うん。何回みてもながぃぃぃぃ
今後も、電卓片手になんですかね・・・
自動で計算式をCSSにいれれるんだっけか??

そして、IE8以下がrem対応してないから
そのせいでさらに、この長いrem記述と一緒にpx記述もせなあかん。
さっきの例ででてきたように記述。


font-size: 11px;
font-size: 0.785714286rem;

とても参考・勉強にさせていただきました。
http://www.tam-tam.co.jp/tipsnote/html_css/post1466.html