Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【はてなブログ】再度、サイドバーについて試してみました。

 どうも!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%);
}

 

上のほうは、モジュール毎に枠線をつけてみたり、ビミョーな背景色変化をつけてみたりしたもの。

下のほうは、見出し部分の装飾です。

 

↓こんな感じの見た目になりました!

f:id:little_strange:20210727224819p:plain

 

 

月別アーカイブ埋め込み

「月別アーカイブ」は内容がページを読み込んだ後に書き込まれているようでしたので、例えばタグを記事中に書くと、記事中でも埋め込めるのかな?と、試してみました。

 

 

 

できますね!!

なお、元のコードはブログ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>

こんな感じのコードで(これはカテゴリーを非表示にする例)、サイドバーから特定のモジュールを非表示にする事ができます。

…と、それだけだとあまり意味がなさそうですが、「表示・非表示を見ている人が切り替え可能にする」仕組みを作るなら、まずこれが可能である事を確認する必要がありました。

※試しただけでこれはこの記事にコードを入れていないので、カテゴリーはサイドバーに表示されています。

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^