3/18サイトリニューアルオープン!
スポンサードリンク

【追記あり】リニューアル!WordPressテーマを「Cocoon」に変えました

雑記

WordPressテーマを変えた理由

■リニューアル工事が終わりました

サイトリニューアル工事は予想以上にうまくいきましたので、昨日3月18日付で完了としました。
奇しくも3月18日は、前身サイト「ぷよぷよ王国」オープン日であり、ぷよぷよ王国から通算すると、2010年のオープンから9年が経ちました。

 

今回もWordPressテーマを変更する大改修となりました。変更後のテーマはわいひら氏制作の「Cocoon」という日本製無料テーマです。

Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。
ぱらちゃん
ぱらちゃん

わいひら氏は過去にド定番だったテーマ「Simplicity」を作られた方であり、「寝ログ」でも名の知れた方です。

「Cocoon」はその「Simplicity」をより進化させたテーマで、デザイン性などがとても良くなっています。

 

・・・このブログを隅から隅まで読んでいる方は、もうお気づきかもしれません。

テストブログで使っていたらとても魅力を持って自分でも使いたくなっちゃった、というオチにw

みずほちゃん
みずほちゃん

一応、建前は5周年記念ということにしてあります^^;

■LION MEDIAで感じた不満

これまで1年以上「LION MEDIA」を使ってきました。

WordPressテーマを「LION MEDIA」に変更してみた
ブログのデザイン変更は概ね終了です・・・。ふぅ・・・。 2019年3月19日現在は「Cocoon」にテーマを変更しています。 生まれてまだ半年のLION MEDIA 今回は「LION MEDIA」という日本語テーマに変えて...

 

LION MEDIAもデザイン性が高く素晴らしい無料テーマなのですが、使っていく中でいろいろな不満を感じました。

  • 設定できるロゴサイズが小さく、ロゴが目立ちにくい
  • カテゴリが一つしか選べない
  • Adsenseを入れるとレイアウトがズレる
  • 広告機能が今一歩
  • 「前・次の記事」が表示できなかった

 

とくにカテゴリが一つしか選べないのは困ったもんで、例えば

新生カメラカー!Panasonic HX-A1H 購入
引っ越しも一段落ついたので、そろそろ不要品の処分を開始して部屋の整理をしないと・・・。 今日は前回に引き続いてカメラカーのお話。 小型カム Panasonic HX-A1H ■ウェアラブルカメラA1H 実は、不調...

の記事をカテゴリにすると”鉄道模型”にも”カメラ”にも該当すると思います。こういう記事を書き上げるときに不便なのです。

 

<スポンサードリンク>



 

カスタマイズ性の高さがいい!

本文部分

早速ですが、変更後のキャプチャーです。

素の状態では具無しラーメンのごとくシンプルですが、設定をいろいろいじってあげることで個性を出すことができます。

その設定もCSSをいじる、とかではなく「Cocoon設定」の項目から簡単にできます。

 

スキンが22種類あり、そのスキンをいじるだけでもかなり見栄えが良くなります。てつぱら!ではスキンを「Fuwari和色・海老茶」にし、テーマカラーを従来通りのオレンジとしました。

 

リンクカードや吹き出しも別プラグインなしで使うことができ、かなり高機能です。
※見出しだけ仕様が合わず以前使ってたTOCプラグインを使うことにしました。

中央のモザイクはAdSense広告

ヘッダーは固定画像とロゴを別々に入れることが可能だったので、それぞれ入れてみました。

ヘッダーの下にカルーセルも置いています。これはLION MEDIAで気に入っていた「ピックアップ記事」の代替となるもので、注目記事カテゴリを新たに新設の上でピックアップできるようにしています。

 

トップページ等のカスタマイズは、以下のサイトを参考にしました。ありがとうございます。

WordPressテーマ「Cocoon」カスタマイズまとめ!初心者でもCSSコピペでおしゃれに
こんにちは!無料WordPressテーマ「Cocoon」を超おすすめしているはまちゃん(@wakuwakukeigo)です。この記事は、 この記事を読むべき人 Cocoonのカスタマイズ方法が知りたい! Simplicity2からCoc
【Cocoon】脱ブログ!固定ページでサイト型トップページにカスタマイズする方法
『これからはCocoonが天に立つ』こう言い放ちWordPressテーマ界に殴り込みをかけたCocoon(コクーン)。ブロガーにとっても衝撃で、無料のワードプレステーマとしては圧倒的な存在感を示しました。もちろん、僕も機能とデザインに惚れ込

 

 

