ブログ・SNS

WordPressブログカスタマイズの履歴

記事内に商品プロモーションを含む場合があります
ブログカスタマイズの履歴

ブログの見直しをしていたら、いろんなところが気になってきて、ついつい夢中になってカスタマイズしてしまいました。

こういう時にガガッとカスタマイズするのは良いのですが、あとになってどの記事を参考にカスタマイズしたのかを忘れてしまうことが多々あり…。

サク
サク
あれ、これ元に戻すのどうやるんだっけ?

となることもしばしば。

こうならないように、ブログをカスタマイズした履歴と、参考にしたサイト・ブログのリストを残しておきたいと思います。

ちなみに使用しているWordPressテーマは『JIN(ジン)』です。本来であればカスタマイズしなくとも十分に使いやすいテーマです!記事内のいろんな装飾もボタンひとつでできるから楽ちん♪

JINについて見てみる

 

JINのテーマ設定

このブログのJINのテーマ設定

ヘッダーデザインの選択 スタイル9(ヘッダー画像あり)
サイドバーデザインの選択 スタイル4
記事エリアデザイン スタイル2
フッターデザイン スタイル1
フッターのカラム 3カラム
グローバルメニューの
デザイン
パターン1
グローバルメニューの
文字サイズ(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
Facebook 820px × 360px
【Canva(キャンバ)】ブログやインスタグラムの写真の文字入れ・アイキャッチ作成に(PR) ブログに書きたいタイのこと、台湾のこと、たくさん溜まっているのですが、今日はちょっと気分を変えて、ブログやインスタグラムに掲載す...

 

ピックアップコンテンツ用のアイキャッチ画像を作った

ピックアップコンテンツの画像がうるさい感じがしたので、スッキリ見えるようにデザインを統一しました。デザインはCanvaのテンプレートを利用して作成しました。

 

サイドバーにおすすめ記事バナーを設置した

サイドバーにおすすめ記事バナーを設置しました。

 

ブログ村のバナーをオリジナルにした

ブログ村のオリジナルバナー作成機能を使ってオリジナルバナーを作成しました。やわらかい印象になるように、画像を角丸表示するようhtml内にstyleを追加しました。

style=”border-radius: 10px;”

 

スマホ固定フッターを設置&カスタマイズ

スマホ固定フッターを設置し、色をカスタマイズしました。追加CSSに記述しています。カスタマイズはMamimuaさんを参考にさせてもらいました。

 

SNSへのシェアを促すコピーをつけた

シェアボタンの上にシェアを促すコピーをつけました。追加CSSに記述しています。

このカスタマイズはMamimuaさんを参考にさせてもらいました。

 

カテゴリーのボックスナビを作った

増えすぎてしまったカテゴリーを整理して、わかりやすく表示するためにボックスナビを作りました。

参考にさせてもらったのは、ぽんひろさんが運営するぽんひろ.comです。

 

プロフィールボタンを設置した

サイドバーのプロフィール欄に、詳しいプロフィールへのリンクボタンを設置しました。

参考にさせてもらったのは、「おいでよ!ブログはじめてさん」です。

 

スマホの上に戻るボタンの色を変えた

ブログの色を変えたら、スマホの上に戻るボタンが見えづらくなったので、カスタマイズしました。参考にさせてもらったのは「for JIN」です。色を変更するコードのみ参考にさせてもらいました。

 

トップページをサイト型にした<停止中>

現在はこのカスタマイズは利用していません。

トップページをサイト型にしました。参考にさせてもらったのは、ぽんひろさんが運営するぽんひろ.comです。

参考にさせてもらったぽんひろさん、ありがとうございます!

 

路線図をダウンロードできるようにした

バンコクの路線図のPDFをダウンロードできるようにカスタマイズしました。参考にさせてもらったのは、こちら。

ただ路線図に変更があったときの対応が大変なので、現在はGoogle マイマップを使って作成しています。

【2024年】バンコク路線図(BTS, MRT, ARL, SRT)|駅周辺の観光スポット・飲食店を検索可能 バンコクの路線図を作成しました。これまで新しい路線が完成する時にお知らせ記事を書いていましたが、今後はこのページで更新していき...

この記事は、今後カスタマイズするたびに追記していく予定です。

ブログランキング参加中
にほんブログ村 海外生活ブログ バンコク情報へ
にほんブログ村

ABOUT ME
サク / Saku
タイ・バンコク在住(2014年~)。 夫婦ふたり暮らし。 バンコク在住者と旅行者に役立つブログを目指しています。 プロフィール

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です