- 投稿日:2020-03-26T22:42:38+09:00
【wordpress】【css】【PHP】cssが更新されないor読み込まれない
メモです
CSSの読み込みはどこに書く?WordPress公式マニュアルに書かれている正しい手順。
以下、追加
functions.phpfunction add_css_js() {//関数名add_css_js()を作成 //CSSの読み込みはここから //全てのページにstyle.cssを読み込み wp_enqueue_style('style',get_template_directory_uri().'/style.css','',date('YmdGi', filemtime( get_template_directory().'/style.css' )),'' ); //全てのページにcss/store.cssを読み込み wp_enqueue_style('store', get_template_directory_uri().'/css/store.css'); //固定ページスラッグcontact か 投稿ID46の記事 か カスタム投稿タイプadd_newsの記事 か カスタム投稿タイプadd_newsの一覧だった場合、css/store2.cssを読み込み if (is_page('contact')||is_single(46) || is_singular('add_news') || is_post_type_archive('add_news')) { wp_enqueue_style('store2', get_template_directory_uri().'/css/store2.css'); } //JavaScriptの読み込みはここから //全てのページにjs/pagetop.jsを読み込み wp_enqueue_script('pagetop', get_template_directory_uri().'/js/pagetop.js'); //トップページのみ if (is_home()) { //js/main.jsをfooter直下で読み込み wp_enqueue_script('main', get_template_directory_uri().'/js/main.js', array( 'jquery' ), '', true); } } //関数名add_scripts()を表側で呼び出す add_action('wp_enqueue_scripts', 'add_css_js’);
- 投稿日:2020-03-26T22:42:32+09:00
[CSS]フォントの太さをさらに太くする
[CSS]フォントの太さをさらに太くする
文字の太さは、CSSの
font-weight
プロパティで変更することができます。
タイトルなどには、太字を使った方が強調されて、また、本文とのメリハリもつくので、全体的に整って見えます。本記事では、
font-weight
プロパティ以外に、さらに文字を太くしてみたいと思います。
これは軽く思いついたネタなだけなので簡単に行きたいと思います。方法
今回は
text-stroke
プロパティを使います。text-stroke
プロパティは文字の縁取りをするもので調べるとかなり縁取りの仕方などがサイトに載っています。
```
// HTML
Hello World.
// CSS
.container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.text {
font-size: 2rem;
font-family: Arial;
font-weight: bold;
color: black;
-webkit-text-stroke: 2px black;
}
```
今回は文字と縁取りをあえて同じ色にすることによって文字を少し太くしています。あんまり変わらないかもしれないですし、すごく役に立つネタでもなんでもないですが、使い方として面白いかと思いました。以上です。補足
- 投稿日:2020-03-26T21:58:04+09:00
【css】【flexBox】【レスポンシブ】w100%で、3つ並べて、3つの間隔を均等にしたい
- 投稿日:2020-03-26T18:54:52+09:00
WebサイトをHerokuでデプロイしようとしたら、エラーで躓いた話。
はじめに
制作したWebサイトを取り敢えずHerokuにあげて確認してみたかったのでデプロイしようとしたのですが、
エラーにかなり悩まされたので、同じところで詰まっている方の手助けになれば幸いです。WebサイトをHerokuでデプロイ
GitHubでコード管理を行っていたので
HerokuとGitHubを連携してHerokuサイトからデプロイしようとしていたところ、上記画像のようなエラーが出てしまいました。
エラーの原因
調べてみたところ、
今回エラーが発生したざっくりとした理由としては
HTMLベースのサイトだとHerokuがアプリとして認識してくれない為でした。〜〜〜〜〜〜〜〜〜〜〜〜
以下少し詳しく解説します。まずエラーで何を言われているのかというと、
No default language could be detected for this app.
このアプリではデフォルトの言語を検出できませんでした。
HINT: This occurs when Heroku cannot detect the buildpack to use for this application automatically.
ヒント: これは、Herokuがこのアプリケーションで使用するビルドパックを自動的に検出できない場合に発生します。とのことです。
ビルドパックは使用するプログラミング言語(PHPやRuby等)に応じて、
実行する前にデプロイされたコードを変換する役割を果たします。
これらのビルドパックは、使用言語に基づいてデプロイされたリポジトリ内で検索されます。
しかし、HTML、CSS、JavaScriptでは検出されません。その為このようなエラーが出たということです。解決策
index.php<?php header('Location: /index.html'); ?>上記画像のように
index.phpファイルを作り、中のコードも同じように記述することで解決しました。
↑デプロイ完了後のHeroku画面
〜〜〜〜〜〜〜〜
以下解説します。今回なぜPHPファイルを作成したのかというと、
WebサイトをPHPアプリとして認識させる為です。index.phpファイル内の
header関数は、
HTTPヘッダを送信する機能を持っています。header関数では、
Locationの後ろに
飛び先のファイル名やURLを記述することで
その記述した場所へ移動することが出来ます。今回はindex.htmlのページに飛ばしたかったので
上記のように記述しました。まとめ
話をまとめると
今回のエラーの原因は、
HTMLベースのサイトの為アプリ認識してくれなかったこと。
解決策は、
phpファイルを作りアプリ認識してもらえるようにすること。最後に、
参考にさせていただいたサイトのURLを下記に紹介します。[Herokuを使って簡単にウェブページをインターネットで公開する方法]
https://qiita.com/reoring/items/bca12aaa5f94b190a488[単純なHTML/CSS/JSをHerokuにデプロイする時つまずいたこと]
https://qiita.com/hozukikancho/items/b8d475e67a147cd54453[How to Run a Simple HTML/CSS/Javascript Application on Heroku]
https://medium.com/@winnieliang/how-to-run-a-simple-html-css-javascript-application-on-heroku-4e664c541b0b[PHPのheader関数でリダイレクト処理を行う方法【初心者向け】]
https://techacademy.jp/magazine/11609以上です。
最後までご覧くださり、ありがとうございました。
- 投稿日:2020-03-26T18:24:03+09:00
【完全初心者】Web系エンジニアを目指す ~LP模写に挑戦(随時更新)~
出産後は赤ちゃんの傍で
在宅Webプログラマーとして働きたいので
これからWeb系エンジニアになるための勉強を始めます
(出産まであと1ヵ月切ったけど…笑)とりあえず、かなりご無沙汰であったHTML,CSSの復習からスタート。
◆目標
「LP案件」をバンバン取れるようになりたい。
◆やったこと(2020.3.25~2020.3.28現在)
・Photoshop無料期間登録
・Photoshopデータからコーディングする方法の動画記事を見る
・HTML,CSSの基本知識がほぼぶっ飛んでることに気づき焦る
・テキストエディタでHTML,CSSの動画を見ながら手を動かす
・作業効率化のために無償のVisualStudioCodeダウンロード
・拡張機能などはこちらと
・こちらのサイトを参考にした
・こんな海外プログラマーさんのYoutubeもみたりした
・VisualStudioCodeで動かしてデバッグしてみた
・GoogleCromeで模写参考サイトを覗く
・模写参考に使用したサイトたち
・GoogleCrome上で模写参考サイトの検証ページからデバッグしてみた
・有能なおまとめがあったので、こちらと、こちらも参考にさせてもらった
・bodyタグ内の大まかな構造理解から組み立てスタート
・こちらのサイトを参考にした◆以下、詳しい手順
とりあえず、大まかな構成を確認しつつ、
コーディングの仕方の復習う~ん全くわからん。
↓
超・基本的な構成がそうそう、こんな感じ?
VisualStudioCodeだと予測変換で型が一発なのか!
(普通のことなんだろうけど、私的には感動)!だけでも出るのか…(感動)
有能なおまとめに出会ったので、こちらと、こちらも参考にさせてもらった
(上記のものと同じリンク)↓次の日、有能なおまとめに出会っても手が止まってしまったので
とりあえず大まかな構造理解から…再スタートこちらのサイトを参考にした
ちょっと不要なの混ざってるのもあるけどとりあえず手を止めぬように
区分ごとに、お色を付けて…おお
- 投稿日:2020-03-26T15:43:17+09:00
#【HTML】ウィンドウの大きさでレイアウトがグチャる...【CSS】
- 投稿日:2020-03-26T15:43:17+09:00
【HTML】ウィンドウの大きさでレイアウトがグチャる...【CSS】
- 投稿日:2020-03-26T05:10:48+09:00
初心者によるプログラミング学習ログ 273日目
100日チャレンジの273日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
273日目は、おはようございます
— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) March 25, 2020
273日目 1.0h
・XDデザインカンプからのwebサイト模写
・git,sass,flou
・ヘッダー、nav部分作成#早起きチャレンジ#駆け出しエンジニアと繋がりたい#100DaysOfCode
- 投稿日:2020-03-26T01:22:33+09:00
Web開発の基本知識(メモ用)
背景
フロントサイドのソースを見たら、なんじゃこれ?のこれをメモする目的
jQuery
- $から始まる
- ready(function(){})関数
内側の関数は:HTMLの読み込みが終わった後に、実行される。
例$(document).ready(function() { ここに処理記述 });readyが省略可能
上記の例の省略形$(function() { ここに処理記述 });
- 各種セレクター
1.要素セレクター:
$("li").css("color", "blue");
要素セレクター<ul> <li>要素</li> </ul>2.IDセレクター:
$("#myID").css("color", "blue");
IDセレクター<ul> <li id="myID">IDセレクターの場合、"#"を使う</li> </ul>3.クラスセレクター:
$(".myClass").css("color", "blue");
クラスセレクター<ul> <li class="myClass">クラスセレクターの場合、"."を使う</li> </ul>4.子孫セレクター:
$(".myClass strong").css("color", "blue");
クラスセレクター<ul> <li class="myClass"><strong>子孫セレクター</strong>の場合、"space"を使う</li> </ul>5.ユニバーサルセレクター:
$(".li *").css("color", "blue");
ユニバーサルセレクター<ul> <li><strong>ユニバーサルセレクター</strong>の場合、"*"を使う</li> <li><span>ユニバーサルセレクター</span>の場合、"*"を使う</li> </ul>6.グループセレクター:
$("#myId1", #myId3).css("color", "blue");
グループセレクター<ul> <li id="myId1">IDセレクターの場合、","を使う</li> <li id="myId2">IDセレクターの場合、","を使う</li> <li id="myId3">IDセレクターの場合、","を使う</li> </ul>まとめ
セレクター サンプル 備考 要素 $("li").css("color", "blue"); ID $("#myID").css("color", "blue"); "#"を使う クラス $(".myClass").css("color", "blue"); "."を使う 子孫 $(".myClass strong").css("color", "blue"); spaceを使う ユニバーサル $(".li *").css("color", "blue"); "*"を使う グループ $("#myId1", #myId3).css("color", "blue"); ","を使う