ブログのカスタマイズ、いろいろ試してみました。

2020 1/28
ブログのカスタマイズ、いろいろ試してみました。

こんにちは、TBです。

今回の記事で、公開記事としてはちょうど100記事目✨です。

ギモンくんのアイコン画像ギモンくん

やっとスタートラインに立ったな!
オレたちのたたかいはこれからだ!!

……そこで、今回は久しぶりに

初心者ブログ道カテゴリーの記事

になります。

あれから、何もなかったようでいて、

振り返るとちょこちょこトラブルもありました。

(2020年2月5日追記)
現在このブログはWordpressテーマ「SWELL」を使用しています。

この記事の内容
  1. 最近のWordpress・ブログ失敗談
    (1ページ目)
  2. JINのカスタマイズしました
    (1ページ目)
  3. JINのカスタマイズが上手くいかなかった話
    (2ページ目)
  4. WordPressテーマ「SWELL」のレビュー
    (3ページ目)
この記事はこんな人にオススメ
  • ブログ初心者の方
    (同じ失敗を回避!)
  • JINのカスタマイズについて知りたい方
    (カスタマイズについて詳しいサイトも紹介!)
  • WordPressテーマ「SWELL」について知りたい方
    (実際使ってみた感想も書いてます!)
目次

ピックアップ画像容量、大きすぎた事件

ブログは記事を書くことが最優先、と考えて、

最近はサイトスピードの計測をしていなかったのですが、

ギモンくんのアイコン画像ギモンくん

そのわりに更新速度も遅い

仕事の休憩時間にスマホからなんとなく速度計測してみたら

めっちゃ遅い!

警告されている項目もどうしようもない部分が多くて、

画像は写真ACさん等からDLさせていただいたものを、

JIN標準の780×428サイズに変更後、CANVAさんで編集してアップロード、

その後、LiteSpeed cacheで画像の最適化もしているし……

などと考えていたら思わぬ落とし穴が。

CANVAで作った画像はびっくりするほど
サイトの遅延を引き起こす!
画像px小さくする

圧縮

圧縮

サイトにアップと同時にプラグインでも圧縮

(まるこぼーろさんのツイートから引用)

Oh!全部圧縮してないわ!!

ざっと100個近く……

圧縮方法はCanva様の公式ツイッターで提示されていました。

「TinyPNG」というツールを使うと、画像を軽く加工することができます。
登録も不要でご利用いただけますので、ぜひお試しください。

(CanvaJapanさんのツイートより引用)
ギモンくんのアイコン画像ギモンくん

救世主!

TinyPNGについては

こちらのサイトを参考にして使っています。

画像サイズは全部半分以下になりました。

残りあと、50枚か60枚くらいかな。

現在も鋭意画像差し替え中です。

アップデートパニック×2

ある朝、グーグル・サーチコンソールさんから

「itemListElement」がありません

という通知が来ていて、

内部のことに関しては相変わらずサッパリなので、

うわあああああああ!とパニックになって

対処方法を探すためにツイッターで検索していたら、

どうやらJINのアップデートによるエラーだったようで。

このエラーもすぐアップデートで対処されて、

忘れたころにサーチコンソールさんから「異常なし」メールが来ました。

……というようなことがあったので、

そのしばらく後、また朝に、同じように今度は

パンくずリストにエラー出てるぞ?

という内容のメールが来ましたが、かなり余裕でした。

多分、JINのエラーだな、と思って。

ギモンくんのアイコン画像ギモンくん

おい!

予想通り、JINのエラーでしたが、

(厳密にはGoogle側のアップデートで出たエラー)

この時もまた、迅速に対応してくれましたJINだけに

使っていてよかった、有料テーマ、

持っててよかった、WordPressテーマJIN。

1回目は焦ったけど、それ以降は変な安心感があって、

めっちゃ信頼してます。

こんなこと、絶対自分じゃ対応できない!

ギモンくんのアイコン画像ギモンくん

そこ、言いきったらあかん!

有料テーマのサポート体制、素晴らしい。

メニューが表示されない事件

果たしていつ頃からだったのだろう。

僕は外から自分のブログを確認する時、

