What's New Qiita

20200430のCSSに関する記事は14件です。

  • 投稿日：2020-04-30T21:33:01+09:00

vue.jsでセレクトボタンを使ってCSSを変更する

この記事で分かること

  • セレクトボタンを使ってのイベント処理
  • dataで指定した値を使う方法

こちらの記事ではセレクトボタンを押した時にイベント処理を行い、cssを変更する方法を紹介します。

完成物のイメージとしてはセレクトボタンで指定した色にテキストの文字色が変わるというものです。

検索してもピンポイントで記事がすぐにヒットしなかったので、備忘録を兼ねて作成しました。
処理の詳しい理由などについては他の記事を参考にして頂ければ幸いです。

テンプレート

html
<select v-model="select" v-on:change="colorchange">
  <option value="black">黒</option>
  <option value="green">緑</option>
  <option value="blue">青</option>
  <option value="red">赤</option>
</select>

今回使うディレクティブはv-modelとv-on:changeの2つです。

vueインスタンス

main.js
var app = new Vue({
  el: "#app1",
  data: {
    select: ""
  },
  methods: {
    colorchange: function () {
      switch (this.select) {
        case "red":
          app1.style.color = "red";
          break;

        case "green":
          app1.style.color = "green";
          break;

        case "black":
          app1.style.color = "black";
          break;

        case "blue":
          app1.style.color = "blue";
          break;
      }
    }
  }
})

解説

処理の全体的な流れはまず、v-modelを使ってセレクトボタンで指定されたvalue属性をdata(オプションオブジェクト)に追加します。
それから、v-on:changeを使ってセレクトボタの選択に応じた処理を行うメソッドを作成していきます。

v-model

main.js
<select v-model="select">

v-modelで指定するプロパティ名はdataで指定するものと同じにします。
今回はselectとしました。

