WordPress、ブログ

WordPress有料テーマJINを使ってみての感想と導入時のメモ

JINを使ってみての感想

デザイン性、カスタマイズ性は抜群

スタイルを入れ替えることで、見た目を色々変えることができる。

各所の色を細かく設定できたり、吹き出しや、ブロック、ボタンなどの素材が豊富なので、デザインにこだわりたい人にはとにかくおすすめ。

特に、目次のデザインと、スマホで見たときの見た目がかっこよくてGood!

強いて悪いところをあげるとすれば

カスタマイズ性が高いがゆえに、設定項目が多く大変。

Clasic Editor推奨とのことだが、Gutenbergに慣れていた私はいまさら戻りたくないなと思った。

私の結論はCocoonでも良かったかも

JINはデザインのカスタマイズ性が高いがゆえに、センスの差がもろに出る。Cocoonは、お手軽にいい感じのサイトになる。

そんなにこだわらずに、良い感じのサイトを作りたい自分にとっては、Cocoonで十分だったかもしれない。

⇒しばらく使ってみると、やっぱりJINにして良かったと思いました。なんかかっこいいんですよね。

導入から設定変更まで

導入

・テーマを購入。

・ダウンロード、インストール、有効化

デザインの変更

・「Customizer Export/Import」プラグインをインストール。

JINのデモサイトから好きなデザインを選んでダウンロード。

・「外観」「カスタマイズ」「エクスポート / インポート」を開く。

・「画像ファイルをダウンロードしてインポートしますか ?」にチェックを付けてファイルをインポート。

※デザインを入れ替えると、いろいろ設定がリセットされるので、これを先にやった方が良い。

・ディスクリプションが消えるので再設定。

・メニューが、リセットされるので、メニューの設定ページで表示される場所を再設定しなおす。ピックアップ記事もここで設定。

・ピックアップ記事の表示形式は「カスタマイズ」「トップページ設定」

・カラー設定は、配色パターン見本40選がすごく役に立つ。

サイト基本情報の編集

・「外観」「カスタマイズ」「サイト基本設定」を開く。

・サイトタイトル、サブタイトル、ディスクリプションを修正。

・設定したら、SEOチェキで確認。

ピックアップの作成

・「外観」「メニュー」を開く。

・新しいメニューを作成、メニュー名に「ピックアップ」と入力して、メニューを保存。

・ピックアップに記事を追加する。

・トップページのピックアップコンテンツにチェック。

・「カスタマイズ」「トップページ設定」にある「ピックアップコンテンツのタイプ選択」でデザイン変更可能。

コンテンツマガジンを設定

・「カスタマイズ」「トップページ設定」を開く。

・トップページの記事一覧に表示させるカテゴリーIDに、カテゴリIDを登録する。(カンマ区切りで3つまで)

スマホメニュー作成

・「外観」「メニュー」を開く

・新しいメニューを作成、スマホメニューと入力して保存。

・必要に応じて、スマホスライドメニュー、フッターメニューを作成する。

目次用プラグインの設定

・プラグイン「Rich Table of Contents」をインストール。

・ダッシュボードの「RTOC設定」で設定を変更できる。

OPG(Open Graph Protcol)設定

・「外観」「カスタマイズ」「OGP設定」を開く

・トップページのOPG画像を設定。

・ツイッターアカウントを設定。「はずけい@hazukei1」

・Twitterのカードタイプを「summary_large_image」に変更。

・「TwitterのURL」にツイッターのプロフィールURLを入力「https://twitter.com/hazukei1」

Autoptimizeのインストール

・サイト表示速度を上げてくれる「Autoptimize」をインストール。

・プラグインの設定画面で、「JavaScript コードの最適化」「CSS コードを最適化」「HTML オプション」にチェックして保存。

Google関連

・Googleアナリティクスの「管理」「トラッキング情報」「トラッキングコード」を開く。

・ダッシュボードの「HTMLタグ設定」にコードを入力。

・Googleアドセンスのコードを「広告管理」に設定

サムネイル画像をそろえる

・プラグインのRegenerate Thumbnailsを有効化。

・「ツール」「Regenerate Thumbnails」を開きアイキャッチ画像のサムネイルを再生成。

SEO設定

・ダッシュボードのSEO設定を開き、不要なページをNoindex設定する。

子テーマでカスタマイズしたところ

投稿者の情報を非表示に変更

記事の下に、投稿者の情報が表示される。これは各記事のページで表示できないように変更できるが、一括変更はできない。

スタイルシートで非表示に設定。

スマホで見た際のテーブルのデザイン変更

スマホでテーブルを表示すると、どうしても横幅が足りなくてデザインが崩れてしまう。

Cocoonでは、スマホの場合文字サイズを少し小さく表示するように設定されているらしい。

スタイルシートを修正して、表示幅が小さい場合、文字が少し小さめになるように修正。

ABOUT ME
hazukei
「はずけい」と申します。 36歳のシステムエンジニアです。最近はシステムのサポートデスクと、運用業務をやっています。そろそろ開発がやりたいです。