CSS入門メモ

April 28, 2020, 5:12 am

≫ Next: MAMPを使ったWordpressでのWEB制作方法④　初心者向け

≪ Previous: MAMPを使ったWordpressでのWEB制作方法③　初心者向け

文字系

文字の大きさ

px: 縦のピクセルの大きさで指定、Webページのメインの文章は15px~18pxくらいにするのがいいらしい

em: 現在のフォントサイズに対する倍率、現在の設定が10pxの時に2.0emを指定するとフォントサイズは20pxになる

テキストの位置を指定する

/* 真ん中によせ */text-align:center;/* 右側によせ */text-align:right;

線で囲う

/* 実線 */border:solid2pxgray;/* 点線 */border:dotted2pxgray;/* 破線 */border:dashed2pxgray;/* 二重線 */border:double5pxgray;

上にだけ線を引く：border-top:〜
下にだけ線を引く：border-bottom:〜
左にだけ線を引く：border-left:〜
右にだけ線を引く：border-right:〜

widthとheight

display: inlineはwidthとheightを指定することができない。
幅・高さが指定できるのは要素がdisplay:blockもしくはinline-blockのときだけ。

widthの初期値はautoとなっており何も指定していないと要素幅は横いっぱいに広がっている。
display: inlineやinline-blockのときには、要素の幅＝要素の中身（テキスト）の長さとなる。親要素以上に自動で大きくなることはない。
親要素のwidth > 子要素の幅にしてはいけない

親要素６００pxの時、子要素50%にすると３００pxになる。

とくにCSSで指定しない限り、要素のheightの値はautoとなり、高さが自動で決まる。基本的に横いっぱいに広がるwidth: autoと異なり、height: autoは縦いっぱいには広がらず、文字や画像などの要素の中身の分だけの高さになる。

min-width

/* 要素が100pxより小さくならないという意味 */p{min-width:100px}

max-width

p{/* 要素が２００pxより大きくならない */max-width:200px;}

画像の横縦比を保つ方法

height: auto;

merginとpadding

要素の中身があるその周りの余白がpadding
paddingを超えるとborderが存在する
borderを超えるとmarginが存在する

要素に背景色を指定しているとき、paddingの部分も背景色で塗られる

margin:10px10px10px10px;/*      　上　 右　　下　　左*/margin:10px0;/* 上下・左右を指定 */

時計回りに指定していく。

margin-bottomと、margin-topが並ぶと片方のmarginが無効になる。適用されるmarginは値が大きい方が優先される。

しかしpaddingでは相殺は起こらない。

marginを使って要素を左右中央に配置する

margin-left:auto;margin-right:auto;

display

displayはプロパティの１つで要素の表示形式を決めるもの。

/* displayの値 */blockinlineinline-blocknoneflex

block・・・要素が横いっぱいまで広がり縦に並んでいく
inline・・・要素が横に広がっていく
inline-block・・・blockとinlineの中間
none・・・非表示
flex・・・要素が平行になる

pタグの初期値はblock

blockの場合だとtext-aline: center;で中央揃えができない。中身の文字などは中央揃えにできる。

display: inlineだとspanタグやimgタグが初期値として設定されている。要素の前後には改行が入らずに横に並ぶ。

blockの中にinlineの要素が入る。逆にinlineのなかにblockの要素が入ることはない。
inlineの要素は幅と高さを指定することができない。
上下の余白を調整することができないが左右のpaddingとmarginを指定することができる。

inlineの要素は text-align vertical-alignを指定することができる。
親要素に対して中央寄せを指定する必要がある。

aタグなどの初期値がinlineのものは直接指定すればblockに抱えることができる。そうすることで縦横の調整をすることができる。

display: inline-block

要素の並びがinlineで要素の中身はblock的な性質を持っている。inlineとは異なり幅と高さの指定ができる。上下左右の指定もできる。

inline-blockの使い所
・ナビゲーションバー
・ツイッターボタンとか横に並べたいとき

display: none;

display: none;を指定したものは、画像でも文字でも非表示にすることができる。しかし読み込み速度が早くなるわけではない。

レスポンシブデザインを作成するときに便利。スマホでの表示の時に非表示にすることができたりする。

フォントサイズの変更

font-size:○○pxor○○em

文字色を変える

color:色名orカラーコード

太字にする

font-weight:bold;

斜体にする

font-style:italic;

行間を変える

line-height:値;

文字の間隔を変える

letter-spacing:○○em;

文字に下線を引く

/* この方法では下線の色と太さを変えることはできない */text-decoration:underline;

取り消し線を引く

text-decoration:line-through;

文字を実線の枠で囲む

border:solid線の太さ色

フォントの種類の変更

font-family:フォント名;

文字の位置を変える

text-align:center

文字に影をつける

text-shadow:影の右への長さ下への長さボケ具合影の色

不透明にする

opacity:値;

aタグで作成したリンクの下線を消す

text-decoration:none;

マウスカーソルを乗せたときのデザインを変える

a:hover{~}

箇条書きの仕方

ul・liはセットで使う。

<ul><li>項目</li></ul>

ulの代わりにolを使うと番号付きの箇条書きになる。

positionとは

要素の位置を決めるためのプロパティ（例えば要素の位置を20pxだけ右に動かしたり要素の上に別の要素を重ねて乗せることができる、画面の決まった位置に要素を固定して表示させることもできる）

要素{position:/* 初期値、指定することはほとんどない */static/* 現在の位置を基準に相対的な位置を決める */relative/* 親要素を基準に絶対的な位置を決める */absolute/* 画面の決まった位置に固定する */fixed}

positionとセットで使うもの

/* 基準の上からの距離 */top:/* 基準の下からの距離 */bottom:/* 基準の左からの距離 */left:/* 基準の右からの距離 */right:

position: relativeはtopやbottomを指定しなければstaticと同じ位置に表示される。z-indexやtopなどが指定できないときはrelativeにする。

position: absolute親要素を基準に、絶対的な位置を指定することになる。要素がどんな形であろうと、間に他の要素や余白が入っていようとその位置に配置してくれる。
absoluteを使って位置調整するときは親要素にposition: relativeを指定しておく。

position: fixed

画面の決まった位置に要素を固定させたい時に使う
これを利用すると画面をスクロールしても表示位置は変わらない

z-index

z-index:数字;

