1. ホーム
  2. ホームページの作り方
  3. 無料で使えるデモサイト
  4. テーマに必要なファイル

テーマに必要なファイル

テーマに必要なファイル

ワードプレスでサイトを表示するためには「テーマ」が必要になります。テーマとは複数のファイルで組み立てられた、サイト全体のデザインを構成するテンプレートのようなものです。

サイトを構成するPHP、デザインを調整するCSS、スクリプトを記述するJS、そして画像などのファイルをまとめた「フォルダ」の事をテーマと言います。ファイルの数も多いのでひとつずつ確認していきましょう。

こちらの「デモサイト」から実際のページを確認して頂けます。

目次 [閉じる]

テーマで使うファイルの確認

テーマで使用するファイルが結構ありますので、何回かに分けて説明していきます。と言っても今回のサンプルブログはできるだけファイル数を少なくしたので、はじめての方でもとっつきやすいハズです。

まずは今回のブログサイトで使うファイルをザっと紹介しますのでご確認ください。

サンプルブログのテーマファイル

どうでしょう、多いですか？これはテーマのファイルとしてはかなり少ないほうです（笑）。

これらをまとめたフォルダの名前がテーマの名前になります。テーマの名前はご自身のサイト名をお使いください。サンプルブログの場合なら「sample-blog」などですね。

テーマフォルダのアップロード先は、ルートディレクトリにある「wp-content」の中の「themes」の中です。「twentytwentytwo」などのフォルダが入っている場所です。

ワードプレスにはデフォルトテーマも設置されていますので、テーマを変更していなければ下記のように最新版（現在なら「Twenty Twenty-Two」）のデフォルトテーマが適応されています。

ワードプレスのデフォルトテーマ

それではこの「themes」の中にテーマフォルダを作成しておきましょう。FTPソフトで「ディレクトリの作成」をおこなうか、ローカル環境で作ったフォルダをアップロードしておいてください。

竹馬

サンプルブログの場合でしたら、空の「sample-blog」フォルダを設置しておきます。次項からファイルを作成していきますので、ひとつずつファイルをアップしていきましょう。

functions.phpを作成する

まずは「functions.php」を作成しますので下記のコードをコピペしてください。「functions.php」はワードプレスの機能を拡張したり、変更などの指定をおこなうファイルです。

