どうも!LSSです!!
サイドバーをどうにかしたい病。 - Little Strange Software
どうにかしたかったのですが、とりあえずデザインCSSをちょっと変更しました。
あと、ふと思いついた事を試してみたりも。
デザインCSSに追加したコード
コード
.hatena-module{
border:3px inset #dddddd;
border-radius:10px;
margin:6px 6px 26px 6px;
padding:10px;
background-image:linear-gradient(30deg,#ffffffff 0%,#ffffff40 100%);
}
.hatena-module-title{
background-image:linear-gradient(#ffaaaa00 60%,#ffaaaaa0 90%,#ffaaaa00 100%);
}
上のほうは、モジュール毎に枠線をつけてみたり、ビミョーな背景色変化をつけてみたりしたもの。
下のほうは、見出し部分の装飾です。
↓こんな感じの見た目になりました!
月別アーカイブ埋め込み
「月別アーカイブ」は内容がページを読み込んだ後に書き込まれているようでしたので、例えばタグを記事中に書くと、記事中でも埋め込めるのかな?と、試してみました。
できますね!!
なお、元のコードはブログURLを含んでいましたが、ブログURL無しでも動作させる事ができたので、下記コードをコピペするだけで、はてなブログでは誰でも使用できそうです。
コード
<div class="hatena-module hatena-module-archive" data-archive-type="default" data-archive-url="/archive">
<div class="hatena-module-title">月別アーカイブ</div>
<div class="hatena-module-body"> </div>
</div>
記事中に埋め込む意味はあまりなさそうですがw
ヘッダやフッタに仕込んだりしてもいいかもですね^^
注目記事埋め込み
「注目記事」も同様に、コードコピペで埋め込む事ができました。
コード
<div class="hatena-module hatena-module-entries-access-ranking" data-count="10" data-source="total_bookmark" data-enable_customize_format="0" data-display_entry_category="0" data-display_entry_image="0" data-display_entry_image_size_width="100" data-display_entry_image_size_height="100" data-display_entry_body_length="0" data-display_entry_date="0" data-display_entry_title_length="20" data-restrict_entry_title_length="0" data-display_bookmark_count="0">
<div class="hatena-module-title">注目記事</div>
<div class="hatena-module-body"> </div>
</div>
この最初の方にある、
data-count="10"
の数値を変える事で、件数を変更する事ができますが、11以上は何も表示されなくなっちゃいます^^;
ただ「注目記事」には色々設定があるので、それによってコードの内容も変わってきそうですね。
モジュール非表示
ブログの設定で表示するように設定しているモジュールを、CSSで非表示にする…というのも実験してみました。
コード
<style><!--
.hatena-module-category{display:none;}
--></style>
こんな感じのコードで(これはカテゴリーを非表示にする例)、サイドバーから特定のモジュールを非表示にする事ができます。
…と、それだけだとあまり意味がなさそうですが、「表示・非表示を見ている人が切り替え可能にする」仕組みを作るなら、まずこれが可能である事を確認する必要がありました。
※試しただけでこれはこの記事にコードを入れていないので、カテゴリーはサイドバーに表示されています。
ってなとこで、今回はこのへんで!
次回もまた、よろしくお願いします^^