テーマを『SANGO』に変更しました。
トップページからご覧になられた方には既にお気づきかとは思いますが、この度デザインを一新いたしました。
■旧テーマ■
使用テーマ：『STINGER8』
料金：無料
■新テーマ■
使用テーマ：『SANGO』
料金：10,800円
『SANGO』とは？
概要
『SANGO』を作成されたサルワカさんは、初心者向けのプログラミング知識を広く公開されている超王手のサイトです。
実は購入後に『SANGO』をサルワカさんが作成されていると気付いたのですが、初心者にも非常に使いやすいテーマだと感じております。
特徴
・シンプル
・アニメーション豊富
などがあり、見ていて楽しいデザインを簡単に導入できることがいいですね。
相性の良いプラグイン
Table of Contents Plus
こちらのプラグインは導入すべきです。
『SANGO』の独自設定で、こちらのプラグインでナイスなデザインのCSSが標準搭載されています。
設定方法は下記リンクの通りに行うと、正しいレイアウトで表示してくれます。
意外だったこと
h2タグやh3タグのCSSは基本DIY
デフォルトのCSSはなんとなく味気ないので、自分で設定する必要があると思います。
と言っても子テーマの [style.css]に記入するだけなので、特に問題なく導入できます。
とりあえず<h2>タグと<h3>タグだけは設定。
[.entry-content]のclass指定をしないとトップページの範囲まで影響してしまうので、くれぐれもお忘れなく。
.entry-content h2 {
position: relative;
padding: 0.3em 0.5em;
background: -webkit-linear-gradient(to top, rgb(137, 184, 255), #c5ceff);
background: linear-gradient(to top, rgb(137, 184, 255), #c5ceff);
color: #495193;
}
.entry-content h3 {
position: relative;
padding: 0.25em 0;
border-left: none;
}
.entry-content h3:after {
content: "";
display: block;
height: 4px;
background: -webkit-linear-gradient(to right, rgb(137, 184, 255), #c5ceff);
background: linear-gradient(to right, rgb(137, 184, 255), #c5ceff);
}
発生したトラブル
レイアウトが崩れた！
『STINGER8』 → 『SANGO』に移行する途中で、いちおう全記事の点検を行って周りました。
ルーティーンワークで特に気にせず「更新」ボタンを押し続けたのですが、更新完了後に記事のレイアウトが崩れている現象を発見！
『SANGO』ではエディターで編集しているときに、文章を<p>タグで囲んでくれるのですが、『STINGER8』では編集後にその考慮がないので、<h>タグ以外の全文章が丸ごと１つの文章として扱われてしまうことになりました。
「MySQLで全記事バックアップからアップデートかけようかな…」と思ったのですが、そこまで記事が多くないので手作業で直しました。
レイアウトが崩れた！：解決編
句読点（。）を「。</p><p>」に一括置換するとだいたい解決できます。
１．崩れたレイアウトの記事を「テキスト」モードで全選択 → コピー
２．テキストエディタで開きます。
３．（。）を「。</p><p>」に一括置換して、もとの記事の「テキスト」モードに上書きします。
４．「ビジュアル」モードに切り替えて、内容を確認します。
こちらの手順で、作業の90%は完了です。
あとは内容を確認してちょこちょこ直します。
教訓：一気作業をするときは、１つの記事がうまくいくことを確認してからルーティンに移ること。
導入してよかったこと
「アイキャッチ画像」の設定
記事最上部に表示される「アイキャッチ画像」の設定なのですが、今まで
『SANGO』では「680px × 390px」が推奨サイズです。
このサイズに変更することにより、ブログ全体の軽量化が図れます。
「アイキャッチ画像」の設定：実践編
本ブログでは画像加工に２つのソフトを使用しています。
１．『縮小革命』
２．『pictcutter』
手順１．『縮小革命』で横のサイズだけ変換
横サイズ：「680px」
画像形式：JPEG（圧縮率90％ – 100%)
保存名：「w680-(元のファイル名)」
に指定の上、変換します。
手順２．『pictcutter』で、縦のサイズを調整
切り出しサイズ：横「680」縦「390」
に指定の上、欲しい範囲を切り出す。
以上の手順が、いまのところ最速でサムネイル画像の作成ができる手順となっております。
今後、デスクトップアプリを自作するようになったら、複数ファイルを一括変換できるソフトを作成したいですね。
テーマ引越しに際して行うべきこと
自作したJavaScriptやCSSなどは、引越し時にまとめておく
「どのファイルがどこに保管されているのか」の情報が記載された一覧表を作成したほうが、保守上も楽です。
全記事が動作するかを確認するには『Google Search Console』で確認
もしリンク切れなどを起こしていたら『Google Search Console』の方でエラーレポートが上がってきますので、そちらを確認するほうが前ページを確認して周るより楽です。
「開発環境」を作成するべき
移行前に、ローカル環境で開発環境を作成したほうがいいです。
CSSやJavaScriptなどの動作確認においても、ローカルで作成したほうが楽です。
Visual Studioなどの優れた開発ツールを使えますし。
本ブログの運用方針
ショートコードは使用しない
【WordPress】にはデザインの良いボタンなどが手軽に導入できる「ショートコード」という便利な機能があります。
本ブログでは、今後また他のテーマに乗り換えることがあった時に備えて「ショートコード」は使用しません。
本ブログではWEBアプリケーションを作成することを１つの目的としています。
『SANGO』の手軽に良いデザインのボタンなどを導入できるメリットには正直惹かれるのですが、
やはり自分のブログのCSSは、自分で設定した方が後々の保守が楽です。
というよりフルスタックエンジニアを目指すプログラマーであれば、CSSの設定はちょくちょく触らないと忘れてしまいますよね（自分に言い聞かせてます）。
コメントを残す