カタテマゴト

WordPressのテーマの変更や、その他変更したアレコレをまとめてみた。

time 2016/03/05

ebb8b568-d08e-4456-ba5f-ebeedaf3410c
中々時間が取れなかったり体調を崩したりでまとめきれていなかったのですが、ようやく記事に纏めることが出来ました。

sponsored link

はじめに

現在私のブログ『カタテマゴト』はWordPressで運用しています。
一昨年前まではライブドアブログを利用していたのですが、カスタマイズ性の高さを始めとした独自性を高めるため、ライブドアブログからWordPressへとお引越しをしました。
icon-arrow-circle-right 簡単にライブドアブログからWordPressへ移行する方法ための準備とその方法とは。

レンタルサーバーは、ワードプレスブロガーさんの大多数が使用されているエックスサーバー icon-external-link  ではなくより安価なラクサバ icon-external-link  と契約しています。

独自ドメインは、国内最大手お名前.com icon-external-link  でドメインを取得しています。
※将来サーバー引越しもあるかも!?と思っている人は、レンタルサーバー会社で独自ドメインは取得しないほうが良いです。
もしレンタルサーバーの会社を引っ越す際、設定が面倒くさい事になる場合があります。
出来れば上記のようなお名前.com icon-external-link  で取得することをオススメします。

WordPressのテーマをマテリアルへ変更

そんな我が『カタテマゴト』ですが少し前に、WordPressのテーマをEnjiさん作成のstinger5 icon-external-link  からNobuoさん作成のマテリアル icon-external-link  に変更を行いました。

変更した一番の理由としては、2年以上続けてきたブログ記事が徐々に貯まってきた為、カテゴリ別に区分けしたかったのと、トップページをタイル型に表示することに興味が湧き始めたからでした。

先ず記事をカテゴリ別に表示することについて、これはブログの方向性によって大きく変わる部分でしょうが、私のブログは言わば雑多ブログのため、大きく分けて「家計管理」と「旅行」と「ライフ系」の3つに分かれます。
これらのカテゴリが一色単に記事として流れていくことに読みづらさを感じ始めました。

「関連記事」などとして同じカテゴリの表示にはなるのですが、トップページの時点で上手く分かれて表示されると尚見やすいのではないかなと思い、色々と調べた結果無料テーマである『マテリアル』にたどり着きました。

このテーマは正にカテゴリ毎に自動で分別してくれる為、自分がイメージしていたトップページへと容易に変更ができました。

また、このテーマは初期段階でほぼ完成形であり、コードを触るカスタマイズなど不要で簡単にカスタマイズが出来る仕様になっています。

stinger等のテーマもカスタマイズ性の楽しさはある反面、私のような素人にはハードルが高い部部分も多くあった為、テーマ変更時に結構な時間が費やされたことを記憶しています。

トップページにスライドページを設置

次に、トップページにピックアップ記事などを強調したいと思いスライダーを設置することにしました。

しかしこれがかなりの難関で、文字化けしたり形が崩れたり、設定自体が上手く行かなかったりとかなり苦労して10日間位掛けて5種類位のスライダープラグインを試し、ようやくこの形にたどり着きました。

中々マテリアルと相性が良いプラグインが無い中、やっと見つけたのが『SlideDeck 2 Lite』というプラグインです。
このSlideDeck 2 Liteは現在3 Liteもリリースされていますが、3では上手く行きませんでした。

あくまでこの、2liteでしか上手くセッテング出来ず、またこれでも表示が崩れたりなどするため、わからないなりに一所懸命調べ、数々のサイトを参考にさせて頂きました。
そんな素人カスタマイズですが、同じようにスライダー挿入に悩んでいる方へ幾つかのサイトから引用させて頂いたコードを記述しておきます。
先ず、style.cssの部分には

/****  home.phpのスライダー記述に関連して挿入  ****/
.centerad{
text-align: center;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-left : auto ;/*-----IE用-----*/
margin-right : auto ;/*-----IE用-----*/
}

と入力しhome.phpの部分には

<?php if(!wp_is_mobile()): ?><!-- スマホ非表示コードです -->
<!-- スライドショー追加したものです -->
      <div class="centerad">

 <?php echo do_shortcode( "" ); ?>
</div>
<!-- スライドショーここまで -->
<?php endif; ?><!-- スマホ非表示コードです -->

と入力することで、サイズもほぼピッタリ、そしてスマホの場合には表示されないようになりました。
ただ、くどいようですが、私は構文はさっぱりの素人なのでご参考程度にとどめておいて下さい。

トップページメニューの変更やその他変更点

そして、細かいところでトップメニューが以前はアコーディオン式になっていましたが、マテリアルではその機能が有効にならないため、Menu imageプラグインを用い、再度手直しを行いました。

また、マテリアルの便利が良い反面、全て設定一つで引っ張られてしまう背景色について、ヘッダーとhタグの背景色が単一にならないよう、!important; というコードを書くことで強制的に色分けできることを知りました。

他にも細かいところをちょこちょこイジりながら、何とか現在の形に落ち着くことが出来ました。

タイトルロゴを外注に依頼

そして最後に、これも前から手がけたかった「タイトルロゴ」の変更についてです。

以前、ココナラというクラウドワーキングサイトでロゴデザインの依頼を行いロゴの作成をしてもらいました。

しかし、この時はロゴのみの依頼だった為、タイトル文字は自分で作成し使用していました。
ただ、その自作のセンスでは納得することが出来ずプロにお願いしたいと思っていたところ、とても自分好みの作家さんに出会うことが出来ました。

そこで、今まで使用していたこのロゴの
cropped-rogo320.2.png
『カタテマの時間管理を行う』という意味などを伝え、新たなロゴ作成を依頼することにしました、

待つこと1週間で現在の新しいロゴも出来上がり、これで大方カタテマゴトのリニューアルが完了しました。
katatemagoto_logo

まとめ

  1. テーマをstinger5からマテリアルへ
  2. トップページにスライドページを設置
  3. メニューアイコンを一新
  4. タイトルロゴを変更

 

文字にすると、たったこれだけのことですが、素人にはこれだけのことでもかなりの時間と労力を費やしたのでした。

ブログは記事を書くのも楽しいですが、このカスタマイズをしている最中が最も集中して作業しているかもしれません。

こういったカスタマイズはpvアップや収益化にはあまり直結しませんが、楽しくブログを続けていくには必要なエッセンスですね。

sponsored link

down

コメントする






sponsored link

にほんブログ村 その他生活ブログ 家計管理・貯蓄へ
デル株式会社


HP Directplus -HP公式オンラインストア-