「background-position」を含む日記

■anond:20240210212445

じゃあワイも無責任にはてな用CSS貼っとくわ

パソコン画面右上のアイコンで選ぶ表示スタイルを一番右の「ヘッドライン」表示にしといてな

/* ヘッドライン表示を切り詰める */
/* #container 指定でCSS優先度を上げる必要がある */
body[data-entrylist-layout="headline"] #container .entrylist-main{
  padding-right: 0 !important;
}
body[data-entrylist-layout="headline"] #container .entrylist-contents{
  padding-left: 0 !important;
}
body[data-entrylist-layout="headline"] #container .entrylist-contents-users{
  position: static !important;
}
body[data-entrylist-layout="headline"] #container .entrylist-contents-users{
  top: 14px !important;
}

/* ヘッドライン表示にサムネイルを追加 */
body[data-entrylist-layout="headline"] #container .entrylist-contents-main{
  display: grid;
  grid-template:
    "users    body title"  28px
    "bookmark body domain" 20px
    / 60px 120px 1fr;
}
body[data-entrylist-layout="headline"] #container .entrylist-contents-users{
  grid-area: users;
}
body[data-entrylist-layout="headline"] #container .entrylist-contents-users a span{
  margin-right: 0;
}
body[data-entrylist-layout="headline"] #container .following-bookmarks-container{
  grid-area: bookmark;
  position: absolute;
  left: 20px;
  bottom: 2.5px;
}
body[data-entrylist-layout="headline"] #container .entrylist-contents-body{
  grid-area: body;
}
body[data-entrylist-layout="headline"] #container .entrylist-contents-title{
  grid-area: title;
  z-index: 99;
}
body[data-entrylist-layout="headline"] #container .entrylist-contents-title > a{
  margin-left: -120px;
  padding-left: 120px;
  margin-bottom: -28px;
  padding-bottom: 28px;
  width: 890px;
  white-space: nowrap;
  display: block;
}
body[data-entrylist-layout="headline"] #container .entrylist-contents-body{
  display: block !important;
}
body[data-entrylist-layout="headline"] #container .entrylist-contents-thumb{
  position: static;
}
body[data-entrylist-layout="headline"] #container .entrylist-contents-thumb span{
  width: 100px;
  height: 50px;
}
body[data-entrylist-layout="headline"] #container .entrylist-contents-thumb{
  background: #f0f0f0;
  width: 100px;
  height: 50px;
  background-position: 50%;
  background-size: cover;
  border-radius: 4px;
}
/* 2行目に、総合ではドメイン(domain), サイト内一覧ではカテゴリと時刻(meta), マウスホバー時はいずれも概要文(description) */
body[data-entrylist-layout="headline"] #container .entrylist-contents-domain,
body[data-entrylist-layout="headline"] #container .entrylist-contents-meta,
body[data-entrylist-layout="headline"] #container .entrylist-contents-description{
  grid-area: domain;
  display: block;
  opacity: 0;
  padding: 0 !important;
}
body[data-entrylist-layout="headline"] #container .entrylist-contents-meta > li{
  vertical-align: top;
}
html[data-stable-request-url^="https://b.hatena.ne.jp/entrylist/"] body[data-entrylist-layout="headline"] #container .entrylist-contents-domain,
html[data-stable-request-url^="https://b.hatena.ne.jp/site/"] body[data-entrylist-layout="headline"] #container .entrylist-contents-meta{
  opacity: 1;
}
body[data-entrylist-layout="headline"] #container .entrylist-contents:hover .entrylist-contents-domain img.favicon + span,
body[data-entrylist-layout="headline"] #container .entrylist-contents:hover .entrylist-contents-meta{
  opacity: 0;
}
body[data-entrylist-layout="headline"] #container .entrylist-contents-description{
  opacity: 0;
  position: absolute;
  top: calc(40px - 3px);
  left: calc(180px + 16px + .5em);
  height: 20px;
  line-height: 20px;
  color: #999;
  min-height: auto !important;
  padding-right: 0 !important;
  width: 890px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html[data-stable-request-url^="https://b.hatena.ne.jp/site/"] body[data-entrylist-layout="headline"] #container .entrylist-contents:hover .entrylist-contents-domain,
body[data-entrylist-layout="headline"] #container .entrylist-contents:hover .entrylist-contents-description{
  opacity: 1;
}
/* 増田調整 */
body[data-entrylist-layout="headline"] #container a[href^="/entry/s/anond.hatelabo.jp/"] .entrylist-contents-thumb{
  background-image: url('https://cdn-ak-scissors.b.st-hatena.com/image/square/b1638cdb5807a4788e4ba3c1109a984166e095fc/height=288;version=1;width=512/https%3A%2F%2Fanond.hatelabo.jp%2Fimages%2Fog-image-1500.gif');
}

/* マウスホバー時にサムネも反応させる見た目調整 */
.entrylist-contents-title:hover ~ .entrylist-contents-body .entrylist-contents-thumb{
  opacity: .90;
}

Permalink | 記事への反応(0) | 09:03

ツイートシェア

■ウェブサイトでよく使われるデザインや機能の呼称のまとめ

「あちこちでよく見かける『あの機能』を実装するためにCSSのテクニックとかJSのライブラリとか探したいんだけど、どういうキーワードで探したらいいのかわからない…」という人向け。

注意

※この呼称が正しいとは限りません

※この呼称に統一されているわけではありません

ブロック要素等の角を丸める

→ 角丸

複数の画像を一枚にまとめてCSSのbackground-positionで制御する（メニューのマウスオーバーなどでよく使われる）

→ CSSスプライト

フォームにうっすらと説明文が表示される ＆ フォームにフォーカスすると消える