指定した数字が大きい順に要素が重なっていく。ただしposition: staticの時は使えない、よってpositionプロパティの初期値の場合はz-indexが効かないのでもしz-indexで躓いたらここを疑ってみる。

overflow

overflowとは要素のボックスからはみ出た部分をどう扱うかを指定する

overflow:/* 初期値はみ出た部分がはみ出たままの状態で表示される場合がある */visible/* はみ出た部分が隠れる */hidden/* はみ出た部分が隠れてスクロールできる状態になる */scroll/* スクロールできる状態になる */auto

overflow: visible

はみ出た部分がそのまま表示される。初期値のため書かなくてもいい。

overflow: hidden

要素のボックスからはみ出た部分は見えなくなる。スクロールしても表示されない

overflow: scroll

はみ出た部分が隠れスクロールにより表示できるようになる。

/* 横方向にスクロールできるようになる */white-space:nowrap;/* 縦方向にスクロールできるようになる */overflow-y:scroll;/* 横方向は非表示になる */overflow-x:hidden;

overflow: auto

はみ出た部分の処理をブラウザに委ねる。ほとんどの場合はscrollと同じような処理になる。

表の作り方

table: 表全体を挟む
tr: 行全体を挟む
th: trの中で使う。挟まれた部分は見出しセルとなる
td: trのなかで使う。挟まれた部分が表の中身のセルになる。

GoogleFonts

GoogleFontsのメリット・・・使用端末によって使用できないフォントが存在する可能性があるため、統一した文字を表示させることができない。
しかしGoogleFontsならサーバーから読み込むため、どの端末でも共通のフォントを表示させることができる。

↧

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

April 28, 2020, 3:42 pm

≫ Next: 初心者によるプログラミング学習ログ 302日目

≪ Previous: CSS入門メモ

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

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

トップページのwordpress化

今回から実際にPHPファイルを記述していきます。
その前に管理者画面で使用するテーマを有効化しましょう

外観→テーマからテーマを有効にします

サイトを表示すると真っ白な画面が表示されるはずです。
何も記述していないindex.phpを読み込んでいるので問題ありません。

次にindex.phpにindex.htmlの記述をすべてコピペします
ブラウザを再読み込みするとhtmlの記述が読み込めます
まだCSSは当たっていません

次にheader.phpにヘッダー部分をカット＆ペーストします。
headerになるのは以下の部分です。

bodyタグの始まりやcontainerの始まりが含まれていて
気持ちが悪い感じがしますが問題ありません。

終了タグはfooter.phpで読み込みをするため
ここでは気にせずに進めましょう。

そしてindex.phpの一番上に以下を記述します
ヘッダー読込の関数です

index.php

<?phpget_header();?>

②つのファイルは以下のようになります

ブラウザを再読み込みすると結果は変わりませんので
2つのファイルがつながって読み込まれていることがわかります。

続いてindex.phpからフッターを切り取ります。
フッターは以下の箇所を切り取りします。
※jsの読込をしていますが使用しませんので無視して下さい。
bodyの終了タグなども一緒に切り取りをしてください。

そしてfooter.phpに貼り付けをします。
切り取ったindex.phpに以下の記述をしてください
閉じカッコがないのは誤記ではなくPHPの仕様です。
ファイルの最後に来る場合はバグになることがあるため省略

index.php

<?phpget_footer();

再度ブラウザーを読み込むと結果は変わりませんので
分割したフッターも読み込みができていることがわかります。

続いてサイドバーを切り取り＆貼り付けします。
サイドバーの読み込みは以下のコードです

index.php

<?phpget_sidebar();?>

2つのファイルは以下のようにつながります。

この処理でヘッダー、フッター、サイドバーの
各ページ共通部分を1つにまとめることができました。

次回はCSSなどの表示を直していきます。

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

↧

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

April 28, 2020, 1:25 pm

≫ Next: MAMPを使ったWordpressでのWEB制作方法⑤　初心者向け

≪ Previous: MAMPを使ったWordpressでのWEB制作方法④　初心者向け

100日チャレンジの302日目

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

おはようございます
302日目　2h
・xdデザインカンプからのサイト模写
・レスポンシブ化#早起きチャレンジ #駆け出しエンジニアと繋がりたい #100DaysOfCode
— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) April 28, 2020

↧

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

April 28, 2020, 9:03 pm

≫ Next: MAMPを使ったWordpressでのWEB制作方法6　初心者向け

≪ Previous: 初心者によるプログラミング学習ログ 302日目

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

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

CSSファイルの読み込み

まず③の記事で作成したstyle.cssでメインのCSSファイルを読み込みます
テーマ情報の下にコピペしましょう。以下のような感じです。
cssディレクトリ内のメインCSSファイルは不要なので削除してもOKです。

次にheader.phpファイルのCSS読み込み箇所を以下のように変更します

header.php

<!--書き換え前--><linkrel="stylesheet"href="css/style.css"><!--書き換え後--><linkhref="<?phpechoget_stylesheet_uri();?>"rel="stylesheet">

以下のようにCSSは当たりました。
しかしcssディレクトリ内のリセットCSS(reset.css)が当たっていません。

そこでリセットCSSを読み込みます。
CSSのファイルを分けている場合は同様にパスを指定できます。
スラッシュのつけ忘れに気をつけましょう。
※JSシートを使う場合の読み込みも同じです。

header.php

<!--書き換え前--><linkrel="stylesheet"href="css/reset.css"><!--書き換え後--><linkrel="stylesheet"href="<?phpechoget_template_directory_uri();?>/css/reset.css"type="text/css"/>

<?php echo get_template_directory_uri(); ?> の記述でパスを読み込んでいます

bloginfoを使った書き方もありますが、現在は非推奨なのでget_template〜を使用しましょう

以下のようにresetCSSも当たりました。

画像の読み込み

次に画像を読み込んでいきます。
imgタグを入れている部分を以下に書き換えましょう。
wordpressタグを使ってパスを書き換えています。
※リンクのaタグは別の処理をしますのでまだ修正は不要です。

cssでbackground-imageを使用している場合は
backgroundに書き換えてパスを修正しましょう。
例)background: url("images/画像名");

index.php

<!--書き換え前--><imgsrc="./images/person_02.jpeg"alt=""/><!--書き換え後--><imgsrc="<?phpechoget_template_directory_uri();?>/images/person_02.jpeg"alt=""/>

以下のように画像の読み込みができました。

