memo : アンケート終了しました。ありがとうございました。

Feb 28th, 2012

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

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

     

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

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

     

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



【目次】

  1. ユーザーアイコンを円にする
  2. ユーザーアイコンに角丸を加える
  3. ユーザーアイコンに枠(余白)をつける
  4. グロス効果をつけてみる
  5. トイカメラ風に加工する






1.ユーザーアイコンを円にする

Tumblrのユーザーアイコンは基本正方形なおかげでいろんな効果が加えやすいです。

     

と言うことで早速Followingを円表示。
<Redux>でFollowingのアイコン表示方法を指定しているCSSは、テーマHTMLで721行目にあります。

#wrapper #sidebar #top #following-avatars.content a img {
    margin: 5px;
}


このimg要素に簡単なborder-radius(角丸効果)を加えて出来上がり。

     

#wrapper #sidebar #top #following-avatars.content a img {
    margin: 5px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

「border-radius: 20px;」にしてるのはReduxでのアイコンが40×40pxの正方形だからなんですけども、
これは最適化してるだけで20px以上の大きさならちゃんと円表示ができます。
例えば思い切って「border-radius: 100px;」にしてもOK。
各テーマのアイコンサイズに応じて、border-radiusの値は変えてみてください。






2.ユーザーアイコンに角丸を加える

これもCSS3のborder-radius(角丸効果)を使用。円表示はむしろこっちの応用かなと。
テーマHTMLの721行目に以下のCSSを追加します。

     

#wrapper #sidebar #top #following-avatars.content a img {
    margin: 5px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}


丸み具合は表示サイズや好みによると思うんですが、40×40pxサイズに対して今回は「border-radius: 7px;」を設定。

ちなみにダッシュボード上の角丸化アイコンは以下のように指定されてます。

  • 投稿者などの大きいアイコン(64×64px)・・・「border-radius: 6px;」
  • リアクション情報の小さいアイコン(33×33px)・・・「border-radius: 3px;」


1px単位で結構見栄え変わるので、ジワジワ調整がおすすめ。





3.ユーザーアイコンに枠(余白)をつける

正方形そのままの状態に白い枠をつけます。

     

#wrapper #sidebar #top #following-avatars.content a img {
    background-color: #FFFFFF;
    border: 1px solid #C8C8C8;
    margin: 2px;
    padding: 2px;
}

表示領域の都合上、722行目に元々あったmarginを5pxから2pxへ変更してます。
※「margin: 5px;」だとデザインが崩れる

白枠ということで「background-color: #FFFFFF;」とカラーを指定してますが、
黒とか他の色の枠にしたい場合は#000000(黒)という感じに変更してあげると良いです。





4.グロス効果をつけてみる

CSSだけで効果を入れてきましたが、ここからはjQueryも使用。
先にこの効果をつけるにあたって、参考にさせていただいたサイトさんの記事を紹介してみます。

     


元は画像に角丸やドロップシャドウをかけた際に発生する、ブラウザごとのバグを回避する方法の記事なんですが、
今回はこれを利用して効果を加えていきます。
いいラインナップ&内容なので一読おすすめ。



4-1. <head>内、jQueryの記述

本題です。ユーザーアイコンへグロス効果を加えます。
まず<head>内へ、jQueryの読み込みとコードを記述。
jQueryは毎度おなじみ<Google Libraries API >から引っ張ってきます。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

  $("img").load(function() {
    $(this).wrap(function(){
      return '<span class="image-wrap ' + $(this).attr('class') + '" style="position:relative; display:inline-block; background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
    });
    $(this).css("opacity","0");
  });

});
</script>


ここでは</head>直前へ記述しました。7行目、spanが鍵になります。



4-2. <body>内、HTMLの書き換え

次は<body>内へ移動。
テーマ<Redux>では1076行目付近にFollowingを表示するためのソースがあります。
ちょうどTumblr独自タグ、{block:Following} {/block:Following}で内包されてるとこがそれです。