functions.php

                	
    
                    	
  1. <?php
    2. 
                    	
  2.  
    3. 
                    	
  3. // ページネーションの追加
    4. 
                    	
  4. function wp_pagination() {
    5. 
                    	
  5.   global $wp_query;
    6. 
                    	
  6.   $big = 99999999;
    7. 
                    	
  7.   $page_format = paginate_links(array(
    8. 
                    	
  8.     'base' => str_replace($big,'%#%',esc_url(get_pagenum_link($big))),
    9. 
                    	
  9.     'format' => '?paged=%#%',
    10. 
                    	
  10.     'current' => max(1,get_query_var('paged')),
    11. 
                    	
  11.     'total' => $wp_query->max_num_pages,
    12. 
                    	
  12.     'prev_next' => True,
    13. 
                    	
  13.     'prev_text' => __('«'),
    14. 
                    	
  14.     'next_text' => __('»'),
    15. 
                    	
  15.     'type' => 'array',
    16. 
                    	
  16.     'end_size' => 2,
    17. 
                    	
  17.     'mid_size' => 2
    18. 
                    	
  18.   ));
    19. 
                    	
  19.   if(is_array($page_format)) {
    20. 
                    	
  20.     $paged = (get_query_var('paged') == 0) ? 1 : get_query_var('paged');
    21. 
                    	
  21.     echo '<ul class="pagination">';
    22. 
                    	
  22.     foreach ($page_format as $page) {
    23. 
                    	
  23.       echo "<li>$page</li>";
    24. 
                    	
  24.     }
    25. 
                    	
  25.     echo '</ul>';
    26. 
                    	
  26.   }
    27. 
                    	
  27.   wp_reset_query();
    28. 
                    	
  28. }
    29. 
                    	
  29.  
    30. 
                    	
  30. // アイキャッチの追加
    31. 
                    	
  31. add_theme_support('post-thumbnails');
    32. 
                    	
  32.  
    33. 
                    	
  33. //サムネイルのサイズ指定削除
    34. 
                    	
  34. add_filter('post_thumbnail_html','remove_thumbnail_dimensions',10,3);
    35. 
                    	
  35. function remove_thumbnail_dimensions($html,$post_id,$post_image_id) {
    36. 
                    	
  36.   $html = preg_replace('/(width|height)=\"\d*\"\s/',"",$html);
    37. 
                    	
  37.   return $html;
    38. 
                    	
  38. }
    39. 
                    	
  39.  
    40. 
                    	
  40. // 検索結果から固定ページを除外
    41. 
                    	
  41. function my_posts_search($search,$wp_query){
    42. 
                    	
  42.   if ($wp_query->is_main_query() && is_search() && !is_admin()){
    43. 
                    	
  43.     $search .= "AND post_type = 'post'";
    44. 
                    	
  44.   }
    45. 
                    	
  45.   return $search;
    46. 
                    	
  46. }
    47. 
                    	
  47. add_filter('posts_search','my_posts_search',99,2);
    48. 
                    	
  48.  
    49. 
                    	
  49. // ウィジェットの追加
    50. 
                    	
  50. function my_widgets() {
    51. 
                    	
  51.   register_sidebar(array(
    52. 
                    	
  52.     'id' => 'sidebar-item',
    53. 
                    	
  53.     'name' => 'サイドバー'
    54. 
                    	
  54.   ));
    55. 
                    	
  55. }
    56. 
                    	
  56. add_action('widgets_init','my_widgets');
    57. 
                    	
  57.  
    58. 
                    	
  58. // ウィジェットのタイトル非表示
    59. 
                    	
  59. add_filter('widget_title','remove_widget_title_all');
    60. 
                    	
  60. function remove_widget_title_all($widget_title) {
    61. 
                    	
  61.   return;
    62. 
                    	
  62. }
    63. 
                    	
  63.  
    64. 
                    	
  64. // ウィジェットに自動付与される「p」を削除
    65. 
                    	
  65. remove_filter('widget_text_content','wpautop');
    66. 
                    	
  66.  
    67. 
                    	
  67. // head内から不要なコード削除
    68. 
                    	
  68. remove_action('wp_head', 'wp_generator');
    69. 
                    	
  69. remove_action('wp_head', 'rsd_link');
    70. 
                    	
  70. remove_action('wp_head', 'wlwmanifest_link');
    71. 
                    	
  71. remove_action('wp_head', 'index_rel_link');
    72. 
                    	
  72. remove_action('wp_head', 'parent_post_rel_link',10,0);
    73. 
                    	
  73. remove_action('wp_head', 'start_post_rel_link',10,0);
    74. 
                    	
  74. remove_action('wp_head', 'adjacent_posts_rel_link_wp_head',10,0);
    75. 
                    	
  75. remove_action('wp_head', 'wp_shortlink_wp_head',10,0);
    76. 
                    	
  76. remove_action('wp_head', 'feed_links',2);
    77. 
                    	
  77. remove_action('wp_head', 'feed_links_extra',3);
    78. 
                    	
  78. remove_action('wp_head','print_emoji_detection_script',7);
    79. 
                    	
  79. remove_action('admin_print_scripts','print_emoji_detection_script');
    80. 
                    	
  80. remove_action('wp_print_styles','print_emoji_styles');
    81. 
                    	
  81. remove_action('admin_print_styles','print_emoji_styles');
    82. 
                    	
  82. remove_action('wp_head','rest_output_link_wp_head');
    83. 
                    	
  83. remove_action('wp_head','wp_oembed_add_discovery_links');
    84. 
                    	
  84. remove_action('wp_head','wp_oembed_add_host_js');
    85. 
                    	
  85. remove_action('template_redirect','rest_output_link_header',11);
    86. 
                    	
  86.  
    87. 
                    	
  87. // imgタグからsrcsetを削除
    88. 
                    	
  88. add_filter('wp_calculate_image_srcset','__return_false');
    89.

