シュンクマのブログ

ゲームの紹介や考察,ガジェットのレビューをしていきますヾ(*´∀`*)ノ

カッコよく見せるために追加したデザインcss


カッコよく見せるために追加したデザインcssカッコよく見せるために追加したデザインcss
カッコイイな,と思った仕様をコピペだけで追加できるようにしました.

 

こんばんは,シュンクマです.

先ほどにブログを書き始めてから初めてPVが100に到達しました.

 

この場を用いてお礼申し上げます.

書いている内容もなく,見づらい文章ばかりなブログではありますが頑張っていきますのでよろしくお願いいたします.

 

記事を書き始めて6日間,継続期間が4日になった今日この頃.

記事をupするだけでなくブログのデザインそのものも気になってきました.

 

そこで先輩方の様々のはてなブログを拝見させて頂き,格好良さそうな仕様を追加させて頂きました.

 

結構おススメなものもあり,自分でも追加したものを再度確かめる意味も込めて参考にさせて頂いた記事も交えながらそれらをご紹介させて頂きます.

 

今のモチベとなっている継続期間を切らせたくないので書きかけで投稿します.

読みにきてくれた方々には誠に申し訳ありません.

追記.HTMLの勉強を始めました.下記の内容を少しでも詳しく説明できるよう頑張ります.

 

 

 

サイドバーの注目記事と最新記事の背景にサムネを入れてカード型にする

 

f:id:shun9ma:20190722234144p:plain

 

 

ソース コードを表示

/* サイドバーの記事の背景にサムネを入れる */
.hatena-urllist{
display: block;
}

.urllist-itstrong{
display: block;
position: relative;
padding: 0px !important;
margin: 0px !important;
border: none !important;
}

.urllist-itstrong .urllist-itstrong-inner{
padding: 0px !important;
margin: 0px !important;
border: none !important;
}

.urllist-itstrong .urllist-image-link{
padding: 0px !important;
margin: 0px !important;
border: none !important;
}

.urllist-itstrong .urllist-image{
display: block;
padding: 0px !important;
margin: 0px !important;
border: none !important;
width: 230px !important; //100%
height: auto !important; //auto
}

.urllist-itstrong .urllist-title-link{
display: block;
position:absolute;
width: calc( 100% - 20px );

left:0px;
bottom:0px;
color:#FFFFFF;
font-size: 15px;
font-weight: bold;
text-decoration: none;
text-shadow: 0px 0px 3px rgba(0,0,0,0.5);

margin:0px !important;
padding: 5px;
padding-left: 10px;
padding-right: 10px;

background: linear-gradient( rgba(0,0,0,0) , rgba(0,0,0,0.8) );
}

.urllist-itstrong .urllist-title-link:hover
.urllist-itstrong .urllist-title-link:active
.urllist-itstrong .urllist-title-link:visited{
color:#FFF;
}

.bookmark-widget-counter{
display: block;
width: 100%;
position:absolute;
left:0px;
top:5px;
text-align: right;
vertical-align: top;
}

.bookmark-widget-counter img{
margin-right: 5px;
vertical-align: top;
}

 

 

 

 

サイドバーで追従してくれる目次の追加

 

f:id:shun9ma:20190722234616p:plain
f:id:shun9ma:20190722234213p:plain

 

 

ソース コードを表示

/*-------------*/
/* 追尾する目次 */
/*-------------*/
#stoc-module {
backface-visibility: hidden;
}
#stoc-module.tracking {
margin-bottom: 0;
}
#stoc-module.fixed {
position: fixed;
}
#stoc-module.absolute {
position: absolute;
}
#stoc-module.sticky {
position: -webkit-sticky;
position: sticky;
}
#stoc-module.fade-in {
animation: fadeIn 300ms;
}
@keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}

#stoc {
overflow-y: auto;
}
#stoc.shadow {
/* Shadows */
background:
radial-gradient(farthest-side at top, rgba(0,0,0,.17), transparent) top / 100% 11px,
radial-gradient(farthest-side at bottom, rgba(0,0,0,.17), transparent) bottom / 100% 11px;
background-repeat: no-repeat;
background-attachment: scroll;
}
#stoc ol {
margin: 0;
padding: 0 0 0 1strong;
list-style-type: none;
}
#stoc > ol {
padding-left: 0;
}
#stoc.shadow > ol {
/* Shadow covers */
background:
linear-gradient(#fff 30%, transparent) top / 100% 40px,
linear-gradient(transparent, #fff 70%) bottom / 100% 40px;
background-repeat: no-repeat;
background-attachment: local;
}
#stoc a {
padding: 2px 2px 2px 6px;
display: block;
text-decoration: none;
}
#stoc:not(.touch) a:hover {
background-color: rgba(0,0,0,.04);
text-decoration: underline;
}
#stoc .active {
background-color: rgba(0,0,0,.04);
}

#stoc::-webkit-scrollbar {
width: 8px;
background: #24433E; //#ececec;
}
#stoc::-webkit-scrollbar-button {
display: none;
}
#stoc::-webkit-scrollbar-thumb {
background: #b1b1b1;
}

 

 

 

 

画像にマウスを乗せた時にその画像をズームしたり光らせる処理の追加

 

 

 

ソース コードを表示

/*マウスオーバーで画像がズームする*/
.img_wrap{
border: 1px solid #ddd;
width: 90%; //300px;
height: 100%; //226px;
margin: 0 auto;
overflow: hidden;
cursor: pointer;
}
.img_wrap img{
width: 100%;
height: 280px;
transition-duration: 0.5s;
}
.img_wrap:hover img{
transform: scale(1.2);
transition-duration: 0.5s;
opacity: 0.6; //光らせる設定
}

 

 

 

階層化されたグローバルナビゲーションバーの追加

 

 

ソース コードを表示

/*****グローバルメニュー****/
#menu{
width: 100%;
margin: 10px auto;
background: #444;/*7*/
}
#menu-inner{
width: 1000px;/*1*/
height: 40px;/*2*/
margin: 0 auto;
background: #444;/*8*/
}
#menu-btn{display: none;}
#menu-content{
padding-left: 0;
margin: 0;
width: 100%;
height: 100%;
list-style-type: none;
}
#menu-content > li{
position: relative;
float: left;
height: 100%;
text-align: center;
}
#menu-content > li > a{
position: relative;
display: block;
height: 100%;
padding-left: 15px;/*3*/
padding-right: 15px;/*3*/
line-height: 40px;/*2*/
background: #444;/*9*/
color: #fff;/*10*/
font-size: 70%;
text-decoration: none;
z-index: 2;
}
#menu-content > li > a:hover{
background: #555;/*11*/
color: #fff;/*12*/
}
#menu-content > li > a > .blogicon-chevron-down{margin-right: 5px;}
/*2階層目*/
#menu-content > li > ul.second-content{
visibility: hidden;
position: absolute;
top: 0;
margin: 0;
padding-left: 0;
list-style-type: none;
z-index: -1;
}
#menu-content > li:hover > ul.second-content{
visibility: visible;
top: 40px;/*2*/
z-index: 1;
transition: all .3s;
}
#menu-content > li > ul.second-content > li{
text-align: center;
width: 200px;/*4*/
height: 40px;/*5*/
}
#menu-content > li > ul.second-content > li > a{
display: block;
line-height: 40px;/*5*/
background: #444;/*13*/
color: #fff;/*14*/
font-size: 70%;
text-decoration: none;
}
#menu-content > li > ul.second-content > li > a:hover{
background: #555;/*15*/
color: #fff;/*16*/
}
/*******トグルメニュ*********/
@media screen and (max-width:960px){/*19*/
#menu-inner{
width: 100%;
height: auto;
}
#btn-content{text-align: right;}/*20*/
#menu-btn{
display: inline-block;
padding: 8px 15px;
margin: 5px;
cursor: pointer;
background: #555;/*17*/
color: #fff;/*18*/
font-size: 70%;
}
#menu-content{
display: none;
width: 100%;
}
#menu-content > li{
width: 100%;
height: 40px;/*6*/
float: none;
}
#menu-content > li > a{
width: 100%;
line-height: 40px;/*6*/
padding: 0;
text-decoration: none;
}
/*2階層目*/
#menu-content > li:hover > ul.second-content{display: none;}
#menu-content > li > a > .blogicon-chevron-down{display: none;}
}