ブログ改善記録まとめ

このブログについてのマイナーアップデートなどを、今後この記事に記録していこうと思います。

作業ログ

2019.03.25 スマホ版関連記事2のアイコンが豆腐になっているので修正

原因

SANGO のアップデートで Font Awesome 5 に対応した際に css の方で書き換えができていなかったため。

修正内容

こちらの記事で作成した関連記事カードの css にて、.longc_linkto .c_linkto_text:after 内の font-familyFontAwesome から Font Awesome 5 Free に変更。さらに font-size2.8em から 2.2em に変更。

参考 【SANGOを自分でカスタマイズ】関連記事(横長)をカスタマイズしてみたfor men
.longc_linkto .c_linkto_text:after {
    position: absolute;
    display: flex;
    height: 100%;
    width: 30px;
    padding: 0px 15px;
    content: "\f138";
    font-family: <span style="color: #ff0000;">"Font Awesome 5 Free"</span>;
    top: 0px;
    right: 0px;
    font-size: <span style="color: #ff0000;">2.2em</span>;
    color: #fff;
    background: #dddddd;
    align-items: center;
}

2019.03.28 テーマアップデートとメニューの見直し

概要

WordPress テーマの SANGO が v1.8 へアップデートされたので適用し、追加された検索ヘッダー設置機能により、sp 版のメニューを全面的に見直した。

やったこと
  • SANGO を v1.8 にアップデート
  • PORIPU (子テーマ) を v1.2 にアップデート
  • 検索ボタンを sp ヘッダーに設置(不具合発生のため現在は削除)
  • sp フッター固定メニューを消去(現在はシェアボタンのみ復活)
  • pc サイドバーの内容を sp ハンバーガーメニュー内に再現

2019.03.31 コメントが長すぎるのでページ分割&新着順で表示

概要

このページのコメントがかなり多く、ページがめちゃくちゃ長くなってしまっているので、ひとまずページを分割して改善する。

浪人して東大に合格するまで 一浪して東大に合格した凡人が浪人生活を振り返る。【大学受験】
やったこと

WordPress のディスカッション設定にて、以下のように設定。

  • 1ページあたり 10 件のコメントを含む複数ページに分割し、最初のページをデフォルトで分割する
  • 古いコメントを各ページのトップに表示する

その後、テーマファイルの functions.php に以下の記述を追加。

if (!is_admin()) {
    /*    コメント        */
    function my_get_comments($query){
        $query->query_vars['orderby'] = 'comment_date';
        $query->query_vars['order'] = 'DESC';
    }
    add_action( 'pre_get_comments', 'my_get_comments' );

    function my_comment_post_redirect( $location, $comment ) {
        $location = get_permalink( $comment->comment_post_ID );
        return $location;
    }
    add_filter( 'comment_post_redirect', 'my_comment_post_redirect', 10, 2 );
}
参考
参考 コメントをページ分割ありの新着順にするには?自宅WordPress

サトゥー

うーん、まだ長いし、もしかしたらコメントのスレッドごとに記事化してもいいのかもな…

2019.03.31 記事の更新日を検索時の表示に適用(作成日から更新日に変更したい)

概要

google 検索の検索結果で表示される日付が記事作成日のものになっているので、これを更新日に変更したほうが記事の信頼度が上がると判断。SEO 的にもこっちのが良さそう(ユーザーフレンドリーという観点で)

現状↓

2018/01/29は記事作成日なので、これを記事更新日にするイメージ。記事自体は結構リライトしているので、できれば更新日を反映させたい。

やったこと
参考 更新日時と投稿時間のコントロール | PORIPU-SANGO公認の子テーマPORIPU-SANGO公認の子テーマ

さぁカスタマイズしようと思ったら、すでに機能実装されてた…のでこれを試してみます。

カスタマイズ後、サチコにフェッチして翌日こうなってました↓

参考
参考 ブログ記事の更新日を優先して Google 検索に知らせると SEO に効果アリ!(SANGO用カスタマイズ) | Tanweb.netTanweb.net

↑これでやろうかと思ってたら PORIPU で実装されてたという話。PORIPU 持ってない SANGO ユーザーはこの記事参考になりそうです。

2019.05.02 Gutenberg の適用

ついにGutenbergにしてしまった

2019.06.09 シンタックスハイライト機能の導入

概要

SANGO にはコードを書くときにシンタックスハイライト機能が無いため、書いたコードが非常に読みにくい。そこで、 highlight.js を導入してシンタックスハイライト機能を追加した。

