スマートフォン・PC対応無料WordPressテーマ

先日配布を開始した「スマートフォン対応無料HTMLテンプレートSmart-001」のWordpress版です。

無料でご利用いただくことが出来ます。

まずはWordPressをインストールするところからはじめます。インストールには対応するサーバーのご用意が必要ですね。

参考サイト:WordPressを使ってみよう

「WP-smart001」のテーマを有効化

ダウンロードしたファイルの中の「WP-smart001」というフォルダもwp-content/themesにアップロードし、Wordpressの管理画面、「ダッシュボード」で「外観」→「テーマ」で「WP-smart001」のテーマを有効化します。このとき「sample.xml」はアップロードしません。あとで使います。

この状態でトップページを見ても以下のような感じでヘッダーメニューの部分が変です。それはメニューの管理に「ウィジェット」を利用しているためです。

この状態でトップページを見ても

「ダッシュボード」で「外観」→「ウィジェット」の右側の「Sidebar1 」、「Sidebar2 」、「Sidebar3 」の中身をドラッグして空っぽにしちゃいましょう。

とりあえず空っぽに

そうするとトップページはこんな感じになります。

こんな感じ

ここで各ウィジェットの説明です。
Sidebar1はヘッダーメニュー
Sidebar2はサイドバー
Sidebar3はフッターメニュー
となってます。あとはカスタムメニューで表示させたいものを制御します。

これまでWordpressをいじったことのある方は、こんな説明でわかるかもしれませんが…初めての方は何のことやらと思われるかもしれません。

そこで、ダウンロードしたファイルに含まれているsample.xmlを活用します。

「ダッシュボード」→「ツール」→「インポート」と進み、「WordPress」をクリック。インポートツールのインストールを促されますので「インストール」をクリックします。続いて「プラグインを有効化してインポートツールを実行」をクリック。

「Import WordPress」の画面になるので「参照」をクリックしてダウンロードした「sample.xml」を選択します。そして「submit」をクリックします。これでサンプルのデータがインポートされました。ダッシュボードを確認してみましょう。

ダッシュボードを確認してみましょう

投稿や固定ページなどが追加されているのがわかります。続いて「ダッシュボード」→「外観」→「メニュー」を確認しましょう。以下のようになっていると思います。

カスタムメニュー

フッター用、ヘッダー用、サイドバー用のメニューを視覚的に制御できます。ドラッグで移動したり、左の一覧から追加したり出来ます。そして再び「ウィジェット」へSidebar1~3にカスタムメニューをそれぞれ追加します。

ウィジェットにカスタムメニューを追加

そしてトップページを確認してみます。

そしてトップページを確認してみます

スマートフォンで見るとこんな感じです。

スマートフォンで見る

はてなブックマーク数 このエントリーをはてなブックマークに追加 Yahoo!ブックマークに登録

このテンプレートの特徴

対応ブラウザ
対応ブラウザ
こんな業種にピッタリ!!
関連カテゴリー
モノトーン系デザイン無料ホームページテンプレート

ダウンロードパスワードはこちらから

このHTMLテンプレートのレイアウトはすべてスタイルシート(CSS)で行なっていますので、HTMLはとてもシンプルになっています。HTMLの基本中の基本を理解していれば簡単にホームページを作成することが出来ます。また、背景画像は極力使わないようして、あなたが好みの色調に簡単に変更できるよう考えられています。

まさに徹底的にユーザー目線で設計されたHTMLテンプレートです。

  • このテンプレートは商用・非商用にかかわらず、ご自身またはあなたの所属する会社、団体などのホームページ作成にご利用いただくことが出来ます。
  • ページフッター部分の「ここから削除・変更不可」~「ここまで削除・変更不可」の部分は削除、および変更は出来ません
  • ページフッター部分の「ここから削除・変更不可」~「ここまで削除・変更不可」の部分を削除、変更したい場合は著作非表示ライセンスのご購入が必要です。
  • このテンプレートの再配布、販売は禁止しています。ご自身またはあなたの所属する会社、団体以外のホームページを作成する場合はホームページ制作を業務としているかいないかに関わらず制作代行ライセンスが必要です。
  • その他テンプレートご利用規約を必ずお読み下さい。