main.js
var app = new Vue({
  el: "#app1",
  data: {
    select: ""
  }

このselectプロパティをdataにも記述します。

v-on:change

<select v-model="select" v-on:change="colorchange">

v-on:changeを使って、メソッド名を記述します。
今回はcolorchangeとしました。

main.js
  methods: {
    colorchange: function () {
      switch (this.select) {
        case "red":
          app1.style.color = "red";
          break;

        case "green":
          app1.style.color = "green";
          break;

        case "black":
          app1.style.color = "black";
          break;

        case "blue":
          app1.style.color = "blue";
          break;
      }
    }
  }

methodsの方でもcolorchangeメソッドを記述していきます。
switch文の中身については割愛させていただきますが、ここで1つポイントがあります。

それは、switch文で使う条件式についてです。
セレクトボタンで指定されたvalue属性に応じて処理を分けていきたいのですが、value属性の値は先ほど、v-modelで指定したselectに代入されています。
なので、条件式にはthis.selectと記述することでdataに代入されたvalue属性に応じて処理を分けていくことができます。
つまり、thisを使うことによってdataのプロパティを使えます。

分かりにくい言い回しなどあったかと思いますが、最後までお読み頂きありがとうございました。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-04-30T21:30:51+09:00

【CSS】セレクタ

基本

探したい要素 CSSセレクタ
全てのdiv要素 div
全てのdiv要素とp要素 div,p
全ての要素 *
class名がXの要素 .XXX
id名がXXXの要素 #XXX

結合子

探したい要素 CSSセレクタ
div要素の階層下のすべての要素 div *
div要素の1階層下の任意の要素 div > *
div要素の階直後の任意の要素 div + *

属性

探したい要素 CSSセレクタ
全てのtype属性を持つinput要素 input[type]
textというtype属性を持つinput要素 input[type="text"]
href属性がhttp://で始まるa要素 a[href^="http://"]
src属性が.jpgで終わるimg要素 img[src$=".jpg"]
xxxという単語を含むsrc属性を持つimg要素 img[src~="xxx"]

疑似クラス

探したい要素 CSSセレクタ
アクセスしていない全てのリンク a:link
アクセスした全てのリンク a:visited
要素の子孫にxxxというテキストを含むdiv要素 div:contains("xxx")
hover属性を持ったa要素 a:hover
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-04-30T21:29:21+09:00

【Java】Resource interpreted as Stylesheet but transferred with MIME type text/html

CSSが適用されなくてずっとハマっていた時の話。せっかくなのでここに書き留めておく。
ちなみに、Javaのコードに原因があった話なので関係ない方は参考にならないと思います。

環境

OS: Windows10
サーバー: Apache Tomcat 9.0.26
Java: JDK13
HTML: HTML5
CSS: CSS3

ブラウザで警告が出ていた

　CSSは正しくダウンロードされているのに、適用されていない。ブラウザの開発ツールを見ると、この警告が出ていた。

Resource interpreted as Stylesheet but transferred with MIME type text/html

＊Internet ExplorerやMicrosoft Edgeだと次のような警告になる。

SEC7113: CSS は、MIME の種類が一致しないため、無視されました

いくつかのブラウザで試しても同じだったので、サーバー側に問題があることは察しがついた。

行きついた原因

　原因は、次のコードにあった。クラス名やメソッド名から分かる通り、フィルターである。

EncodingFilter.java
import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;

public class EncodingFilter implements Filter{
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws IOException, ServletException{
        request.setCharacterEncoding("UTF-8");
        //↓ここが原因箇所！
        response.setContentType("text/html; charset=UTF-8");
        //↑ここが原因箇所！
        chain.doFilter(request, response);
    }

    public void init(FilterConfig filtercConfig){};
    public void destroy(){}
}

web.xmlでこのフィルターを通るように設定していて、CSSファイルに関して、どうもこれでContentTypeが「text/html; charset=UTF-8」になってしまっていたようだった。

ちなみに、web.xmlとCSSファイルの読み取りはそれぞれ以下のようなコード。

web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="4.0" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd">
    <filter>
        <filter-name>EncodingFilter</filter-name>
        <filter-class>tool.EncodingFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>EncodingFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
</web-app>

<link href="background.css" rel="stylesheet" type="text/css">

解決方法

　EncodingFilter.javaで原因箇所の部分を次のように書き換える。
response.setCharacterEncoding("UTF-8");
これで無事直った。サーバーの設定に問題があるかと思ったよ…。

＊ブラウザでCtrl+F5を行わないと反映されないのでお忘れなく。キャッシュを消去して更新。

余談

　EncodingFilter.javaは本に倣って書いていたものでした。こんな罠があるとは…。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-04-30T18:06:36+09:00

MAMPを使ったWordpressでのWEB制作方法15　初心者向け

MAMPを使ったWordpressでのWEB制作方法15　初心者向け

今回で最後の記事になります。
前回の記事はこちら

MAMPを使ったWordpressでのWEB制作方法14　初心者向け

これまで固定ページはpage.phpでレイアウトを共通化してきました。

しかし実際には自由にレイアウトが必要な場面や
VSコードなどのエディタ側でページを制作するほうが
都合がいいことが多いと思います。

そこでレイアウトが自由なページを追加してみましょう。

オリジナルテンプレートの作成

今回はサービス２という内容でオリジナルテンプレートを作成します。

まずpage.phpをコピーしてpage-service2.phpというファイルを作成します。
一番上にphpでテンプレートの名前を記述します。

page-service2.php
<?php
/*
Template Name: サービス2
*/
?>

<?php get_header(); ?>

  <div class="wrapper">
    <div id="conL">
      <h2><?php the_title(); ?></h2>

      <?php if(have_posts()): while(have_posts()): the_post();?>
      <?php the_content(); ?>
      <?php endwhile; endif; ?>

      <!--ページの条件分岐-->
      <?php if (is_page(array('63'))) {?>

      <?php }else{ ?>
        <a class="btn" href="contact.html"><button class="btn1">お問い合わせ</button></a>
      <?php } ?>


    </div><!--conLend-->

<?php get_sidebar(); ?>
  </div>
<?php get_footer();?>

次に管理者画面から新規固定ページを以下で作成しましょう。
パーマリンクはservice2、ページ属性からテンプレートをサービス２に設定します。
入力が終わったら公開してページを表示します。
Image from Gyazo

すると以下のようにサービス２のページが表示されます。
Image from Gyazo

このページはpage-service2.phpのファイルと直接つながっています。
エディタで中身を編集してみましょう。

page-service2.php
<?php
/*
Template Name: サービス2
*/
?>

<?php get_header(); ?>

  <div class="wrapper">
    <div id="conL">
      <h2><?php the_title(); ?></h2>
        <p>サービス２テスト</p>
        <p>サービス２テスト</p>
        <p>サービス２テスト</p>
        <p>サービス２テスト</p>
        <p>サービス２テスト</p>
    </div><!--conLend-->

<?php get_sidebar(); ?>
  </div>
<?php get_footer();?>

ブラウザで表示すると
Image from Gyazo
このようにファイルの内容が直接参照されます。

オリジナルテンプレートを使用すれば
固定ページのデザインをエディタから直接作成できます。
作りたいサイトの構成によって使い分けをしましょう。

以上でMAMPを使ったローカル環境でのテーマ作成は完了です。
ありがとうございました。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-04-30T17:39:42+09:00

MAMPを使ったWordpressでのWEB制作方法14　初心者向け

MAMPを使ったWordpressでのWEB制作方法14　初心者向け

前回の記事はこちら
MAMPを使ったWordpressでのWEB制作方法13　初心者向け

メニュ項目の追加

現在メニューバーには事業内容、会社概要、お問い合わせが表示されています。
ここにカテゴリーへのリンクを追加しましょう。

Image from Gyazo

管理者画面/外観メニューを開きカテゴリーから項目を追加しましょう

Image from Gyazo

並び替えや削除も可能です。

Image from Gyazo

他にもページネーションやパンくずリストなど
プラグインの導入によって簡単に機能を追加できますので
必要なものを都度いれながら制作していきましょう。

次回はオリジナルテンプレートの作成をします。

MAMPを使ったWordpressでのWEB制作方法15　初心者向け

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-04-30T17:18:49+09:00

MAMPを使ったWordpressでのWEB制作方法13　初心者向け

MAMPを使ったWordpressでのWEB制作方法13　初心者向け

前回の記事はこちら
MAMPを使ったWordpressでのWEB制作方法12　初心者向け

今回はお問い合わせページを作成します。
contact7というプラグインを使って設定しましょう。

お問い合わせページの作成

現在お問い合わせページは下のようにマークアップされています。
当然ですが送信ボタンを押しても何も反応しません。

またpage.phpのシートでレイアウトを共通化しているため
お問い合わせページへのリンクボタンも表示されています。

Image from Gyazo

まずはContact form7のプラグインを入れるため
新規追加から検索をしてみます。

Image from Gyazo

すると拡張機能も含めたcontact7関連のプラグインが一覧で出てきてしまいます。

このような場合はgoogle検索をしてプラグインの本体を探します。

contact7
ここからダウンロードをしましょう

DLしたzipファイルを管理画面からアップロードします。

Image from Gyazo

アップロードできたら左タブのお問い合わせを開いて
新規コンタクトフォームを追加すると下の画面になります。
こちらの項目を設定していきましょう。

Image from Gyazo

本文の部分に作成したお問い合わせ（contact.html）の
tableの中身を貼り付けましょう。

Image from Gyazo

この状態から各項目を設定していきます。

フォームのテンプレートから使用したい項目を選び
必要事項を記述するとタグが生成されます。

名前を設定してみましょう。

nameという名前でタグを作り[text name]をコピーします。

Image from Gyazo

名前部分のinputタグと入れ替えるだけです。
Image from Gyazo

各項目を設定して保存しましょう。
送信ボタンにはクラスを付与しておきます。

<table>
<tbody>
<tr>
<th>お名前</th>
<td>[text c_name]</td>
</tr>
<tr>
<th>電話番号</th>
<td>[text tel placeholder "090-1111-1111"]</td>
</tr>
<tr>
<th>メールアドレス</th>
<td>[email c_email]</td>
</tr>
<tr>
<th>お問い合わせ項目</th>
<td>
[select menu-377 "選択してください" "サービスについて" "料金について" "弊社について"]
</td>
</tr>
<tr>
<th>お問い合わせ内容</th>
<td>
[textarea info]
</td>
</tr>
<tr>
<td colspan="2">
[submit class:btn1 "送信"]             
</td>
</tr>
</tbody>
</table>

続いてメールタブにて送信先や送信元の情報を設定します。

Image from Gyazo

送信先：ユーザーがメールを送付するアドレスになります。つまり管理者アドレスです。
送信元：通知に使うアドレスです。送信元と同じで問題ありません。
題名：お問い合わせがありましたなどに設定しましょう
メッセージ本文：受け取る問い合わせ内容を設定しましょう。

自動返信はメール２の部分に設定することで
問い合わせに自動返信ができます。

必要事項を記入し保存をすると以下のショートコードが発行されます。

Image from Gyazo

これをコピーして固定ページ/お問い合わせのtableタグと入れ替えましょう。

Image from Gyazo

このような形になります。

Image from Gyazo

動作確認をしましょう。
空の状態ですが送信ボタンを押すと動作していることがわかります。

ページの条件分岐

お問い合わせページへのリンクは不要なので
条件分岐を設定しましょう。

page.php
<?php get_header(); ?>

  <div class="wrapper">
    <div id="conL">
      <h2><?php the_title(); ?></h2>

      <?php if(have_posts()): while(have_posts()): the_post();?>
      <?php the_content(); ?>
      <?php endwhile; endif; ?>

      <!--ページの条件分岐-->
      <?php if (is_page(array('63'))) {?>

      <?php }else{ ?>
        <a class="btn" href="contact.html"><button class="btn1">お問い合わせ</button></a>
      <?php } ?>


    </div><!--conLend-->

<?php get_sidebar(); ?>
  </div>
<?php get_footer();?>

ページのIDがお問い合わせページの６３番（ご自身の環境に合わせてください。）
だった場合に何も表示しないという記述を追加しました。

ブラウザを再読込して確認しましょう。
Image from Gyazo

お問い合わせページの完成です。

以上でサイトの大枠は完成しました。

次はメニュー項目の追加をします。

MAMPを使ったWordpressでのWEB制作方法14　初心者向け

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-04-30T15:58:02+09:00

MAMPを使ったWordpressでのWEB制作方法12　初心者向け

MAMPを使ったWordpressでのWEB制作方法11　初心者向け

今回は詳細ページの作成です。
前回の記事はこちら
MAMPを使ったWordpressでのWEB制作方法11　初心者向け

詳細ページの作成

詳細ページもレイアウトは統一されているのでまずは
ヘッダー、フッター、サイドバーと表示部分が空になった
フレームだけを用意します。

single.php
<?php get_header(); ?>

    <div class="wrapper">
    <div id="conL">


    </div><!--conLend-->
    <?php get_sidebar(); ?>

  </div><!--wrapperend-->

<?php get_footer();

前回の投稿一覧ページ同様以下のif文を作成して
タイトルと中身を取得できるようにタグを設置します。

single.php
<?php get_header(); ?>

  <div class="wrapper">
    <div id="conL">

　<!--loopstart-->
　<?php if(have_posts()): while(have_posts()): the_post();?>
　　<h2><?php the_title(); ?></h2>
　　<!--loopcontent-->
　　<?php the_content(); ?>
　<!--loopend-->
　<?php endwhile; endif; ?>
　<a class="btn" href="<?php echo home_url(); ?>/contact"><button class="btn1">お問い合わせ</button></a>


    </div><!--conLend-->
    <?php get_sidebar(); ?>
  </div><!--wrapperend-->

<?php get_footer();

一覧ページから詳細ページを開くと投稿の中身が表示されます。
Image from Gyazo

中身は表示できましたが日付が入っていないので追加します。
タイトルの下にタグを入れましょう。

single.php
<?php get_header(); ?>

  <div class="wrapper">
    <div id="conL">

　<!--loopstart-->
　<?php if(have_posts()): while(have_posts()): the_post();?>
　　<h2><?php the_title(); ?></h2>
　　<p><?php the_time('Y/m/d'); ?></p>
　<!--loopcontent-->
　<?php the_content(); ?>
　<!--loopend-->
　<?php endwhile; endif; ?>
　<a class="btn" href="<?php echo home_url(); ?>/contact"><button class="btn1">お問い合わせ</button></a>


    </div><!--conLend-->
    <?php get_sidebar(); ?>
  </div><!--wrapperend-->

<?php get_footer();

以上で投稿ページは完成です。

次はお問い合わせページを作成します。
MAMPを使ったWordpressでのWEB制作方法13　初心者向け

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-04-30T15:23:02+09:00

MAMPを使ったWordpressでのWEB制作方法11　初心者向け

MAMPを使ったWordpressでのWEB制作方法11　初心者向け

前回の記事はこちら
MAMPを使ったWordpressでのWEB制作方法10　初心者向け

今回は投稿一覧表示の作成をします。

が、その前にパーマリンク（url)の設定を変更しておきましょう

パーマリンクの設定

管理画面左タブの設定/パーマリンク設定より設定画面を開きます。

デフォルトは日付と投稿名になっています。

これを以下のカスタム構造に変えましょう。

カテゴリー名/投稿名がパーマリンクに変更されました。
Image from Gyazo

投稿一覧ページの作成

投稿一覧ページはarchive.htmlに作成していますので
archive.htmlの中身をarchive.phpへ貼り付けます。

ヘッダー、フッター、サイドバーの共通レイアウトは
wordpressタグで呼び出すよう変更しておきましょう。

この状態でurlの末尾にblogと加えるとパーマリンクが設定されているので
以下のarchive.phpの中身が表示されます。
Image from Gyazo

blogだけでなくinformationの一覧も表示されていますので修正していきます。
今回はブログ、業務について、リリースの３つを独立した一覧として分けます。

まずarchive.phpのコンテンツ部分に以下の記述をしましょう

archive.php
<?php if (in_category(array('1'))) {?>
　「Aがはいります」
<?php } elseif(in_category(array('2'))){ ?>
　「Bがはいります」
<?php }else{ ?>
  「Zがはいります」
<?php } ?>

こちらはカテゴリーidが１の場合は「Aが入ります」を表示
カテゴリーIDが2の場合は「Bが入りますを表示」
それ以外は「Zが入ります」を表示するというif文です。

それぞれの部分に前回index.phpで作った
一覧部分のパーツをコピペして書き換えます。
少し複雑なので全体を載せておきます。

archive.php
<?php get_header(); ?>
    <div class="wrapper">
    <div id="conL">

<?php if (in_category(array('9'))) {?>

      <div class="information"><!--blogstart-->
        <h2>Blog</h2>
        <dl>
          <!--loopstart-->
        <?php
          $infoPosts = get_posts('numberposts=4&category=9');
          foreach($infoPosts as $post): 
        ?>

          <div class="contents_box">
            <dt><?php the_time('Y-m-d'); ?></dt>
            <dd>
              <div class="b_img">
                <?php the_post_thumbnail('thumbside'); ?>
              </div>
              <div class="b_right">
                <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
              </div>
            </dd>
          </div>

        <!--loopend-->
        <?php endforeach; ?>

          </dl>
        </div><!--blogend-->

<?php } elseif(in_category(array('8'))){ ?>

     <div class="information"><!--informationstart-->
        <h2>INFORMATION</h2>
        <dl>
        <!--loopstart-->
        <?php
          $infoPosts = get_posts('numberposts=4&category=8');
          foreach($infoPosts as $post): 
        ?>

          <div class="contents_box">
            <dt><?php the_time('Y-m-d'); ?></dt>
            <dd>
              <span class="tab <?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->slug; } ?>"><?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?></span>
              <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>を更新しました。
            </dd>
          </div>

        <!--loopend-->
        <?php endforeach; ?>

        </dl>
      </div><!--informationend-->

<?php }else{ ?>

      <h2>INFORMATION</h2>
        <dl>
        <!--loopstart-->
        <?php
          $infoPosts = get_posts('numberposts=4&category=8');
          foreach($infoPosts as $post): 
        ?>

          <div class="contents_box">
            <dt><?php the_time('Y-m-d'); ?></dt>
            <dd>
              <span class="tab <?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->slug; } ?>"><?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?></span>
              <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>を更新しました。
            </dd>
          </div>

        <!--loopend-->
        <?php endforeach; ?>

        </dl>
      </div><!--informationend-->

<?php } ?>

    </div><!--conLend-->
    <?php get_sidebar(); ?>
  </div><!--wrapperend-->
<?php get_footer();

そして最後に各コンテンツのループの開始と終わりをいかに書き換えます。
<!--loopstart><!--loopend-->の上を書き換えています。
以下完成形です。

archive.php
<?php get_header(); ?>

    <div class="wrapper">
    <div id="conL">

<?php if (in_category(array('9'))) {?>
      <div class="information"><!--blogstart-->
        <h2>Blog</h2>
        <dl>

          <!--loopstart-->
<?php if(have_posts()): while(have_posts()): the_post();?>
          <div class="contents_box">
            <dt><?php the_time('Y-m-d'); ?></dt>
            <dd>
              <div class="b_img">
                <?php the_post_thumbnail('thumbside'); ?>
              </div>
              <div class="b_right">
                <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
              </div>
            </dd>
          </div>

        <!--loopend-->
<?php endwhile; endif; ?>

          </dl>
        </div><!--blogend-->

<?php } elseif(in_category(array('8'))){ ?>
  <div class="information"><!--informationstart-->
        <h2>INFORMATION</h2>
        <dl>
        <!--loopstart-->
<?php if(have_posts()): while(have_posts()): the_post();?>
          <div class="contents_box">
            <dt><?php the_time('Y-m-d'); ?></dt>
            <dd>
              <span class="tab <?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->slug; } ?>"><?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?></span>
              <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>を更新しました。
            </dd>
          </div>

        <!--loopend-->
<?php endwhile; endif; ?>
        </dl>
      </div><!--informationend-->

<?php }else{ ?>

  <h2>INFORMATION</h2>
        <dl>
        <!--loopstart-->
<?php if(have_posts()): while(have_posts()): the_post();?>
          <div class="contents_box">
            <dt><?php the_time('Y-m-d'); ?></dt>
            <dd>
              <span class="tab <?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->slug; } ?>"><?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?></span>
              <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>を更新しました。
            </dd>
          </div>

        <!--loopend-->
<?php endwhile; endif; ?>
        </dl>
      </div><!--informationend-->

<?php } ?>

    </div><!--conLend-->
    <?php get_sidebar(); ?>

  </div><!--wrapperend-->

<?php get_footer();

これでブログ、リリース、業務についての一覧ページを
独立して表示できるようになりました。
urlと結果一覧が正しいことを確認してください。

Image from Gyazo

Image from Gyazo

Image from Gyazo

次回は詳細ページを作成します。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-04-30T14:40:59+09:00

MAMPを使ったWordpressでのWEB制作方法10　初心者向け

MAMPを使ったWordpressでのWEB制作方法10　初心者向け

前回の記事はこちら
MAMPを使ったWordpressでのWEB制作方法9　初心者向け

前回設定したブログ一覧にサムネイルを設定します。

ブログのサムネイル設定

wordpressの初期設定ではブログの投稿/編集画面には
サムネイル画像を設定する項目がありません。

Image from Gyazo

まずはfunction.phpファイルに機能を追加します。

function.php
<?php
//カスタムメニュー
register_nav_menus( //メニュー機能をオンにする
array(
'place_global2' => 'グローバル', //“メニュー英語名” =>”メニュー名”,
'place_utility' => 'ユーティリティ',
'place_sidebar' => 'サイドメニュー',
'place_footer' => 'フッター',
)
);

//サムネイル機能追加
add_theme_support('post-thumbnails');
add_image_size('thumbside', 85, 85, true);
?>

サムネイル機能追加の下の２行をphpの閉じタグの中に追記します。

管理画面を再読込すると右のタブに画像投稿機能（アイキャッチ画像）が追加されます。

Image from Gyazo

ここにアイキャッチに使用する画像を設定して更新をしましょう。

Image from Gyazo

アイキャッチ画像を設定できました。
Image from Gyazo

index.phpのimgタグを以下に書き換えましょう。
このときthumbside部分はfunctions.phpの記述と
同じ名前に設定をしてください。

index.php
        <?php
          $infoPosts = get_posts('numberposts=4&category=9');
          foreach($infoPosts as $post): 
        ?>

          <div class="contents_box">
            <dt><?php the_time('Y-m-d'); ?></dt>
            <dd>
              <div class="b_img">
                <!--書き換え前-->
                <img src="<?php echo get_template_directory_uri();?>/images/cat_3.jpeg">
　　　　　　　　　 <!--書き換え後-->
                <?php the_post_thumbnail('thumbside'); ?>
              </div>
              <div class="b_right">
                <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
              </div>
            </dd>
          </div>

投稿ごとのサムネイル画像が表示できました。
Image from Gyazo
やや横に伸びているので横幅を50pxに調整します。
function.phpに記述した数字部分が画像サイズです。
Image from Gyazo

次回は投稿一覧を表示できるようにファイル作成します。

次の記事はこちら
MAMPを使ったWordpressでのWEB制作方法11　初心者向け

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-04-30T13:53:04+09:00

MAMPを使ったWordpressでのWEB制作方法9　初心者向け

MAMPを使ったWordpressでのWEB制作方法9　初心者向け

今回から投稿ページの作成をしていきます。

前回の記事はこちら
MAMPを使ったWordpressでのWEB制作方法8　初心者向け

投稿機能のカテゴリー作成

カテゴリーとは投稿記事をグループ化した１単位です。
以下の例では３つのカテゴリーを作成しています。

①業務について
②リリース
③ブログ

業務についてとリリースについてはinfomationとして
同じエリアに投稿をまとめてあります。

ブログは専用のエリアを設置しているという作りです。

Image from Gyazo

では早速作っていきましょう。
まずはwordpressの管理画面に入って左のタブから
投稿/カテゴリーより以下のページに入ります。

Image from Gyazo

名前にカテゴリー名をスラッグにはカテゴリーを示す単語を設定します。

今回はカテゴリー名を"業務について"としてスラッグを"work"として設定してみましょう。

Image from Gyazo

同様にカテゴリー名"リリース"、スラッグ"release"とカテゴリー名"ブログ"、スラッグ"blog"を作っておきましょう。

作り方は自由ですが管理者が覚えやすいキーワードを設定するようにしましょう。

デフォルトで表示される未分類というカテゴリーは使用上削除ができません。
気になる方はカテゴリーを作る際に編集をして必要なカテゴリーに書き換えましょう。

テスト投稿

wordpress管理者画面より投稿/新規投稿画面から以下のようにテスト投稿します。
今回はリリースのテストなのでカテゴリーはリリースを選びましょう。

Image from Gyazo

確認も兼ねて各カテゴリーの記事を２〜3個作っておきましょう。
Image from Gyazo

今の段階で管理者画面の投稿を表示から確認しても画面は真っ白です。
これは投稿ページのファイル未作成のためなので
次の過程で表示されるようにPHPファイルを設定していきます。

投稿結果をトップページでループ設定する

今回制作したトップ画面では1つの投稿を4回ループして表示しています。
順を追ってindex.phpファイルを書き換えていきましょう。
Image from Gyazo

まずはリリースをループして取得するため
以下にindex.phpを書き換えます。

index.php
<!--書き換え前-->
      <div class="information"><!--informationstart-->
        <h2>INFORMATION</h2>
        <dl>
          <div class="contents_box">
            <dt>2013-08-04</dt>
            <dd>
              <span class="tab tag_gyoumu">業務について</span>
              <a href="<?php home_url(); ?>single">2012年（平成24年）度の採用情報</a>を更新しました。
            </dd>
          </div>
          <div class="contents_box">
            <dt>2013-08-03</dt>
            <dd>
              <span class="tab tag_release">リリース</span>
              <a href="<?php home_url(); ?>single">制作実績のページ</a>を更新しました。
            </dd>
          </div>
          <div class="contents_box">
            <dt>2013-08-02</dt>
            <dd>
              <span class="tab tag_gyoumu">業務について</span>
              <a href="<?php home_url(); ?>single">2012年（平成24年）度の採用情報</a>を更新しました。

<!--書き換え後-->
        <!--loopstart-->
        <?php
          $infoPosts = get_posts('numberposts=4&category=9');
          foreach($infoPosts as $post): 
        ?>
          <div class="contents_box">
            <dt><?php the_time('Y-m-d'); ?></dt>
            <dd>
              <span class="tab <?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->slug; } ?>"><?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?></span>
              <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>を更新しました。
            </dd>
          </div>
        <!--loopend-->
        <?php endforeach; ?>

ループ設定したので２記事目以降は削除します。
以下は追記した箇所の説明です。

'numberposts=4&category=9'
numberposts=4　記事の表示数
category=9　取得するカテゴリーのID

<?php the_time('Y-m-d'); ?>
日付を取得しています

<?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->slug; } ?>
カテゴリーを取得してclassに付与しています。検証ツールでクラス名を確認しましょう。

