Advertisement
Guest User

Untitled

a guest
Feb 24th, 2020
449
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.28 KB | None | 0 0
  1. /* トップページカード型 */
  2. @media (min-width: 768px){
  3. .page-index .archive-entries {
  4. display: -webkit-flex;
  5. display: flex;
  6. -webkit-flex-wrap: wrap;
  7. flex-wrap: wrap;
  8. -webkit-justify-content: space-between;
  9. justify-content: space-between;
  10. }
  11.  
  12. .page-index .archive-entry {
  13. margin-bottom: 20px!important;
  14. padding-bottom: 20px;
  15. box-sizing: border-box;
  16. width: calc(50% - 20px);
  17. }
  18.  
  19. .page-index .entry-thumb {
  20. float:none;
  21. display: block;
  22. width: 100%;
  23. height: 200px;
  24. background-position: center center;
  25. background-size: cover;
  26. border-radius: 8px;
  27. }
  28. .entry-thumb-link:hover {
  29. opacity:0.7;
  30. }
  31. }
  32. /* トップページカード型終了 */
  33.  
  34. /* ブルグタイトル背景・色 */
  35. body{background:#00bfff;}
  36. #title a,
  37. #blog-title #blog-description {
  38. color: #ffffff;
  39. font-size: 2em;
  40. }
  41. /* ブルグタイトル背景・色終了 */
  42.  
  43. /* ブルグタイトル真ん中寄せ */
  44. #blog-title {
  45. padding-top: 0px;
  46. padding-bottom: 0px;
  47. height: initial;
  48. text-align: center;
  49. }
  50. /* ブルグタイトル真ん中寄せ終了 */
  51.  
  52. /* レスポンシブシェアボタン */
  53. .sns-header, .sns-footer {
  54. padding: 0;
  55. }
  56. .sns-area {
  57. margin: 10px auto;
  58. padding: 0;
  59. overflow: hidden;
  60. table-layout: fixed;
  61. display: table;
  62. width: 100%;
  63. }
  64. .sns-area li {
  65. list-style-type: none;
  66. display: table-cell;
  67. vertical-align: middle;
  68. }
  69. .sns-area li:last-child {
  70. margin-right: 0
  71. }
  72. .sns-link {
  73. position: relative;
  74. display: block;
  75. color: #fff;
  76. text-align: center;
  77. text-decoration: none;
  78. outline: none;
  79. overflow: hidden;
  80. height: 42px;
  81. line-height: 42px;
  82. }
  83. .sns-link::after {
  84. position: absolute;
  85. top: 50%;
  86. left: 50%;
  87. z-index: 2;
  88. display: block;
  89. content: '';
  90. width: 0;
  91. height: 0;
  92. background-color: rgba(255, 255, 255, .3);
  93. border-radius: 50%;
  94. -webkit-transform: translate(-50%, -50%);
  95. transform: translate(-50%, -50%);
  96. opacity: 0;
  97. }
  98. .entry-header-html a.sns-link,
  99. .entry-footer-html a.sns-link,
  100. a.sns-link:hover {
  101. color: #fff;
  102. text-decoration:none;
  103. }
  104. .sns-link:hover::after {
  105. -webkit-animation: circle .75s;
  106. animation: circle .75s;
  107. }
  108. @-webkit-keyframes circle {
  109. 50% {
  110. opacity: 1;
  111. }
  112. 100% {
  113. width: 300px;
  114. height: 300px;
  115. }
  116. }
  117. @keyframes circle {
  118. 50% {
  119. opacity: 1;
  120. }
  121. 100% {
  122. width: 300px;
  123. height: 300px;
  124. }
  125. }
  126. .sns-twitter {
  127. color: #fff;
  128. background: #55acee;
  129. }
  130. .sns-facebook {
  131. color: #fff;
  132. background: #3a5795;
  133. }
  134. .sns-bookmark {
  135. color: #fff;
  136. background: #00A5DE;
  137. }
  138. .sns-line {
  139. color: #fff;
  140. background: #00B900;
  141. }
  142. .sns-pocket {
  143. color: #fff;
  144. background: #EE4256;
  145. }
  146. .fa-twitter, .blogicon-facebook, .blogicon-bookmark, .fa-line, .blogicon-chevron-down, .fa-facebook-official {
  147. margin-right: 5px;
  148. }
  149. .share-text {
  150. padding-left: 4px;
  151. }
  152. @media only screen and (max-width: 767px) {
  153. .share-text, .sns-txt {
  154. display: none;
  155. }
  156. .blogicon-twitter, .blogicon-bookmark, .fa-google-plus, .blogicon-chevron-down, .fa-facebook-official {
  157. margin-right: 0;
  158. }
  159. }
  160. /* レスポンシブシェアボタン終了 */
  161.  
  162. /* 目次カスタマイズ */
  163. .table-of-contents{
  164. padding: 20px 10px 20px 40px;
  165. border-radius: 5px;
  166. background: #f0ffff;
  167. }
  168. /* 目次カスタマイズ終了 */
  169.  
  170. /* 大見出し */
  171. h3 {
  172. position: relative;
  173. padding: 0.6em;
  174. background: #00ffff;
  175. border-radius: 15px;
  176. }
  177.  
  178. h3:after {
  179. position: absolute;
  180. content: ”;
  181. top: 100%;
  182. left: 30px;
  183. border: 15px solid transparent;
  184. border-top: 15px solid #00ffff;
  185. width: 0;
  186. height: 0;
  187. }
  188. /* 中見出し */
  189. h4 {
  190. background: linear-gradient(transparent 85%, #ffe4b5 80%);
  191. }
  192. /* 小見出し */
  193. h5 {
  194. background: linear-gradient(transparent 85%, #ffe4b5 80%);
  195. }
  196. /* 見出しカスタマイズ終了 */
  197.  
  198. /* サイドバータイトル */
  199. .hatena-module-title {
  200. position: relative;
  201. color: #00bfff;
  202. font-size: 120%;
  203. font-weight: bold;
  204. margin-bottom: 15px;
  205. padding: .25em 0 .25em 0;
  206. font-family: 'Lucida Grande', 'segoe UI', Verdana, Arial, sans-serif;
  207. border-bottom: 2px solid #00bfff;
  208. }
  209. /* サイドバータイトル終了 */
  210.  
  211. /*コピーライト*/
  212. #copyright {
  213. padding: 20px;
  214. text-align: center;
  215. background: #33DDEE;/*背景色*/
  216. font-size: 14px;
  217. color:#ffffff;/*文字の色*/
  218. }
  219. /*コピーライト終了*/
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement