このページをGridレイアウトにした時のスタイルシート変更

このページをGridレイアウトにした時のスタイルシート変更

このページをGridレイアウトにした時の『スタイルシート（CSS)』の変更箇所を参考に載せました。
SIRIUS（シリウス）のテンプレートやスタイルシートを編集

『メインスタイル（syles.css）』の変更箇所

【置換】
768px　→　640px
1000px →　1080px

 

【交換】
レイアウト
の内容を次のように変更する。

 

  1. /* レイアウト
  2. ===================================
  3. */
  4. .wrapper {
  5. display: -ms-grid;
  6. display: grid;
  7. min-height: 100vh;
  8. width: 100%;
  9. height: 100%;
  10. -ms-grid-columns: 100%;
  11. grid-template-columns: 100%;
  12. -ms-grid-rows: auto 1fr auto auto auto;
  13. grid-template-rows: auto 1fr auto auto auto;
  14. padding: 0px;
  15. margin: 0px;
  16. overflow: hidden;
  17. }
  18. .box {
  19. background-color: #fff;
  20. color: #000;
  21. border-radius: 5px;
  22. border: 1px solid #e8e8e8 ;
  23. padding: 0px;
  24. margin: 0px;
  25. }
  26. .header{
  27. /*↓grid-areaで書く場合はこんな感じ*/
  28. /*grid-area: 1/1/2/2;*/
  29. -ms-grid-row: 1;
  30. grid-row: 1;
  31. -ms-grid-column: 1;
  32. grid-column: 1;
  33. }
  34. .content{
  35. overflow: auto;
  36. /*grid-area: 2/1/3/2;*/
  37. -ms-grid-row: 2;
  38. grid-row: 2;
  39. -ms-grid-column: 1;
  40. grid-column: 1;
  41. }
  42. .left{
  43. /*grid-area: 3/1/4/2;*/
  44. -ms-grid-row: 3;
  45. grid-row: 3;
  46. -ms-grid-column: 1;
  47. grid-column: 1;
  48. }
  49. .right{
  50. /*grid-area: 4/1/5/2;*/
  51. -ms-grid-row: 4;
  52. grid-row: 4;
  53. -ms-grid-column: 1;
  54. grid-column: 1;
  55. }
  56. .footer{
  57. /*grid-area: 5/1/6/2;*/
  58. -ms-grid-row: 5;
  59. grid-row: 5;
  60. -ms-grid-column: 1;
  61. grid-column: 1;
  62. }
  63. @media screen and (min-width: 640px) {
  64. .wrapper {
  65. display: -ms-grid;
  66. display: grid;
  67. min-height: 100vh;
  68. width: 100%;
  69. height: 100%;
  70. -ms-grid-columns: 28% 72%;
  71. grid-template-columns: 28% 72%;
  72. -ms-grid-rows: auto auto 1fr auto;
  73. grid-template-rows: auto auto 1fr auto;
  74. padding: 0px;
  75. overflow: hidden;
  76. }
  77. .box {
  78. background-color: #fff;
  79. color: #000;
  80. border-radius: 5px;
  81. border: 1px solid #e8e8e8;
  82. padding: 0px 5px;
  83. }
  84. .header{
  85. /*↓grid-areaで書く場合はこんな感じ*/
  86. /*grid-area: 1/1/2/3;*/
  87. -ms-grid-row: 1;
  88. grid-row: 1;
  89. -ms-grid-column: 1;
  90. grid-column-start: 1;
  91. grid-column-end: 3;
  92. -ms-grid-column-span: 2; /* MS対策(手動) */
  93. }
  94. .content{
  95. overflow: auto;
  96. /*grid-area: 2/2/4/3;*/
  97. -ms-grid-row: 2;
  98. grid-row-start: 2;
  99. grid-row-end: 4;
  100. -ms-grid-row-span: 2; /* MS対策(手動) */
  101. -ms-grid-column: 2;
  102. grid-column: 2;
  103. }
  104. .left{
  105. /*grid-area: 2/1/3/2;*/
  106. -ms-grid-row: 2;
  107. grid-row: 2;
  108. -ms-grid-column: 1;
  109. grid-column: 1;
  110. }
  111. .right{
  112. /*grid-area: 3/1/4/2;*/
  113. -ms-grid-row: 3;
  114. grid-row: 3;
  115. -ms-grid-column: 1;
  116. grid-column: 1;
  117. }
  118. .footer{
  119. /*grid-area: 4/1/5/3;*/
  120. -ms-grid-row: 4;
  121. grid-row: 4;
  122. -ms-grid-column: 1;
  123. grid-column-start: 1;
  124. grid-column-end: 3;
  125. -ms-grid-column-span: 2; /* MS対策(手動) */
  126. }
  127. }
  128. @media screen and (min-width: 1080px) {
  129. .wrapper {
  130. display: -ms-grid;
  131. display: grid;
  132. min-height: 100vh;
  133. width: 100%;
  134. height: 100%;
  135. -ms-grid-columns: 23% 54% 23%;
  136. grid-template-columns: 23% 54% 23%;
  137. -ms-grid-rows: auto 1fr auto;
  138. grid-template-rows: auto 1fr auto;
  139. padding: 0px;
  140. overflow: hidden;
  141. }
  142. .box {
  143. background-color: #fff;
  144. color: #000;
  145. border-radius: 5px;
  146. border: 1px solid #e8e8e8;
  147. padding: 0px 5px;
  148. }
  149. .header{
  150. /*↓grid-areaで書く場合はこんな感じ*/
  151. /*grid-area: 1/1/2/4;*/
  152. -ms-grid-row: 1;
  153. grid-row: 1;
  154. -ms-grid-column: 1;
  155. grid-column-start: 1;
  156. grid-column-end: 4;
  157. -ms-grid-column-span: 3; /* MS対策(手動) */
  158. }
  159. .content{
  160. /*grid-area: 2/2/3/3;*/
  161. -ms-grid-row: 2;
  162. grid-row-start: 2;
  163. grid-row-end: 3;
  164. -ms-grid-row-span: 1; /* MS対策(手動) */
  165. -ms-grid-column: 2;
  166. grid-column: 2;
  167. }
  168. .left{
  169. /*grid-area: 2/1/3/2;*/
  170. -ms-grid-row: 2;
  171. grid-row: 2;
  172. -ms-grid-column: 1;
  173. grid-column: 1;
  174. }
  175. .right{
  176. /*grid-area: 2/3/3/4;*/
  177. -ms-grid-row: 2;
  178. grid-row: 2;
  179. -ms-grid-column: 3;
  180. grid-column: 3;
  181. }
  182. .footer{
  183. /*grid-area: 3/1/4/4;*/
  184. -ms-grid-row: 3;
  185. grid-row: 3;
  186. -ms-grid-column: 1;
  187. grid-column-start: 1;
  188. grid-column-end: 4;
  189. -ms-grid-column-span: 3; /* MS対策(手動) */
  190. }
  191. }
  192. /* ページ上部へ戻る
  193. ===============================
  194. */

 

 

