趣味

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
Facebook820px × 360px
【Canva(キャンバ)】ブログやインスタグラムの写真の文字入れ・アイキャッチ作成に(PR) ブログに書きたいタイのこと、台湾のこと、たくさん溜まっているのですが、今日はちょっと気分を変えて、ブログやインスタグラムに掲載す...

 

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

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

 

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

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

 

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

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

style=”border-radius: 10px;”

 

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

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

 

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

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

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

 

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

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

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

 

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

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

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

 

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

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

 

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

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

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

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

 

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

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

以下の記事でダウンロードできるようになりました。ありがとうございました。

バンコク路線図
【最新版】バンコク路線図2019年12月現在2019年12月現在のバンコクの路線図です。旅行でいらした方が利用しそうな範囲に絞って作成しました。PDFダウンロード可能です。...

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

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

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

COMMENT

メールアドレスが公開されることはありません。