編集履歴

質問編集履歴

スクリーンショット追加致しました。

2017/04/28 04:29

投稿

sayaka

スコア6

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -12,7 +12,7 @@
 スマホで見ると,サムネイル部分がフッターに被り、下にスクロールできず固まったままで、下のコンテンツが見えなくなってしまいました。PCで見るときちんと表示されるのに、スマホで見るとこの様な表示担っております。
+![イメージ説明](223dabacbe4b4a95af26c8d6ebe26530.png)

スクリーンショット追加

2017/04/28 04:29

投稿

sayaka

スコア6

test CHANGED Viewed

File without changes

test CHANGED Viewed

File without changes

スクリーンショットの追加

2017/04/28 04:22

投稿

sayaka

スコア6

test CHANGED Viewed

File without changes

test CHANGED Viewed

File without changes

2017/04/28 04:16

投稿

sayaka

スコア6

test CHANGED Viewed

File without changes

test CHANGED Viewed

File without changes

2017/04/28 04:13

投稿

sayaka

スコア6

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -16,840 +16,6 @@
-```
-###該当のソースコード
-@charset "UTF-8";
-body{
-  font-family: 欧体楷書;
-  font-color: #FFFFFF;
-  padding-bottom: 50px;
-}
-#top{
-  width: 100%;
-  height: 850px;
-  color: #F5F5F5;
-}
-.top__title{
-  text-align: center;
-  font-size: 10em;
-  margin: 200px 10px 0 700px ;
-  writing-mode: vertical-rl;
-	-ms-writing-mode: tb-rl;
-	-webkit-writing-mode:vertical-rl;
-	text-shadow: 3px 3px 1px #000000;
-	font-weight: bold;
-	text-align: center;
-}
-.container{
-	width:100%;
-	height:600px;
-	text-align: center;
-	background-image: url(../images/washi.jpg);
-}
-.top__button{
-  margin: 0 auto;
-  text-align: center;
-  width: 100%;
-  height: 50px;
-  margin: 20px 0 30px 0;
-}
-.btn{
-  display: inline-block;
-  width: 200px;
-  margin: 0 20px 0 20px;
-  padding: 15px 10px;
-  border: 2px solid #000000;
-  background: transparent;
-  color: #fff;
-  text-align: center;
-  text-decoration: none;
-  line-height: 1;
-  transition: .3s;
-  font-size: 1.7em;
-  font-weight: 800;
-}
-.btn-ghost {
-  background: transparent;
-  border-radius: 0;
-}
-.btn-white.btn-ghost {
-  color: black;
-  border: 2px solid #000000;
-  border-radius: 1px;
-}
-.btn-ghost.btn-white:hover {
-  box-shadow: 0 0 20px 5px rgba(23, 23, 22, 0.5) inset;
-}
-.gallery__item{
-  display: inline-block;
-  position: relative;
-  width: 220px;
-  height: 220px;
-}
-img.mfp-img{
-  margin: 0 0;
-  width: 1000px;
-  height: 800px;
-}
-.mfp-title{
-  font-family: 欧体楷書, Georgia, 'Hiragino Mincho ProN', 'Yu Mincho', serif;
-  width: 1000px;
-}
-.image-gallery__img{
-  margin: 0 auto;
-  width: 220px;
-  height: 220px;
-}
-.image-gallery__img:hover{
-  opacity: .8;
-  background:rgba(23, 23, 22, 0.5);
-  -webkit-transform: scale(0.9);
-          transform: scale(0.9);
-}
-.icontitle{
-    padding: 10px 10px;
-    width: 40%;
-    margin:10px auto;
-    position: center;
-    text-align: center;
-    background: rgba(18, 19, 20, 0.8);
-    border: 2px solid #FFFFFF;
-    border-radius: 2px;
- }
-.icontitle h2,
-.icontitle h4{
-  text-align: center;
-  color:#F5F5F5;
-	font-weight: bold;
-	position: relative;
-	text-align: center;
- }
- .icontitle h2{
-   position: relative;
-	padding-bottom: .5em;
-	border-bottom: 4px solid #CD5C5C;
- }
- .icontitle h2::after{
-  position: absolute;
-	bottom: -4px;
-	left: 0;
-	z-index: 2;
-	content: '';
-	width: 50%;
-	height: 4px;
-	background-color: #4169E1;
- }
-.container2{
-    position: absolute;
-    display: block;
-    width: 100%;
-    height: 2500px;
-    color: white;
-    text-align: center;
-    min-width: 24px;
-    background:#000000;
-    background-image: url(../images/sakura1.png), url(../images/momi.png);
-	  background-position: top right, bottom;
-	  background-repeat: no-repeat;
-	  background-size: 30%, 100%;
-	  word-break: break-all;
- }
-.section{
-  position:absolute;
-  display:block;
-  color:white;
-  width:100%;
- }
-#sect1{
-   top:400px;
-}
-#sect2{
-  top: 1000px;
-}
-#sect3{
-   top: 1500px;
-}
-.rightbox_1 {
-    background: rgba(18, 19, 20, 0.8);
-    border: 2px solid #FFFFFF;
-    border-radius: 2px;
-    padding:5px 5px;
-    width: 35%;
-    margin-right:5%;
-    float:left;
-    text-align: left;
-}
-.leftbox_2,
-.leftbox_4{
-  background: rgba(18, 19, 20, 0.8);
-  border: 2px solid #FFFFFF;
-  border-radius: 2px;
-  padding: 10px 10px;
-  width: 35%;
-  float:left;
-  text-align: left;
-}
-.rightbox_3{
-  background: rgba(18, 19, 20, 0.8);
-  border: 2px solid #FFFFFF;
-  border-radius: 2px;
-  padding: 10px 10px;
-  width: 35%;
-  margin-right: 3%;
-  margin-left: 10%;
-  float:left;
-  text-align: left;
-}
-.rightbox_5{
-  background: rgba(18, 19, 20, 0.8);
-  border: 2px solid #FFFFFF;
-  border-radius: 2px;
-  padding: 10px 10px;
-  width: 40%;
-  float:right;
-  margin-right: 3%;
-  text-align: left;
-}
-.leftbox_6{
-  background: rgba(18, 19, 20, 0.8);
-  border: 2px solid #FFFFFF;
-  border-radius: 2px;
-  padding: 10px 10px;
-  width: 35%;
-  float:right;
-  text-align: left;
-}
-.section h2{
-  font-size: 2em;
-  position: relative;
-	/*padding: 0 .4em .1em;*/
-	text-decoration: none;
-	background: linear-gradient(transparent 90%, #4169E1 0%);
-	padding-bottom: 2px;
-}
-.leftbox_2 h2,
-.rightbox_3 h2,
-.leftbox_6 h2{
-  font-size: 2em;
-  position: relative;
-	/*padding: 0 .4em .1em;*/
-	text-decoration: none;
-	background: linear-gradient(transparent 90%, #CD5C5C 0%);
-	padding-bottom: 2px;
-}
-.section h2:first-letter{
-  font-size: 3em;
-}
-.section p{
-  font-size: 1.3em;
-}
-footer{
-  background-image: url(../images/wasi2.jpg);
-    position: fixed;
-    margin-top: 50px;
-    bottom: 0;
-    width: 100%;
-    height: 30px;
-    color: #000000;
-}
-#footer_nav a {
-  color: #000000 !important;
-  text-decoration: none
-}
-footer #footer_nav {
-    padding: 10px 0;
-}
-footer #footer_nav ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    text-align: center;
-}
-footer #footer_nav li {
-    display: inline;
-    border-left: solid 1px #000000;
-    margin-left: 10px;
-    padding-left: 10px;
-    color: #000000;
-    font-size: 1em
-    font-weight bold;
-}
-footer #footer_nav li:last-child {
-    border-right: solid 1px #000000;
-    padding: 0 8px;
-}
-@media (max-width: 768px){
-#top{
-  width: 100%;
-  height: 200px;
-  color: #F5F5F5;
-}
-.top__title{
-  text-align: center;
-  margin: 5px 3px 0 180px ;
-  writing-mode: vertical-rl;
-	-ms-writing-mode: tb-rl;
-	-webkit-writing-mode:vertical-rl;
-}
-.top__title h2,
-.top__title h3{
-  font-size: 12px;
-}
-.container{
-	width:100%;
-	height:600px;
-	text-align: center;
-	background-image: url(../images/washi.jpg);
-}
-.top__button{
-  margin: 2px 2px 0px 2px;
-  text-align: center;
-}
-.btn{
-  display: inline-block;
-  width: 80px;
-  margin: 0 1px 0 1px;
-  padding: 3px 3px;
-  border: 1px solid #fff;
-  background: transparent;
-  color: #fff;
-  font-size: 10px;
-  text-align: center;
-  text-decoration: none;
-  line-height: 1;
-  transition: .3s;
-}
-.gallery__item{
-  display: inline-block;
-  position: relative;
-  width: 100px;
-  height: 100px;
-}
-img.mfp-img{
-  margin: 0 0;
-  width: 400px;
-  height: 350px;
-}
-.mfp-title{
-  font-family: 欧体楷書, Georgia, 'Hiragino Mincho ProN', 'Yu Mincho', serif;
-  width: 400px;
-  font-size: 10px;
-}
-.image-gallery__img{
-  margin: 0 auto;
-  width: 100px;
-  height: 100px;
-}
-.leftbox_6{
-  background: rgba(18, 19, 20, 0.8);
-  border: 2px solid #FFFFFF;
-  border-radius: 2px;
-  padding: 10px 10px;
-  width: 40%;
-  float:right;
-  text-align: left;
-}
-.section h2{
-  font-size: 15px;
-  position: relative;
-	text-decoration: none;
-	background: linear-gradient(transparent 90%, #4169E1 0%);
-	padding-bottom: 2px;
-}
-.section p{
-  font-size: 13px;
-}
-}
 ###試したこと
 メディアクエリでモバイル対応できる様に、試してみたりヘッダー部分の画像を縮めてみたりと試みたのですがどれもダメでした・・・。