プログラミング

gulpで時間制限・タイマーを設定する方法

setTimeout関数を使います(2020/7/5現在有効な方法)

 

ソースは↓です!!

/*
set timer
---------------------------------*/
// タイマー(待機時間)を指定して下さい
// scssを整形するまでの時間を設定することができます
gulp.task('setTimer', function (done) {
console.log('setTimer');
setTimeout(function () {
// ここでは、ログ情報を指定します
console.log('setTimer >> 3000ms');
done();
// ↓の「数字」を指定してください(1000 = 1秒)
}, 3000);
});
// scssを整形するまでの時間を設定することができます
と書いているのは、
整形ツール(csscombとprettier)の前に「待機時間」を設定するためです。
setTimeout  という関数がポイントです。
これは「javascriptのタイマー処理」として使われるもので、
gulpとは直接関係ありません。
javascriptを活用する事で時間制限が可能になります。

補足:

とても役立った参考記事の外部サイト→:Gulp 4 gulp.seriesとgulp.parallel

cssbeautifyは空行削除に対応していない・・?

 

現在・そして今後も、、対応しないみたいです!あきらめましょう!

 

オプションの項目に、そのような「空行の削除」がありませんでした。

htmlbeautifyはあるのになぁ・・・・。

max-preserve-newlines   っていうやつの事です)

 

僕の場合は、csscombとprettierを併用すると、空行を削除できました。

csscombを使うとなぜかプロパティ間に空行が出る場面がありますが・・・

 

「関連するプロパティをまとめてくれている」みたいですのでそのままにしています↓

 

 

gulpのエラーまとめメモ(覚え書き)

TypeError: Cannot read property ‘toString’ of null

 

toString関数を読み込めません

→これは、関数に問題があるのではなく、ファイルディレクトリ構造に問題がありました(すくなくとも僕の場合は)

 

【詳しくはこちらの記事をご覧下さい】

 

‘MODULE_NOT_FOUND’

 

モジュールがありません

→入れていないプラグインがないか探りましょう

 

わからなかった時にteratailで質問しました←

 

npm ERR! Exit status 2

 

→npm内のエラーです。実行には特に問題はありません。

わからなかった時にteratailで質問しました←

 

Error: EISDIR: illegal operation on a directory, read

 

→node.jsのバージョンが古い可能性があります。

最新版にアップグレードするか、プラグインに対応したバージョンのものをインストールしましょう。

Node.jsはこちらにあります。

 

Node.jsのバージョンとnpmのバージョンの確認方法↓(もちろんターミナルで)

node -v

npm -v

 

Cannot access ‘plugins’ before initializatio

 

「plugins」を定義する場所が間違っている

→定義する場所を変えてみましょう

※僕は、定義しても無理だったので、コメントアウトしたら動きました

 

AssertionError [ERR_ASSERTION]: Task never defined: setTimer

 

「setTimer」というタスクが定義されていません

→タスクの定義方法に誤りがあります。

 

Error in plugin “gulp-csscomb”

 

「gulp-csscomb」というプラグイン内でエラーが起きています

→npmの実行自体には特に問題はない

 

・エラーを知らせてほしい場合には、以下のコードをお使いください↓

(gulpfile.jsに記述↓)

// タスクの定義

const notify = require('gulp-notify');
const plumber = require('gulp-plumber');
// plumberとnotifyを使う

.pipe(
plumber({
errorHandler: notify.onError({
title: 'エラーだよ!',
message: '<%= error.message %>',
// Macの通知音を指定しています
sound: 'Glass',
}),
})
)

 

SyntaxError: Identifier ‘gulp’ has already been declared

 

その名の通り、syntaxがエラーを起こしています。

「同じ内容を定義していませんか?」と聞いているみたいです。

→重複部分を消してあげましょう。そして、リロードする!

 

 

”in valid value

 

値がありません。

→きちんと有効な値が定義されているか確認してみましょう

 

 

 

他にも本当に色々なエラーが出たんですが・・・

メモするのを忘れていました。。エラーをメモする発想がなかったんです。。しまった。。

申し訳ないです。代わりに、

 

エラーを解決するために必要な考え方をまとめたいと思います。

 

 

gulpエラー解決法

・ネット上の役立つ記事を色々見てみる↓

 