いつもスマホで見ているのですが、

(逆に言うと、それくらいしかスマホで確認していなかったのですが)

見ていて何か違和感がある。

何というか、こう……使いづらい。

何でかな、となんとなくモヤモヤしていて、

それがある日、自分の記事を見ていて、戻った時に

ああああああ!

と気づきました。

メニューがない!

そうなんです。

スマホでの閲覧時に表示されているはずの、

フッターメニュースマホメニューがない!

それも、記事を見ている時は表示されているが、

ホーム画面に戻ると消える、といった不具合。

これは……使いづらい!

ギモンくんのアイコン画像ギモンくん

なんでや?

わからん!だって、素人だから!!(断言)

そして、わからない時に、素人がまずしなければならないことは

そう!検索です!

ネットを、ツイッターを、ひたすら検索しました。

一時は

「もう、フッターメニューとかスマホメニューなんかいらん!」

「ヘッダーを固定にして、ヘッダーのメニューに全部入れればええやん!」

とか思ったりもしましたが、

さすが、ネットは偉大!そして数の力も偉大です。

多数のユーザーが使用しているメジャーなWordpressテーマの強み

そこにありました。

見つかりましたよ!(同じではないですが)類似症状が。

それによると、キャッシュ系プラグインで同じような不具合が

出ていた人がいて、解決方法としては

「キャッシュを一旦全部消す」

といったものでした。

僕が使っているLiteSpeed cacheというプラグインだと、

それは管理画面からentire cacheを空にすることに該当します。

もしも、JINを使っている方

+キャッシュプラグインとしてLiteSpeed cacheを使っていて

同じような症状が出ている方がいましたら、

一度お試しください。

無事、スマホメニューも、フッターメニューも表示されるようになりました。

JINをいろいろカスタマイズしてみた?

これらの事件をきっかけに、久しぶりに

記事以外の部分もいじってみたくなって、

いじり始めると結構ノリノリで長い時間、いろいろやってました。

ギモンくんのアイコン画像ギモンくん

おまえさん、意外と凝り性だもんな

今回変更を試みた個所

以上になります。

閲覧者用のサイトマップを作る

このブログもこの記事で100記事目ですが、

そういえば閲覧者用のサイトマップがなかったな、と。

まだ100記事、されど100記事。

100記事もあったら過去記事は埋もれてしまうので、

サイトマップがあった方が良いかな、と思って作りました。

考えたら、アドセンス申請用にプラグインで作った、

見ることができないサイトマップがあるだけで、

ブログを見る人のためのサイトマップというものがなかったので。

PS AUTO sitemapというプラグインを使うと、

記事更新するたびにいちいちサイトマップの更新もしなくても、

自動で新記事も追加してくれるので便利です。

メニューにある、記事一覧という項目から見ることができます。

外部リンクでもブログカードを使いたい!

今回の記事のように、いろいろなサイトさんを参考にしている場合、

こちらの記事を参考にしました、

とか載せたいわけです。

ですが、JINの標準機能には外部サイトをJINっぽく、

内部リンクのブログカード風にリンクを貼る機能が搭載されていないのです。

結果、今まではテキストリンクをボックスのショートコードで囲んでみたり、

もっと単純にテキストリンク貼るだけだったりしたわけですが。

ギモンくんのアイコン画像ギモンくん

なんかダサい!

なので、ツイッターやネットを検索して、見つけました。

方法の紹介と、設定の仕方を説明してくれてるサイト様を!

ギモンくんのアイコン画像ギモンくん

ザ・他力本願!

プラグイン「Pz-Link Card」を使う

JINで外部リンクをブログカード風にするには

Pz-Link Cardというプラグインを使うのが良いらしい。

という情報がネットとツイッターのあちこちにあったので、

今回、こちらのアシタノさんの説明を参考に、

