palm84.com

革命的愛熊主義者同盟!

はてなのカテゴリ名リンクをインライン表示にします...

CSSわかる人なら言わずもがなと思います...

カテゴリ名リンクをこんな風にするのです。

f:id:palm84:20150510013215p:plain

まず、元ソースを確認...(※ テーマのCSSにより違いがあるのでご注意をば!)

<div id="box2-inner">
<省略>
<div class="hatena-module hatena-module-category">
  <div class="hatena-module-title">カテゴリー</div>
  <div class="hatena-module-body">
    <ul class="hatena-urllist">
        <li><a href="http://palm84.hatenablog.com/archive/category/%E5%B0%8F%E3%83%8D%E3%82%BF">小ネタ (19)</a></li>
        <li><a href="http://palm84.hatenablog.com/archive/category/Linux">Linux (11)</a></li>
        <li><a href="http://palm84.hatenablog.com/archive/category/Windows">Windows (7)</a></li>
    </ul>
  </div>
</div>

li 要素を inline 指定。

#box2-inner .hatena-module-category .hatena-urllist li {
display: inline;
}

#box2-inner .hatena-module-category .hatena-urllist li a {
margin:1em 1em 1em 0;
}

a 要素に margin 指定、上-右-下-左の順です。

はてなダイアリーの場合は・・・

<div class="sidebar">
<省略>
<div class="hatena-module hatena-module-sectioncategory">
  <div class="hatena-moduletitle">カテゴリー</div>
    <div class="hatena-modulebody">
      <ul class="hatena-sectioncategory">
        <li><a href="/palm84/archive?word=%2A%5B%BB%A8%B5%AD%5D">雑記</a></li>
       <li><a href="/palm84/archive?word=%2A%5B%A5%AF%A5%DE%A1%BC%5D">クマー</a></li>
      <li><a href="/palm84/archive?word=%2A%5B%A4%E1%A4%E2%5D">めも</a></li>
     </ul>
    </div>
  </div>
</div>
.sidebar .hatena-sectioncategory {
margin: 0 !important;
padding: 1em !important;
}

.sidebar .hatena-sectioncategory li {
display: inline;
margin: 0;
}

ul 要素全体に margin:0padding:1em を指定してみました。こんなかんじで...

f:id:palm84:20150510013216p:plain


では、ほな。


BOLERO

BOLERO

ビリーフ

ビリーフ