ひとりよがりの夜に

142012 5月

Tumblrの画像でコラージュを作ってくれる「Loupe」

↓詳細も見れます。
my tumblr | Loupe

Get Started→Add PhotosでtumblrのURLを指定するだけです。

Tumblrだけでなく、Facebook、Twitter、Instagramでも作れます。
最終的には検索結果からも作れるので、つまりなんでもつくれます。

Loupe | Shape Your Photos

Posted: 3週間前 | Tags: Webサービス tumblr Twitter facebook instagram | Notes: 5

312012 3月

Tumblrの画像ポストを表示するブログパーツ「jQuery blrblrTumblrImage」を設置してみた

chips-tips:

Tumblrの画像ポストを、ブログパーツっぽく表示できるjQueryプラグインを作成されていた方がいたので紹介です。
小さな領域でもスライドショーができるのがいい感じ。

ethertank diaryさんのjQueryプラグイン『jQuery blrblrTumblrImage』という記事から、
そんなjQueryプラグイン「jQuery blrblrTumblrImage」を試しに忍者ブログに埋め込んでみたので、その備忘録です。

公式デモ：jQuery blrblrTumblrImage - jsdo.it - Share JavaScript, HTML5 and CSS

ブログサンプル：【tips?】http://samplechiiips.blog.shinobi.jp/

設置も設定も簡単なので、特にサイドバーのあるテンプレートとかで使いやすいと思います。

Read More

Reblogged from chips-tips | Posted: 2ヶ月前 | Tags: tumblr | Notes: 19

292012 2月

フォントをメイリオにする方法

さっそくやってみた！

見やすい。

bodyタグのcssにつければ終了です。


font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

(Windows用のフォントをメイリオにしてみたので感想を｜Webparkから)

Posted: 3ヶ月前 | Tags: tumblr

282012 2月

Tumblrのユーザーアイコンを円にしたりグロス効果を加えるカスタマイズ

chips-tips:

どんなんかと言えばこんなん ↓ です。
テーマ＜Single A＞を使ってるTumblrで見たことあるかもしれません。

仕組み的なものですが、これCSSだけで表現していて、特に円にするための専用画像とかは使ってないんですね。
（※Single Aでは各アイコンを一つのボックスの背景画像に置き、CSS3のborder-radiusで切り抜いている）

このユーザーアイコンを円にする方法と、
他に角丸やグロス効果、トイカメラ風にしたり、ユーザーアイコンにいろんな加工をしてみるカスタマイズを記録。

と言っても流石にテーマごとにHTML構成が違うので、ここでは初期テーマ＜Redux＞のFollowingで遊んでみます。
Read More

Reblogged from chips-tips | Posted: 3ヶ月前 | Tags: tumblr | Notes: 216

222012 2月

Tumblelog内検索をGoogleカスタム検索に移行してみた

chips-tips:

Tumblrのブログ内検索を＜Google カスタム検索＞にしてみました。
色々テストしてみて経験から持ってたイメージよりも良かったのがちょっと驚き。

で、これの設置に存外手間取ってしまったので自分用兼ねて備忘録。
実際にTumblrにGoogle カスタム検索を設置した手順と、検索欄のカスタマイズについてです。
Read More

Reblogged from chips-tips | Posted: 3ヶ月前 | Tags: tumblr | Notes: 648

102012 2月

TumblrにGoogleAnalyticsとツイート/はてブ/いいね！/ぐぐたすを追加する方法

「最近海外で流行りのTwitter,Facebook,Google+1,Analyticsをまとめる非同期スクリプトにはてなを加えてみた」を元にして、Tumblr用にしてみた。

GoogleAnalyticsのコードを取得する。
カスタマイズページでHTMLを編集する。

スクリプト部

UA-XXXXXXXX-Xの部分はGoogleAnalyticsで取得したコードを使用する。


//*********************
//  ソーシャルブックマークボタンのスクリプトと、Google Analytics をまとめて1ヶ所で非同期ローディング
//*********************
(function(w,d){
    w._gaq=[["_setAccount","UA-XXXXXXXX-X"],["_trackPageview"]];
    w.___gcfg={lang:"ja"};
    var c,e=d.createDocumentFragment(),f=d.getElementsByTagName("script")[0],
    a=function(a,b){if(!d.getElementById(b)){c=d.createElement("script");
    c.src=a;c.id=b||null;c.async=true;e.appendChild(c);}};
    a(("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js");
    a("https://apis.google.com/js/plusone.js");
    a("//b.st-hatena.com/js/bookmark_button_wo_al.js");
    a("//platform.twitter.com/widgets.js");
    a("//connect.facebook.net/ja_JP/all.js#xfbml=1","facebook-jssdk");
    f.parentNode.insertBefore(e,f);
})(this,document);

HTML部

{block:Posts}～{/block:Posts}の間に記載する。 XXXXXXはTwitterのID。無くても大丈夫だと思う。


<!-- Hatena -->
<a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard" data-hatena-bookmark-url="{Permalink}">
    <img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="はてブに追加" width="20" height="20" style="border: none">
</a>
<!-- Twitter -->
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja" data-url="{Permalink}"
data-text="{block:PostSummary}{PostSummary}{/block:PostSummary}{block:IndexPage}{block:Title}{Title}{/block:Title}{block:Link}{Name}{/block:Link}{/block:IndexPage}"
data-via="XXXXXX">Tweet</a>
<!-- Google plusone -->
<div class="g-plusone" data-size="medium" data-href="{Permalink}"></div>
<!-- Facebook -->
<div class="fb-like" data-href="{Permalink}" data-layout="button_count" data-send="false" data-width="120" data-show-faces="false"></div>

「Google+」以外はテストしました。

「はてブ」はオプトアウト版ですのでご安心ください。

Posted: 3ヶ月前 | Tags: tumblr facebook Twitter | Notes: 14

252012 1月

facebookのOGPを設定する方法

facebookに「イイね！」したときに良い感じに表示されるのがOGPです。

tumblrへの設定方法

１．facebookIDの取得：Facebook　IDの確認方法 - human network marketing log

2．下のコードの「あなたのFacebookID」の部分を１で取得したものに変更する。

３．コードをコピペして、いつもどおり、デザインの<HEAD>～</HEAD>にコピーする。


{block:PermalinkPagination}
<meta property="og:title" content="{block:Description}{MetaDescription}{/block:Description}" />
<meta property="og:type" content="article" />
<meta property="og:url" content="{Permalink}" />
{block:Posts}{block:Photo}<meta property="og:image" content="{PhotoURL-500}" />{/block:Photo}{/block:Posts}
<meta property="og:site_name" content="{Title}" />
<meta property="fb:admins" content="あなたのFacebookID" />
<meta property="og:description" content="{block:Description}{MetaDescription}{/block:Description}" />
{/block:PermalinkPagination}
{block:IndexPage}
<meta property="og:title" content="{Title}" />
<meta property="og:type" content="blog" />
<meta property="og:image" content="{PortraitURL-128}" />
<meta property="og:site_name" content="{Title}" />
<meta property="fb:admins" content="あなたのFacebookID" />
<meta property="og:description" content="{block:Description}{MetaDescription}{/block:Description}" />
{/block:IndexPage}

４．確認方法：ポストを１つ選択して、Debugger - Facebook開発者内にペースト。良い感じに出ればOK！

コピペでOK！2秒でTumblrにOGPを設置する方法 | A!@attrip

TumblrのＯＧＰ設置を確認する方法 | A!@attrip