変更したCSSが、キャッシュ機能のために反映されないときの対処法
先日、Prism.jpのThemeを変更し、サーバーにアップロードしたけど、CSSが反映されなかった。 最終的に、Chromeのキャッシュを削除したら解決したので、それらの備忘録。 キャッシュ機能とは キャッシュ機能とは、ブラウザやサーバーなどに一時的にウェブページのデータを保存し、次に同じページを開いた時に素早く表示させる仕組み。 色々なところでキャッシュ機能を使っているので、どのキャッシュが効 […]
TAG
css
アンダーライン色々：通常下線、太め、マーカー風、波線、２重線
文字に下線を引く際の色々。 普通の下線: <u> 普通の下線だったら <u> で。 <u>下線を引きます</u> output 下線を引きます 下線のバリエーション①: border-bottom 下線部を太くしたり、色を変えたり etc.には、 <span style="border-bottom:> で色々設定してあげると良い。 例え […]
上下のmarginが効かない時の対処法
CSSを整えていて、左右のmarginは効くのに上下のmarginが効かないという現象に時々遭遇していました。 例えば、下記の例では、上に60pxのmarginをとっているのに、inspectするとcross outされていました。 原因の可能性 display: のブロック化忘れ 上下のmarginは、インライン要素には効果がありません。 インライン要素の例 <a> <ab […]
階層毎のサブタイトルを「1-1, 1-2, …」のように自動でナンバリングする方法（counter-reset & counter-increment）
私は今まで、記事のサブタイトルを、出てくる項目順にナンバリングしていたのですが、 書き進めていくうちに、「あれ、いま何番目の項目だっけ？」とわからなくなって、前の文章に戻ったり、 時々ブロックを入れ替えてナンバリングし直さなければならなかったり、 と、結構手間を感じる事がありました。 先日、コンテンツボックスを自動で作成する方針に切り替えたタイミングで、記事サブタイトルのナンバリング […]
【プラグインなし】ブログカードの作り方（外部リンク＆内部リンク）
私は今まで、「embedly」を利用してブログカードを作成していたのですが、 表示が遅い 不具合の頻度が多い カスタマイズが有料 etc. の理由から、「embedly断ち」をしてブログカードを自作することにしました。 内部リンクは、Worepress 4.4 以降であれば、記事中にURLを書く事でブログカードに変換されます。 が、私がほしいのは「外部リンクをブログカードで表示させる […]
id属性とclass属性の使い分け
HTML/CSSをコーディングする際に重要となるid属性とclass属性の使い分けについて。 id属性とclass属性とは id属性もclass属性も、どちらもHTMLのタグに名前をつけて、その属性がついたコードだけに作用させる働きがある。 html <p id="test">○○</p> <p class="test"> […]
hタグの使い分け
このブログを初めた頃は、 HTMLの事もよくわからず、手探りで記事を書いていました。 「見出しにhタグを使う」 というのは何度か目にしていましたが、 初期の頃は、大きさや形を変えて見栄えを良くする事に使っていた事もありました。 最近SEOを考える機会が増えたので、 これを機に、過去ごちゃごちゃと使っていたhタグを整理しました。 hタグ（見出しタグ）とは hタグ（見出しタ […]
投稿者名を非表示に
セキュリティー上、個人ブログの投稿者名は非表示にしておいた方が良い… という事で、今までは「Show and Hide Author」というプラグインを使っていましたが、プラグインなしでも簡単にできそうだったので、やってみました。 投稿記事の投稿者名を非表示に 1. 管理画面 → 外観 → テーマエディター 2. 投稿者名は、「function.php」の中で、下記のように設定されている。 fun […]
特殊文字の表記方法
< や ¥ などの特定の文字や記号は、ブログのシステムやブラウザ側で処理され、表示されなかったり文字化けしてしまう場合がある。 大体はコードと区別がつかなくなることによって起こる。 これを避けるため、特殊文字は別の文字の組み合わせで表すようにする。 文字・記号 読み方 特殊文字(文字表記) 特殊文字(数値表記) < 小なり < < > 大なり &am […]
TwentySeventeenの記事横幅を拡大
私の使っているテーマはTwentySeventeenですが、横幅がちょっと小さめなのが気になっていました。 これに関して、投稿している記事は多く、 「みんな結構気になっているんだなー」 と、一人納得。 以下、横幅拡大の方法。 追加CSSに下記挿入 /* TwentySeventtenの最大幅を1200pxに変更 */ @media screen and (min-width: 79e […]
蛍光ペン風なマーカーのCSS
例えば、こんな感じに文字を装飾したい場合。 「黄色の蛍光ペン」 CSSにコードを追加 外観 → テーマエディター → 付随のCSSエディターを開く。 CSSを追加。 例えば、黄色で、テキストの半分をハイライトするようなマーカーを作りたい場合 ↓ .marker-yellow{ background: linear-gradient(transparent 40%, #ffffcc 40%);} 黄 […]
アンカーリンク（ページ内／別ページ）
タイトルが複数ある記事等、クリックで目的の場所まで移動させたいとき、アンカータグ<aタグ>を使用する。 ページ内のアンカーリンク 移動先（アンカー）にアンカーポイントを挿入 <a id=○○>移動先にある文章</a> ＜○○の部分の注意点＞ 1つのIDは同じ文書内で1ヵ所にだけ（重複させてはならない） 使用できる文字は下記のみ（記号はハイフン以外使わない方が無難 […]
Youtubeの埋め込みを高速化
サイトスピードの向上のため、Youtubeの埋め込みを高速化する。 １．記事の一番前に下記コードを貼り付け Javascriptコード <script> function init() { var vidDefer = document.getElementsByTagName('iframe'); for (var i=0; i<vidDefer.length; i++) { […]
margin, border, padding etc.の変更
行間や文字の大きさ等を調節したい時 外観 → カスタマイズー → 追加CSSで編集。 スペースや文字の大きさ等、変更したい部分にカーソルをあわせ、 右クリックでInspect（もしくはCont + Shift + I）。 ハイライトされている部分を見ながら、 margin等がCSSのどこに記載されているか確認。 その部分をコピーして、追加CSSに貼り付ける。 margi […]
コメントアウト色々（HTML, CSS, PHP, JavaScript, .htaccess）
コメントアウトについて、勉強したことのまとめ。 コメントとは コメントは、プログラムのソースコード上で、「実行させない部分」のこと。 コードの注釈にあたり、規定のコメントタグで括って「コメントアウトする」。 コメント化された部分は、プログラムとは関係なく自由に記述することができる。 コードを記述している時はその内容を把握していても、後で読み返してみてよくわからなくなってしまうこともある。 そのよう […]