・(npmのエラーメッセージの主要な部分をコピペして、)Google検索で解決できないか?

・ファイルのディレクトリに誤って作成したものがないか?

・ファイルパスの指定を誤っていないか?

 

 

 

そもそもnpmがおかしい・・?

npm cache verify –force  でキャッシュクリアしてみる

npm i -D  でnpmのプラグインを入れ直してみる

 

いや、そもそもNode.jsが関係してる・・?

Node.jsをインストールし直す

 

いや、そもそも自分のファイル自体がおかしい・・?

いや、もうわけわかんない!元に戻したい・・・!頼む・・!

成功していた時のファイルを使う

→こういう時のために、ファイルを複製しておく!!(手動バックアップ)

 

 

あとがき

 

エラーが出て一向に解決できない時って辛いです。。

でも、エラー自体は正常であることはほとんどなので(エラーをググればたくさん記事が出てくるし・・)

冷静に1つ1つ。慎重に解決していくことが大切だなって思いました。。

 

エラーが解決しないと少しイラっとしてしまうこともありますが、

振り返ってみると、「えー、。こんなとこでミスってたのか・・。やらかしたなーー。。」

って思うことがほとんどです。

 

一向に解決しない時ほど、大前提を覆すような初歩的な段階でのミスだったりします。。

なぜなんでしょうか。。

 

 

gulpでhtml&cssの画像が反映しない?なぜ?対処法を簡潔に!

html&cssを指定する場所が、gulpの設定で間違っていた

 

画像のファイルパスが原因!

 

・ローカルの場合

/src/を、

../src/

とすると、ローカルでは表示された!

つまり、点々(..)をつけなければならない!

 

gulpのbrower synkの場合

もしかして、「browser synk」を使っていますか?

「base directory」で指定した外にあるものは読み込めない!

画像を「base directory」で指定している場所へ移動させるか、複製しよう!

 

gulpのcsscombの場合

オプション設定が原因?

“element-case”: “lower”

→”false”に変更しよう!

注意エラーがでて、「vaild values: lower, upper」とか出るけど、無視して「false」にしたら、本当にfalseにしてくれた

 

 

【gulp 設定 自動整形】htmlとscssをファイル更新に自動で整形!

※※追記1※※

ファイルがエラーなので、後ほど追記し、コードを修正します。

ブログの更新をお待ちくださいm(__)m

 

 

追記2:メルカリにあります

 

メルカリで確認する←

 

 

 

scssとhtmlを自動更新する私のGitHubファイル

僕のファイルはここにあります。

 

ライセンス:

BSD License (3-clause BSD License)

作成者や著作権者は、製品に対しての義務や責任を何ら負わないこと
著作権の表示を保持すること
派生した製品に、勝手に製品の宣伝または推薦者として組織や貢献者の名前を使用しないこと


ライセンス表示の解説引用:https://qiita.com/shibukk/items/67ad0a5eda5a94e5c032


使い方:

・githubから全ファイルをダウンロード

・その全ファイルの「一つ上の階層に」ファイルを適当に作ってください。(つまり、空のフォルダで囲います)

・それで使えるようになります。「npx gulp」などで実行してください。

 

 

あとがき

自動にしたくない場合は、

.jsbeautifyrc

.prettierrc

この二つのファイルが用意されています。

よければお使いください。

 

.stylelintrc.json

このファイルは結局使いませんでした。

【html&css, gulp】エラーや原因の解決方法の考え方

最終結論

gulpなら

→gulp-debugプラグインで可視化

(init ログを出す等)

 

html cssなら

ブラウザの開発ツールでチェックを外してすぐに可視化

結論

 

おすすめの方法↓ OK!!

・エラーが出る流れを可視化する

どの時点でどのエラーが発生したのか突き止める

そのエラーの対処を考える(根本的な原因をメモにリストアップする)

わからなければググる

 

しんどい方法↓ NG!!!!

・絶対に成功するパターンで成功を再現

エラーが出る方法と比べる

エラーが出る方との距離を詰めていく

わからなければググる

GulpがtoStringエラーで動かない時やること。gulpのgulp-sass-globあり。【flocssで構成】

最終結論(めんどくさい方向け)

※最初からのnpm導入やgulp導入、flocssの説明は省きます。googleで検索を推奨します。

 

 

—————————————————

追記:

ファイルの構造を見直してください!

