Rinker（リンカー）使いやすい商品リンク管理プラグインが便利！
雨乃 晴（あめの はる）
アニソン感想ブログ freshSide
ブログデザインを変更しました（ストークからJINへ）
雨乃 晴（あめの はる）
記事内に商品プロモーションを含む場合があります
どうも、雨乃 晴です。
この度、楽曲感想ブログ「freshSide」はデザインを大きく変更いたしました。
より見やすいデザインにしたいという部分とメンテナンスがしやすいというところに重点を置き、WordPressのテーマを「ストーク」から「JIN」に変えました。
今後ともfreshSideをよろしくおねがいします！
ここから先は主にブログ運営をしている人、したいと思っている人向けの内容になります。
[toc]
この記事の目次
スポンサーリンク
ブログテーマ「JIN」とは
ブログテーマ「JIN」は有料のWordPressテーマです。
金額は14,800円（2018年7月3日現在）と決して安いとは言えない有料テーマです。
しかしながら、見やすい洗練されたデザインと機能性、そして書きやすい設計が魅力のテーマとなっています。
正直、ブログテーマは何でも良いと思うところもあるのですが、書きやすいテーマはモチベーションの維持にも繋がりますし、見やすいテーマは来ていただいた人がスッと文章を読んでくれるようになります。
また、ブログ運営をしていく中で、当初はあまり考えていなかった「収益化」も視野に入れた変更になります。
JINのメリット
なんと言ってもデザイン変更が楽なことです。
以前使用していたテーマ「ストーク」もデザイン性が高くお気に入りのテーマでしたが、
「JIN」は手間がかからず綺麗なサイトが作れるという点が魅力です。
ストークのときは多くのデザイン調整を外部CSSで行っていました。
ある程度CSSの知識があるので、ウェブサイトの情報などを参考に自分でカスタマイズしていたのですが、ソースが煩雑になったりうまくいかないところも多くありました。
JINの場合ははじめから多くのスタイルを用意していて、それを選ぶだけで自分好みのデザインに変更できますし、自分でのカスタマイズにももちろん対応しています。
ストークのときにサイトデザインを作り上げるのに1日かかったのですが、JINの場合は3時間くらいでおおよそ変更出来ました。（ストークからの移行も含め）
今後もデザインを変更したいときに手軽に変更できる点は嬉しいです。
プラグインやファイルが少なくて分かりやすい
ストークの場合、多くのプラグインを導入することで便利な機能を拡充することが出来ました。
JINではその多くの機能が標準で搭載されています。
テーマを頻繁に変える場合はプラグインでの対応が楽な場合もありますが、
どの機能がどう影響しているか分かりにくくなりやすいデメリットがあります。
余計な機能がないぶん、表示速度も早くなったように思います。
この部分はサイトメンテナンスだけでなく、読者側にもメリットがあると思います。
ストークのショートコードに苦戦
ストークには多くの「ショートコード」が存在しました。
僕もそのショートコードを使っていたのですが、JINに変えるとそのショートコードは単なる文字列となってしまいます。
CSSでもないので全く意味をなさない物となってしまう上に、関連記事リンクだったりと大事な部分によく使うのがショートコードでした。
作業の大半はこの修正がメインでした。
PHPの知識はあまりないので、基本的には力技の「置き換え」作戦で修正していきました！
この方法はfreshSideで行ったものではありますが、すべてのブログで正しく行えるかはわかりません。
作業前にはバックアップをしっかりとって自己責任でお願いします。
置き換えにはプラグインの「Search Regex」を使用しました。
吹き出しの変更
アイコンを書いていただいてから記事内に吹き出しをつけて投稿していました。
JINでも吹き出し機能はあるのですが、コードが違うため機能しません。
ストークの場合このようなショートコードになっていると思います。
[voice icon="画像URL" name="なまえ" type="l"]本文[/voice]
これをJIN用のショートコードに変更します。
[[chat face=”画像URL” name=”なまえ” align=”left” border=”gray” bg=”none” style=””]
ここに文字を入力してください[/chat]]
ここに文字を入力してください[/chat]]
オプション情報は個々人で違うと思いますので、ご注意ください。
あとは「Search Regex」を使って置き換えをします。
今回は吹き出しにしたい文字列をコードで囲むという仕組みは同じで、使っているショートコードが違う形になるので、前半部分の[voice～]の部分を[[chat～]]に変えたあとに後ろの綴じコードも変えれば変更ができます。
ただし、オプション要素を多用していた場合はなんども前半部分は変更して置き換える必要がありますのでご注意ください。
関連記事の変更
ストークの関連記事のコードは「記事ID」で参照しています。
JINではURLを入力するただけで「あわせて読みたい」という関連記事を作ることが出来ますが、記事IDでのリンクコードはないようです。
記事IDはURLでもない上にタイトル情報もないのでそのままでは修正も難しいです。
そこで、こちらの記事を参考に記事IDでリンクをはるショートコードを作成しました。
そこで作成した新しいショートコードを使い置き換えします。
今回もショートコードの仕組みは同じになるので、「～id=xxxx」の「～」を置き換えればうまくいくと思います。
記事IDは残しつつ前半を変える感じですね。
知識がある方はPHPでストークと同じショートコードを使えるように「function.php」に書いても良いと思います。
僕には出来なかったのと、そういった記事も探してもなかったので……。
既存のショートコードに置き換える方法で解決しました！
ボックスの変更
ボックスはストークのときはほとんど使っていなかったので、変更していないです。
JINにしてからはボックスデザインが使いやすいので多用していますが、HTMLタグとCSSなのでメンテナンスしやすいですね。
ボックスを使っていた人はこちらの記事が参考になると思いますのでぜひ！
JINの使いやすさは尋常じゃない
ストークからJINへの変更には少しハードルが高い部分もあるとおもうので、もし困っていたらTwitterなどで連絡いただければ、お手伝いできるかもしれません。
とはいえ、僕自身も初心者なので一緒に悩んであげることしか出来ないかもしれませんが……。
ストークが決して悪いわけではないのですが、JINの使いやすさは本当に素晴らしいと思います。
記事を書く時間に集中できるので、効率もあがりますしね！ぜひ、検討している方は購入してみてください！
はじめはマニュアルを見ながら一個ずつ設定していけばすぐに完了しますよー！
ABOUT ME
こんにちは！
ライブ大好き勢だった2010年代を経て、今は子育てしつつ可能な限り音楽を楽しんでいます！fripSideの楽曲感想を中心に様々な記事を書いています！