アミアンインターナショナル

貴社の売り上げアップをとことん支援します。オンラインショップ専門コンサルタント

CMS css php 新着情報

ページで100%幅表示を可能にする ⇒ STINGER8設定その14

投稿日:2019年5月8日 更新日:

100%幅の表示を可能にする

STINGER8では100%幅のコンテンツを表示できないので、固定ページは可能になるように設定する。

サイドバーを消し、幅を制限している設定をクリアしていく。

page.php

page.phpからサイドバーを表示するコードを削除。

<!--?php get_sidebar(); ?-->

さらにblogboxなど不要なコンテンツも削除するため、下記のコードを削除。

<div class="blogbox">

<span class="kdate">
<!--?php if ( get_the_date() != get_the_modified_date() ) : //更新がある場合 ?-->
投稿日:<!--?php echo esc_html( get_the_date() ); ?-->
更新日:<time class="updated" datetime="<?php echo esc_attr( get_the_modified_date( DATE_ISO8601 ) ); ?>"><!--?php echo esc_html( get_the_modified_date() ); ?--></time>
<!--?php else: //更新がない場合 ?-->
投稿日:<time class="updated" datetime="<?php echo esc_attr( get_the_date( DATE_ISO8601 ) ); ?>"><!--?php echo esc_html( get_the_date() ); ?--></time>
<!--?php endif; ?-->
</span>

</div>
執筆者:<!--?php the_author_posts_link(); ?-->

このままではコンテンツ幅が広がらないので、cssを調整する。

page.cssというファイルを作り、読み込む。

page.phpの<!--?php get_header(); ?-->の次に読み込みを記入。

    <link rel="stylesheet" type="text/css" href="../wp-content/themes/stinger8-child/css/page.css">

HTML的にはエラーだが、動作するので目をつぶろう。

余計な空白を削除し、適切な余白を取るため、cssはこう記述した。

.st-main{
padding: 20px 0;
}
#breadcrumb,h1,h2,h3,.sns{
margin-left: 10px;
margin-right: 15px;
}
.amiens-600w{
max-width: 600px;
margin-left: auto;
margin-right: auto;
padding: 0 10px;
}

600px幅のコンテンツ用の設定もしておいた。

これだけだとPC表示の幅が狭いままなので、それも調整する。

@media screen and (min-width: 960px) {
.st-main{
margin-right: 0;
}
#content,#st-header{
max-width: none;
}
#breadcrumb,h1,.sns,.amiens-1060w{
max-width: 1060px;
margin-left: auto;
margin-right: auto;
}
#st-header img{
width: 100%;
}
}

1060px幅のコンテンツ用の設定もしておいた。

home.php

同様に、home.phpにも作業する。

サイドバーを表示する部分を削除する。

<!--?php get_sidebar(); ?-->

home.phpの<!--?php get_header(); ?-->の次に読み込みを記入。

    <link rel="stylesheet" type="text/css" href="../wp-content/themes/stinger8-child/css/page.css">

これで、全幅コンテンツの表示が可能になった。

-CMS, css, php, 新着情報
-, , ,

執筆者:

関連記事

Dropboxから乗り換えるべき? トレンドマイクロの容量無制限オンラインストレージ「SafeSync」の実力は?

Amplify’d from trendy.nikkeibp.co.jp SafeSyncの最大の魅力は、年間4980円を支払えば保存容量が無制限という点だ。普段、Dropboxを使いながら「保存容量 …

アマゾンAWS

amazon SESはメールマガジン配信の切り札になるのか?

amazon SESは、amazonが展開するクラウドサービス上で大量のメール配信を可能にするものである。

amazon自身が年間10億通以上のメール配信を行なっており、このインフラを利用してサービスを提供する。

そのため安定度、スパム対策などが期待される。

アマゾンの説明によれば、スパム対策のため契約当初の配信速度には制限があるものの、数週間のちには90メール/秒、百万メール/日まで可能になるとのこと。

これだけの配信スピードがあれば、通常のネットショップにおいては十分なスペックと言えるだろう。

ワードプレス

wordpressでedit.phpとplugins.phpが真っ白になるトラブル

「投稿」を表示しようとしても画面が真っ白になるトラブルが発生するようになった。edit.phpとplugins.phpでエラーが発生しているっぽい。手動で再度wordpressを全ファイルアップロード。結果、正常動作するようになった。

ワードプレス

IEでJavaScriptエラーが出たトラブルシューティング

このブログはwordpressで制作しているのだが、当初よりIEで見るとJavaScriptエラーが出て困っていた。 いろいろバタバタしていてしばらく放置していたのだが、時間がとれたので見直してみた。 …

コンテンツ

説明文の加筆 ⇒ トップページの作り込み6

コンテンツを増やす コンテンツを加える。 600px幅で表示。 <div id=”amiens-05″ class=”amiens-black”> <div class=”amien …