に投稿 コメントを残す

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

WordPressテーマを変えた理由

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

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

 

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

https://wp-cocoon.com/

ぱらちゃん
ぱらちゃん

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

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

 

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

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

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

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

■LION MEDIAで感じた不満

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

WordPressテーマを「LION MEDIA」に変更してみた

 

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

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

 

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

新生カメラカー!Panasonic HX-A1H 購入

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

 

<スポンサードリンク>



 

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

本文部分

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

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

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

 

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

 

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

中央のモザイクはAdSense広告

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

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

 

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

https://wakuwaku-keigo.com/cocoon-customize/

https://wakuwaku-keigo.com/cocoon-top-page/

 

 

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

ロゴも変えました

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

ぱらちゃん
ぱらちゃん

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

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

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

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

リンクについて

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

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

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

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

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

ぱらちゃん
ぱらちゃん

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

これからも

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

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

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

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

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

 

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

https://wp-cocoon.com/amp/

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

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

 

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

  • CSSサイズ大きすぎ! → 小テーマのCSSを適用させない設定にして対処
  • AfbのローテーションバナーがNG → 削除で対処
  • AmazonアソシエイトでNG → 以下の方法で対応

WordPressでAmazonアソシエイトの商品リンクをAMP仕様にする方法

 

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

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

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

 

 


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

★オーディオシステムの構成も随時更新しています。

https://test.tetsupara.net/audio





★何でも聞いてください。

https://peing.net/ja/mc313_8507


じゃらん特集一覧
に投稿 コメントを残す

サイトリニューアルのテストを行います

 

いきなりですが、サイトリニューアルのテストを今日から一週間の間実施します。

サイトの見え方や使い勝手が変更になりますのでご注意ください。

上手く行けばそのままサイトリニューアル完了、失敗なら元のデザインへ戻ります。

お手数おかけしますが、よろしくお願いしますm(_ _)m

 


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

★オーディオシステムの構成も随時更新しています。

https://test.tetsupara.net/audio





★何でも聞いてください。

https://peing.net/ja/mc313_8507


じゃらん特集一覧
に投稿 コメントを残す

WordPressテーマを「LION MEDIA」に変更してみた

ブログのデザイン変更は概ね終了です・・・。ふぅ・・・。

2019年3月19日現在は「Cocoon」にテーマを変更しています。

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

生まれてまだ半年のLION MEDIA

今回は「LION MEDIA」という日本語テーマに変えています。