wordpressタグの追加(head/body部分)

次にheader.phpのhead部分閉じタグ前と
footer.phpのbody部分閉じタグ前に
以下のwordpressタグを入れてください

header.php

<head><!--headstart--><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><!--レスポンシブ--><linkhref="https://use.fontawesome.com/releases/v5.6.1/css/all.css"rel="stylesheet"><!--fontawsome--><linkrel="stylesheet"href="<?phpechoget_template_directory_uri();?>/css/reset.css"type="text/css"/><!--reset.css--><linkhref="<?phpechoget_stylesheet_uri();?>"rel="stylesheet"><!--書き換え--><title>corporate_sample</title><?phpwp_head();?><!--追加--></head><!--headend-->

footer.php

<divid="footer"><divclass="copyright">Copyright &copy; 2013 YOUR SITE NAME <brclass="br-sp">All Rights Reserved.</div></div><!-- /#footer --></div><!--container end--><?phpwp_footer();?><!--追加--></body><!--body end--></html>

これでトップページ（index.php）のビューが完成しました。

↧

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

April 29, 2020, 9:34 am

≫ Next: Gatsby：CSS書き方とファイル分割の仕様

≪ Previous: MAMPを使ったWordpressでのWEB制作方法⑤　初心者向け

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

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

リンク（aタグ）の置き換え

今度はヘッダーのリンク（aタグ）を置き換えます。
グローバルナビとなっているヘッダー部分で説明します。

header.html

<navid="header"><!--headerstart--><h1><ahref="index.html">"CORPORATE_SAMPLE_SITE"</a></h1><divid="menu"><ul><liclass="home"><ahref="index.html">ホーム</a></li><li><ahref="service.html">事業内容</a></li><li><ahref="company.html">会社概要</a></li><li><ahref="archive.html">お知らせ</a></li><li><ahref="single.html">ブログ</a></li><li><ahref="contact.html">お問い合わせ</a></li></ul></div></nav><!--headerend-->

ここでは６つのページへのリンクを貼ってあります。
これを以下のように書き換えてください。

header.html

　　<!--書き換え前--><navid="header"><!--headerstart--><h1><ahref="index.html">"CORPORATE_SAMPLE_SITE"</a></h1><divid="menu"><ul><liclass="home"><ahref="index.html">ホーム</a></li><li><ahref="service.html">事業内容</a></li><li><ahref="company.html">会社概要</a></li><li><ahref="archive.html">お知らせ</a></li><li><ahref="single.html">ブログ</a></li><li><ahref="contact.html">お問い合わせ</a></li></ul></div></nav><!--headerend-->　<!--書き換え後--><navid="header"><!--headerstart--><h1><ahref="<?php echo get_stylesheet_uri(); ?>index">"CORPORATE_SAMPLE_SITE"</a></h1><divid="menu"><ul><liclass="home"><ahref="<?php home_url(); ?>">ホーム</a></li><li><ahref="<?php home_url(); ?>service">事業内容</a></li><li><ahref="<?php home_url(); ?>company">会社概要</a></li><li><ahref="<?php home_url(); ?>archive">お知らせ</a></li><li><ahref="<?php home_url(); ?>archive">ブログ</a></li><li><ahref="<?php home_url(); ?>contact">お問い合わせ</a></li></ul></div></nav><!--headerend-->

wordpressタグの <?php home_url(); ?> を使用して各リンクを書き換えます。
.htmlの拡張子は不要なので削除します。
※お知らせとブログは一覧ページへのリンクにするためarchiveに書き換えています。
同様にindex.phpやsidebar.phpなどのリンクも修正しておきましょう。
※リンク先はまだ作成していないので白紙の画面に飛んでいます。

次回は固定（事業内容・会社概要）ページの設定です。

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

↧

Gatsby：CSS書き方とファイル分割の仕様

April 28, 2020, 10:52 pm

≫ Next: border-collapseを理解して、テーブルセルにdivをぴったり重ねる

≪ Previous: MAMPを使ったWordpressでのWEB制作方法6　初心者向け

Gatsby：CSS書き方とファイル分割の仕様

自分で作成したCSSの作り方は以下の通り。React特有の書き方…。

// index.jsimportReactfrom"react"import{Link}from"gatsby"importLayoutfrom"../components/layout"importImagefrom"../components/image"importSEOfrom"../components/seo"import{Container,Row,Col,Badge,Accordion,Card,Button}from'react-bootstrap'consth1Size={　　　　　// 自分でつけた任意の名前fontSize:'1.25rem',// font-sizeとするところfontSizeとする。React特有の書き方lineHeight:1.75// line-heightとするところlineHeight}consth2Size={marginTop:'1.25rem',fontSize:'1.1rem',color:'#999999',lineHeight:1.75}constfontSmallCrimson={color:'crimson',fontSize:'small'}constfontSmall={fontSize:'small',}constfontCrimson={color:'crimson',}constfontGray={color:'#777777',}constlineSpace={marginTop:20,}constIndexPage=()=>(<h1style={h1Size}>ギャツビー</h1>・・・以下略・・・

ファイル分割したい

JSファイルがどんどん長くなるのでファイル分割したい。

global.css

プロジェクト全体にあてるCSSは以下のやり方で（bootstrapを使用している場合はいらない作業かも）

まずsrc/stylesフォルダを作成。
stylesフォルダの下にglobal.cssを作成。
global.cssにCSSを記述

styles/global.css↓

h1{color:FireBrick;}

gatsby-browser.jsに以下のように記述

import"./src/styles/global.css"

この例では全ページのH1見出しをFireBrick色にしてる。
index.jsなどの表示コンポーネントにimport文はいらない。

コンポーネントごとのCSS

index.jsだったらindex.module.cssという名前のファイルを作成する。こうやってファイル名を同じにするだけで、いわゆるAngularにおけるコンポーネント4セット(html, css, ts, spec.ts)のうちのcssファイルだと認識される。

そこに例えば以下のようにマイCSSを記述。