僕の場合は、「**」というフォルダが生成されていまして、それに引っかかっていました!

不要なファイルがないか隅々までチェックしてください。

 

それでも動かない時は・・・↓

僕の設定をコピペしてください。(この時のコードはあまり綺麗ではないです・・)

【僕の最新のコードはこちらをクリック】

—————————————————

 

もし他のエラーが出ていて、面倒臭いって方は、

これをgulpfile.jsにコピペして下さい↓

const gulp = require('gulp');
const notify = require("gulp-notify");
const plumber = require("gulp-plumber");
const sass = require('gulp-sass');
// 追加
const glob = require("gulp-sass-glob");
const cached = require('gulp-cached');
const csscomb = require('gulp-csscomb');
const debug = require('gulp-debug');
// 追加終了
const pug = require('gulp-pug');
const autoprefixer = require('gulp-autoprefixer');
const uglify = require('gulp-uglify');
const browserSync = require('browser-sync');

// setting : htmlbeautify
// const htmloptions = {
// indent_char: '',
// indent_size: 1,
// unformatted: ['textarea', 'p', 'pre', 'span', 'a', 'h1', 'h2', 'h3'],
// indent_with_tabs: true,
// max_preserve_newlines: 0,
// wrap_attributes: false,
// wrap_attributes_indent_size: 0,
// }

// setting : cssbeautify
// const cssoptions = {
// indent_char: '',
// indent_size: 1,
// max_preserve_newlines: 0,
// wrap_attributes: false,
// wrap_attributes_indent_size: 0,
// }

//setting : paths
const paths = {
'root': './dist/',
'pug': './src/pug/**/*.pug',
'html': './dist/**/*.html',
'cssSrc': './src/scss/**/*.scss',
'scssDist': './src/scss',
'cssDist': './dist/css/',
'jsSrc': './src/js/**/*.js',
'jsDist': './dist/js/'
}

//gulpコマンドの省略
const {
watch,
series,
task,
src,
dest,
parallel
} = require('gulp');

//HTML
task('html', function() {
return (
src(paths.html)
// .pipe(
// plumber({
// errorHandler: notify.onError({
// title: "html Error!",
// message: "<%= error.message %>",
// sound: 'Glass',})
// })
// )
// .pipe(htmlbeautify(htmloptions))
.pipe(dest(paths.html))
// .pipe(
// notify({
// title: 'Task running Gulp',
// message: 'html file compiled.',
// sound: 'Tink',})
// )
);
});

//Sass
task('sass', function() {
return (
src(paths.cssSrc)
// 追加
.pipe(csscomb())
.pipe(cached('cache'))
.pipe(debug({
title: 'init: '
}))
.pipe(dest(paths.scssDist))
.pipe(
plumber({
errorHandler: notify.onError("Error: <%= error.message %>")
})
)
.pipe(glob())
// 追加終了
.pipe(sass({
outputStyle: 'expanded' // Minifyするなら'compressed'
}))
.pipe(autoprefixer())
// コンパイル後にエラーを探す
.pipe(dest(paths.cssDist))
);
});

//Pug
task('pug', function() {
return (
src([paths.pug, '!./src/pug/**/_*.pug'])
.pipe(plumber({
errorHandler: notify.onError("Error: <%= error.message %>")
}))
.pipe(pug({
pretty: true,
basedir: "./src/pug"
}))
.pipe(dest(paths.html))
);
});

//JS Compress
task('js', function() {
return (
src(paths.jsSrc)
.pipe(plumber())
.pipe(uglify())
.pipe(dest(paths.jsDist))
);
});

// browser-sync
task('browser-sync', () => {
return browserSync.init({
server: {
baseDir: paths.root
},
port: 8080,
reloadOnRestart: true
});
});

// browser-sync reload
task('reload', (done) => {
browserSync.reload();
done();
});

//watch
task('watch', (done) => {
watch([paths.cssSrc], series('sass', 'reload'));
watch([paths.jsSrc], series('js', 'reload'));
watch([paths.pug], series('pug', 'reload'));
done();
});
task('default', parallel('watch', 'browser-sync'));

こちらの記事を参考にカスタマイズして書きました。 

 

・ディレクトリ構造はこのようにして下さい

(flocss(フロックス)を元に構成しています。)

・style.scssの中身もこのようにして下さい

