特殊文字の表記方法
< や ¥ などの特定の文字や記号は、ブログのシステムやブラウザ側で処理され、表示されなかったり文字化けしてしまう場合がある。 大体はコードと区別がつかなくなることによって起こる。 これを避けるため、特殊文字は別の文字の組み合わせで表すようにする。 文字・記号 読み方 特殊文字(文字表記) 特殊文字(数値表記) < 小なり < < > 大なり &am […]
TAG
Wordpress
TwentySeventeenの記事横幅を拡大
私の使っているテーマはTwentySeventeenですが、横幅がちょっと小さめなのが気になっていました。 これに関して、投稿している記事は多く、 「みんな結構気になっているんだなー」 と、一人納得。 以下、横幅拡大の方法。 追加CSSに下記挿入 /* TwentySeventtenの最大幅を1200pxに変更 */ @media screen and (min-width: 79e […]
勝手に改行etc.のタグを消されてしまう事への対処法
意図的に改行していた部分やアンカータグ等が、 テキストエディタ → ビジュアルエディタ → テキストエディタと切り替えた途端、なかったことになっている事が多々ある。 以下、対策法のまとめ WordPressの自動整形について どうやら、WordPressが正しいコードになるように自動整形してくれているのが原因のよう。 2回以上の連続した改行 → 自動で1回の改行に 行の始め、行の終わりにある空白 […]
投稿記事にカテゴリーを出力する
記事の一覧ページに、下記のようなカテゴリー名（親カテゴリー/子カテゴリー）を、リンク付き＆アイコン付きで表示したい場合の覚え書き ▼ content.php を編集 一覧ページは、「content.php」を編集する。 1. 外観 → テーマエディター 2. 子テーマを選択し、 3. template-parts → post → content.php 投稿のカテゴリーをリンク付きで出力す […]
AddToAny Share ButtonsでFacebookの「いいね」ボタンが出てこない
SNSシェアボタンに「AddToAny Share Buttons」を使用中。 設定では、 Facebookの「Like」とTwitterの「Tweet」ボタンを表示させるようにしているのだけれど、 PCのプレビュー画面ではでてこない。 （シェアボタンは普通にでてくる。） 個人的には、「シェア」より「いいね」の方が敷居が低いので、 できれば「いいね」ボタン […]
WP-Popular Postでサムネイル画像が一部表示されない
私は、よく読まれている記事を一覧表示にしてウィジェットに表示させています。 使っているプラグインはWordPress Popular Postです。 今回、このPopular Post記事一覧で一部サムネイル画像が表示されなくなりました。 調べてみると、どうやらキャッシュの問題のよう。 以下、改善方法 ▼ 1. 設定 → WordPress Popular Post 2. 画面上 […]
過大なDOMサイズの回避
PageSpeed Insights で、低成績を目の当たりにし、環境改善中。 今回は、「過大なDOMサイズの回避」に挑戦。 過大な DOM サイズの回避 DOMサイズは、html タグの階層や深さの事。 850 要素あたりが警告上限で、1,500 要素以上になるとアウトのようだが、 私の場合は一時期 3,426 まで増えていた。 「Avoid an excessive DOM si […]
第三者コードの影響を抑える
PageSpeed Insights で、低成績を目の当たりにし、環境改善中。 今回は、「第三者コードの影響を抑える」に挑戦。 第三者コードの影響を抑える 指摘された「第三者コード」は下記。 Google/Doubleclick Ads (Google Adsense) Facebook Google Analytics Google Tag Manager） この中で、一番影響が大きいのが、「G […]
キャッシュ改善
サーバー上で事前にページを生成し、キャッシュとして保存しておくことで、表示速度を改善することができる。 今回、WP Fastest Cacheを使用した。 WP Fastest Cache Optionsの使い方 1. 必ずバックアップ 2．WP Fastest Cache Optionsのインストール → 有効化 3. 設定 下記の通り ↓ モバイルは、時々不都合を起こすことがある […]
WordPressに溜まったゴミデータの削除
PageSpeed Insightsで検証し、かなりUser-unfriendlyなサイトになっている事が判明し（こちら）、対策中。 対策１：レンダリングを妨げるリソースの除外（こちら） 対策２：画像サイズの縮小（こちら） 対策の３番めは、 「WordPressに溜まったゴミデータの削除」 を試みる。 ゴミデータとは、 リビジョン（記事の下書きや更新前デー […]
EWWW Image Optimizerで画像圧縮と次世代画像フォーマット変換
PageSpeed Insightsで検証した結果、かなりUser-unfriendlyなサイトになっている事が判明（こちら）。 対策１は、レンダリングを妨げるリソースの除外に挑戦し、ある程度効果が得られた（こちら）。 対策２として、次は画像サイズの縮小を検討。 画像サイズの縮小について 私は元々Photoshopで解像度を変更し、圧縮保存して、それぞれの画像を50kb […]
【WordPress】レンダリングを妨げるリソースの除外：PageSpeed Insightsのスコア改善
PageSpeed Insights で低成績を目の当たりにしてから環境改善に向けて舵を切り、100点 まで改善しました。 以下は、個人的に試行錯誤した内容の覚え書きと、その後プロの人に改善してもらった項目について記載、「レンダリングを妨げるリソースの除外」編。 「レンダリング」と「レンダリングを妨げるリソース」とは 「レンダリング」とは レンダリング（Rendering）とは、サーバーから受け取 […]
PageSpeed Insightsでのサイトスピードチェックおよびサイトスピード改善に向けての対策
Google Site Kitが、 「あなたのサイト、モバイルではかなり遅いですよ。」 と教えてくれた。 世の中はモバイル重視なので、ここが遅いのは致命的。 とゆーわけで、PageSpeed Insightsで調べてみる。 なぬ……モバイルのサイトパフォーマンスが17、デスクトップは56……。 メインのサイトもモバイルは34、デスクトップは60と、かなり低い。 ラボデー […]
バックグランド更新が想定通りに動作していません
ダッシュボードからサイトヘルスステータスをチェックしたら、 「改善が必要」 との事。 具体的には、 使用していないテーマを削除 使用していないプラグインの削除 サーバーのPHPのVer.を最新のものに更新 を勧められ、一つずつ対応。 具体的に行動する前に、 サイトのバックアップ WordPress本体、テーマ、プラグインのアップデート PHPの互換性チェック PHP互 […]
蛍光ペン風なマーカーの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++) { […]
日時の非表示
１．全ての日付を非表示にする場合 ダッシュボード → 設定 → 一般 → 日付と時刻のフォーマットの部分を空欄に。 「変更を保存」をクリックし、終了。 ２．トップページの日付を非表示にする場合 ダッシュボード → 外観 → テーマエディター → メインインデックスのテンプレート（index.php） 変更前： newposts_keni($new_info_rows,1,1,"year",0,th […]
margin, border, padding etc.の変更
行間や文字の大きさ等を調節したい時 外観 → カスタマイズー → 追加CSSで編集。 スペースや文字の大きさ等、変更したい部分にカーソルをあわせ、 右クリックでInspect（もしくはCont + Shift + I）。 ハイライトされている部分を見ながら、 margin等がCSSのどこに記載されているか確認。 その部分をコピーして、追加CSSに貼り付ける。 margi […]
抜粋記事表示（サムネイル入り）
抜粋記事を作成してリストアップし、各記事の横にサムネイル画像を入れる方法。 抜粋記事表示 子テーマを編集。 フロントページはindex.php、カテゴリー記事一覧はarchivephpを編集。 いずれも40－45行目あたり。 get_post_format() を ‘excerpt’ に書き換える。 変更前： get_template_part( 'template-parts/post/cont […]
子テーマ作り
エックスサーバー経由で子テーマ作り（サブドメインの場合も） (1) エックスサーバーのファイルマネージャーにログイン。 (2) ファイル一覧 → ○○.com → public_html → wp-content ※サブドメインの場合は、wp-contentの上にサブドメインのフォルダがあるのでそこに入る → サブドメイン用のwp-contentがある。 (3) → themes (4) 「作成」 […]
コメントアウト色々（HTML, CSS, PHP, JavaScript, .htaccess）
コメントアウトについて、勉強したことのまとめ。 コメントとは コメントは、プログラムのソースコード上で、「実行させない部分」のこと。 コードの注釈にあたり、規定のコメントタグで括って「コメントアウトする」。 コメント化された部分は、プログラムとは関係なく自由に記述することができる。 コードを記述している時はその内容を把握していても、後で読み返してみてよくわからなくなってしまうこともある。 そのよう […]
固定ページに新着記事一覧：List Category Posts
このサイトでは使っていないのですが、サブドメインサイトで利用している、「List Category Posts」の使い方の覚書。 １．プラグイン【List Category Posts】をインストール ２．一覧を入れたい場所に[catalist]で挿入 設定→List Category Postsで設定。 Nubmer of Psts：何個まで表示させるか Pagination：true → 続き […]