Lightningを固定レイアウトにする方法

11

記事の方法でカスタムを100%保障するものではございません。

悪しからずご了承下さいませ。

古いバージョンでのカスタム内容となります

※カスタマイズは必ずバックアップの上、自己責任にて行って下さい。

bootstrapベースのテーマ(WordPress) Lightningを固定レイアウトする方法を紹介します。

div.container を使うことで、固定レイアウトを使用出来ます。

[スポンサーリンク]


 

変更後

Lightningを固定レイアウト

<body>直下に <div class=”container”>を記載するとメニュー表示が崩れます
 
 

div.container

div.container を使うことで、固定レイアウトを使用出来ます。

<div class="container">
 ...
</div>

 
 

css

CSSカスタマイズやstyle.cssに下をコピペする

.container-fluid {
margin-right: auto;
margin-left: auto;
max-width: 940px; //例
}

 
 

header.php

header.phpの </header> の下に <div class=”container”> を追加

<?php
if ( $gMenu ) {
 echo '<div id="gMenu_outer" class="gMenu_outer">';
echo $gMenu;
 echo '</div>';
} ?>
</div>
<?php do_action('lightning_header_append'); ?>
</header>
<div class="container">
<?php do_action('lightning_header_after'); ?>

 
 

footer.php

footer.php の </body> の上に </div”> を追加


<div class="sectionBox copySection">
<div class="row">
<div class="col-md-12 text-center">
<?php lightning_the_footerCopyRight(); ?>
</div>
</div>
</div>
</footer>
<?php do_action('lightning_footer_after'); ?>
<?php wp_footer();?>
</div>
</body>
</html>

 
 

完成

以上で固定レイアウトが完成しましたスライダーだけ固定幅にしたい時などに利用されてはいかがでしょうか?

 
 

Lightningの改造

 

この投稿へのコメント

  1. adcrew-staff said on 2017-03-27 at 9:46 AM

    いろいろ参考になりありがとうございます。
    こちらのページもテストしようと思っていますが、「いらないSNSボタンを削除」の記事のように修正するファイルを支持していただけると嬉しいです。

    極めて初心者的な質問になってしまいますが、よろしくお願いします。

コメントを残す