・index.htmlは一つで大丈夫です。

(ちなみにエディタはVScodeです)

 

↓↓↓↓↓↓↓↓↓↓↓↓

※「.history」はVScodeの履歴生成プラグインが自動生成したものです。関係ないので気にしないでください。

※「GULPTEST」 というのは一番上のフォルダ名のことです。大文字なのはvscodeの仕様なので気にしないでください。

実際のフォルダ名は「gulptest」です。

 

 

style.scssを添付しておきます、使って下さい↓

/*---------------------------------

foundation

---------------------------------*/
@import "foundation/_reset.scss";
@import "foundation/_function.scss";
@import "foundation/_commonStyles.scss";
/*---------------------------------

layout

---------------------------------*/
/*---------------------------------

object

---------------------------------*/
/*
component
---------------------------------*/
@import "object/component/**";
/*
project
---------------------------------*/
@import "object/project/**";
/*
utility
---------------------------------*/
@import "object/utility/**";

_commonStyles.scssは以下です↓(globの確認のために入れています)(foundationフォルダに入れます)

「_」をつけ忘れないでください。「commonStyles.scss」ではなく、「_commonStyles.scss」です。

/*---------------------------------

commonStyles

---------------------------------*/
/*
width
---------------------------------*/
$text-max: pxtovwSmall(300);
/*
color
---------------------------------*/
$pure-black: #000;
$pure-white: #fff;
$white: #f2f2f2;
$bright-brown: #C1BCB2;
$brown: #604C3F;
$bright-red: #EA6D4E;
$red: #CE4949;
// opacity color
$brownOpacity: rgba(96,76,63,0.5);
$redOpacity: rgba(206,73,73,0.5);
/*
font-size
---------------------------------*/
$very-big: pxtovwSmall(18);
$big: pxtovwSmall(16);
$small: pxtovwSmall(14);

 

できましたか?では、ターミナルで、

「npm install -D」

「npx gulp」

と打って下さい。

その後、変更してみて下さい。

 

以上です。僕はこれで無事解決されました。

 

 

原因と解決策

今回の原因

ディレクトリ構造とgulpfile.jsが互いに何かしらの衝突を引き起す
意味不明な部分からエラーを取ってきた
その結果「toStringがありません」になったと思われます。


解決策

直近で成功している方のディレクトリ構造とgulpfile.jsを試す

やる事↓
・ディレクトリ構造を最初から書き直し
・gulpfile.jsを最初から書き直し

 

実際にこの構造で成功した記事(出来るだけ最新の記事を選びました)

 

・ディレクトリ構造・gulpfile.jsはこちらの記事を完全に再現してください。

・gulp-sass-globプラグインを使いたい場合は、こちらの記事から以下の部分を拝借してください↓

 

関数の定義(一番上に書きます)↓

const glob = require(“gulp-sass-glob”);
 
 
globを動かす(sassのコンパイルの前に書いてください)↓
 
.pipe(glob())

 

 

あとがき

 

teratailでこのような質問をしましたが、解決しませんでした。
その後、上記2記事にたどり着き、解決しました。

 

今回特に改めるべき事

・gulpfile.jsをいじるときは、成功するたびにバックアップを別名保存する。

・ディレクトリ構造のパスは変えなくていいように、gulpのパスの指定を固定する。(一度決めたら変えない)

・toStringエラーが出たら上記のことを実行する

 

ありがとうございましたm( _  _)m

 

 

 

追記!!

原因が判明しました。

・gulpfile.jsでscssを吐き出す場所を間違っている→間違ったファイルが生成される→間違ったファイルがインポートされる→typeエラー(toString is null)

 

コードがどのように流れているのかを可視化できるプラグイン、「gulp-debug」プラグインを導入後に解決!!!!

エラーの流れをちゃんと可視化しないといけないですね・・(汗笑)

 

流れは以下です↓(gulptest-filalという名前のフォルダで実験しています)

