ホームページビルダーSPテンプレートで作成したホームページのスマホ表示時に、ページをスクロールしても常に同じ場所にナビゲーション・メニューが表示されるようにする調査。
<style type=”text/css”>
<!–
#sp-site-navigation-3 {
float: none;
position: fixed!important;
z-index: 9999!important;
}
//–>
</style>
アーカイブ
ホームページビルダー21 SP テンプレートの使い方 グーグルマップAPIキー
ホームページビルダー 21SP テンプレート 投稿タイプ 分類の使い方
ホームページビルダー21 SP テンプレートの使い方 CSS調整
ホームページビルダー21 SP テンプレートのCSSを調整します。
@media screen and (max-width: 568px)
style.css:2512
#sp-site-branding2-1 > .site-description {
margin-bottom: auto;
position: relative;
margin-top: -55px;
margin-left: auto;
margin-right: auto;
width: 318px;
height: 38px;
top: 11px;
bottom: auto;
right: auto;
left: 1px;
}
@media screen and (max-width: 568px)
style.css:2522
#sp-site-branding2-1 > .site-title {
margin-top: -10px;
margin-bottom: 21px;
margin-left: auto;
margin-right: auto;
width: 320px;
height: 33px;
}
ワードプレス テンプレート CSS 改造メモ （media printの使い方）＠ホームページビルダー21 教室
@media print { .img-responsive { width:auto; max-width:100%; } .merit .img-responsive { max-width:300px; } .voice .panel img { margin-bottom: 10px; } .voice .img-responsive { width:100%; max-width:232px; } .voice .row :after{ clear:both; } .merit top-contents { overflow:hidden; } .col-lg-8.col-md-8.col-sm-8.t-left{ width: 66.66666667%; float:left; } .row.top-line.site-width { overflow:hidden; } .col-lg-4 { width: 33.33333333%; float:left; } .col-lg-3 { width:25%; float:left; } .col-lg-9 { width:75%; float:left; } .panel-body:after { clear:both; } .panel-body { padding: 15px; } .col-lg-12 { width: 100%; } .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { float: left; } }
画像パーツ配置 プレビューと編集画面で異なる結果 ホームページビルダー21SPテンプレートの使い方
ホームページビルダー21SPテンプレート HTMLソースパーツのスタイルの使い方
ホームページビルダー21SP HTMLソースパーツでYouTubeのテスト。
<div id=”sp-html-src-6″ class=”sp-part-top sp-html-src”><iframe width=”280″ height=”155″ src=”https://www.youtube.com/embed/rWB7LFV_JlM?rel=0″ frameborder=”0″ allowfullscreen=””></iframe></div>
サイトの公開前にブラウザーで確認すると、スタイルは以下の通り
@media not screen, screen and (min-width: 569px)
#sp-html-src-6 {
width: 49%;
float: left;
position: relative;
}
.sp-part-top {
display: block;
position: relative;
box-sizing: border-box;
}
サイトの公開をすると、
.sp-part-top {
display: block;
position: relative;
box-sizing: border-box;
}
と、一部欠如してしまう？？