{block:Following}
    <div class="heading" id="following">{lang:Following}</div>
    <div class="content" id="following-avatars">
        {block:Followed}<a href="{FollowedURL}"><img src="{FollowedPortraitURL-40}" /></a>{/block:Followed}
    </div>
{/block:Following}


↑ この4行目のimg要素を書き換え。

{block:Following}
    <div class="heading" id="following">{lang:Following}</div>
    <div class="content" id="following-avatars">
        {block:Followed}<a href="{FollowedURL}">
        <span class="image-wrap" style="position:relative; display:inline-block; background:url({FollowedPortraitURL-40}) no-repeat center center; width: 40px; height: 40px;"></span>
        </a>{/block:Followed}
    </div>
{/block:Following}


本来img要素で表示してるユーザーアイコンをspan要素の背景画像として表示させます。
この場合はTumblr独自タグで{FollowedPortraitURL-40}を指定。
width: 40px; height: 40px;」にします。


なんで40?かというと
{FollowedPortraitURL-40}がフォローしてるTumblelogのユーザーアイコンを表示するTumblr独自タグの一つで、
そのサイズがテーマ<Redux>では40×40pxなためです。
{FollowedPortraitURL-**}の数値はテーマによって違ったりするので、適宜変えてみてください。




4-3. グロス効果を加えるためのCSSを追加&編集

まず先にテーマHTML721行目

#wrapper #sidebar #top #following-avatars.content a img {
    margin: 5px;
}

#wrapper #sidebar #top #following-avatars.content .image-wrap {
    margin: 2px;
}


に書き換え。アイコン間の幅を調整します。
これに続いてグロス効果の肝になる以下のCSSを追加。

#wrapper #sidebar #top #following-avatars.content .image-wrap {
    -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.3);
    -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.3);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.3);

    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}

#wrapper #sidebar #top #following-avatars.content .image-wrap:after {
    position: absolute;
    content: ' ';
    width: 100%;
    height: 50%;
    top: 0;
    left: 0;

    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;

    background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,.1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,.1)));
    background: linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,.1) 100%);
}


これでグロス効果がつきました。border-radius(角丸)は項目2のものと合わせてます。

     

ただちょっと左に寄ってるので、paddingがある以下の717~719行目を消して完成。

#wrapper #sidebar #top #following-avatars.content {
    padding: 4px;
}

     