[14:40:24] init: src/scss/object/component/_c-logo.scss
[14:40:24] init: src/scss/object/component/_c-ttl.scss
[14:40:24] init: src/scss/object/component/_c-ttlRank.scss
[14:40:24] init: src/scss/object/project/_p-allergiesTable.scss
[14:40:24] init: src/scss/object/project/_p-hd.scss
[14:40:24] init: src/scss/object/project/_p-hdDrawer.scss
[14:40:24] init: src/scss/object/project/_p-secLinkToday.scss
[14:40:24] init: src/scss/object/project/_p-secNews.scss
[14:40:24] init: src/scss/object/project/_p-secWelcome.scss
[14:40:24] init: src/scss/object/project/_p-tbRecruit.scss
[14:40:24] Finished 'sass' after 534 ms
[14:40:24] Starting 'reload'...
[14:40:24] Finished 'reload' after 1.93 ms
[14:40:24] init: src/scss/object/project/_p-top.scss
[14:40:24] init: src/scss/object/utility/_u-lh11.scss
[14:40:24] init: src/scss/object/utility/_u-lh12.scss
[14:40:24] init: src/scss/object/utility/_u-lh17.scss
[14:40:24] init: 19 items
[14:40:25] Starting 'sass'...
[14:40:25] init: src/scss/**/*.scss ←←←ここで**をそのまま出力したファイルが読み込まれ、ずっと引っかかってた!!!!
[14:40:25] init: src/scss/**/*.scss/style.scss
[14:40:25] 'sass' errored after 54 ms
[14:40:25] TypeError: Cannot read property 'toString' of null
at transform (/Users/fuhixx/gulp成功保管ファイル/gulptest-final/node_modules/gulp-sass-glob/dist/index.js:67:32)
at DestroyableTransform._transform (/Users/fuhixx/gulp成功保管ファイル/gulptest-final/node_modules/gulp-sass-glob/dist/index.js:49:15)
at DestroyableTransform.Transform._read (/Users/fuhixx/gulp成功保管ファイル/gulptest-final/node_modules/readable-stream/lib/_stream_transform.js:184:10)
at DestroyableTransform.Transform._write (/Users/fuhixx/gulp成功保管ファイル/gulptest-final/node_modules/readable-stream/lib/_stream_transform.js:172:83)
at doWrite (/Users/fuhixx/gulp成功保管ファイル/gulptest-final/node_modules/readable-stream/lib/_stream_writable.js:428:64)
at writeOrBuffer (/Users/fuhixx/gulp成功保管ファイル/gulptest-final/node_modules/readable-stream/lib/_stream_writable.js:417:5)
at DestroyableTransform.Writable.write (/Users/fuhixx/gulp成功保管ファイル/gulptest-final/node_modules/readable-stream/lib/_stream_writable.js:334:11)
at DestroyableTransform.ondata (/Users/fuhixx/gulp成功保管ファイル/gulptest-final/node_modules/readable-stream/lib/_stream_readable.js:619:20)
at DestroyableTransform.emit (events.js:315:20)
at DestroyableTransform.EventEmitter.emit (domain.js:547:15)
[Browsersync] Reloading Browsers...
[14:40:25] init: src/scss/**/*.scss/foundation/_commonStyles.scss
[14:40:25] init: src/scss/**/*.scss/foundation/_function.scss
[14:40:25] init: src/scss/**/*.scss/foundation/_reset.scss
[14:40:25] init: src/scss/**/*.scss/object/component/_c-btn.scss
[14:40:25] init: src/scss/**/*.scss/object/component/_c-logo.scss
[14:40:25] init: src/scss/**/*.scss/object/component/_c-ttl.scss
[14:40:25] init: src/scss/**/*.scss/object/component/_c-ttlRank.scss
[14:40:25] init: src/scss/**/*.scss/object/project/_p-allergiesTable.scss
[14:40:25] init: src/scss/**/*.scss/object/project/_p-hd.scss
[14:40:25] init: src/scss/**/*.scss/object/project/_p-hdDrawer.scss
[14:40:25] init: src/scss/**/*.scss/object/project/_p-secLinkToday.scss
[14:40:25] init: src/scss/**/*.scss/object/project/_p-secNews.scss
[14:40:25] init: src/scss/**/*.scss/object/project/_p-secWelcome.scss
[14:40:25] init: src/scss/**/*.scss/object/project/_p-tbRecruit.scss
[14:40:25] init: src/scss/**/*.scss/object/project/_p-top.scss
[14:40:25] init: src/scss/**/*.scss/object/utility/_u-lh11.scss
[14:40:25] init: src/scss/**/*.scss/object/utility/_u-lh12.scss
[14:40:25] init: src/scss/**/*.scss/object/utility/_u-lh17.scss
[14:40:25] init: 20 items
^C