<?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?>
カテゴリー名を取得しています。

<?php the_title(); ?>
記事のタイトルを取得しています。

<?php the_permalink(); ?>
パーマリンクを取得しています。

カテゴリーIDは管理者画面のカテゴリー一覧画面で
カテゴリーにマウスホバーすると一番下にIDが表示されます。
※以下はID７です。ご自身の環境に合わせて設定ください。

スクリーンショット 2020-04-30 10.57.49.png

ここでブラウザーをリロードして結果を表示してみます。
リリースはテスト投稿を２つしていないのですべて表示されています。
※リンク先のファイルはまだ作成していないので真っ白な画面です。
Image from Gyazo

同じようにブログ部分もループしておきます。
カテゴリーのIDはブログのIDに変更しましょう。
※写真についてはサムネイルとして後ほど設定します。

index.php
      <div class="information"><!--blogstart-->
        <h2>Blog</h2>
        <dl>

          <!--loopstart-->
        <?php
          $infoPosts = get_posts('numberposts=4&category=9');
          foreach($infoPosts as $post): 
        ?>

          <div class="contents_box">
            <dt><?php the_time('Y-m-d'); ?></dt>
            <dd>
              <div class="b_img">
                <img src="<?php echo get_template_directory_uri();?>/images/cat_3.jpeg">
              </div>
              <div class="b_right">
                <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
              </div>
            </dd>
          </div>

        <!--loopend-->
        <?php endforeach; ?>

          </dl>
        </div><!--blogend-->