いろいろ試して設定してみました。

  1. プラグインインストール後に設定画面に進みます。
  2. 設定画面から一旦プラグインを初期化します
    (全部最初から設定するため)
  3. 基本タブから基本設定の項目、かんたん書式設定を変更、
    「見出し」を選択します。
  4. 表示タブから表示設定を変更、
    「サイト情報」はタイトルの上側にしてみました。
    リンク先の表示、抜粋文、シェア数の表示は
    「なし」に設定しています。
  5. 外部タブから「外部リンクの設定」をします。
    枠線の色は(なんとなく)緑にしてみました。
    「付加情報」の項目は、JINの内部リンクブログカードでいうと
    「あわせて読みたい」などと表示される部分ですが、
    シンプルに「外部リンク」で。
  6. 最後にエディタの設定ですが、変更は下5つのチェックボックスのみ。
    僕は全部にチェックを入れてみました。

こんな感じです。

この記事では既に外部リンクもブログカード風になっていると思いますが、

どうでしょうか?

ギモンくんのアイコン画像ギモンくん

過去記事も設定し直さないとな!

目次を装飾してみた

ツイッターで何かを検索している時に、

(多分パンくずリストの件でJIN周りを検索していた時でしょうか)

JINのカスタマイズを紹介しているサイトさんがあったので、

そちらを閲覧していたら、面白いカスタマイズがたくさんあったので

ちょっといじってみました。

ところで、このブログにあった、元々の目次、さびしくないですか?

ワンルームに喩えると、

ベッドしかない部屋、家具がない部屋、みたいな。

ギモンくんのアイコン画像ギモンくん

殺風景。

もうちょっと「それ」っぽく、

ポップな良い感じのブログっぽくしてみたいな、と思って

まずそこから変えてみました。

目次の装飾

今回はこちらのサイトさんの記事を参考に

カスタマイズ画面から追加CSSを書き込みました。

説明はサイトさんに詳しく書いてあって、

色と画像以外はほとんどそのまま使っているので

省略しますが、注意事項を2つだけ。

画像は元々メディアライブラリにある画像を流用するにしても、

サイズは小さく変更して(編集し直して)ご利用ください。

僕はこのブログで「ギモンくん」として使っている画像を

そのまま設置して、目次全体をギモンくんが覆いつくすような状態になってしまい、

ギモンくんのアイコン画像ギモンくん

目次はこのオレさまが乗っ取った!

ちょっと焦りました。

画像のサイズについても、for menさんのブログに書いています。

(幅50px、高さ100pxくらいです)

もうひとつ。

CSSコードをそのまま流用した場合、

目次の「この記事の内容」の横にある

本のアイコンが表示されない場合があります。

JINの高速化の推奨でカスタマイズ画面から

「font awesomeを読み込まない」設定にしている人も多いと思いますが、

そうなると、CSSコード内の対象部分を「JINアイコン」用に書き換える必要があります。

おそらくは、コードを書き換えることで対処できるものと思われますが、

僕にはわからなかったので(!)

このブログの現在の設定ではfont awesomeを読み込むようになっています。

(※1月31日追記)

JINアイコンをPHP内やCSSで扱う方法について

説明されているサイト様を見つけましたので、

アイコンもJINアイコンに変えてみました。

CSS内でJINオリジナルフォントアイコンを使うには、
フォントファミリーを指定する必要があります

vanblogさんより

CSS内にある

content: “\f00c”;

font-family: “Font Awesome\ 5 Free”;

vanblogさんより

この部分を

content: “\e90a”;

font-family: ‘jin-icons’;

vanblogさんより

こういう感じに書き換えるんですね。

書き換え部分は手打ちではなく、しっかりコピペすることを推奨します。

#toc_container .toc_title:before {
font-family: ‘jin-icons’;
font-weight: 600;
margin-right: 10px;
content: “\e906“;
color: #fff !important;

赤字の部分をコピペして書き換えました。

これでfont awesomeを読み込まない設定にできます。

ギモンくんのアイコン画像ギモンくん

さらば!font awesome!!

for menさんのブログには、この他にも

かわいい、面白い装飾CSSがたくさんあったので、

機会があれば別の装飾コードにもチャレンジしてみたいと思います。

スマホヘッダーメニューを固定、
追尾するように変更したい

JINのカスタマイズに関する余所さんのブログ、

装飾系の記事を読んでいると、

スクロールして読み進めて行っても

ヘッダーメニュー(サイトの上の方に表示されている部分)が