ワードプレスにはたくさんの機能が付いていますが、初めからすべての機能を使えるわけではありません。追加したい機能があれば「functions.php」に記述します。

すべての機能を使う必要はないので、必要な機能だけ使用できるように設定すればOKです。

今回のテーマでは「ページネーション」「アイキャッチ」「ウィジェット」の機能を追加しています。ページネーション（ページング）とは、記事を一覧表示する際に複数のページに分割して表示させる方法です。

アイキャッチとは記事を一覧表示する際にタイトルなどと一緒に表示する画像の事です。そしてウィジェットはサイドバーなどのパーツを管理画面で設定できる機能です。

サンプルブログでは「サイト管理人」の記述にのみウィジェットを使用しています。

逆にワードプレスのデフォルト状態では邪魔な表記があったりもしますので、そちらの削除もおこないます。今回のテーマでは不要なコードやタグの削除、そして検索結果から固定ページを除外する設定などをおこなっています。

ワードプレスの「固定ページ」というのは、記事ページとは違って単体で独立したページの事を言います。サンプルブログなら「サイトマップ」や「お問い合わせ」ページの事です。

ですからサンプルブログで検索をおこなった場合には、固定ページを除外した記事ページのみが検索結果に出力される事になります。

竹馬

のっけから「functions.php」がワケわからん！ってなるかも知れませんが、「こういう事ができるんだ」という事だけ覚えておいてください。コードはコピペで大丈夫なので！

style.cssにテーマ情報を記述

ワードプレスの「style.css」にはテーマ情報も記述しておきましょう。ついでにCSSの共通デザイン部分も紹介しておきますので、ココまでコピペしておいてください。

