ブログの見直しをしていたら、いろんなところが気になってきて、ついつい夢中になってカスタマイズしてしまいました。
こういう時にガガッとカスタマイズするのは良いのですが、あとになってどの記事を参考にカスタマイズしたのかを忘れてしまうことが多々あり…。
となることもしばしば。
こうならないように、ブログをカスタマイズした履歴と、参考にしたサイト・ブログのリストを残しておきたいと思います。
ちなみに使用しているWordPressテーマは『JIN（ジン）』です。本来であればカスタマイズしなくとも十分に使いやすいテーマです！記事内のいろんな装飾もボタンひとつでできるから楽ちん♪
目次
JINのテーマ設定
このブログのJINのテーマ設定
| ヘッダーデザインの選択 | スタイル９（ヘッダー画像あり） |
|---|---|
| サイドバーデザインの選択 | スタイル４ |
| 記事エリアデザイン | スタイル２ |
| フッターデザイン | スタイル１ |
| フッターのカラム | ３カラム |
| グローバルメニューの デザイン | パターン１ |
| グローバルメニューの 文字サイズ（PC用） | 15px |
| テーマカラー | #97c1b2 |
| アクセントカラー | #97c1b2 |
| 背景色 | #ffffff |
| ヘッダーの背景色 | #f4fcf9 |
| タイトル文字色 | #737373 |
| メニューの文字色 | #ffffff |
| メニューの背景色 | #97c1b2 |
| SNSボタンの色 | #ffffff |
| フッターの文字色 | #545454 |
| フッターの背景色 | #f4fcf9 |
| リンクの色 | #545457 |
| リンクにマウスを合わせたときの色 | #008db7 |
| サイト内の文字色 | #545454 |
| スマホ専用メニューの文字色 | #ffffff |
| スマホ専用メニューの背景色 | #97c1b2 |
| インフォメーションバーの背景色 | #dcd7c5 |
| 記事中のアイコンの色 | #97c1b2 |
| ロゴとフレーズの文字サイズ | 30 |
| ロゴとフレーズの上下の余白 | 12 |
| 【スマホ用】ヘッダーロゴとヘッダーフレーズの文字サイズ調整 | 90 |
| ロゴのサイズ | 1,000px × 100px |
| ヘッダーのサイズ（PC用） | 2,400px × 400px |
| ヘッダーのサイズ（スマホ用） | 1,500px × 500px |
各種SNS用のヘッダー
各種SNS用のヘッダーをブログデザインとそろえました。ヘッダーデザインはCanvaで作成しました。
| SNS | ヘッダーのサイズ |
|---|---|
| YouTubeとTwitter （共用） | 2,048px × 1,152px |
| 820px × 360px |
ピックアップコンテンツ用のアイキャッチ画像を作った
ピックアップコンテンツの画像がうるさい感じがしたので、スッキリ見えるようにデザインを統一しました。デザインはCanvaのテンプレートを利用して作成しました。
サイドバーにおすすめ記事バナーを設置した
サイドバーにおすすめ記事バナーを設置しました。
ブログ村のバナーをオリジナルにした
ブログ村のオリジナルバナー作成機能を使ってオリジナルバナーを作成しました。やわらかい印象になるように、画像を角丸表示するようhtml内にstyleを追加しました。
style=”border-radius: 10px;”
スマホ固定フッターを設置＆カスタマイズ
スマホ固定フッターを設置し、色をカスタマイズしました。追加CSSに記述しています。カスタマイズはMamimuaさんを参考にさせてもらいました。
SNSへのシェアを促すコピーをつけた
シェアボタンの上にシェアを促すコピーをつけました。追加CSSに記述しています。
このカスタマイズはMamimuaさんを参考にさせてもらいました。
カテゴリーのボックスナビを作った
増えすぎてしまったカテゴリーを整理して、わかりやすく表示するためにボックスナビを作りました。
参考にさせてもらったのは、ぽんひろさんが運営するぽんひろ.comです。
プロフィールボタンを設置した
サイドバーのプロフィール欄に、詳しいプロフィールへのリンクボタンを設置しました。
参考にさせてもらったのは、「おいでよ！ブログはじめてさん」です。
スマホの上に戻るボタンの色を変えた
ブログの色を変えたら、スマホの上に戻るボタンが見えづらくなったので、カスタマイズしました。参考にさせてもらったのは「for JIN」です。色を変更するコードのみ参考にさせてもらいました。
トップページをサイト型にした＜停止中＞
トップページをサイト型にしました。参考にさせてもらったのは、ぽんひろさんが運営するぽんひろ.comです。
参考にさせてもらったぽんひろさん、ありがとうございます！
路線図をダウンロードできるようにした
バンコクの路線図のPDFをダウンロードできるようにカスタマイズしました。参考にさせてもらったのは、こちら。
ただ路線図に変更があったときの対応が大変なので、現在はGoogle マイマップを使って作成しています。
この記事は、今後カスタマイズするたびに追記していく予定です。
ブログランキング参加中
にほんブログ村
