Bloggerプロフィールのデザインを弄ってみた

　今のテンプレートに変えてからずっと気になっていたのが、「About Me」のプロフィール画像の横に空いた無駄スペース。ようやく名前とかを画像の横に表示させてスッキリさせることができた。

修正前のプロフィール

テンプレートのプロフィール部分のコードを確認すると、こんなだった。

<b:widget id='Profile1' locked='false' title='About Me' type='Profile'>
 <b:includable id='main'>
   <b:if cond='data:title != ""'>
     <h2><data:title/></h2>
   </b:if>
   <div class='widget-content'>
     <b:if cond='data:team == "true"'> <!-- team blog profile -->
       <ul>
         <b:loop values='data:authors' var='i'>
           <li><a expr:href='data:i.userUrl'><data:i.display-name/></a></li>
         </b:loop>
       </ul>
      
     <b:else/> <!-- normal blog profile -->
      
       <b:if cond='data:photo.url != ""'>
         <a expr:href='data:userUrl'><img class='profile-img' expr:alt='data:photo.alt' expr:height='data:photo.height' expr:src='data:photo.url' expr:width='data:photo.width'/></a>
       </b:if>
      
       <dl class='profile-datablock'>
         <dt class='profile-data'><data:displayname/></dt>
        
         <b:if cond='data:showlocation == "true"'>
           <dd class='profile-data'><data:location/></dd>
         </b:if>
        
         <b:if cond='data:aboutme != ""'><dd class='profile-textblock'><data:aboutme/></dd></b:if>
       </dl>
       <a class='profile-link' expr:href='data:userUrl'><data:viewProfileMsg/></a>
     </b:if>
    
     <b:include name='quickedit'/>
   </div>
 </b:includable>
</b:widget>

　まずブログを複数人で書いてる場合（<b:if cond='data:team == "true"'>）と、一人で書いている場合（<b:else/>）に分かれるのね。自分のブログは一人。φ('д'*)ﾌﾑﾌﾑ

そんで表示する内容はプロフィール画像（<img class='profile-img' expr:src='data:photo.url' />）、ユーザー名（<data:displayname/>）、所在地（<data:location/>）、自己紹介文（<data:aboutme/>）と詳細プロフィールへのリンク（<a class='profile-link' expr:href='data:userUrl'>）か。φ('д'*)ﾌﾑﾌﾑ

あとプロフィールのとこって<DL>（定義リスト）タグ使ってるのね。（・∀・）ｲｲ!!



　次にスタイルシートの方を見たら、ちゃんと画像に対して「float:left;」って書いてあった。
しかしよく見ると「#Profile1 img.photo{」。コードの方は「class='profile-img'」なんだから「#Profile1 img.profile-img{」じゃなきゃ駄目じゃん。(　´∀｀)σ)∀`)


そんなわけでプロフィールの無駄スペース削除に成功。

修正後のプロフィール

修正したスタイルシートはこんな。

/* Profile
----------------------------------------------- */
#Profile1{
 background-color:#F8F8EE;
 border:1px solid #EEE;
 padding:5px;
 }
#Profile1 h2{
 border-color:#dcd6b3;
}
#Profile1 img.profile-img{
 float:left;
 margin:10px;
 }
#Profile1 dt{margin:5px 0px;}
#Profile1 a{font-weight:bold; text-decoration:underline;}
#Profile1 a:link,
#Profile1 a:visited{color:#FFA300;}
#Profile1 a:hover{color:#333;}

Bloggerコミュ(σ･∀･)σ