[link url=”http://lionmedia.fit-jp.com/” title=”AMP対応・SEO最適化・レスポンシブ・高機能の無料WordPressテーマ│LION MEDIA[ライオン メディア] – デモサイト” content=”LION MEDIA(ライオン メディア)は、AMP対応・SEO最適化・レスポンシブ・高機能。そして、表示速度が速い、無料のデザイナーズ WordPressテーマです。全体としてメディアサイト向けに作っていますが、個人ブログなどでももちろん利用できますし、カスタマイズ次第で様々なタイプのサイトに利用できるテーマになっています。”]

 

このLION MEDIAは無料のテーマなのに無料とは思えないほど多機能でデザインもスタイリッシュ。
まだ最初のリリースから半年も経っていませんが、既に多くのブロガーから高評価を得ているというお墨付きです(笑)
[link url=”http://www.tairakenji.com/entry/wp_theme” title=”【2018年版】デザインも使いやすさも抜群!本気でオススメしたいWordpressテーマ15選 – にーとのかがみ。” content=”今回ははてなブロガーにもそうでない人にも本気でおすすめできるテーマをいくつか選んだので紹介していこうと思うよ!”]

 

<SPONSORED LINK>



高いデザイン性

去年のリニュ作業である程度土台を作っていたので、今回の作業は数時間でほぼ形になりました。
LION MEDIAは前のMH Magazine lite(以下MH)と比べるとカスタマイズ性がやや低いのが唯一難点ではあるのですが、デフォルトの時点でかなり完成度の高いデザインとなっているので、WPのカスタマイズ画面とCSSをちょっと弄くればそれでもう完成なのです。

 


見出しや基本フォントなどは以前のMHのときとほぼ同じCSS設定で維持して可能な限りキープコンセプトに努めました(Androidだけフォントが変わってます)
本文は以前とあんまり変わらないので違和感が少ないはず。

他の部分はLION MEDIAの高いデザイン性のおかげで見栄えが良くなりました。
MHのときは多少ゴチャゴチャ感があったのですが、それと比較するとスッキリでブログらしい見栄えになったんじゃないすか?

 

個人的に嬉しいのは、SNSシェアボタンやパンくずリスト、目次などが標準装備となっているところ。
これまではプラグインの追加で補ってたので、これらのプラグインを使用停止できました。細かい設定に対応はできていないようですが、個人的には許容範囲かな。

 

スマホで見るとGoogle AdSense広告だけが左寄せになりうまく表示されませんが、Google AdSenseの問題のようでレスポンシブ広告を多用してるとこうなるみたいです。
ここ最近の問題のようでググって出てきた対処法では改善しなかったので、Googleの対応待ち。

 

しばらくはこのLION MEDIAを使ってみようと思っています。

ダウンロードはこちら↓(要無料登録)
[link url=”http://fit-jp.com/theme/theme_download/” title=”テーマ一覧・ダウンロード │ FIT-フィット” content=”FITが提供するLIONテーマのダウンロードページ”]

 

鉄道模型館

鉄道模型館コンテンツは、2019年中に「てつぱら!新館」へ統合の予定です

 

鉄道模型関連のページを充実させようと思い、サブドメインを使って新しくWPサイトを構築中。
その名もずばり、「鉄道模型館」

まだ未完成ですが、デザインやページ構成はおおむね形になっています。
こっちはシンプルなものにしたいと思い、「Fukasawa」というテーマにしてあります。
白い清潔感のあるデザインとなっていて、シンプルなのでページ速度も気持ち早いように感じます。
[link url=”http://www.andersnoren.se/teman/fukasawa-wordpress-theme/” title=”Fukasawa │ Anders Norén” content=”Fukasawa is a minimal masonry blog theme for photographers and collectors.”]

 

今まで本館に載っけていた鉄道業界のコレクション一覧ページはこの鉄道模型館に移動させています。
[link url=”http://railmodel.tetsupara.org/collection/” title=”鉄道模型これくしょん” content=”このコンテンツでは私の所有する鉄道模型の写真と所属状況を紹介しています。”]

 

この鉄道模型館も足を運んでいただけるとありがたいです。
[link url=”http://railmodel.tetsupara.org/” title=”てつぱら鉄道模型館” content=”このページは、「てつぱら!」を運営するなすのぞみずほの趣味である、鉄道模型に関するコンテンツページです。各地のレンタルレイアウト店を都度ご紹介するほか、自宅レイアウト「押入レイアウト」の制作状況の公開や、各種ペーパークラフトの配布も行っていきます。”]

 


 


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

★オーディオシステムの構成も随時更新しています。

https://test.tetsupara.net/audio





★何でも聞いてください。

https://peing.net/ja/mc313_8507


じゃらん特集一覧
に投稿 コメントを残す

(※過去の)サイトリニューアル 「MH Magazine lite」にテーマ変更してみた

この記事は2017年6月のサイトリニューアルについて記載しています。

 

昨日から進めているサイトのリニューアルは現在6割の進捗度、そこそこ順調に進んでいます~。

テーマの変更

テーマは「MH Magazine lite」に変更しました。自分のような多コンテンツの趣味サイトにはうってつけで、定番のWordpressテーマですね。

http://wp-themetank.com/wordpress-theme-free-portal-mhmagazinelite/

 

↓デモサイト

http://www.mhthemes.com/lite/?theme=magazine_lite

 

ウィジェット配置やCSSによる色変更などデフォルトから軽くいじってあります。
ページ色は以前のデザインの雰囲気を踏襲させつつ、よりWordpressブログらしい作りになったかと思います。

↓参考にしたサイト

Like a Magazine ♫ MH Magazine Lite (ver.2) カスタマイズ① – 基本編

http://cohk.info/archives/867

 

以前のテーマはHPBのものでしたが、固定ページが実質的にHPBソフト上でしか編集が効かなかったりで、カスタマイズ性にどうしても劣るものでした。HPBを入れてないPCで固定ページがいじれないのは不便でした・・・。
今回のテーマ変更でその不便が解消でき、ページ更新がより効率化できますね。

 

ロゴ変更

サイトロゴを3年ぶりに変えてみました。
シンプルな英数字ロゴにしてあります。

ちなみにファビコンは面倒いのでそのまま・・・(笑)

追加したプラグイン

ついでにいくつかプラグインを追加してみました。

■PS Auto Sitemap

サイトマップページを作ってくれます。操作も簡単でした。
ブログカテゴリ一覧と固定ページが表示されるようになっております。

https://bazubu.com/ps-auto-sitemap-27148.html

■WordPress Related Posts

関連記事の表示は、これまではJetpackに付属の機能を使っていましたが見栄えが悪いのでこちらに変えてみました。


なかなかいい表示になったと思います。

WordPress Related Posts – 関連記事を簡単に表示できるWordPressプラグイン

 

■AddToAny Share Buttons

SNSシェアボタンも、アイコンサイズが変えられるこっちにしました。
←ページ途中でも、ページ左側(スマホ左下)に常時表示できるようになっています。

http://katasumi-products.jp/2001.html

■To Top Link

ページのトップ(一番上)に戻れるボタンプラグイン。
スクロールすると右下に出るように作ってみました。

消えつつある公団フォント・・・。゚(゚´Д`゚)゚。

[link url=”http://www.dataplan.jp/blog/wordpress/2283″ title=”WordPressでページトップへ戻るボタンが簡単に設置できるプラグイン「Scroll Back To Top」” content=”ホームページをスクロールした時にページの下の方に出現する「ページトップへ戻る」ボタン。現在どのホームページを見ても導入されることが多くなったと思います。”]

 

<SPONSORED LINK>


 

スマホ表示は・・・

スマホ表示もテーマ変更と各種プラグインによりレイアウトが変わっています。よりWordpressサイトらしくなったでしょうか?

 

残りの4割・・・

ブログ部分は概ねこれで終わったと思いますが、固定ページとこれまでカスタム投稿で入れてたコンテンツ部分はこれから手を入れます。
ブログ要素が強くなってきたので各記事はブログ記事に集約して、それだけがまとめられているようなリンクを作ろうかと思ってます。

あとはパンくずリストも余裕ができれば作りたいですね・・・。

順調に進めば、リニューアル工事は今日中には終われそうです。

 


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

★オーディオシステムの構成も随時更新しています。

https://test.tetsupara.net/audio





★何でも聞いてください。

https://peing.net/ja/mc313_8507


じゃらん特集一覧