style.css

                	
    
                    	
  1. @charset "utf-8";
    2. 
                    	
  2.  
    3. 
                    	
  3. /*
    4. 
                    	
  4. Theme Name: サンプルブログ
    5. 
                    	
  5. Theme URI: https://chepirare.com/sample/02/
    6. 
                    	
  6. Author: Chepirare
    7. 
                    	
  7. Description: こちらはサンプルブログのデザインテーマです。
    8. 
                    	
  8. */
                    	
  9.  
    10. 
                    	
  10. /* ------ common ------ */
    11. 
                    	
  11. * {
    12. 
                    	
  12.   margin: 0;
    13. 
                    	
  13.   padding: 0;
    14. 
                    	
  14.   word-break: break-all;
    15. 
                    	
  15.   line-break: strict;
    16. 
                    	
  16.   outline: none;
    17. 
                    	
  17.   box-sizing: border-box
    18. 
                    	
  18. }
    19. 
                    	
  19. html {
    20. 
                    	
  20.   font-family: "Kiwi Maru", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic Pro", "Meiryo UI", "Meiryo", "MS PGothic", sans-serif;
    21. 
                    	
  21.   font-size: 62.5%;
    22. 
                    	
  22.   font-weight: 300;
    23. 
                    	
  23.   font-style: normal;
    24. 
                    	
  24.   line-height: 1.6;
    25. 
                    	
  25.   font-feature-settings: "palt";
    26. 
                    	
  26.   -webkit-overflow-scrolling: touch
    27. 
                    	
  27. }
    28. 
                    	
  28. body {
    29. 
                    	
  29.   height: 100%; 
    30. 
                    	
  30.   color: #000;
    31. 
                    	
  31.   font-size: 1.5rem;
    32. 
                    	
  32.   font-style: normal;
    33. 
                    	
  33.   background: #efefe2;
    34. 
                    	
  34.   overflow-x: hidden;
    35. 
                    	
  35.   overflow-y: scroll;
    36. 
                    	
  36.   -webkit-text-size-adjust: 100%
    37. 
                    	
  37. }
    38. 
                    	
  38. img { max-width: 100% }
    39. 
                    	
  39. ol,
    40. 
                    	
  40. ul,
    41. 
                    	
  41. li {
    42. 
                    	
  42.   list-style: none
    43. 
                    	
  43. }
    44. 
                    	
  44. table {
    45. 
                    	
  45.   border-spacing: 0;
    46. 
                    	
  46.   border-collapse: collapse
    47. 
                    	
  47. }
    48. 
                    	
  48. form label { cursor: pointer }
    49. 
                    	
  49. input,
    50. 
                    	
  50. textarea {
    51. 
                    	
  51.   border-radius: 0;
    52. 
                    	
  52.   -webkit-appearance: none
    53. 
                    	
  53. }
                    	
  54. a {
    55. 
                    	
  55.   color: #000;
    56. 
                    	
  56.   text-decoration: none;
    57. 
                    	
  57.   transition: all 0.3s ease-in-out
    58. 
                    	
  58. }
    59. 
                    	
  59. a:hover {
    60. 
                    	
  60.   color: #ff657c;
    61. 
                    	
  61.   outline: none
    62. 
                    	
  62. }
    63. 
                    	
  63. a:focus { outline: none }
    64. 
                    	
  64. input[type=submit] { transition: all 0.3s ease-in-out }
    65. 
                    	
  65. a img { border: none }
    66. 
                    	
  66. .cf::after {
    67. 
                    	
  67.   content: "";
    68. 
                    	
  68.   display: block;
    69. 
                    	
  69.   clear: both
    70. 
                    	
  70. }
    71. 
                    	
  71. ::-moz-selection { color: #ff657c }
    72. 
                    	
  72. ::selection { color: #ff657c }
    73. 
                    	
  73. ::-webkit-input-placeholder { color: #999 }
    74. 
                    	
  74. ::-moz-placeholder {
    75. 
                    	
  75.   color: #999;
    76. 
                    	
  76.   opacity: 1
    77. 
                    	
  77. }
    78. 
                    	
  78. :-ms-input-placeholder { color: #999 }
    79.

テーマ情報と言うのは「style.css」の冒頭に記述している下記の情報です。ココに記載する情報はご自身のものに書き換えてお使いください。

                	
    
                    	
  1. /*
    2. 
                    	
  2. Theme Name: サンプルブログ
    3. 
                    	
  3. Theme URI: https://chepirare.com/sample/02/
    4. 
                    	
  4. Author: Chepirare
    5. 
                    	
  5. Description: こちらはサンプルブログのデザインテーマです。
    6. 
                    	
  6. */

「Theme Name（テーマ名）」は必須項目なので記述しなければいけません。今回はその他に「Theme URI（テーマのURL）」、「Author（テーマの作者）」、「Description（テーマの説明）」も記述しています。

テーマ情報

管理画面でテーマ情報を見てみると「style.css」に記述した内容がちゃんと反映されています。

この情報は「外観」の「テーマ」ページで確認する事ができます。作成しているテーマにマウスを重ねると「テーマの詳細」ボタンが現れますのでクリックしてみてください。

「Theme Name」以外の項目は必須ではないので、付けたくなければ削除してもらっても構いません。ちなみに情報の左側に白字で「Sample Blog」と書かれている画像が次項で紹介する「screenshot.png」です。

竹馬

テーマ情報はこの他にもいくつかあり、「Version（テーマのバージョン）」「Tags（テーマの特徴を表すタグ）」「License（テーマのライセンス）」などを追加する事ができます。

screenshot.pngの設置

次に「screenshot.png」という名前のPNG画像を用意します。この画像は前項で見て頂いたように、ワードプレスの管理画面でテーマを確認する際に表示される画像です。

screenshot.png

サンプルブログでは上記のものを使っています。ぶっちゃけココの画像はなんでも良いです。管理画面でしか表示されませんので、一般のユーザーが目にする事はありません。

「screenshot.png」の画像サイズは「横880px × 縦660px」が推奨されています。

画像編集ソフトをお持ちじゃない方は、「Photopea（フォトピー）」という無料で使えるオンラインツールもありますので活用してみてください。自分でテーマを確認できれば良いので、文字無しの写真でも構いません。

こちらも見てください

index.phpを作成する

続いて「index.php」を作成していきます。「index.php」は記事を一覧表示するページで、サンプルブログではトップページを構成するファイルとして使用しています。

index.php

                	
    
                    	
  1. <?php get_header('top'); ?>
    2. 
                    	
  2. <main>
    3. 
                    	
  3.   <div class="breadcrumbWrap">
    4. 
                    	
  4.     <ol itemscope="" itemtype="https://schema.org/BreadcrumbList">
    5. 
                    	
  5.       <li itemscope="" itemtype="https://schema.org/ListItem" itemprop="itemListElement">
    6. 
                    	
  6.         <a itemprop="item" href="<?php echo esc_url(get_home_url()); ?>">
    7. 
                    	
  7.           <img src="<?php bloginfo('template_url'); ?>/img/icon_home.svg" alt="">
    8. 
                    	
  8.           <span itemprop="name">ホーム</span>
    9. 
                    	
  9.         </a>
    10. 
                    	
  10.         <meta itemprop="position" content="1">
    11. 
                    	
  11.       </li>
    12. 
                    	
  12.     </ol>
    13. 
                    	
  13.   </div>
    14. 
                    	
  14.   <div class="mainInner">
    15. 
                    	
  15.     <div id="mainContents" class="mainContents">
    16. 
                    	
  16.       <section id="category">
    17. 
                    	
  17.         <div class="title">
    18. 
                    	
  18.           <h2>最新記事の一覧</h2>
    19. 
                    	
  19.         </div>
    20. 
                    	
  20.         <div class="inner">
    21. 
                    	
  21.           <div class="postWrap">
    22. 
                    	
  22.             <?php while (have_posts()) : the_post();?>
    23. 
                    	
  23.             <article>
    24. 
                    	
  24.               <a href="<?php the_permalink(); ?>">
    25. 
                    	
  25.                 <figure class="thumbnail">
    26. 
                    	
  26.                   <?php if(has_post_thumbnail()) { echo the_post_thumbnail(); } ?>
    27. 
                    	
  27.                 </figure>
    28. 
                      	
  28.                 <div class="txt">
    29. 
                      	
  29.                   <h2 itemprop="headline"><?php echo get_the_title(); ?></h2>
    30. 
                      	
  30.                   <div class="cattegory">
    31. 
                      	
  31.                     <p><?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?></p>
    32. 
                     	
  32.                   </div>
    33. 
                     	
  33.                 </div>
    34. 
                     	
  34.               </a>
    35. 
                     	
  35.             </article>
    36. 
                     	
  36.             <?php endwhile; ?>
    37. 
                     	
  37.           </div>
    38. 
                     	
  38.           <div class="paginationWrap">
    39. 
                     	
  39.             <?php wp_pagination(); ?>
    40. 
                     	
  40.           </div>
    41. 
                     	
  41.         </div>
    42. 
                     	
  42.       </section>
    43. 
                    	
  43.     </div>
    44. 
                    	
  44.     <?php get_sidebar(); ?>
    45. 
                    	
  45.   </div>
    46. 
                    	
  46. </main>
    47. 
                    	
  47. <?php get_footer(); ?>
    48.

HTMLのソースコードにPHPが混在しているので、PHPがわからないと初めは難しいです。徐々にPHPもわかるようになりますので、とりあえずこちらもコピペしておきましょう。

PHPファイルはHTMLファイルと違って、部分毎にファイルを作る事ができます。

例えば「header.php（ヘッダー）」「footer.php（フッター）」「sidebar.php（サイドバー）」などを個別に作成し、「index.php」内に読み込む事ができるんです。

                	
    
                    	
  1. <?php get_header('top'); ?>
    2.

この記述ではトップページ用のヘッダー（header-top.php）を読み込んでいます。ヘッダーはいくつも作成する事ができるんですが、その場合は「header-○○.php」のように「-（ハイフン）」と「文字列」を繋げます。

読み込む場合は「(‘○○’)」のように、丸括弧の中に文字列を記述して、その文字列を「”（シングルクォーテーション）」で囲みます。

                	
    
                    	
  1. <?php get_footer(); ?>
    2. 
                    	
  2. <?php get_sidebar(); ?>
    3.

同じように上記ではフッター（footer.php）とサイドバー（sidebar.php）を読み込んでいます。

                	
    
                     	
  1. <?php wp_pagination(); ?>
    2.

こちらは「ページネーション」を設定しています。サンプルブログでは記事数が少ないのでページネーションの挙動を確認して頂けないですが、ページネーションは設置されています。

指定した記事数を超える事でページングが実装されますので、記事数が少ない時にはデザインが表面上に現れない仕様になっています。

                	
    
                    	
  1. <?php while (have_posts()) : the_post();?>
    2. 
                    	
  2. ・
    3. 
                    	
  3. ・
    4. 
                    	
  4. ・
    5. 
                     	
  5. <?php endwhile; ?>
    6.

記事を一覧表示するための記述が「ループ」と言われる上記のコードです。「ループ」とは繰り返しおこなわれる命令を意味します。

上記のコードの意味は「記事があれば指定する記事の内容を繰り返し表示する」というものです。ですがループの指定だけでは記事の内容は表示されませんので、「何を表示するのか」も設定しておく必要があります。

                	
    
                    	
  1. <?php the_permalink(); ?>
    2. 
                    	
  2. <?php if(has_post_thumbnail()) { echo the_post_thumbnail(); } ?>
    3. 
                      	
  3. <?php echo get_the_title(); ?>
    4. 
                      	
  4. <?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?>
    5.

サンプルブログのループでは上記4点の表示を指定しています。

「the_permalink()」は記事のURL、「the_post_thumbnail()」はアイキャッチ画像、「get_the_title()」は記事のタイトル、「get_the_category()」は記事のカテゴリー名です。

竹馬

PHPが絡んでくると難しく感じてしまうかと思いますが、できるだけシンプルにしているので頑張ってみてください。大まかなコードはほぼほぼHTMLで構成されていますしね。

style.cssにデザインを追加

それでは「index.php」のデザインを「style.css」に追加しておきます。ループ部分のデザインはちょっと置いておいて、先に「main」タグやパンくずリストのデザインを追加します。

ループ部分のデザインは「検索結果のデザインをstyle.cssに追加」で紹介しています。

style.css

                	
    
                    	
  1. ～テーマ情報省略～
    2. 
                    	
  2. ～共通デザイン省略～
    3. 
                    	
  3. /* ------ main ------ */
    4. 
                    	
  4. main { padding-top: 80px  }
    5. 
                    	
  5. main .mainInner {
    6. 
                    	
  6.   font-size: 0;
    7. 
                    	
  7.   max-width: 1180px;
    8. 
                    	
  8.   padding: 0 10px;
    9. 
                    	
  9.   margin: 40px auto 0
    10. 
                    	
  10. }
    11. 
                    	
  11. @media screen and (max-width: 800px ) {
    12. 
                    	
  12.   main { padding-top: 60px }
    13. 
                    	
  13.   main .mainInner {
    14. 
                    	
  14.     max-width: 100%;
    15. 
                    	
  15.     padding: 0
    16. 
                    	
  16.   }
    17. 
                    	
  17.   main .breadcrumbWrap + .mainInner {
    18. 
                    	
  18.     padding: 0 4%;
    19. 
                    	
  19.     margin: 0 auto
    20. 
                    	
  20.   }
    21. 
                    	
  21. }
    22. 
                    	
  22. 
                    	
  23. /* ------ breadcrumbWrap ------ */
    24. 
                    	
  24. .breadcrumbWrap ol {
    25. 
                    	
  25.   width: 100%;
    26. 
                    	
  26.   max-width: 1180px;
    27. 
                    	
  27.   padding: 15px 10px;
    28. 
                    	
  28.   margin: 0 auto
    29. 
                    	
  29. }
    30. 
                    	
  30. .breadcrumbWrap li {
    31. 
                    	
  31.   font-size: 1.5rem;
    32. 
                    	
  32.   position: relative;
    33. 
                    	
  33.   display: inline-block
    34. 
                    	
  34. }
    35. 
                    	
  35. .breadcrumbWrap li + li { padding-left: 20px }
    36. 
                    	
  36. .breadcrumbWrap li + li::before {
    37. 
                    	
  37.   content: "";
    38. 
                    	
  38.   width: 6px;
    39. 
                    	
  39.   height: 12px;
    40. 
                    	
  40.   margin: auto;
    41. 
                    	
  41.   background: url("https://chepirare.com/sample/02/wp-content/themes/Sample/img/icon_arrow.svg") no-repeat;
    42. 
                    	
  42.   position: absolute;
    43. 
                    	
  43.   top: 0;
    44. 
                    	
  44.   bottom: 0;
    45. 
                    	
  45.   left: 7px
    46. 
                    	
  46. }
    47. 
                    	
  47. .breadcrumbWrap li a {
    48. 
                    	
  48.   color: #ff657c;
    49. 
                    	
  49.   position: relative
    50. 
                    	
  50. }
    51. 
                    	
  51. .breadcrumbWrap li:first-child img {
    52. 
                    	
  52.   width: 20px;
    53. 
                    	
  53.   position: relative;
    54. 
                    	
  54.   top: 2px
    55. 
                    	
  55. }
    56. 
                    	
  56. @media screen and (max-width: 768px ) {
    57. 
                    	
  57.   .breadcrumbWrap { padding: 0 4% }
    58. 
                    	
  58.   .breadcrumbWrap ol { padding: 15px 0 }
    59. 
                    	
  59.   .breadcrumbWrap li:after { margin: 0 4px }
    60. 
                    	
  60. }
    61. 
                    	
  61. 
                    	
  62. /* ------ mainContents ------ */
    63. 
                    	
  63. .mainInner .mainContents {
    64. 
                    	
  64.   width: 72%;
    65. 
                    	
  65.   max-width: 820px;
    66. 
                    	
  66.   vertical-align: top;
    67. 
                    	
  67.   margin-right: 2%;
    68. 
                    	
  68.   margin-bottom: 60px;
    69. 
                    	
  69.   display: inline-block
    70. 
                    	
  70. }
    71. 
                    	
  71. @media screen and (max-width: 900px ) {
    72. 
                    	
  72.   .mainInner .mainContents {
    73. 
                    	
  73.     width: 100%;
    74. 
                    	
  74.     padding: 20px 0 0;
    75. 
                    	
  75.     margin-right: 0;
    76. 
                    	
  76.     margin-bottom: 40px;
    77. 
                    	
  77.     display: block
    78. 
                    	
  78.   }
    79. 
                    	
  79. }
    80.

ココはそんなに難しくないのでサクッと「style.css」に追加しておいてください。今後もCSSの記述を追加していきますので、ファイルの下へ下へと追加していってもらえればOKです。

                	
    
                    	
  1. background: url("○○/wp-content/themes/Sample/img/icon_arrow.svg") no-repeat;
    2.

1箇所だけ注意してもらいたいのが、上記のCSSで画像を読み込んでいる「○○」部分はご自身のサイトURLに変更しておくという事です。コピペのままだとサンプルブログの画像を読み込む事になるので注意してください。

それではパンくずリストで使用している「icon_home.svg」と「icon_arrow.svg」のアイコン2点もアイコン名をクリックしてダウンロードしておいてください。

サンプルブログのファイル

最後にこのページで用意できたファイルを確認しておきます。テーマフォルダの中に上記のファイルがちゃんと入っていますでしょうか。今のままではサイトは表示されませんので、もう少しファイルの作成を進めていきます。

竹馬

何と言ってもワードプレスでややこしいのはPHPの記述ですね。慣れれば何とな～くわかってくるので焦らずいきましょう。次は「header.php」と「footer.php」を作成します。

各種設定とプラグインの追加 header.phpとfooter.phpの制作

よく読まれている記事

おすすめの記事

ホームページの簡単な作り方以外にも
お得な情報や日常を紹介するブログも是非どうぞ！Webに関連するレンタルサーバーなどの特徴・料金比較や、
個人的に挑戦している資格取得についての勉強法やグルメなどを紹介しています。

チェピレア日記