とあるエンジニアの作業ブログ

Web製作

【Stinger8】固定ページを自由にデザインしてみた

投稿日:

HTML/CSSがかける人は、テーマ標準の固定ページだとデザイン変更しづらいのではないでしょうか??
Wordpressにループって概念があるのはうっすらとは知ってますけど、、、何もあんなにまんまブログっぽいデザインにしなくても良いのでは···と思い、どうせ対して数を作る予定もないのでいっそのことフルスクラッチで記述できるようにして見ました。

セキララ彼女
無料サンプル
私にマワして・裏回覧板 デジタルモザイク版
無料サンプル
精一杯の恋
無料サンプル
特命痴漢おとり捜査班 チームKの攻防 デジタルモザイク版
無料サンプル

やりたいこと

既存のCSSとか効かなくなっても良いので、管理画面からフルスクラッチのhtmlを投入してその通りに表示されること。
もちろんスタイルも自分で個別のidとclassを指定してstyle.css(別ファイルの方が望ましいが)に記述する。

結論

ソースコードたどったところ、結局はwordpressのメインループ内にthe_content();のみを残せば良いというしごく単純な結論でした。。。

 

ちょっとだけ解説

ループの部分はまだちゃんと理解してないのでhtmlとcssについてのみ記載。

とりあえずコンテンツエリアのレイアウトを形成している余計なコンテナを全て消したかったので調べたところ、

という構造になっているらしい。なので#content, #contentInner, #st-mainは消去。
で、続いてそれらのセレクタに指定されていたCSSを調べたところ、

ていう感じで、特別のこさなきゃいけなさそうなものもなかった。
あとは流石にコンテンツエリアのコンテナは必要なので#pages_containerという自分でカスタムするコンテナを作成して終了。
管理画面から投入したhtmlは全てこのコンテナの配下に収まるので、あとは自由にid指定なりclass指定してcssでカスタマイズすればOK。

-Web製作
-, , ,

執筆者:


comment

メールアドレスが公開されることはありません。

関連記事

【WordPress】画像URLをショートコード化する

imgタグなどでsrc属性を指定する際の、画像uriをショートコード化して環境差異を無くします。 目次 作業の目的 メディア設定の変更 functions.phpにuploadsディレクトリを返すショ …

【WordPress】アフィリエイト広告の自動出し分け

ブログに表示するアフィリエイト広告を自動で出し分けるショートコードを作りました。CSVで表示したいアフィリエイト広告を複数登録しておけば、ランダムに出し分けてくれます。 目次 処理概要 ソースコード …

SiTest入門 ~サイトへの導入とABテストの実施まで~

サイト分析・改善ツールのSiTestというツールをがすごいという噂を聞きました。サイト自体を改変することなく、各種スプリットテスト(ABテストやリダイレクトテスト、多変量テスト等)を実施できるほか、ヒ …

【Stinger8】ページング(page-numbersクラス),サイドバーリストのレイアウト修正

Stinger8の細かなレイアウト修正をします。 目次 トップ下部の投稿一覧をページングする部分(page-numbersクラス)のレイアウト崩れの修正 サイドバーに表示される最近の投稿やアーカイブな …

MacでのAdobeクラウドストレージ活用と作業用ディレクトリ

最近Macを買い換えた。新しいMacはStorageを256にしたのでローカルにバンバンファイルを保存するのには不安が残る。 そこで、これを機に本格的にローカルへのファイル保存をやめて、全てクラウドス …