スマートフォンサイトを作ろう!(2)テーマをコピーする

0
    JUGEMテーマ:wordpress

    今回は、PCサイト用のテーマをコピーして、スマートフォン用のテーマの元を作ります。

    早速ですが、Wordpressのインストールされているフォルダを開いて、themesの中にあるPCサイト用のテンプレートをフォルダごとコピーします。



    私のペーパークラフトサイトのテーマは「pepa」でしたので、これをまるっとコピーして名前を「pepa-sp」に変えました。
    次に、pepa-spの中で不要なファイルを消します。私の場合は、

    ・dataフォルダ:アクセスカウンタ用のデータフォルダ。
    ・downloadフォルダ:ペパクラデータの保管フォルダ。
    ・functions.php:メインサイトと2重定義になるので一旦消します。

    そして、style.cssの冒頭のコメント文のところを、次のように2か所書き加えます。
     
    /*
    Theme Name: Tetsuya Original for Smart Phone
    Template: pepa
    Theme URL: http://wordpress.techikun.com/
    Description: This is my first original theme.
    Auther: Tetsuya Nagase
    Auther URL: http://wordpress.techikun.com/
    Version: 1.0
    Tags: CMS
    */
    
    2行目、テーマの名前に「for Smart Phone」を付けて、判別できるようにしました。
    3行目、これは「pepa」ディレクトリのテーマを親テーマとする子テーマであることの宣言です。

    これで子テーマの追加は完了です(中身はこれからですが)
    WordPressのダッシュボードの外観>テーマを見てみてください。先ほど付けた名前のテーマが追加されているはずです。


    続いて前回インストールしたプラグイン「マルチデバイス」の設定を行います。
    といっても大した話ではありません。
    同じく外観>マルチデバイスを選択してください。
    上のタブで「テーマ」を選ぶと、PCサイト以外の4つのカテゴリーに対して別のテーマを設定できるようになっています。今回はスマートフォン用テーマとして、先ほどのTetsuya Original for Smart Phoneを選択します。ドロップダウンリストから選択して、変更を保存です。



    では、上手くいったか試してみましょう。
    FireMobileSimulatorでスマートフォンの設定を選んで有効化し、http://localhost/wordpress(各自のWordPressのフォルダを指定してください)を見てみます。



    下の方にモバイルとPCの表示切替ボタンがありますが、PC側が押された状態になっていますので、モバイル側を一度クリックしてやってください。何か変わりましたか?あまり変わりませんね。何となくスマートフォンの枠らしきものがあるようですが、テーマの中身がPCサイトのままなので、右にガンガンはみ出していて良くわかりません。そもそもタイトルがはみ出しちゃってます・・・
    タイトルだけは何とかしましょう。

    style.cssの中にh1タグのサイズを36pxと指定してある部分がありますこれを、pepa-sp内のstyle.cssのみ20pxにしてみましょう。するとなんということでしょう、



    確かにタイトルが縮んで、スマートフォンの枠内に収まりました。
    これで間違いなくスマートフォン用のテーマが適用されていることが判りました。


    といったところで、今回はここまで。次回はスマートフォン用のトップページを作っていきます。
     


    コメント
    コメントする








       

    calendar

    S M T W T F S
         12
    3456789
    10111213141516
    17181920212223
    24252627282930
    << November 2019 >>

    アクセスカウンタ

    合計:
    今日:
    昨日:

    selected entries

    categories

    archives

    recent comment

    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      てちくん
    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      てちくん
    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      小田きく江
    • ロリポブログでGoogleにサイトマップを登録する際の注意事項
      てちくん
    • ロリポブログでGoogleにサイトマップを登録する際の注意事項
      suraugi
    • いそべぇのペーパークラフトを作る(初級編)(12)
      てちくん
    • いそべぇのペーパークラフトを作る(初級編)(12)
      だべえ
    • noomでマイナス12kgのダイエットに成功!
      Yoko

    recommend

    recommend

    recommend

    ドール デザートメーカー ヨナナス901
    ドール デザートメーカー ヨナナス901 (JUGEMレビュー »)

    結構高いんです、でも欲しいんです!

    links

    profile

    書いた記事数:173
    最近の更新日:2017/01/30

    search this site.

    others

    mobile

    qrcode

    powered

    無料ブログ作成サービス JUGEM

    Google Adsense

    楽天ブックス

    楽天