参考
参考 SANGOにhighlight.jsを導入してシンタックスハイライトをかっこよくしてみたThat's that. 参考 ソースコードボックスをQiita風のシンタックスハイライトにしてみたカフーブログ

poripu というテーマを使用しているため、ファイルの書き換え作業がこの記事のとおりにはいかず手こずった。

結局 functions.php に記述すると書かれていた内容を prp_init.php 内に追記する形で、また script.jsjs というフォルダの中に作成することで解決した。

色は https://github.com/ayu-theme/ayu-colors を参考にしてみた。

また、Python のコードが上手く反映されないので、コードのブロックには py という class を付与することになった。これは再利用ブロックにしたので多分忘れないはず。

2019.06.09 記事下の「前の記事」「次の記事」部分要らないので消す

以下の記述を css に追加。

.prnx {
    display: none;
}

2019.06.10 a3 Lazy Load プラグインの導入

オフスクリーン画像の遅延読み込みをすることでページを軽くするために、a3 Lazy Load というプラグインを導入した。

不具合等あれば対応し検討する。とりあえず設定いじりながら経過観察。

追記: 画像がいろいろバグって酷かったのでプラグインを停止。

2019.06.10 影の調整

pc 版のカスタムフロントページでは SANGO 公式が想定しているよりもカード数が多いため、カードの影によって重たい印象を与えてしまっていた。そこで、 Material Design を参考に影を薄く調整し直した。

before
/*影の調整*/
.cardtype__article:not(:hover) {
    box-shadow: 0 4px 5px rgba(0, 0, 0, .08);
}
.header {
    box-shadow: 0 8px 10px rgba(0, 0, 0, .08)
}
.sidelong__article:not(:hover) {
    box-shadow: 0 4px 5px rgba(0, 0, 0, .08);
}
after

ちょっとふわっとし過ぎな感じもするので、グレーを濃い目にしてバランスを取っておいた。

2019.06.13 Rinker のカスタマイズ

2019.06.19 Noto + YakuHanJP の適用

以前設定したWEBフォントがやたら重く、流石に堪えられない & 偶然発見したこちらの記事が最強だったので頑張って適用した。

参考 【Noto + YakuHanJP】日本語WEBフォント2018株式会社クインテット

僕は PORIPU というテーマを利用しているので、そこを弄ります。

まずは libraty フォルダ内に fonts というフォルダを作成し、記事の通りにフォントファイルを upload します。

  • NotoSans_Bold.woff2
  • NotoSans_Bold.otf
  • NotoSans_Bold.woff
  • NotoSans_Regular.woff2
  • NotoSans_regular.otf
  • NotoSans_regular.woff
  • YakuHanJP-Bold.woff
  • YakuHanJP-Bold.woff2
  • YakuHanJP-Regular.woff
  • YakuHanJP-Regular.woff2

その後は style.css でフォントを定義します。

どうやら WordPress メニューの「カスタマイズ」で追記された css は planeta.tokyo の直下に来るらしく、そこで相対パスの指定で詰んでいた。結果的に次のように指定してあげるとうまく行った。

@font-face {
	font-family: "Noto Sans JP";
	font-style: normal;
	font-weight: normal;
	src: local("Noto Sans CJK JP Regular"),
	url("./wp-content/themes/sango-theme-poripu/library/fonts/NotoSans_Regular.woff2") format("woff2"),
	url("./wp-content/themes/sango-theme-poripu/library/fonts/NotoSans_regular.woff") format("woff"),
	url("./wp-content/themes/sango-theme-poripu/library/fonts/NotoSans_regular.otf") format("opentype");
}

@font-face {
	font-family: "Noto Sans JP";
	font-style: normal;
	font-weight: bold;
	src: local("Noto Sans CJK JP Bold"),
	url("./wp-content/themes/sango-theme-poripu/library/fonts/NotoSans_Bold.woff2") format("woff2"),
	url("./wp-content/themes/sango-theme-poripu/library/fonts/NotoSans_bold.woff") format("woff"),
	url("./wp-content/themes/sango-theme-poripu/library/fonts/NotoSans_bold.otf") format("opentype");
}


@font-face {
	font-family: "YakuHanJP";
	font-style: normal;
	font-weight: normal;
	src: url("./wp-content/themes/sango-theme-poripu/library/fonts/YakuHanJP-Regular.woff2") format("woff2"),
	url("./wp-content/themes/sango-theme-poripu/library/fonts/YakuHanJP-Regular.woff") format("woff");
}

