ブログデザイン全面リニューアル!やったことまとめ。【WordPress】

blog-renewal

独自ドメインのサーバーでWordPressにてブログを運営し始めたのは2011年9月9日。
4年半もの間、使ってきたテーマは古田社長にカスタマイズしてもらって自分仕様に変更したものでした。
日本人で同じテーマを使ってる人もほとんど見かけなくて、気に入っていたのですが、それ以上のカスタマイズを自分ですることができず、他にもいろいろな機能をブログで使ってみたいのがままならないのがストレスでした。

そんなわけで一念発起してテーマ変更してみました!!

2011年に行った設定がこのブログにまとまっていたので、色々助かりました。
自分、ありがとう!

カテゴリ→「 WordPress・blog 」一覧

ということで今回のリニューアルで行ったことを記録しておこうと思います。
ここに出てくるPRも今回初導入 ↓ (後述)

木村聡子PR
木村はオタクですが本業はプロの歌手・声優です。(ProfileVocal
主な出演作:ディズニー「魔法にかけられて」ジゼル(主役)・「アナと雪の女王」
「美女と野獣2017」・「名探偵コナン~戦慄の楽譜~」千草らら役歌唱 など。
メインのSNSはFacebookで、twitterに転送してます。
Instagram(親バカ写真)もちょこっとやってます。
Welcome Symphony
----------------------------------------------
Welcome Symphony」 CD発売開始!(販売サイト)
アナ雪クリストフ役・原慎一郎さんとの命の誕生の奇跡を
テーマにしたデュエット曲「life」は必聴です!
視聴だけでもぜひお願いします♪ →【YouTube

スポンサーリンク

◆まずはテーマをまるっと変更◆

以下の手順で全体のデザインをダイナミックに変更しました。

1.WordPressを最新版4.4.2にバージョンアップ

2.Simplicity 2.1 安定版を導入

3.Simplicity 2 子テーマを導入
サイト Simplicity

4.Flower Pop スキンを導入
サイト Simplicity2テーマスキン「Flower Pop」を作ってみた【WordPress】

◆廃止したプラグイン等◆

Simplicityはテーマ自体が大変に高機能で、従来プラグインで行っていた機能の多くがSimplicityのみで使えるようになります。
不必要になったプラグインを停止させました。

1.WPTouch:スマホサイト用プラグイン

2.WP Social Bookmarking Light・WP Evernote Site Memory:SNSシェア用ボタン

3.Twitter Widget Pro・Follow Me・ローソンガジェット:あんまツイッターやってないしね

4.publishToMixi:記事投稿するとmixiにも同時投稿する機能のプラグイン。mixi使わないし。

5.PostPost:記事最後にテンプレートの文章を投稿してた。これからはウィジェットで対応。

6.WP-OGP

◆細かいデザイン変更◆

●カスタマイザーから行った変更一覧

  • 本文文字サイズ(全角文字数)→14px(1行48文字くらい)
  • モバイル本文文字サイズ→14px
  • ヘッダーの高さpx(デフォルト:100)→150
  • サムネイルの角を丸める
  • 抜粋文字数(デフォルト:70)→120
  • サイドバーの背景を白色に→ON
  • 検索ボックス→ホワイト丸型
  • 関連記事表示数→5
  • 画像リンク拡大効果→Lity(軽い)
  • SNSボタン→Twitterタイプ(高速)
  • 管理者のみにPV表示

2016-03-29 16.37.55

●ウィジェットで行った変更

1. 本文中に「木村聡子のPR」を自動挿入

2. サイドバーと本文下にGoogle Adsenseの広告を自動挿入
(サイドバー300pxレクタングル・本文下300pxレクタングル×2・
モバイルは上部にバナー320×100px・下部に336pxレクタングル)

3. 本文下にPOSTPOSTで入れていた挨拶文を自動挿入:タグも変更
 (Simplicity作者さまにアドバイスいただきました)

◆新たに導入したプラグイン◆

新テーマになって細かい変更を余儀なくされた部分をかなりプラグインが補ってくれます。

Search Regex:ブログ内全記事内の特定の文言を置換してくれるプラグイン。アプリ紹介タグの横幅px指定していてモバイル表示がおかしくなっていたのを、パーセント指定に変更。

TinyMCE Advanced:前から入れていたけども不具合があったので一度削除してから再度設定。バージョンが変わってフォントサイズがpx単位になったのも変更。(後述)

AddQuicktag:同様に設定しなおし。よく使う文言も登録しなおし。

Crayon Syntax Highlighter
:ソースコード表示に。(下で使ってます。)
今回以降あんま使わなそうだな~。

Regenerate Thumbnails
:アイキャッチ画像からスクエアにトリミングしてサムネイル画像を全記事分作り直してくれるプラグイン

2016-03-29 16.36.25

◆phpを書き換えてカスタマイズ◆

色々とデザイン上の不具合や不満点が出てきたところをphpを書き換えて対応してみました。

1.
グラフィック投稿内のフォントサイズの指定をpxではなく%などにした。→functions.php

[crayon-5dac296b921ab948113654/]

2.
Facebook投稿の埋め込みがうまく表示されない不具合を直す→functions.php
恐れ多くもSimplicity作者さま自らコードを書いて下さいました。
サイト Facebookの埋め込みタグが正常動作しない

[crayon-5dac296b921cf887860585/]

3.
AppHtmlを使用したアプリ紹介の画像がうまく表示されない不具合を直す→functions.php
(ついでに大きいアイコンは解像度の高い画像が読み込まれるように修正。でもこのコードはすでに自分用にカスタマイズしたものを変更するためのコードなのでほかの人には役立たず・・・。問題は生成される画像名に「100×100-75」というのが足されててこれがあると正常に画像が出ないのでこれを無視する命令を書いてみた。追記→なんか一時的な不具合だったようで100×100-75は出なくなりました。)

[crayon-5dac296b921dd379934211/]

4.カエレバ・ヨメレバの表示を整える→style.css
コードが長いので以下のサイト参照に。

サイト Simplicityでヨメレバ・カエレバを綺麗に貼るCSSカスタマイズ

実際にやってみるとこんな感じ↓

◆今後の計画◆

・背景画像とタイトル画像を新しく作りたい
(プロフィール画像はfotorで名前入れてみたけど、まだ見にくいので作り直したい。)
・Googel Adsenseも効果的に置きたいので勉強
・Google Analyticsさっぱりわからないので勉強
・ブログエディタで使いやすいのないか模索

とりあえず3日間かけてこんな改造を行いました。
自分用健忘禄ですが、うらやましかったらマネッコしてもいいよ。