これでトップページに投稿をループして一覧表示できるようになりました。

次回はサムネイルの設定です。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-04-30T13:05:21+09:00

jQueryでスクロールの時にアニメーションを出す方法

jQueryでスクロールのたびにアニメーションを使うには、
Waypoints.jsとAnimate.cssという2つのライブラリを併用します。

Waypoints.jsを読み込み

Waypoints.jsはスクロールが一定位置まで来た時に
特定のJavaScriptを実行するためのライブラリです。

Waypoints.jaからdownloadボタンからダウンロード。

libフォルダの中にあるjquery.waypoints.min.jsというファイルだけを
アニメーションを作業中のHTMLと同じディレクトリに格納し読み込みを行う。

index.html
<!-- </body>の直前に置く -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- jqueryの読み込みの下に記入 -->
<script src="jquery.waypoints.min.js"></script>

jQueryで要素を選択してから.waypoint()を呼び出します。

main.js
//box部分が.waypoint()を呼び出す要素
$(".box").waypoint({
  handler(direction){
    //.boxが画面内に入った時に実行される処理をここに記入
    //direction引数には、下方向のスクロール時は"down"
    //上スクロール時は"up"
    },
  //要素が画面の上端がどの位置に来た時にhandlerを実行するのか
　//0%なら画面の一番上、50%なら画面の真ん中、100%なら画面の一番下で実行
  offset: "50%",
});

