【当サイトはアフィリエイト広告を利用しています】

今回は大苦戦!秋のブログカスタマイズ祭り第2弾【PC編】

2012年11月26日

秋の紅葉

今回のブログカスタマイズは大苦戦!

福岡は紅葉シーズン真っ只中。昨日今日と週末やっと見に行けた。写真もたくさん撮ってきましたよ。上の写真もiPhoneで撮りました。

ってハナシじゃないわよ。

10月初旬に「秋のカスタマイズ祭り」と題して、大きく5つほどブログに新機能を追加・改良しました。

今回はカスタマイズ祭りの第2弾。いや~、ものっすご苦戦した!!

要するに私がまだまだヘタレだってことなんだけど、ここまで苦労するとは思わず、ここまで時間がかかるとも予想せず。

エントリーを書くのも中断し、カスタマイズ作業を最優先項目にして集中したのだけど、数々のトラブルやバグに見舞われ、結果的に1週間以上かかっちゃった。疲れた~!

ちょいと長くなるけれど、すごく勉強になったことや、カスタマイズを機に知ることが出来た便利ツールなどを後日エントリーで補足していくためもあり、備忘録も兼ねて箇条書きでカスタマイズ項目を書き連ねていきます。

PC版カスタマイズ内容・トップページ編

1. メニューバーのデザイン等を変更

screenshot_201211_036

◆白い背景色をベースカラーの緑に変更。
◆最近は更新してない「仮想散策旅行」を外し、記事数が増えてきたコンテンツたちを追加。
◆全体をセンタリングさせた。

2. ベースカラーを基本とした配色に変更

◆配色ツールを利用して、グリーン基調は変えず全体の色彩バランスを見直し。

3. カテゴリーとタグをアイキャッチ下に移動

screenshot_201211_037

◆これまでアイキャッチ画像の右側に表示していたカテゴリーを下側に移動。
◆表示していなかったタグの表示も追加。
◆イエローだったタグの背景色をグリーンに変更。

4. カテゴリー一覧とタグ一覧の表示件数を修正

◆カテゴリ一覧、タグ一覧で10件しか表示されてなかった不具合を修正(単なる私のプログラミングミス)。

PC版カスタマイズ内容・サイドバー編

5. プロフィール欄をフッターからサイドバーに移動

screenshot_201211_038

↑こんな感じで、スクリーンショット画像付きで記事をシェアして頂いたときに、

screenshot_201211_039

↑こんな風にTwitterアイコンが含まれてると認知度が多少アップするなぁ、と気付いたので移動。

6. 検索機能の変更

◆WordPress標準の検索機能を廃止。検索結果の本文が表示されず不便だったので。

screenshot_201211_042

◆Googleカスタム検索を導入。

screenshot_201211_040

↑検索結果にアイキャッチ画像も表示されるし、検索文字に一致した箇所を太文字で表示してくれるから分かりやすい。この機能が欲しかった。

screenshot_201211_041

↑PC版の検索結果画面では、左上にあるブログのロゴをクリックするとブログのトップページに戻ることが出来る。これもブログと同じ機能。

PC版カスタマイズ内容・フッター編

7. カテゴリークラウドの改造

screenshot_201211_043

◆色彩バランスを考慮して青文字から黒文字に変更。

8. タグクラウドをサイドバーから移動し改造

screenshot_201211_044

◆サイドバーに設置してたタグクラウドをフッターに移動。
◆タグ1つ1つに装飾してた黄色の背景色を廃止。
◆カテゴリークラウドと同じく黒文字で統一。

9. 月別アーカイブのウィジェットを新設

screenshot_201211_045

◆記事数も増えてきたので月別アーカイブへのリンクを追加。

10. リアルタイムツイート表示のウィジェット廃止

◆個人に対するリプライまでも表示されるのがイヤだった。除外する方法があるのかもしれないけど作り直す余裕がなかったので一旦廃止。

11. ザ・インタビューズのウィジェットを廃止

◆飽きたからw 特に面白い質問も来ないし。

PC版カスタマイズ内容・エントリー編

12. アイキャッチ画像周りをいろいろ変更

screenshot_201211_046

◆記事作成日の表示を変更(トップページの表示方法は使わず、シンプルに白背景で)。
◆タグ表示を追加
◆抜粋文の表示を廃止(本文と内容が重複するので)。
◆カテゴリー、タグ、SNSボタンを全てアイキャッチの右側に表示させるよう変更。

13. 記事タイトルH2タグの変更

◆文字フォントを大きくした。
◆左線などのデザインを変更(CSS設定)。

14. 区切りの見出しH3タグの変更

screenshot_201211_048

◆左線などのデザインを変更(CSS設定)。

15. RSS購読お願い欄の変更

◆ボックス最上部に太字で書いてた「お願いします!」を削除。

16. 関連記事欄の変更

screenshot_201211_047

◆5件表示(1行)から10件表示(2行)に増やした。
◆アイキャッチ画像の外枠線(薄いグレー)を消した(カッコ悪かったので)。

その他

17. 記事タイトル先頭に「」を付ける

◆いろんなブログでお見受けするので、「ああ、このタイトルはりくまろぐだね」とすぐ認識してもらえるよう、私もマネすることにしました。

18. 広告(Google Adsense)を全て見直し

◆カスタムチャネルを全て個別に設定(アクセス解析に利用するため)。
◆トップページのヘッダー部分に横長のバナーを新設。他にも諸々と変更。

19. パーマリンク(記事URL)を変更

旧設定:年+月+カテゴリー+記事名 (例:/2012/11/walking/2012kokura/)

新設定:カテゴリー+記事名+拡張子html (例:/walking/2012kokura.html)

◆パーマリンク変更に伴うリダイレクト設定を実施(=リンク切れの防止)。

※当ブログのエントリーを紹介頂いてるサイトやブログで、「リンク切れ」に関してはリダイレクト設定により回避できてるはずなのですが、もしリンク切れが発生していたら誠に申し訳ありません。

※上記と同様の理由により、当ブログのスクリーンショット画像が表示されない場合があります。新しいURLであれば正常に表示されます。申し訳ありません。

※過去に頂いてきた「はてなブックマーク」及びFacebookの「いいね!」は、パーマリンク変更に伴い当ブログ上ではリンク切れ扱いで非表示となりました。あくまで「表示されなくなっただけ」ですので、実際のブックマーク数等は消えておりません。

備考

スマホ版のカスタマイズ内容も書いていたのだけど、長くなり過ぎたので「PC編」と「スマホ編」の2つに記事を分割しました。スマホ編は後日アップします。

また、各カスタマイズ内容の一部に関しては補足解説として、もうちょっと詳しい内容や具体的な作り方などを書いていく予定にしています。

-WordPress
-