@media screen and (min-width: 1080px) {
の中の
#header {　を
次のように【変更】する。

  1.   #header {
  2.     margin: 0 auto;
  3.     width: 90%;
  4.   }
  5. }

 

 

【追加】

 

ヘッダー
の最後に、次を追加する。

 

  1. .desc {
  2.          text-align: left;
  3. }

 

を追加

 

 

ブログモードの
.blog .title {　を、次のように【変更】する。

  1. .blog .title {
  2.   font-size: 17px;
  3.   font-weight: 700;
  4.   line-height: 2.5;
  5.   margin-bottom: 10px;
  6. background-size: 20px 20px;
  7. background-image: radial-gradient(#e6e6e6 30%, transparent 0), radial-gradient(#e6e6e6 30%, transparent 0);
  8. background-position: 0 0, 10px 10px;
  9. }

 

 

ブログモードの

 

  1. @media screen and (min-width: 640px) {

 

の前に次のように追加

 

  1. .blog .title {
  2.      text-align: left;}
  3. .blog .info {
  4.      text-align: right;}
  5. .blog .body{
  6.      text-align: left;}
  7. @media screen and (min-width: 640px) {

 

 

CSSの最後に次を追加する。

 

  1. #main,
  2. #menu,
  3. #rmenu,
  4. #categorylist {
  5.   width: 100%;
  6. }