macでのスクショはこんな感じです↓

 

 

なんだ・・。ずっと2日間エラー探していたのはなんだったのでしょうか。。

御愁傷様でした、自分。。

 

解決したので良かったです!もうエラー出しても平気な自信あります(笑)

こちらの記事を見てgulp-debugプラグインを導入しました!

先ほどの僕のgulpfile.jsに含まれているので安心してくださいね。

 

それでは〜

最後までお読み頂きありがとうございました!

 

 

webデザイナーの僕の行動指針

 

 

 

まとめ・結論

 

日々の思考

 

毎日寝る前に読書・視聴でアップデート(刃を研ぐ)

・「7つの習慣」+「ビジネス系Youtuber・読書」 (7つの習慣のみ→抽象的。具体例があまり浮かばん) 

 

物事の「仕組み(前提)」に疑問をもち、「なぜ?」と問いかける

 

 

行動指針

 

目標の立て方 【1日の作業の明確化】

・数値目標、具体的行動目標

 (参考:集中力を高めるコツ【月収1,000万の僕が、普段から意識すること】

数値目標

NG例)#今日の積み上げ プログラミング     

OK例)#今日の積み上げ HTMLの動画5本みる   

具体的行動目標

NG例)#今日の積み上げ 読書          #今日の積み上げ ブログのリサーチ 

OK例)#今日の積み上げ 移動時間は全て読書   #今日の積み上げ ブログの目次作成 

 

1.パーキンソンの法則→仕事の量は完成のために与えられた時間をすべて満たすまで膨張する

→・短めの締め切りを設定する・仕事を細かいタスクに分ける

 

 

学習方法

 

遅延評価型学習法

 

 

デザイン

 

そもそも「デザイン」とは何か

・整理

・コミュニケーション

・ひらめき

「カッコよく」「美しく」が目的じゃない。デザインの本質とは?

 

 

・無駄な勉強を省く

デザインも上達!WEBデザイン勉強法6ステップ

 

・デザインの比較を可視化する

→作業中は、Ctrl+Zだめ!横にどんどんバージョンを並べていく!

 

・常にゴールを意識する

→デザインは感覚的にしか伝えられない部分がある。同じ「かわいい」でも様々。

あなたのデザインが理解されない理由 / デザイン批評の始めかた | アドビUX道場 #UXDojo

 

 

デザイン

 

・デザインの比較を可視化する

具体例

→作業中は、Ctrl+Zで戻らない!横にどんどんバージョンを並べていく!

デザイナーが教える『誰でも絶対に今すぐデザインがうまくなる』方法

 

 

学習方法

 

遅延評価型学習法

「遅延評価」という言葉を調べてみると、「ある式を、その結果が本当に必要になる時点までは評価しないでおくテクニック」とあります。そのメリットは、「条件次第で捨ててしまうような値を事前に準備することは非効率的である。このような場合遅延評価を行うと必要なときだけ値が計算されるので計算量を低減できる」とありました。

ここから遅延評価勉強法とは、「その知識が必要になった時に初めて勉強する方法」です。もっと言えば、「○○を学んだから××をやってみる」ではなく、「××をやりたいから○○を勉強する」と定義できます。

ハッカーと遅延評価勉強法

 

 

静的htmlサイトのwordpress化で解決できたサイトまとめ

 

 

 

・まず、html化の方法がわからない

参考にしてできたサイト↓

フリーランスがwordpress制作で仕事ができるレベルになるには?コーディングも解説

 

【改訂版】02.WordPressテーマの動作を知れば、全体像が見えてくる

 

https://hikopro.com/html-wordpress/

 

https://www.amazon.co.jp/gp/customer-reviews/R2CAUU2PNSGTG9/ref=cm_cr_dp_d_rvw_ttl?ie=UTF8&ASIN=4774173800

 

 

 

https://qiita.com/sararilfy/items/4784508f2bba09d93bb4

 

https://briarpatch.co.jp/wp-jquery

 

【エックスサーバー】ホームページがアップロードされない時の対処法

 

http://dorolog.com/wordpress_template_tag/

 

https://www.searchlight8.com/wordpress-twentyfifteen-style/

 

