hello
▼・ｪ・▼ﾃﾞｽ
おもむろに、Blog Customize の記事を投入。
この Blog は、「はてなBlog」で
「SOHO」というテーマを利用させてもらっています。
シンプルで、とても気に入っているので、個人Blogでも利用しているほど。
今回、カテゴリーの部分が ちょっぴり気になってしまったので
カスタマイズをすることにしました。
デフォルトのままだと、えらい縦幅をとる
デフォルトはリスト方式
カテゴリー欄は、デフォルトのままだと「リスト方式」
この先きっと、カテゴリー増加していくと思われるので
このままだと縦幅がえらい伸びていってしまう･･･。
日記よりも、サイドバーが異様に長いとかバランス悪すぎ。
‥ってｺﾄで、カスタマする決心をして ｇｇｒｋｓ
カテゴリーをタグ風に
今回お世話になりましたのは、上記のBlog。
要点だけをさっくりとシェアしてくださってます。
とてもありがたい！
デザイン設定＞カスタマイズ＞デザインCSS に以下のコードを追加。
/* カテゴリーをタグ風に */
.hatena-module {
clear: both;
overflow: hidden;
}
.hatena-module-category .hatena-module-body ul.hatena-urllist li {
float: left;
}
/* category css */
.hatena-module-category .hatena-module-body ul.hatena-urllist li {
float: left;
list-style-type: none;
margin: 0 2px 2px;
padding: 7px;
background-color: #ff99cc; /* 背景色 */
text-decoration: none;
border-radius: 10px 10px 10px 10px
}
.hatena-module-category .hatena-module-body ul.hatena-urllist li a{
color: #fff; /* 文字色 */
}
上記の設定のまま追加すると‥
シェアしてくださっているBlogと全く同じ色合いに
背景色や、文字の色を変更したい場合は
コード内の赤字部分を変更すればよいだけ。
▼・ｪ・▼が色コードで よく利用するのは以下のサイト。
出来上がり♡
文字のサイズを変える
カテゴリーリンクの文字サイズを変えたければ‥
font-size:10px; /* 文字ｻｲｽﾞ */
上記のコードを一番下の行に付け足す。
.hatena-module-category .hatena-module-body ul.hatena-urllist li a{
color: #fff; /* 文字色 */
font-size:10px; /* 文字ｻｲｽﾞ */
}
「10px」にしてみた
シェア猫さん、ありがとうございました！
テーマ「SOHO」の基本的なカスタマイズ方法は
以下のページで紹介されています。
今回は、この辺で終わりです。
最後までお付き合いくださいまして、ありがとうございました。
Maincraft開発陣の方々と、情報やｱｲﾃﾞｨｱをｼｪｱしてくださる先人の方々、
惜しみなく素晴らしい造形物を公開し、ｲﾝｽﾋﾟﾚｰｼｮﾝを与えてくださる先人の方々に感謝。
どなたさまも 素晴らしい Maincraft Life を 🕊️
愛と感謝と祝福を込めて❤ *ଘ(੭*ˊᵕˋ)੭* ੈ✩‧₊˚
ﾟ*｡.ღ ⊹⊱ 𝔏𝔬𝔳𝔢 & 𝔅𝔩𝔢𝔰𝔰 𝔶𝔬𝔲 ⊰⊹ ღ.｡*ﾟ
𝔱𝔥𝔞𝔫𝔨 𝔶𝔬𝔲.
𝔦 𝔩𝔬𝔳𝔢 𝔶𝔬𝔲.