→ プレースホルダー

フォームに入力された文字にあわせて入力候補を表示する

→サジェスト

ページ内リンク等をクリックした際に滑らかにスクロールさせる

→ スムーズスクロール

他のメニューを押しのけるようなアニメとともにサブメニューが表示される ＆ 開いているメニューは常にひとつだけ

→ アコーディオンメニュー

メニューの横にある＋マークなどをクリックするとその下にサブメニューが表示される ＆ 複数のメニューを開くことができる

→ ツリーメニュー

水平メニューから垂れ下がるようにサブメニューが表示される

→ プルダウンメニュー

横一列に並んだアイテムをスクロールバーでスライド表示 ＆ アイテムが床面に反射したようなエフェクト

→ カバーフロー

水滴のように光沢のあるデザインのボタン

→ アクアボタン

画像のサムネイルをクリックするとオリジナルサイズの画像が画面中央に表示される

→ ライトボックス

警告ウィンドウ等が画面中央に表示される ＆ その他の操作を受け付けない（※指摘を受けて追記しました）

→ モーダルボックス

説明文等が書かれた小さな吹き出しをマウスカーソルの隣に表示させる

→ ツールチップ

タグをアルファベット順に並べる ＆ その使用頻度等に応じてフォントサイズや色を変えて表示する

→ タグクラウド

ひとつの記事を分割してページ番号を振る

→ ページャー、ページネーション

フッター部分が常に最下部に固定されている

→ フッタースティック

Permalink | 記事への反応(2) | 12:14

ツイートシェア

■mixiのユーザースタイルシート書いてみた

ミクシィのデザインにむかついた。

素敵さんが公開されているユーザースタイルシートをつかいたかった

でもニュースと日記ランキングは表示したかった

→自分でなんとかするしかないみたいだ・・・

っちゅーことでつくったcss。

人様のコードを土台にしてるしブログなんてもってないし

コードは整理されてないしもうやる気は残ってないし

でココで公開してしまえ

ミクシィの表示を横幅720pxの２ペインにします。

主な改造点は

・全体的に行間を狭めた。

・全体的に余白を狭めた。

・ニュース・天気・ランキングを一番下に表示。

・ついでに一番上のmixiロゴも控えめな大きさに。

・一部の背景をうっすーい灰色にした。

・さよならmikly。

・絶対位置指定divを排除（全部は無理なので目立つ部分を適当に。）

・グローバルナビとかローカルナビとかのメニュー画像幅調整

・広告をほどほどけした。

・etc...

使い方は「mixi ユーザースタイルシート」あたりで検索してくれ…

/* mixi User Style Sheet by anon */
/*  based mixi 2pain User StyleSheet (by Shao)  thank you ! */

.emoji{display:none !important}

/* 広告*/
p.adBanner, div#diaryComment div.diaryBottomAd, div.prContents, div.sponsorList01{display:none !important} 
div#adBanner{display:none !important}

/*ローカルナビ*/
#localNavigation ul li{position:static;}
#localNavigation ul.localNaviHome img{width:80px !important;}
#localNavigation ul.localNaviFriend img{width:102px !important;}
a#diaryPullDownButton,a#photoPullDownButton,a#videoPullDownButton, a#reviewPullDownButton{display:none !important}
li.mikly, li.review, li.movie{display:none !important}
li.home img {width:73px !important}

/* infomation */
div.information {line-height:1.1 !important; font-size:12px !important;}
div.information h2{padding-top:10px !important; position:static !important; float:left !important; background-position: 10px 10px !important; }
div.information ul{ line-height:1.1 !important;}
div.information div.contents{ padding-bottom:0px !important; position:static; width: 98%;}
div.information div.contents ul { padding-bottom:0px !important;}

/* delete intro */
#intro{display:none !important}

#bodyContents #newFriendDiary,
#bodyContents #newComment,
#bodyContents #newBbs,
#bodyContents #newVideo,
#bodyContents #newAlbum,
#bodyContents #newPlaylist,
#bodyContents #newReview,
#bodyContents #myUpdate{
padding-bottom:5px !important;
}

div div.contents {line-height:1.1 !important; background:#fcfcfc;}
#newMyDiary div.contents dl.contentsList02{ padding-bottom:1px;}

dl.contentsList01{ line-height:1.5 !important;}
dl.contentsList02{ line-height:1.5 !important;}
ul.entryList01{ line-height: 1.2 !important;}
dl.contentsList01 dd{padding-left:16px; background-position: 0% 0.5em;}

/* 3rd column */
#bodySub{float:left !important;width:100% !important; margin:0;padding:0;}
div#help{display:none !important}
div.prContents, div.adBanner, p.greenpower{display:none !important}
div#miklyContents{display:none !important}
div#prSepecial{display:none !important}
div.bodySubSection {width:224px !important; float:left !important; margin:3px !important;}
div.bodySubSection div.heading01{position:static !important;}
div.bodySubSection a.sectionSize{ position:static !important; margin: -20px 0 0 200px !important; }


/* header*/
#headerArea{ background: none !important; height:91px !important;}
#headerArea h1 a{ padding:5px 0 5px !important;text-align:left !important;width:720px !important;}
#headerArea h1 img {width:93px !important;height:23px !important;}

/* footer */
div#headerArea{width:720px !important}
div#headerArea,div#bodyArea,div#footerArea, div#footerArea p,div#footerArea ul{width:720px !important; }
div#footerArea, div#footerArea p,div#footerArea ul{width:720px !important; overflow:hidden  !important; }
div#footerArea ul.footerNavigation01 li { margin:0 2px !important }

Permalink | 記事への反応(1) | 06:12

ツイートシェア