読者です 読者をやめる 読者になる 読者になる

Modernist - テストブログ -

テーマ「Modernist」のテストブログです。

【カスタマイズ】サイドバー/ カテゴリ・アクセスランキング

カスタマイズ
16.09.30:更新
左右:上下の"中央寄せに対応しました🌟CSS Trickさんの記事を参照させて頂きました。
CSS-Trick
「Centering in CSS ~ A Complete Guide ~」
https://css-tricks.com/centering-css-complete-guide/
流石の安定ぶりです🌟✨✨✨ありがとうございました(๑˃ꇴ˂๑)ゞ🌟

 サイドバーの「カテゴリー」と「アクセスランキング」のデザインをイジってみました🌟

今日出来たてホヤホヤですww

 

   - まだ実験的要素が多い事

   - シンプルではない事

を理由に、恐らくテーマ自体には実装しないと思います。

 

 カテゴリ

f:id:DDramonQ:20160930004949p:plain

 

❇︎すみません、ソースコードを間違えて消してしまい、手元にありません(;´ρ`)💦 

:first-of-letter を使っているのは覚えているのですが…。。ご容赦下さい(。•ㅅ•。)💦

アクセスランキング

f:id:DDramonQ:20160930165149p:plain

 

【過去版】

進歩が比較できるので、このまま置いておきますw

f:id:DDramonQ:20160930004956p:plain

 

 

もし導入してみたい方がおられましたら、コードを以下に置いておきますので、各自

「デザイン」→「詳細設定」→「デザインCSS」

の一番下にコピペして下さいね~٩(⁼̴̀ꇴ⁼̴́٩)♪🌟

 

 

 

/*------アクセスランク--------*/

body .hatena-module-entries-access-ranking a {

	font-size:1rem; }

body .hatena-module-entries-access-ranking * {

	margin:0;

	padding:0;

	box-sizing:border-box; }

body li.entries-access-ranking-item {

	margin-top:1rem;

	display:block;

	width:100%;

	height:230px; }

body div.urllist-item-inner {

	padding:2px 2px;

	width:100%;

	height:230px;

	overflow:hidden; }

body a.urllist-image-link {

	display:block;

	width:100%;

	height:230px;

	margin:0 auto; }

body img.entries-access-ranking-image {

	width:100%;

	height:auto;

	-webkit-filter:blur(2px);

	filter:blur(2px);

	 }

body a.entries-access-ranking-title-link {

	display:block;

	width:100%; }

body div.urllist-item-inner {

	position:relative; 

	z-index:0;

	text-align:center; }

body div.urllist-item-inner>a.urllist-image-link {

	position:absolute;

	top:0;

	left:0;

	z-index:1; }

body div.urllist-item-inner>a.urllist-image-link:after {

	position:absolute;

	display:block;

	content:'';

	left:0;

	top:0;

	width:100%;

	height:100%;

	background:rgba(0,0,0,0.4);

	z-index:2; }

body #box2 .hatena-module-entries-access-ranking div.urllist-item-inner>a.entries-access-ranking-title-link {

	display:block;

	position:absolute;

	top:45%;

	left:50%;

	width:90%;

	-webkit-transform:translate(-50%, -50%);

	transform:translate(-50%, -50%);

	z-index:2;

	font-size:1.125rem;

	color:#fff;

	background:transparent;

	text-align:center; }