[サイト作り] [WordPress] WordPressでウェブサイトっぽいの作る

WordPressを使ってウェブサイトを作る勉強中

デザインはHTMLとCSSをかじった事がある人なら比較的簡単にできるかと

問題はテンプレートタグを覚えないとやりたいことがなかなか出来ない

そこらへんは、色々テストしてるのでおいおいって事で

今回は、背景画像をがっつりと表示したウェブサイト作り

PRを目的としたサイト制作をイメージして、ブログとしてのの余計な部分は外してます。

※好きなギタリストさんのサイトから拾った壁紙で素材にテスト制作してます。目隠しするの忘れたぁ･･･ごめんなさい

サンプル

ワードプレスでウェブサイトホーム
トップページはthe_excerptで指定して、エントリーはoverflow-y:auto;にし、heightを50pxにしスッキリとさせた

ワードプレスでウェブサイトシングルページ
背景を前面に出してるので右下のロゴが本文に重なるが、ページスクロールすると背景そのままに本文だけ動く

ワードプレスでウェブサイトシングル２
ポストデータなどは一切いれずシンプルに

カテゴリーやアーカイヴページは外してるが、ウェブサイトっぽくするならトップページのように一覧っぽくしたほうがいいかにゃ

では、まずphpファイルの内容ですが

index.php
header.php
archive.php
single.php
404.php

以上です。

とにかくシンプルに

次に、細かいスタイルは抜粋して主だったCSSは
body{
width: 100%;
background: url(images/body.gif) no-repeat fixed center top;z-index: -9999;
}</div>
#wrapper{
width: 980px;
}

#header{
float: right;
width: 500px;
}

#container{
float: right;
width: 500px;
}
あとは、コンテナ内に入れる.postと、ポスト内に入れる.entryをそれぞれスタイル定義

ブログとして使用しないぶん神経質になる事も少ない

backgroundは、bodyの背景のみ指定し、サイトのメインをを強調させる風に

あとは、PHPファイルから、サイドバーやナビゲーション、ポストデータなどの必要の無いものを消す

テスト制作なので、細かいコーティングはしてませんがウェブサイトっぽい作りにはなってると思います。

ヒントになれば幸いです。

お店や商品の紹介などといったホームページを作りたいという方はお気軽に依頼して下さい。

簡単なページ制作であればリーズナブルにいけます

Did you like this? Share it:

PR

『【正規代理店】【期間限定30%OFFセール価格】【レビューを書くと送料無料】【crocs】【クロック...』を見る [楽天]http://a.r10.to/hC1D5V <

Random Posts

  • 2008年6月4日 -- [WordPress 設定] パーマリンクは年月日時分秒が無難かも
    投稿名やポストIDなど色んなパーマリンクを試してみたが、データベースの問題やWP2.6以降のリビジョン機能などを考え ドメイン/年/月/日/時/分/秒 これが無難だと思います。 パーマリンクの設定は軽く考えてはいけないと実感しましたので /%year%/%monthnum%/%day%/%hour%%minute%%second% ...
  • 2011年10月11日 -- 10月11日のツイート
    ベガコーポレーションがジャフコから10億円調達--東京支社も開設へ http://t.co/r0TVRlmi posted at 19:41:31 咳声を再生できるAndroidアプリ--カヤック「仮病袋」 http://t.co/FbT2NNiM posted at 19:25:02 O2Oの課......
  • 2010年5月1日 -- [WPプラグイン] Random Post Box – ポストをランダムに表示させる
    ポストをランダム表示するプラグイン 「Random Post Box」 １、プラグインをアップロードして有効化 ２、管理メニューの「設定」から"Random Post Box"を開いて設定を行う Timing項目 ランダム表示されるポストのエフェクト "delay fading message out" フェードアウトにかける時間　0～5 "delay fading message in...
  • 2010年5月12日 -- [WPプラグイン] Image Archives – 画像アーカイブプラグイン
    ブログ内の投稿にアップロードされた画像を一覧表示するプラグイン 「Image Archives」 各投稿への画像リンクになる。 1、プラグインをアップロードして有効化 2、ポスト/ページにショートコードを埋めて公開 [image_archives] [image_archives term_id=6 column=5] カテゴリー6の投稿の画像だけを5カラムで表示。 オプション一覧 ...
  • 2007年3月28日 -- [音声袖出] AoA Audio Extractor – 動画から音声を抜き出す
    AoA Audio Extractorは、AVI/DivX/XviD, MPEG, MPG, DAT, WMV, MOV, MP4, 3GP ､YouTubeで保存したFLV などの動画ファイルからMP3, WAV, AC3 形式でオーディオ(音声部分)を抽出することができます。 出力オーディオのビットレートやサンプルレートを選ぶことができ、ビデオファイルの好きな部分をクリップしてオーディオに変...
  • 2011年5月31日 -- 5月31日のつぶやき
    モバイル市場はネットに統合--「OGC 2011」で夏野剛氏が講演 http://bit.ly/iVO5e3 posted at 21:43:38 mixi、「ソーシャルバナー広告」を本格導入 http://bit.ly/le83eJ posted at 20:06:55 アンテナ工事遅れでもBS......
  • 2010年7月29日 -- [WPプラグイン] Caesar Cipher – 投稿内に記述するメールアドレスを
    メールアドレスを記事に記述する際にシーザー暗号？なプラグイン。 「Caesar Cipher」 記事本文にはメールアドレスが表示されるのですが、ソースを見るとスクリプトで変な文字列になってます。 メアド収集ロボット対策？ 1、プラグインをアップロードして有効化 ショートコードにメールアドレスを追加して投稿。 ショートコード [caesar-cipher xxx@x...
  • 2008年6月18日 -- [Mobile] 顔写真で目ヂカラ診断
    グラッドメディアが運営するモバイル向けの顔診断サイト「mitame.tv(http://mitame.tv/)」の第1弾サービス「目ヂカラ モテ度診断」を開始 目ヂカラ モテ度診断は、携帯電話から自分の年齢を入力し、顔写真を送信すると、「目の形」を動物の瞳に例え、6種類のタイプ別に「モテ度」を診断するサービス 診断結果には、「自分の性格」や「同じ目ヂカラの有名人」「目ヂカラ別モテ攻略法」 管...
  • 2008年3月3日 -- オンライン上で画像を加工する
    無料写真自動加工「処理選択頁」 ■色調関連 ■質感関連 ■画像操作関連 ■額縁・枠付け関連 上記４つのカテゴリから加工作業を選べ サイト上で画像編集が出来るサービス 「・油絵風加工」などといったリンクがあるので、そのリンクをクリックすると作業ページに飛びます。 あとは比較的に簡単ですので此処では 作業一覧ページ(TOPページ)の右側に「解説頁」「作成例」といった分かりやすく説明＆サンプ...
  • 2011年10月29日 -- [ビスコ] チョコみるく
    ビスコに「チョコみるく」が仲間入りしました！ そろそろ来る そろそろ来る と、待ちに待ってました！ 最寄のコープには、まだ抹茶といちごで セブンイレブンで見つけました まだの方は、セブンイレブンに行けばあるかも？ チョコ系では、一番チョコチョコした香り うまい！ 牛乳に合うな いちごの後継もそろそろかな？ わくわく コ...

Post in サイト作り //