タグ:プロフィール ( 1 ) タグの人気記事

a0342241_18313813.png

SNSなどで、プロフィールが表示される時、円形に表示されることが多いですよね。
エキサイトブログでも画像を丸くすることができます。
これをすると最近のお洒落なブログっぽくなるのでオススメです。

クラス名を確認する

自分のブログをchoromeの検証から、プロフィールに使われている画像のクラス名を調べてみましょう。
>>choromeの検証機能の使い方はこちら

例えば、PCデザインスキンの「カスタマイズ」→「カスタマイズ3カラム」の写真を入れ替えて使うことのできるスキンならプロフィールの画像名のクラスは[ LOGO ]となっています。
このCSSに追加で角を丸くする指示を与えてみましょう。
ちなみに、画像を表すタグにclassの表示がなかった場合は、その上の階層のクラスからこんな風に書くことができます。

HTML

  <div class="logoimage">    
    <a href="#">      
      <img src="~~.jpg">
    </a>
  </div>

CSS

  .logoimage img { 
    border-radius: 100px;
 }

ポイントはあくまでもimgタグにあたるようにCSSを書くことです。
円にする方法自体はとっても簡単。下記のように記載しましょう。元々は四角の角を丸くするという指示ですが、角を丸くしすぎるといずれ円になりますよね。この数値をいろいろ変えて変化を実感してみましょう。

CSSを書き加える

  .LOGO { 
    border-radius: 100px;
 }
a0342241_09451133.png

横長の画像にしている方はこんな風に画像がつぶれちゃうことも。。。
その場合はimgタグではなくその上の階層のタグに角丸をつけてあげるとうまくトリミングできると思います。


[PR]
by exblog-tips | 2016-01-05 09:46 | メニュー周り

エキサイトブログをとことん使い倒すブログです。こんなことできないかな?をゆるっと募集中!


by エキブ