@font-face {
	font-family: "YakuHanJP";
	font-style: normal;
	font-weight: bold;
	src: url("./wp-content/themes/sango-theme-poripu/library/fonts/YakuHanJP-Bold.woff2") format("woff2"),
	url("./wp-content/themes/sango-theme-poripu/library/fonts/YakuHanJP-Bold.woff") format("woff");
}

body {
	font-family: "YakuHanJP", "Noto Sans JP", YuGothic, "Yu Gothic", "Hiragino Sans", "ヒラギノ角ゴシック", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
}

2019.06.24 Quicklink for WordPress の導入

こちらを参考にプラグインを導入した。早くなったかもしれない(測ってないので分かってない)

参考 設定なし、有効化だけで4秒も早くなる!?Quicklink for WordPress超高速ブログ

2019.06.28 About ページの内容更新

About ページの内容を最新版に更新。

2019.08.25 「URLをコピー」ボタンを設置

ワンクリックで記事のURLをコピーするボタンを設置する方法 | 深海のクラゲ を参考に設置。

functions.php にコードを追加

//URLコピーボタンのショートコード
function myshortcode_copy_btn() {
    $title = wp_get_document_title();
    $url = get_permalink();
    return '
        <div class="copy_main">
        <div class="copy_btn" data-clipboard-text="'.$title.' '.$url.'">
        <i class="fa"></i><span>この記事のURLをコピーする</span>
        </div>
        </div>
    ';
}
add_shortcode('copy_btn', 'myshortcode_copy_btn');

footer.php にコードを追加(読み込み用のスクリプト)

<script src="https://cdn.jsdelivr.net/npm/clipboard@1/dist/clipboard.min.js"></script>
<script>
var clipboard = new Clipboard('.copy_btn');
    clipboard.on('success', function(e) {
    jQuery(".copy_btn").addClass('copied');
    jQuery(".copy_btn span").text('コピーしました');
    jQuery(".copy_text").slideDown('slow');
});
    clipboard.on('error', function(e) {
    jQuery(".copy_btn").addClass('copied not-copied');
    jQuery(".copy_btn span").text('コピーできませんでした');
    jQuery(".copy_text").slideDown('slow');
});
</script>
<script>
jQuery('#copy_textbox').on('click', function(e) {
  e.target.setSelectionRange(0, e.target.value.length);
});
</script>

style.css に以下を追加

/*--------------------------------------
記事URLコピーボタン(小ボタン&背景有り)
--------------------------------------*/
.widget_text p {
	font-weight: 600;
}
.copy_main {
	padding: 24px 0;
	background: #eceff1;
}
.copy_btn {/*ボタンデザイン*/
	width: 360px;/*ボタンの横幅*/
	margin: auto;
	padding: 8px 0;
	color: #1b00f8;/*ボタンの文字色*/
	text-align: center;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	border: solid 1px #1b00f8;
	transition: .3s;
}
.copy_btn:hover {/*ホバーエフェクト*/
	background: #1B00F8;/*ボタン背景色*/
	color: #fff;/*文字色*/
}
.copy_btn.copied {/*コピー成功時*/
	background: #41d394;/*ボタン背景色*/
	color: #fff;/*文字色*/
	border: none;
	pointer-events: none;
}
.copy_btn.not-copied {/*コピー失敗時*/
	background: #d87f74;/*ボタン背景色*/
	color: #fff;/*文字色*/
	border: none;
	pointer-events: none;
}

こんなかんじ

やること

コメントの UI が割とクソなので修正

現状コメントが多すぎる投稿はページの長さを制御するために10個くらいの表示制限を設けているが、かなり UI がクソなのでこれは修正したい

  • アメブロみたいに別ページにコメント一覧を設ける
  • コメント返信用の記事を作る?(そもそもコメントを排除する?)

お問い合わせのフォーム作成

参考 【SANGOカスタマイズしてみた】シンプルなお問い合わせページを作ってみたfor men

Xアクセラレータ Ver.2の設定

参考 エックスサーバー遅い?1時間でWordPress高速化エックスサーバー編WordPress高速化の教科書

Medium の Clap 的な、note のスキ的な機能がほしい

この辺参考にしつつデザイン整えればできるかな?

参考 WordPressの拍手っぽいプラグイン9個まとめ | 雨過天晴雨過天晴

サチコ周りの設定など見直し

参考 グーグルがSearch Consoleを大改善! プロパティをいろいろ登録する面倒が不要に【SEO記事12本まとめ】 | 海外&国内SEO情報ウォッチ | Web担当者ForumWeb担当者Forum

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)