実を言うとこれでもまだ中央寄せになってないです。(やや左寄せ)
グロス効果なら黒背景が一番映える気がしますが、こういうとき背景色が白だとごまかし効き易くて楽ですね(´・ω・`)。

一応テーマ<Redux>の場合、Followingのボックスサイズを変えることでそれっぽく中央寄せにできます。
が、グロス効果のためだけにサイドバー全体をいじる、てのもなんなので取り合えずここまで。





5.トイカメラ風に加工する

5-1. トイカメラ風にするための仕組み

コードとHTMLは項目4のものを流用します。なのでここではCSSを先に紹介。
<Redux>のテーマHTML721行目を以下のように書き換え&追加します。

#wrapper #sidebar #top #following-avatars.content .image-wrap {
    margin: 2px;
}

#wrapper #sidebar #top #following-avatars.content .image-wrap:after {
    position:absolute;
    display:block;
    content:"";
    top:0;
    left:0;
    width:100%;
    height:100%;

    -webkit-box-shadow:0 0 15px rgba(0, 6, 102, 0.2) inset, 0 0 15px rgba(0,6,102, 0.7) inset;
    -moz-box-shadow:0 0 15px rgba(0, 6, 102, 0.2) inset, 0 0 15px rgba(0,6,102, 0.7) inset;
    box-shadow:0 0 15px rgba(0, 6, 102, 0.2) inset, 0 0 15px rgba(0,6,102, 0.7) inset;
    
    /* 重ねるカラー */
    background:rgba(255,69,0, 0.15);
}

トイカメラ風効果は734~739行目間の
内側ボックスシャドウ+739行目のorangered(#ff4500/赤みの強いオレンジ)半透明レイヤーを重ねて
それっぽく表現してます。
色合いとか雰囲気はこの二つを調整して、好みで変えてみてください。

     

ボックスの背景色が灰色(#eaeaea)で分かりにくいので、参考に黒背景と白背景ver.。

         



5-2. ソースまとめ

項目4のコードとHTMLを合わせてまとめると、テーマ<Redux>でのトイカメラ風効果はこんな感じに収まります。


【<head>内】

  • jQuery コード
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

  $("img").load(function() {
    $(this).wrap(function(){
      return '<span class="image-wrap ' + $(this).attr('class') + '" style="position:relative; display:inline-block; background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
    });
    $(this).css("opacity","0");
  });

});
</script>



  • CSS

717~719行目の↓を消して

#wrapper #sidebar #top #following-avatars.content {
    padding: 4px;
}

721行目に以下のトイカメラ風効果のためのCSS追加&書き換え。

#wrapper #sidebar #top #following-avatars.content .image-wrap {
    margin: 2px;
}

#wrapper #sidebar #top #following-avatars.content .image-wrap:after {
    position:absolute;
    display:block;
    content:"";
    top:0;
    left:0;
    width:100%;
    height:100%;

    -webkit-box-shadow:0 0 15px rgba(0, 6, 102, 0.2) inset, 0 0 15px rgba(0,6,102, 0.7) inset;
    -moz-box-shadow:0 0 15px rgba(0, 6, 102, 0.2) inset, 0 0 15px rgba(0,6,102, 0.7) inset;
    box-shadow:0 0 15px rgba(0, 6, 102, 0.2) inset, 0 0 15px rgba(0,6,102, 0.7) inset;
    
    /* 重ねるカラー */
    background:rgba(255,69,0, 0.15);
}



【<body>内】

1076行目付近(初期状態)の{block:Following} {/block:Following}内を書き換え。

{block:Following}
    <div class="heading" id="following">{lang:Following}</div>
    <div class="content" id="following-avatars">
        {block:Followed}<a href="{FollowedURL}">
        <span class="image-wrap" style="center; position:relative; display:inline-block; background:url({FollowedPortraitURL-40}) no-repeat center center; width: 40px; height: 40px;"></span>
        </a>{/block:Followed}
    </div>
{/block:Following}




5-3. レイヤー色変更例

参考までに、赤系、青系、緑or黄色系でいくつか例を貼ってみます。ボックスの背景色は黒と白。
5-1のCSS、739行目を変更します。

  • 赤/red (#ff0000)

     

background:rgba(255, 0, 0, 0.15);



  • 青紫/blueviolet (#8a2be2)

     

background:rgba(138, 43, 226 0.15);



  • 青緑/darkturquoise (#00ced1)

     

background:rgba(0, 206, 209, 0.15);



  • 黄緑/lawngreen (#7cfc00)

     

background:rgba(124, 252, 0, 0.15);



  • 黄金色/gold (#ffd700)

     

background:rgba(255,215,0, 0.15);


この方法のトイカメラ風効果のデメリットを挙げると、
レイヤー色やボックスシャドウを各アイコンに応じて適用させることができないため、元画像の色に影響されるところが多くて、
場合によっては意図しない色になってしまう辺りでしょうか。

でも個人的に面白い効果だな~と思ったので、取り合えず試してみた分を記録。
参考にさせていただいたサイトさんは当然あるんですが、
それでも自分のアレンジ技術不足感が否めないので「そういうのもあるのか~」ということで。



長くなりましたが、ユーザーアイコンにいろんな効果を入れてみる話でした。


【参考サイトさん】

« Prev    Next »
Page 1 of 1

Back to Top