スマホ版で起きていたAdSense広告によるレイアウトのズレもなくなり、スマホ版での見栄えが劇的に改善しています。

ロゴも変えました

5周年ということもあり、心機一転してロゴを変えました。

ぱらちゃん
ぱらちゃん

と言っても、某ロゴジェネレーターで軽く作ってみたものがとても気に入ったもので・・・(笑)

みずほちゃん
みずほちゃん

赤色にしたのはエネルギッシュ感があって目立つから、だそうですよ

リンクページに新ロゴ仕様のバナーも作成済みです。

リンクについて
「てつぱら!」へのリンクについて 「てつぱら!」へのリンクはご自由にどうぞ。ただし、画像への直リンはお避けください。 相互リンク希望の方がいましたら、TwitterのDMへ。 バナーはこちらです↓ ■新ロゴ仕様 新ロゴ...

イメージキャラクターをつくりました

先ほどから吹き出しでちょこちょこ出ている彼女たちは、リニューアルしたてつぱら!の新しいイメージキャラクターです。

「ぱらちゃん」は「てつぱら!」の「ぱら」から名付けました。

「みずほちゃん」は「なすのぞみずほ」の「みずほ」から名付けました。

詳細はこちらからどうぞ。

ぱらちゃん
ぱらちゃん

セーラー服を着た女子高生なのは管理人の趣味なんだってw

これからも

というわけで、リニューアルした当ブログを

みずほちゃん
みずほちゃん

今度もどうぞよろしくお願いします!

【追記】GoogleのAMP対応化について

AMP対応化が終了しました。3月24日より、スマホ版にてAMP対応ページをご覧いただけるようになっています。対応したのは各記事ページと固定ページで、URLの後ろに「?amp=1」を付ければGoogle検索以外からでも閲覧できます。

 

“AMP”とはGoogleが推し進めるサイトを速く表示させるための技術で、AMP専用のHTMLを用意するなどの対応が必要ですが、Cocoonの場合はワンクリックで完了できちゃいます。

テーマをAMP対応する方法
Cocoonテーマの投稿・固定ページをAMP化してモバイル端末での表示を速くする方法です。

流れとしては、以下の4つのみです。

  1. Google AdSenseの「AMP自動広告」を有効化
  2. Cocoon設定でAMPをオン
  3. 公式テストツールに従ってエラー修正
  4. その他必要に応じて各ASPのAMP広告を用意

 

当方が対処したエラーは3つ。

  • CSSサイズ大きすぎ! → 小テーマのCSSを適用させない設定にして対処
  • AfbのローテーションバナーがNG → 削除で対処
  • AmazonアソシエイトでNG → 以下の方法で対応
WordPressでAmazonアソシエイトの商品リンクをAMP仕様にする方法
Amazonアソシエイトで発行される標準の商品リンクをPHPでうまいこと置換してAMPエラーが出ないようにする方法です。

 

公式テストツールでの対応も確認できているので、数日中にはGoogle検索で出たときにAMPのマークが表示されるものと思われます。

子テーマCSSを適用していないので見出し等に一部表示が異なりますのでご了承ください。また、カルーセルや検索バー等の一部は非表示です。

念の為ですが、BingなどGoogle以外で検索すると従来通り通常ページで出てくるのには変わりありませんのであしからず・・・^^;

 

 


鉄道模型の所有状況は随時更新しています。





↓「てつぱら!」はブログランキングに参加しています。クリックしていただけるとお兄さん喜びます。


じゃらん特集一覧

この記事が気に入ったら
いいね ! しよう

この記事を書いた人
NASU-NOZO-MIZUHO

尾張国に住むクソ人間
愛機はiMacとMacBook AirとMacBook Pro

趣味は鉄道(乗・撮・模型)、カメラ、PCなど。

気に入ったらフォローしてください
雑記
スポンサードリンク
気に入ったらフォローしてください
てつぱら!新館

コメント

タイトルとURLをコピーしました