そのまま残っているものがあって、

それいいね!(パクろう!)

と思ったので、解説しているサイトを探して変えてみました。

それがこちらのぽんひろさんのブログです。

追尾型の種類として3種類

  • ヘッダーの大きさは同じで常に上部に固定するタイプ
  • スクロールするとヘッダーが小さくなるタイプ
  • 下にスクロールするとヘッダーが隠れ、
    上にスクロールするとヘッダーが現れるタイプ

……がありますが、僕は一番簡単でシンプルな、

ヘッダーの大きさは同じで常に上部固定タイプにしました。

このタイプは手順としては

  1. CSSコピペ
  2. 設定と調整

だけで終わります。

ギモンくんのアイコン画像ギモンくん

シンプル!

最初にぽんひろさんの記事内にある、CSSを

「外観→テーマエディター→style.css(子テーマ)」。
もしくは、「外観→カスタマイズ→追加CSS」に貼り付けてください。

ぽんひろさん より

と、あるのでそうします。

僕は、なるべく子テーマもいじらない方が楽かな、と思い

追加CSSの方にコピペしました。

次に、設定と調整ですが、

ロゴサイズの調整は、実際に見てみて

もっと大きくしたい、小さくしたいなど、変えたいところがある場合は

該当部分のコードを書き換えて調整します。

(書き換える場所も詳しく説明してくれています。)

僕は、今のところ変えていません。

ヘッダーの背景色の変更については、

このブログのヘッダーカラーをJINのカスタマイズ画面からコピーして、

それをそのまま、該当部分(background:#fff;)に貼り付けました。

(該当部分の説明については、これもぽんひろさんの記事内にあります。)

メニューの検索窓と、ハンバーガーメニューについては、

元から設置していたので、そのまま使っています。

これで、ヘッダーメニューが固定、追尾するようになりました。

ギモンくんのアイコン画像ギモンくん

ミッション・コンプリート!

サイドメニューを開かず、記事を見ながら

検索窓がいつでも開けるようになったので結構便利です。

目次が殺風景だ、などと言っていましたが、

このブログ、そもそもメニューなどにも

アイコンが付いていなかったんですよね。

ギモンくんのアイコン画像ギモンくん

ザ・殺風景!

なので、この際なのでメニューにアイコンもつけてみることにしました。

設置の仕方についてはJINオフィシャルに

詳しく、カンタンに載っています。

外観→メニューから

  1. 表示オプションを開いて
  2. 「説明」にチェックをいれます。

その後、添えたいアイコンの「jic jin-ifont-〇〇」という部分をコピーして、

メニューの「説明」の記入部分に貼り付けるだけ。

文字だけのメニューから、アイコン付きのメニューに。

ちょっとかわいい、ブログらしいメニューになりました。

JINアイコンは、無料で種類も結構あって、

正直、個人的にはFont Awesomeよりも良いと思っていて、

気に入っています。

ブログカスタマイズは楽しい!

さて、ここまでで今回変更してみた話は終わりです。

ギモンくんのアイコン画像ギモンくん

ちょっと待て!
まだ3つくらい残ってないか?

その3つは、

実は試してみたけど上手くいかなかった項目になります。

ギモンくんのアイコン画像ギモンくん

な、なんだってー!

そちらは次回の記事に持ち越すとして。

ブログのカスタマイズはなんだかんだ言って楽しいです。

WordPressでは、僕のようなプログラム無知な人間でも、

検索して、コピペして、試行錯誤しながら組み立てて、

作っている気分を味わえる。

ですが、多くの人が、有名ブロガーが言っているように、

ブログの本体はやはり記事なので、

カスタマイズを楽しむのもほどほどに。

そして、CSSをいじったり、色々変えたりする際には、

必ずバックアップを取るように、

失敗したらブログ自体(全記事)が吹っ飛ぶ危険もある、

という、これまた多くの先人が注意喚起してくれたことを

胸に刻みながら、次回の記事に続きます。

ギモンくんのアイコン画像ギモンくん

もうちっとだけ続くんじゃ!

1 2 3

この記事が気に入ったら
フォローしてね!

目次
閉じる