Bootstrapでランディングページを作りたい@Simplicity

[清水]

こんにちは

Bootstrapでつくられたテーマがいくつかありますが
Simplicityとの共存は可能でしょうか？

たとえば
編集画面「ページ設定」のページタイプで「本文のみ」を選択したら
Bootstrap又はその他の軽量CSSフレームワークになるとか･･
固定ページのテンプレート選択でもよいのですが
※全くのシロート考えです

用途としては
いわゆるランディングページとやらを
Simplicityのまま
CSSフレームワークで作ってみたいのです

よろしくお願いします

[Hidekichi]

> Simplicityとの共存は可能でしょうか？

共存は可能です。が、simplicityより前に読み込むと一部セレクタはSimplicityで上書きされ、あとで読むとSimplicityのセレクタがあとで読み込んだものに上書きされて無効になったりします。

そこで方法というか考え方としては2つあって、特定のページではSimplicityではなくBootstrapのスタイルを読み込むという方法と、ランディングページに必要なスタイルだけを抜き出してSimplicityに追加するという方法です。

前者はhtmlの出力がSimplicity専用のものになっている所にBootstrapのスタイルを当てるわけですから全てのスタイルを構築し直す必要があります。これはとても面倒です。

後者は必要なものを子テーマstyle.cssに追加して、Simplicityが上書きしてしまうプロパティを無効にしつつ、追加したスタイルでランディングページに必要なhtmlで書くという具合になります。

オススメな別の方法として、

親テーマのstyle.css諸々
bootstrapのcss
子テーマのstyle.css

というような読み込み順にするという手もあります。これなら、親テーマをbootstrapに上書きされても子テーマで再修正することが可能です。

bootstrapのgithubページにはそのcssの全てがあります。何をどう使うかは製作者次第です。

が、ここまではbootstrapのcssを利用して自身でhtmlを書きランディングページを作れる人向けの話です。

問題は誰かしらが作ったテンプレートをコピペで単純利用したい場合などです。

こういった時、実際そのまま使った場合にどこに問題が出るかを確認しつつスタイルを再構築していく必要があります。
例えばcodepenなどを利用して、実際のSimplicityのcssとあわせた時にどこに問題が出るかを確認し、邪魔になるプロパティを無効にしていく作業が必要になります。

単純に別のページとしてwordpressを使わずランディングページを作っておいてリンクしておけば別物になります。しかし、おそらくはwordpressの機能を使いつつ何とかしたいということなんだろうと想像はします。

場合によってはもうひとつwordpressを作っておいて、ランディングページ用の(あるいは得意とする)テーマなどを使って、普段のSimplicityを利用しているwordpressとを行き来させるためにそれぞれにリンクを貼っておくというのもできるでしょう。テーマやテンプレートに依存させるのならですけどね。

持ち主が同じであればアドセンスやその他色んな部分で流用できる要素も多くあるかと思います。

これらを踏まえて、まず僕らが答えるのに必要な材料としては、どういうランディングページを何を使ってどういう表示をさせたいかが必要になります。

質問の内容で一応は質問できているようですが、実際の所、
「どういうランディングページかの具体的な内容がわからない(htmlの構造的なもの)」、
何を使うで、
「bootstrapのみなのか、何かしらテンプレートがあるのかがわからない、またそれらにjavascriptやjQueryが使われていたりするかが不明」、

「Simplicityと共存させる上で非表示にしたいもの残したいものなどが具体的にわからない」

また、
「共存させたい理由が不明瞭なのでwordpressを使わない別の方法のが良いかも知れないけれども何とも言えない」

という点で、できるかどうかとその考え方は答えられますが、こうすればこうなるのでこうしてくださいという具体的な回答はできません。

特に「どういうランディングページかの具体的な内容がわからない」なんですが、使用するhtmlの構造がどうなっているかがかなり重要です。Simplicityが上書きしてしまうようでは思う通りにならないでしょうし。

Simplicityのhtmlに対するcssは比較的細かくセレクタ分けされているので無効にすることなどは簡単にできますが、オープン(ダイレクト)に書かれているもの(h1〜h6、table, ul、リンクの色やフォントサイズ等)は継承されてしまうため、最低でもそれらは継承させないようにしないといけません。

それらさえ何とかできれば比較的軽作業で実現できるようにも思います。しかしそれができるかどうかは、何かしら参考になるhtmlとcssの出力がわかるページを用意してもらう必要があります。

別件で、reset.cssというのがあります。デフォルトのスタイルをフラットなhtmlのスタイルにした上で、要素をデザインしていくために使われるものですが、それらはまずいちばん最初に読み込む必要があります。
そういう時にどうするかを書いた記事がありますので、何かしらの参考になれば。

参考: Simplicityを少し改造してみた 番外編 part.25 既存のテーマcssの先頭にreset.cssをぶち込む

特定の固定ページなら、そのページだけのスタイルをすることは可能です。
固定ページのIDから読み込ませるcssを振り分けるようなこともできると思います。またこれらはプラグインなどであったと思います。

[わいひら]

出来ないことはないと思います。
僕はやったことがないですが、目的のページだけ利用できるように条件分岐を書いて、一度読み込んでみると良いかもしれません。
とりあえず、どういったスタイルのぶつかり方をするか（スタイルが衝突したとしても、許容範囲のスタイルか）を自身で判断する必要があるかと思います。

[投稿者]

投稿