Animate.cssを読み込み

Animate.cssはHTM要素にアニメーションクラスを付けるだけで
簡単にアニメーションがつくライブラリです。

Animate.cssから
サイトの「Download Animate.css」を右クリック
→別名で保存し、ダウンロードしたanimate.cssを
作業中のHTMLと同じディレクトリに格納。

そして、HTML内で格納

index.html
<!-- <head>内に置く -->
<link rel="stylesheet" href="animate.css">

スクロールの時にアニメーションを出す方法

アニメーションをスクロール時に出すには
Waypoints.jsとAnimate.cssの組み合わせが必要です。

アニメーションを加えたい部分にanimatedクラスと
fadeInUpなど動きのアニメーションのクラスをつける。
(Animate.cssからアニメーションは確認できます)

index.html
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>Animate Test</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css">
  <style>
    body {
      background: repeating-linear-gradient(0deg,
        #ffffff,
        #ffffff 40px,
        #dedede 40px,
        #dedede 80px);
    }

    .boxes {
      margin: 80vh auto;
    }

    .box {
      border: 1px solid #000;
      width: 10em;
      padding: 10px;
      margin: 2em auto;
      text-align: center;
    }

    .animated {
      /* 最初から非表示 */
      opacity: 0;
    }

  </style>
</head>

<body>
  <div class="boxes">
    <div class="box animated">box</div>
    <div class="box animated">box</div>
    <div class="box animated">box</div>
    <div class="box animated">box</div>
    <div class="box animated">box</div>
    <div class="box animated">box</div>
    <div class="box animated">box</div>
    <div class="box animated">box</div>
    <div class="box animated">box</div>
    <div class="box animated">box</div>
  </div>

  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script>
  <script src="main.js"></script>
</body>

</html>

今回は、HTML側ではanimatedクラスだけをつけて
jQuery側で下へスクロールをした際にfadeInUpクラスを付けてみます。

main.js
//box部分が.waypoint()を呼び出す要素
$(".animated").waypoint({
  handler(direction){
    if(direction === "down") {
    $(this.element).addClass("dadeInUp");

    //waypointoを削除することでこれ以降handlerが呼ばれなくなる
    this.destroy();
    }
  },
  //画面の一番下に来たらhandlerを実行
  offset: "100%",
});

アニメーションの繰り返し

infiniteクラスを追加することでアニメーションが無限にループされ続けます。

index.html
<div class="box animated infinite fadeInUp">box</div>

スクロールを繰り返した場合も
アニメーションを繰り返す方法については
jQueryでスクロールのたびにアニメーションを繰り返す方法に書きましたので
参考にしてください。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-04-30T12:28:34+09:00

jQueryでスクロールのたびにアニメーションを繰り返す方法

jQueryでスクロールのたびにアニメーションを使うには、
Waypoints.jsとAnimate.cssという2つのライブラリを併用します。

addclassとremoveClassを記入することでスクロールのたびに
アニメーションを動かすことが可能です。

Waypoints.jsを読み込み

waypoints.jaのdownloadボタンからダウンロード。

libフォルダの中にあるjquery.waypoints.min.jsというファイルだけを
アニメーションを作業中のHTMLと同じディレクトリに格納し読み込みを行う。

index.html
<!-- </body>の直前に置く -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="jquery.waypoints.min.js"></script>

Animate.cssを読み込み

Animate.cssから
サイトの「Download Animate.css」を右クリック
→別名で保存し、ダウンロードしたanimate.cssを
作業中のHTMLと同じディレクトリに格納。

そして、HTML内で格納

index.html
<!-- <head>内に置く -->
<link rel="stylesheet" href="animate.css">

スクロールのたびにアニメーションを繰り返す方法

アニメーションを加えたい部分にanimatedクラスと
fadeInUpなど動きのアニメーションのクラスをつける。
(Animate.cssからアニメーションは確認できます)

アニメーションを繰り返すために、
その都度アニメーションクラスを消すために
main.js側でremoveClassが必要です。

index.html
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>Animate Test</title>
  <!-- Animate.cssの読み込み -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css">
  <style>
    body {
      background: repeating-linear-gradient(0deg,
        #ffffff,
        #ffffff 40px,
        #dedede 40px,
        #dedede 80px);
    }

    .boxes {
      margin: 80vh auto;
    }

    .box {
      border: 1px solid #000;
      width: 10em;
      padding: 10px;
      margin: 2em auto;
      text-align: center;
    }

    .animated {
      /* 最初から非表示 */
      opacity: 0;
    }

  </style>
</head>

<body>
  <div class="boxes">
    <div class="box animated">box</div>
    <div class="box animated">box</div>
    <div class="box animated">box</div>
    <div class="box animated">box</div>
    <div class="box animated">box</div>
    <div class="box animated">box</div>
    <div class="box animated">box</div>
    <div class="box animated">box</div>
    <div class="box animated">box</div>
    <div class="box animated">box</div>
  </div>

  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- Waypoints.jsを読み込む -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script>
  <script src="main.js"></script>
</body>

</html>
main.js
/**
 * animatedクラスを持つ要素が画面内に入ったら
 * Animate.cssのfadeInUpエフェクトを適用
 */
$('.animated').waypoint({
  handler(direction) {
    if (direction === 'down') {
      $(this.element).addClass('fadeInUp');
      /* removeClassをつけることで繰り返しアニメーションcssが繰り返される */
      $(this.element).removeClass("fadeOutUp")
    }else if (direction === "up"){
      $(this.element).addClass("fadeOutUp")
      /*上にスクロール時にfadeInUpクラスが削除される */
      $(this.element).removeClass("fadeInUp")
    }
  },
  /**
   * 要素の上端が画面のどの位置に来たときにhandlerメソッドを呼び出すか指定
   * 0%なら画面の一番上、100%なら画面の一番下に来たときに呼び出される
   */
  offset: '50%',
});

addClassとremoveClassをセットにすることで
スクロールを何度繰り返してもアニメーションが反映されました。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-04-30T05:18:31+09:00

初心者によるプログラミング学習ログ 303日目

100日チャレンジの303日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
303日目は、

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-04-30T01:24:12+09:00

MAMPを使ったWordpressでのWEB制作方法8　初心者向け

MAMPを使ったWordpressでのWEB制作方法8　初心者向け

前回の記事はこちら
#MAMPを使ったWordpressでのWEB制作方法7　初心者向け

今回は固定ページの中身を作っていきます。

固定ページの中身作成

固定ページはpage.phpのファイル内に作成します。

まずはhtmlで作成してあるservice.htmlの中身をpage.phpにコピーします。
header/footer/sidebarなどの共通部分はwordpressタグで読み込んでおきましょう
共通部分の読み込みはこちら

page.phpのファイルにコピーができたらリンクを確認すると
貼り付けた内容が反映されています。

Image from Gyazo

しかしヘッダーのどのリンクからもpage.phpのファイルを
参照してしまうため各ページの表示になるように書き換えをします。

まずタイトルを以下のように書き換えます。

page.php
<!--書き換え前-->
      <h2>サービス内容</h2>
      <p>貴社ますますご盛栄のこととお喜び申し上げます。<br>
        平素はひとかたならぬご厚情にあずかり、厚くお礼申し上げます。<br>・・・</p>

<!--書き換え後-->
      <h2><?php the_title(); ?></h2>
      <p>貴社ますますご盛栄のこととお喜び申し上げます。<br>
        平素はひとかたならぬご厚情にあずかり、厚くお礼申し上げます。<br>・・・</p>

タイトルが変わるようになりました。
中身は各ファイルtestとしてあるものが反映されています。

Image from Gyazo

次にwordpressの管理画面から各ページを開いて編集していきます。
まずは会社概要を作成してみましょう。
このとき設定からエディターをコードエディターにしておいてください。
※ビジュアルエディターはブログなど文章を打つエディターです。

Image from Gyazo

ここにcompany.htmlで記述されている本文のコードを貼り付けて更新します。
※タイトル/ヘッダー/フッター/サイドバー/お問い合わせボタンなど
　共通部分は貼り付けないようにしましょう。以下は参考です。

Image from Gyazo

ブラウザを再読込すると以下のように更新した内容が反映されています。

Image from Gyazo

同じように事業内容をservice.htmlの内容で
お問い合わせをcontact.htmlの内容で
貼り付けて更新します。

事業内容ページ
Image from Gyazo

お問い合わせページ
お問い合わせページへのリンクボタンは不要なので後ほど削除します。
今はこのまま進めましょう。
Image from Gyazo

固定ページの作成は以上になります。
次は投稿ページの作成です。

MAMPを使ったWordpressでのWEB制作方法9　初心者向け

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