https://webtan.impress.co.jp/e/2010/03/09/7539

 

WordPress初心者がまず押さえておきたいテンプレートタグまとめ

 

https://uxmilk.jp/20706

 

WordPressでCSSを追加する方法!ページの種類や記事ごとに個別で読み込みも可能

 

jQueryをWordPressで使う場合の読み込み方と使い方

 

PHPの文字化け対処法

 

WordPressでテーマ名の変更するやり方

 

最大アップロードサイズの限界に挑戦!上限はどこまで上げられるのか

 

「テーマのインストールに失敗しました」と表示される原因

 

https://webtan.impress.co.jp/e/2010/03/09/7539

 

WordPress初心者がまず押さえておきたいテンプレートタグまとめ

 

 

 

・css反映されない

wordpressで変更したhtml、css、php等が反映されない時の対処法【5分】

 

http://mignonstyle.com/wordpress-template-file/

 

 

固定ページのテンプレートはpage.phpだけではありません

 

https://blog-tip.com/wordpress/slug/

 

https://www.yoheim.net/blog.php?q=20190105

 

 

・slick(jQueryプラグイン)の反映のさせ方が不明

参考にしたサイト↓

絶対解決!WordPressでslick.jsが動かない場合の対処法

 

 

【jQuery】スライダープラグイン「slick」の使い方を詳しく解説

 

 

・slickを使うと、静的htmlの方ではcssが反映されるのになぜか反映されない。

結論、反映されていないcss(崩れているcss)のコードを丸々コピーすれば解決。(chrome検証ツールにて)

 

→まず、原因を突き止める。

今回は、cssが反映されておらず、jQueryについては正常に反映を確認した。

 

→静的htmlとコードを比較する

wordpressのサイトでエラーが出ているページ、または反映されていないページでも、

chrome検証ツールを使うとすぐに違いがわかる。

 

→cssのリンクは正常に動作を確認。しかし、cssが反映されない。。

リンクは間違いがない。エラーもなし。しかし、

cssが崩れている。。なぜかわからないまま長時間比較していた。

しかし、結論、

反映されていないcss(崩れているcss)のコードを丸々コピーすれば解決。(chrome検証ツールにて)

そんな簡単な方法があったのか。。と思ったのでメモ。

 

 

ざっと以上が参考になるサイト、というより

僕が実際に独学の知識でwordpress化に初めて成功した(書いている現在)時に非常に役立ったサイトでした。

もっと詳しく書けるのですが、今はそこに時間を割けないので割愛させてください。

ありがとうございました!

 

【Progate】プログラミングをはじめてみた

 

こんにちは、ふひっくすです!

 

ごく最近、プログラミングを始めてみました!

毎日をぼーっと生きていたので良いパソコンも手に入ったし、

何かをはじめようと思いまして。

 

プログラミングを知った時

 

プログラミングを知ったのは小学生の時でした。

小学生の頃に、ゲームを作りたいと思っていました。

しかし、パソコンがないには話にならないし、買ってもらえるわけでも買えるわけでもないので完全に諦めてました

その時は、ゲームに一番はまっていた時期ですし、本気でパソコン買うお金を貯めようとも思いませんでした。

 

バイトをしたくないと思っていたので、高校になってもバイトせずにだらだら生きる毎日です。

ちゃんと宿題や課題、高校展・芸文祭のB1パネルの作品は提出していましたが、

それ以外のじかんはずーーっとネットサーフィンで「人生とは」とは「自由になるには」とか考えていたものです。(笑)

 

そんな話はおいといて(笑)

感想を日記として残しておきます。

 

現在のProgateレベル

 

68です。。

まっだまだですね。

 

最初にRubyの初級編を終わらせて、そのあとJavaScriptを無料の範囲までやりました。

その後は、HTML&CSSばかりをやっています。

 

4/5に始めたと思うので、今日でだいたい一週間くらいでしょうか。

 

侍エンジニア塾とテックアカデミーのオンラインサポート無料体験を受けて、プログラミングの可能性を知りました。

高校の時にうけていたらなぁ・・。と思いましたが、今からならまだ間に合うので、Webデザイナーを目指すべく取り組みたいと思います。

 

めっちゃスライドが見やすい&わかりやすいのでお勧めです。

無料では物足りなくなったので、有料プランに切り替えようと思います。