/*index.module.css*/　.h1Size{font-size:1.25rem;line-height:1.75;}.h2Size{margin-top:1.25rem;font-size:1.1rem;color:#999999;line-height:1.75;}.fontSmallCrimson{color:crimson;font-size:small;}.fontSmall{font-size:small;}.fontCrimson{color:crimson;}.fontGray{color:#777777;}.fontRed{color:red}.fontBule{color:steelblue;}.divLineSpace{margin-top:20;}

でJS内のHTMLは以下のように。

//index.jsimportStylesfrom'./index.module.css'・・・略・・<h1className={Styles.h1Size}>ギャツビー</h1>
<spanclassName={Styles.fontSmall}>Gatsby</span>
・・・略・・

import Styles～文の挿入も必要なくしてくれると嬉しい。

以上。

参考：
Adding global styles without a layout component
Gatsby.jsで静的なWebサイトをサクッと作る（CSS・SCSS篇）

↧

border-collapseを理解して、テーブルセルにdivをぴったり重ねる

April 29, 2020, 12:11 am

≫ Next: MAMPを使ったWordpressでのWEB制作方法7　初心者向け

≪ Previous: Gatsby：CSS書き方とファイル分割の仕様

テーブルのセルにdivを重ねたい！

こういう事って、よくありますよね。うむうむ。
でもちょっとこんがらがっちゃう。
そこでこの記事ではパターン別に計算方法を整理してみました。

まずは復習から

border-collapseとbox-sizingについて確認していきます。

border-collapseとは

テーブルセルの配置の仕方を指定するものです。
collapseの場合、borderの中心をwhidthやheightに合うようにずらすことで重なりを表現します。

type	配置の仕方	見え方
collapse	隣り合うセル同士を重ねる	格子状になる
separate	隣り合うセル同士を重ねない	四角を寄せ集めた状態になる

See the Pen table size - border-collaps

box-sizingとは

widthとheightの計算の仕方を指定するものです。

type	サイズの取り方	borderの位置
content-box	paddingとborderを含めない	widthやheightの外側
border-box	paddingとborderを含める	widthやheightの内側

See the Pen table size - box-sizing by ぷーたんは社会人リハビリ中 (@putan) on CodePen.

実践

では border-collapsと boz-sizingの掛け合わせで1つずつ見ていきます。

separate + border-box

こちらは素直ですね。

	計算
重ねるdivの相対位置（left）	tdのwidth * (列数 - 1)
重ねるdivの相対位置（top）	tdのheight * (行数 - 1)
重ねるdivの幅	tdのwidth * 列数
重ねるdivの高さ	tdのheight * 行数

See the Pen table size - separate+ border-box by ぷーたんは社会人リハビリ中 (@putan) on CodePen.

separate + content-box

こちらもわかりやすいですね。

	計算
重ねるdivの相対位置（left）	(tdのwidth + (border-width * 2)) * (列数 - 1)
重ねるdivの相対位置（top）	(tdのheight + (border-width * 2)) * (行数 - 1)
重ねるdivの幅	(tdのwidth + (border-width * 2)) * 列数
重ねるdivの高さ	(tdのheight + (border-width * 2)) * 行数

See the Pen table size - separate + content-box by ぷーたんは社会人リハビリ中 (@putan) on CodePen.

collapse + border-box

ここからが難所です。
border-boxの場合、borderはboxの内側に入り込んでいますが、
collapseがboxにborderの中心を合わせようと、borderの位置を0.5border分外側にずらします。

指定するサイズ	計算
重ねるdivの相対位置（left）	tdのwidth * (列数 - 1)
重ねるdivの相対位置（top）	tdのheight * (行数 - 1)
重ねるdivの幅	tdのwidth * 列数 + border-width
重ねるdivの高さ	tdのheight * 行数 + border-width

See the Pen table size - collapse + border-box by ぷーたんは社会人リハビリ中 (@putan) on CodePen.

collapse + content-box

content-boxの場合、元々はborderはboxサイズの外側にありますが、
collapseがboxにborderの中心を合わせようと、boxサイズを0.5border分外側にずらします。

	計算
重ねるdivの相対位置（left）	(tdのwidth + border-width) * (列数 - 1)
重ねるdivの相対位置（top）	(tdのheight + border-width) * (行数 - 1)
重ねるdivの幅	(tdのwidth + border-width) * 列数 + border-width
重ねるdivの高さ	(tdのheight + border-width) * 行数 + border-width

See the Pen table size - collapse + content-box by ぷーたんは社会人リハビリ中 (@putan) on CodePen.

まとめ

はい、ということでborder-collapseとbox-sizingの組み合わせ4パターンで無事テーブルにdivを重ねることができました。
今回はpaddingやborder-spacingを0としましたが、ぜひその辺りも調整してdivを重ねてみてください。

参照

MDN border-collapse
MDN box-sizing
スタックオーバーフロー table、tr、tdタグの box-sizing: border-box について

↧

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

April 29, 2020, 9:35 am

≫ Next: CSSのプロパティ記述順まとめ

≪ Previous: border-collapseを理解して、テーブルセルにdivをぴったり重ねる

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

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

今回は固定ページの作成をします。

固定ページとは事業内容や会社概要など頻繁に更新しないページに使用します。

ここからはwordpressの管理画面も使用しますので
urlの末尾にadminと追記して管理画面も立ち上げておきます。

固定ページの設定

まずは管理画面の固定ページから新規追加を選択します

タイトルに事業内容、内容は仮でテストと入力して下書き保存をします。

すると右側にパーマリンクの設定が表示されます。

パーマリンクはwordpressの中のurlになりますので
末尾を事業内容からserviceに変更して公開をします。

同じように以下を作成して公開しましょう

会社概要
タイトルを会社概要、内容をtest、パーマリンク末尾をcompany

お問い合わせ
タイトルをお問い合わせ、内容をtest、パーマリンク末尾をcontact

固定ページ一覧に公開済みのステータスで表示されていればOKです。

グローバルナビ（ヘッダー）のwordpress設定

現在ヘッダーはheader.php内にhtmlで記述されています

こちらをワードプレスの管理画面で管理できるよう設定します。

まずは作成したfunctions.phpのファイルを開きます。
※この段階では何も記載されていないはずです。
以下をコピペしましょう

functions.php

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

今回使用するのはplace_grobal部分なのでutility以下は削除しても構いません。
異なるメニューを作成する時に使用するものです。

functions.phpファイルを保存してwordpress管理画面を再読込しましょう
外観の部分にメニューというタブが増えています

新規メニューからメニュー名にfunctions.phpに記載した
place_globalと記入し作成します。
そして左側のタブから企業概要、事業内容、お問い合わせにチェックを入れて追加し保存します。

次に位置の管理タブよりグローバルのテーマの位置に
place_globalを紐付けしておきます。

次にheader.phpのファイルを以下のように書き換えます。

header.php

<!--書き換え前--><divid="menu"><ul><liclass="home"><ahref="<?phphome_url();?>">ホーム</a></li><li><ahref="<?phphome_url();?>service">事業内容</a></li><li><ahref="<?phphome_url();?>company">会社概要</a></li><li><ahref="<?phphome_url();?>archive">お知らせ</a></li><li><ahref="<?phphome_url();?>archive">ブログ</a></li><li><ahref="<?phphome_url();?>contact">お問い合わせ</a></li></ul></div><!--書き換え後--><divid="menu"><ul><?phpwp_nav_menu(array('theme_location'=>'place_global','container'=>'','menu_class'=>'','items_wrap'=>'%3$s',//<ul>を出力しない));?></ul></div>

ブラウザーを再読込するとヘッダーが設定した内容に置き換わっています。
メニュー並び替えなども管理画面などから行う設定になりました

現在はリンクの先は何も設定していませんので白紙です。
次回固定ページの中身の作成を行います。

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

↧

CSSのプロパティ記述順まとめ

April 29, 2020, 12:45 am

≫ Next: コピペCSSで簡単実装！スクロールエフェクト8選の解説

≪ Previous: MAMPを使ったWordpressでのWEB制作方法7　初心者向け

CSSプロパティの記述順については、厳密に定義されたルールは存在しないが、
視覚的な要素順で書いた方が整理しやすく、レビュー側にとってもわかりやすいということを学んだ。
プロパティは無数に存在するため、正確性を保つのは難しいというデメリットはあるものの、
ある程度のグルーピングは可能であると思う。

【要素分解して考える（大→小)】
1. 要素を表示するのか、しないのか。(display etc...)
2. 要素をどこに配置するのか。(position, float etc...)
3. ブロックレベルで要素をどう見せるか。(width, height etc...)
4. インラインレベルで要素をどう見せるか。(font, text-align etc...)

style.css

/* 大まかに並べると、
 * display
 * list-style
 * position
 * float
 * clear
 * width
 * height
 * margin
 * padding
 * border
 * background
 * color
 * font
 * text-decoration
 * text-align
 * vertical-align
 *
*/

1. 要素表示

2. 要素位置

3. ブロック要素設定

幅・高さ

マージン・パディング

背景

background

境界線

border

4. インライン要素設定

テキスト・フォント

5.その他

表

アニメーション

↧

コピペCSSで簡単実装！スクロールエフェクト8選の解説

April 29, 2020, 4:17 am

≫ Next: "font-family: ＭＳゴシック"を葬る

≪ Previous: CSSのプロパティ記述順まとめ

はじめに

以前にスクロールエフェクトってどうやって作ってるのか気になって以下のサイトを見てみた。
コピペCSSで簡単実装！アニメーションパララックス・スクロールエフェクト8選！スクロールに合わせて動く！【作り方】

これは実は今までの解説の要素の組み合わせである。
画面内に入ったとき、出たときで表示、非表示を切り替え、それをtransitionでアニメーションさせているだけである。
ただ、こちらの画面内表示判定はscroll, resizeイベントで作成されている。

scroll(js)
resize(js)

最後に

普段ページのデザインなどをしていないとあまり使わないようなものも多かったと思う。
デザインだけでなく機能的に使えるものもあるので、気になったものはぜひより深く調べて見てほしい。

↧

"font-family: ＭＳゴシック"を葬る

April 29, 2020, 6:35 am

≫ Next: 【jQuery】マウスが乗った時にメッセージを表示させる

≪ Previous: コピペCSSで簡単実装！スクロールエフェクト8選の解説

追記:
書き上げてから気づいたのですが、ほとんど同じ内容の記事が投稿されていました → ＭＳＰゴシックを撲滅する！ - Qiita
お蔵入りにするのは忍びないのと、その記事とは違うタグをつけるので新たな層にリーチできることを期待して、投稿させていただきます…

私は常々こう思っています。「どうしていまだに、CSSのフォント指定にはMSゴシック(やMS明朝)を指定するのか」と。
游ゴシックやユニバーサルデザイン(UD)フォントなど、読みやすいフォントは他に用意されているのに、CSSのfont-familyはあいも変わらず古式ゆかしい書体を指定し続けています。

MSフォントの、印刷物上ならまだしも、画面に表示した際の汚さたるや、それが視界に入った時点でマウスは戻るボタンに向かい始めるほどです。
世の全てのコーダーにこいつらの指定をやめろと行って回りたいのですが、きっと各現場には何かこう、有無を言わせぬ奥深い理由があるのでしょう、きっと。そうであれば仕方ありません、こちらは個人でできるような自衛策を講じることにしましょう。

もしかしたら私と同じように、Windowsデフォルトフォントを嫌う人々は少なくないのではないかと考え、筆を執る次第です。

ユーザースタイルシート

ここでの目標は、「ウェブ閲覧の際にMSゴシック(やMS明朝)と出会わなくなる」ことです。私のブラウザはデフォルトフォントを源ノ角ゴシックに設定していますから、これらのフォントを目にすることがあるとすればそれは、ウェブサイト側のCSSで「わざわざ」font-family: "ＭＳゴシック"とでも指定されているということです。
それでは、そういう指定を消したり上書きするようなスクリプトを書けばいいのでしょうか？
いいえ、実はこれ、CSSだけで実現できるんです。といっても全てのウェブサーバーに勝手にCSSファイルを仕込むわけにはいきませんから、ユーザーCSS(ユーザースタイルシート)という手を使います。

ユーザースタイルシートを閲覧時に自動で適用してくれるブラウザ拡張機能がいくつかありますので、ここでは「Stylus」を使います(同名のCSSプリプロセッサとは別物です)。
同様の拡張機能が利用できるブラウザであれば、ブラウザの種類は問いません。少なくともFirefoxとChromeでは動作確認しています。
ダウンロードはこちら。
Chrome 拡張機能
 Firefox アドオン

使用例

私自身は以下のユーザーCSSを使っています。
上記の拡張機能をインストールして、「新スタイルを作成」から以下をそのまま貼り付ければ、これで準備完了です。二度とMS～フォントに出会わなくなります！
ただし源ノ角ゴシック(CSS内の表記では"Source Han Sans JP")をインストールしていない場合は、それぞれお好きなフォント名に書き換えてください。

/*──MS Pゴシック──*/@font-face{font-family:"MS PGothic";src:local("Source Han Sans JP");font-weight:normal;}@font-face{font-family:"MS PGothic";src:local("Source Han Sans JP Bold");font-weight:bold;}@font-face{font-family:"ＭＳ Ｐゴシック";src:local("Source Han Sans JP");font-weight:normal;}@font-face{font-family:"ＭＳ Ｐゴシック";src:local("Source Han Sans JP Bold");font-weight:bold;}/*──MS ゴシック──*/@font-face{font-family:"MS Gothic";src:local("Source Han Sans JP");font-weight:normal;}@font-face{font-family:"MS Gothic";src:local("Source Han Sans JP Bold");font-weight:bold;}@font-face{font-family:"ＭＳ ゴシック";src:local("Source Han Sans JP");font-weight:normal;}@font-face{font-family:"ＭＳ ゴシック";src:local("Source Han Sans JP Bold");font-weight:bold;}/*──ＭＳ Ｐ明朝──*/@font-face{font-family:"MS PMincho";src:local("Source Han Serif"),local("Noto Serif JP");font-weight:normal;}@font-face{font-family:"MS PMincho";src:local("Source Han Serif Bold"),local("Noto Serif JP");font-weight:bold;}@font-face{font-family:"ＭＳ Ｐ明朝";src:local("Source Han Serif"),local("Noto Serif JP");font-weight:normal;}@font-face{font-family:"ＭＳ Ｐ明朝";src:local("Source Han Serif Bold"),local("Noto Serif JP");font-weight:bold;}/*──ＭＳ 明朝──*/@font-face{font-family:"MS Mincho";src:local("Source Han Serif"),local("Noto Serif JP");font-weight:normal;}@font-face{font-family:"MS Mincho";src:local("Source Han Serif Bold"),local("Noto Serif JP");font-weight:bold;}@font-face{font-family:"ＭＳ 明朝";src:local("Source Han Serif"),local("Noto Serif JP");font-weight:normal;}@font-face{font-family:"ＭＳ 明朝";src:local("Source Han Serif Bold"),local("Noto Serif JP");font-weight:bold;}/*──MS UI Gothic──*/@font-face{font-family:"MS UI Gothic";src:local("Source Han Sans JP");font-weight:normal;}@font-face{font-family:"MS UI Gothic";src:local("Source Han Sans JP Bold");font-weight:bold;}/*──メイリオ──*/@font-face{font-family:"Meiryo";src:local("Source Han Sans JP");font-weight:normal;}@font-face{font-family:"Meiryo";src:local("Source Han Sans JP Bold");font-weight:bold;}@font-face{font-family:"Meiryo UI";src:local("Source Han Sans JP");font-weight:normal;}@font-face{font-family:"Meiryo UI";src:local("Source Han Sans JP Bold");font-weight:bold;}@font-face{font-family:"メイリオ";src:local("Source Han Sans JP");font-weight:normal;}@font-face{font-family:"メイリオ";src:local("Source Han Sans JP Bold");font-weight:bold;}

少し解説

@font-face{font-family:"ＭＳ Ｐゴシック";src:local("Source Han Sans JP");font-weight:normal;}

たとえば上のコードは、font-familyに指定されたフォントを、srcに指定されたローカルにあるフォントで表示するというものです。srcの部分にurl(～～.woff)などとすればローカルにないウェブフォントも指定できます。
同じfont-familyで2行あるのは、通常のものと太字とを書き分けているからです。太字(font-weight: bold)の行はなくても構いません。
メイリオも混じっていますが、これは汚いからではなくて、単に統一性を求めただけです。

それではよいブラウジングを！

↧

【jQuery】マウスが乗った時にメッセージを表示させる

April 29, 2020, 7:50 am

≫ Next: css で独立してスクロールできる領域を作る

≪ Previous: "font-family: ＭＳゴシック"を葬る

学習用に作ったチャットアプリにて。
写真左上のチャットグループの「編集ボタン」にアイコンを使用しており、
ぱっと見、何のボタンか分かりづらい。

今回は何をするアイコンか分かりやすくする方法を
ざくっとご紹介。

【完成形】

ホバー状態においては
何のボタンなのか分かるようにする。

1. 表示するメッセージの要素を追加

sample.haml

.main-header__edit-message【ホバーで出てくるメッセージ】
  グループを編集する
%a=link_toedit_group_path(@group.id)do%i.far.fa-edit【使っているアイコン】

２. ホバー時以外は出てこないようにする

続いて今のメッセージにcssを当てます。
非表示状態にしているのは、【opacity】のところ。

sample.scss

~省略~&__main-header{background-color:#fafafa;height:70px;padding:040px;display:flex;justify-content:space-between;&__edit-message{height:30px;width:180px;line-height:30px;text-align:center;border-radius:15px;background-color:black;color:#ffffff;opacity:0;⬅️ここ}~省略~

❗️「opacity」は要素の透明度を指定するプロパティ。
（ 0にすると完全に透明になる）
( 1 だと表示される)

３. ホバー時に表示させる

ここからjsファイルへいきます。

sample.js

$(function(){$(".fa-edit").on('mouseover',function(){//カーソルが乗った時$(".main-header__edit-message").css('opacity','1')$(".main-header__edit-message").css('transition','0.3s')});$(".fa-edit").on('mouseout',function(){//カーソルが外れた時$(".main-header__edit-message").css('opacity','0')$(".main-header__edit-message").css('transition','0.1s')});~省略~

これでカーソルが乗った時と、外れた時にopacity【0 ・ 1】が入れ替わるようになります。
【transition】で動きの時間を指定しています。

ついでなので、
同じ要領で他のアイコンにも入れておきます。

今回の作業はこれで終了です。
ご覧いただきありがとうございました。

↧

css で独立してスクロールできる領域を作る

April 29, 2020, 8:03 am

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

≪ Previous: 【jQuery】マウスが乗った時にメッセージを表示させる

複数のペインに別れた画面でそれぞれのペインをバラバラにスクロールしたくなったので、そのときに試したことを記録しておく。

overlap: scroll を使う

まず、素朴には、 css の overlap 属性を使うとスクロールバーが表示される要素を作ることができる。

.pain{overflow-y:scroll}

https://developer.mozilla.org/ja/docs/Web/CSS/overflow

使ってみた結果は以下のようになる。

See the Pen Isolated Scroll by hakomikan (@hakomikan) on CodePen.

スクロールバーが表示されて、独立してスクロールできるようになった。
でも、Windows だとスクロールバーが大きくて邪魔になっている。

スクロールバーの形を変更する

大きいスクロールバーの形を変更する。
https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar

::-webkit-scrollbar{width:8px;}::-webkit-scrollbar-track{display:none;}::-webkit-scrollbar-thumb{border-radius:4px;background-color:gray;}

各ブラウザに変更の機能があるようなのだけど、ここでは webkit(chrome) 上でだけ実験をすすめる。

See the Pen Isolated Scroll v2 by hakomikan (@hakomikan) on CodePen.

-webkit-scrollbarから始まるスタイルを調整するとスクロールバーを控えめな外見にできる。

近づいたときだけスクロールバーを表示する

常時表示されているのも邪魔に感じる。
スクロールするときだけ出てきてくれれば良い。

ひとつ上の要素の上に乗ったときだけ、表示して、それ以外のときには透明にしておけばよさそう。

::-webkit-scrollbar-thumb{border-radius:4px;background-color:rgba(0,0,0,0);}*:hover::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,0.3);}

See the Pen Isolated Scroll v3 by hakomikan (@hakomikan) on CodePen.

近づいたときだけスクロールバーをふわっと表示する

ここまででも、十分満足なのだけど、できれば、スクロールするときだけ、ふわっと表示されて欲しい。
でも、-webkit-scrollbarには、css の transparent を使うことは出来ないらしい。

https://stackoverflow.com/questions/19230289/use-transition-on-webkit-scrollbar

背景のクリッピングとかを駆使した怪しいテクニックを見つけたので試した結果を貼っておく。

::-webkit-scrollbar{background-color:rgba(0,0,0,0);width:8px;}::-webkit-scrollbar-thumb{border-radius:4px;background-color:inherit;}.pain{height:100%;overflow-y:scroll;-webkit-background-clip:text;background-color:rgb(0,0,0,0);transition:background-color0.3scubic-bezier(0,0,0.2,1);}.pain:hover{background-color:rgba(0,0,0,0.18);}

See the Pen Isolated Scroll v4 by hakomikan (@hakomikan) on CodePen.

↧

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

April 29, 2020, 9:24 am

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

≪ Previous: css で独立してスクロールできる領域を作る

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

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

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

固定ページの中身作成

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

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

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

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

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

page.php

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

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

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

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

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

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

事業内容ページ

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

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

↧

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

April 29, 2020, 1:18 pm

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

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

100日チャレンジの303日目

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

おはようございます
303日目　2h
・xdデザインカンプからのサイト模写
・レスポンシブ化
・全体的に細かいところ調整#早起きチャレンジ #駆け出しエンジニアと繋がりたい #100DaysOfCode
— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) April 29, 2020

↧

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

April 29, 2020, 8:37 pm

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

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

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>内に置く --><linkrel="stylesheet"href="animate.css">

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

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

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

index.html

<!DOCTYPE html><htmllang="ja"><head><metacharset="utf-8"><title>Animate Test</title><!-- Animate.cssの読み込み --><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css"><style>body{background:repeating-linear-gradient(0deg,#ffffff,#ffffff40px,#dedede40px,#dedede80px);}.boxes{margin:80vhauto;}.box{border:1pxsolid#000;width:10em;padding:10px;margin:2emauto;text-align:center;}.animated{/* 最初から非表示 */opacity:0;}</style></head><body><divclass="boxes"><divclass="box animated">box</div><divclass="box animated">box</div><divclass="box animated">box</div><divclass="box animated">box</div><divclass="box animated">box</div><divclass="box animated">box</div><divclass="box animated">box</div><divclass="box animated">box</div><divclass="box animated">box</div><divclass="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")}elseif(direction==="up"){$(this.element).addClass("fadeOutUp")/*上にスクロール時にfadeInUpクラスが削除される */$(this.element).removeClass("fadeInUp")}},/**
   * 要素の上端が画面のどの位置に来たときにhandlerメソッドを呼び出すか指定
   * 0%なら画面の一番上、100%なら画面の一番下に来たときに呼び出される
   */offset:'50%',});

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

↧

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

April 29, 2020, 9:05 pm

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

≪ Previous: 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>内に置く --><linkrel="stylesheet"href="animate.css">

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

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

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

index.html

<!DOCTYPE html><htmllang="ja"><head><metacharset="utf-8"><title>Animate Test</title><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css"><style>body{background:repeating-linear-gradient(0deg,#ffffff,#ffffff40px,#dedede40px,#dedede80px);}.boxes{margin:80vhauto;}.box{border:1pxsolid#000;width:10em;padding:10px;margin:2emauto;text-align:center;}.animated{/* 最初から非表示 */opacity:0;}</style></head><body><divclass="boxes"><divclass="box animated">box</div><divclass="box animated">box</div><divclass="box animated">box</div><divclass="box animated">box</div><divclass="box animated">box</div><divclass="box animated">box</div><divclass="box animated">box</div><divclass="box animated">box</div><divclass="box animated">box</div><divclass="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

<divclass="box animated infinite fadeInUp">box</div>

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

↧

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

April 29, 2020, 9:53 pm

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

テスト投稿

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

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

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

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

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

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

index.php

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

<!--書き換え後--><!--loopstart--><?php$infoPosts=get_posts('numberposts=4&category=9');foreach($infoPostsas$post):?><divclass="contents_box"><dt><?phpthe_time('Y-m-d');?></dt><dd><spanclass="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><ahref="<?phpthe_permalink();?>"><?phpthe_title();?></a>を更新しました。
            </dd></div><!--loopend--><?phpendforeach;?>

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

'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７です。ご自身の環境に合わせて設定ください。

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

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

index.php

<divclass="information"><!--blogstart--><h2>Blog</h2><dl><!--loopstart--><?php$infoPosts=get_posts('numberposts=4&category=9');foreach($infoPostsas$post):?><divclass="contents_box"><dt><?phpthe_time('Y-m-d');?></dt><dd><divclass="b_img"><imgsrc="<?phpechoget_template_directory_uri();?>/images/cat_3.jpeg"></div><divclass="b_right"><ahref="<?phpthe_permalink();?>"><?phpthe_title();?></a></div></dd></div><!--loopend--><?phpendforeach;?></dl></div><!--blogend-->

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

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

↧

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

April 29, 2020, 11:24 pm

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

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

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

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

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

ブログのサムネイル設定

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

まずは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の閉じタグの中に追記します。

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

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

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

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

index.php

<?php$infoPosts=get_posts('numberposts=4&category=9');foreach($infoPostsas$post):?><divclass="contents_box"><dt><?phpthe_time('Y-m-d');?></dt><dd><divclass="b_img"><!--書き換え前--><imgsrc="<?phpechoget_template_directory_uri();?>/images/cat_3.jpeg">　　　　　　　　　 <!--書き換え後--><?phpthe_post_thumbnail('thumbside');?></div><divclass="b_right"><ahref="<?phpthe_permalink();?>"><?phpthe_title();?></a></div></dd></div>

投稿ごとのサムネイル画像が表示できました。

やや横に伸びているので横幅を50pxに調整します。
function.phpに記述した数字部分が画像サイズです。

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

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

↧

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

April 30, 2020, 6:04 am

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

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

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

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

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

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

パーマリンクの設定

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

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

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

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

投稿一覧ページの作成

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

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

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

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

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

archive.php

<?phpif(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

<?phpget_header();?><divclass="wrapper"><divid="conL"><?phpif(in_category(array('9'))){?><divclass="information"><!--blogstart--><h2>Blog</h2><dl><!--loopstart--><?php$infoPosts=get_posts('numberposts=4&category=9');foreach($infoPostsas$post):?><divclass="contents_box"><dt><?phpthe_time('Y-m-d');?></dt><dd><divclass="b_img"><?phpthe_post_thumbnail('thumbside');?></div><divclass="b_right"><ahref="<?phpthe_permalink();?>"><?phpthe_title();?></a></div></dd></div><!--loopend--><?phpendforeach;?></dl></div><!--blogend--><?php}elseif(in_category(array('8'))){?><divclass="information"><!--informationstart--><h2>INFORMATION</h2><dl><!--loopstart--><?php$infoPosts=get_posts('numberposts=4&category=8');foreach($infoPostsas$post):?><divclass="contents_box"><dt><?phpthe_time('Y-m-d');?></dt><dd><spanclass="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><ahref="<?phpthe_permalink();?>"><?phpthe_title();?></a>を更新しました。
            </dd></div><!--loopend--><?phpendforeach;?></dl></div><!--informationend--><?php}else{?><h2>INFORMATION</h2><dl><!--loopstart--><?php$infoPosts=get_posts('numberposts=4&category=8');foreach($infoPostsas$post):?><divclass="contents_box"><dt><?phpthe_time('Y-m-d');?></dt><dd><spanclass="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><ahref="<?phpthe_permalink();?>"><?phpthe_title();?></a>を更新しました。
            </dd></div><!--loopend--><?phpendforeach;?></dl></div><!--informationend--><?php}?></div><!--conLend--><?phpget_sidebar();?></div><!--wrapperend--><?phpget_footer();

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

archive.php

<?phpget_header();?><divclass="wrapper"><divid="conL"><?phpif(in_category(array('9'))){?><divclass="information"><!--blogstart--><h2>Blog</h2><dl><!--loopstart--><?phpif(have_posts()):while(have_posts()):the_post();?><divclass="contents_box"><dt><?phpthe_time('Y-m-d');?></dt><dd><divclass="b_img"><?phpthe_post_thumbnail('thumbside');?></div><divclass="b_right"><ahref="<?phpthe_permalink();?>"><?phpthe_title();?></a></div></dd></div><!--loopend--><?phpendwhile;endif;?></dl></div><!--blogend--><?php}elseif(in_category(array('8'))){?><divclass="information"><!--informationstart--><h2>INFORMATION</h2><dl><!--loopstart--><?phpif(have_posts()):while(have_posts()):the_post();?><divclass="contents_box"><dt><?phpthe_time('Y-m-d');?></dt><dd><spanclass="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><ahref="<?phpthe_permalink();?>"><?phpthe_title();?></a>を更新しました。
            </dd></div><!--loopend--><?phpendwhile;endif;?></dl></div><!--informationend--><?php}else{?><h2>INFORMATION</h2><dl><!--loopstart--><?phpif(have_posts()):while(have_posts()):the_post();?><divclass="contents_box"><dt><?phpthe_time('Y-m-d');?></dt><dd><spanclass="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><ahref="<?phpthe_permalink();?>"><?phpthe_title();?></a>を更新しました。
            </dd></div><!--loopend--><?phpendwhile;endif;?></dl></div><!--informationend--><?php}?></div><!--conLend--><?phpget_sidebar();?></div><!--wrapperend--><?phpget_footer();

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

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

↧

文字系

文字の大きさ

テキストの位置を指定する

線で囲う

widthとheight

min-width

max-width

merginとpadding

display

display: inline-block

display: none;

フォントサイズの変更

文字色を変える

太字にする

斜体にする

行間を変える

文字の間隔を変える

文字に下線を引く

取り消し線を引く

文字を実線の枠で囲む

フォントの種類の変更

文字の位置を変える

文字に影をつける

不透明にする

aタグで作成したリンクの下線を消す

マウスカーソルを乗せたときのデザインを変える

箇条書きの仕方

positionとは

positionとセットで使うもの

position: fixed

z-index

overflow

overflow: visible

overflow: hidden

overflow: scroll

overflow: auto

表の作り方

GoogleFonts

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

トップページのwordpress化

100日チャレンジの302日目

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

CSSファイルの読み込み

画像の読み込み

wordpressタグの追加(head/body部分)

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

リンク（aタグ）の置き換え

Gatsby：CSS書き方とファイル分割の仕様

ファイル分割したい

global.css

コンポーネントごとのCSS

テーブルのセルにdivを重ねたい！

まずは復習から

border-collapseとは

box-sizingとは

実践

separate + border-box

separate + content-box

collapse + border-box

collapse + content-box

まとめ

参照

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

固定ページの設定

グローバルナビ（ヘッダー）のwordpress設定

1. 要素表示

2. 要素位置

3. ブロック要素設定

幅・高さ

マージン・パディング

背景

境界線

4. インライン要素設定

テキスト・フォント

5.その他

表

アニメーション

はじめに

1.メニューボタン連動のシンプルなスクロールエフェクト(cssのみ)

特徴的な動き

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

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

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

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

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

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

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