とうつきの備忘録

地味系OLの備忘録。DIY・節約・ミニマリストのあれこれ。

ブログのデザインを変更しました

これまでブログのデザインは、始めた時に何となく選んだテーマ・背景色を使い続けていました。編集できるとは知っていたものの、面倒でついつい後回しに…。今回、さすがにもうちょっと見やすいデザインにしたい!と思いチャレンジしてみました。変更した場所と、変更方法の備忘録です。f:id:toutsuki:20181104155526j:plain

photo by ぱくたそ-フリー素材・無料写真ダウンロード

 

 

これまでのデザイン

f:id:toutsuki:20181104152532p:plain

こんな感じでした。公式テーマの「Block Memo」で、背景色がミントグリーン。シンプルなデザインが良い&ミントグリーンが好き、ということでこれにしていました。「Block Memo」はシンプルながら、記事のタイトルがミントグリーンなんですよね。可愛い。

何となく選んだにしては気に入っていたのですが、月日が経つうちに気になる点がちらほら見えてきました。

  • サイドバーがない…正しくはあるのですが、記事の最下部なんです。皆さんのブログを見る中で「ページの右か左にプロフィールが表示されているのに、私のブログにはない…」と思ったら下の方にありました。この「Block Memo」テーマが、記事最下部にサイドバーを表示する形式でした。サイドバーは右側に欲しいので、テーマを変更しようかと思いました。
  • ミントグリーンの主張が激しすぎ…相変わらず色としては好きなのですが、ブログがミントグリーン一色なのに飽きてきました。変えてみたいです。
  • カテゴリー表示がない…最近記事をカテゴリー分けしたのですが、どこにもカテゴリーごとの記事一覧へ飛ぶリンクがありませんでした。調べたところ、サイドバー設定で表示を変えられるとのこと。
  • プロフィール表示に誤字…一度編集したときに消し忘れた「・」があり、とても気になりつつもどこから編集するのか忘れてそのままに。直したい…。

 

①テーマを変更

「公式テーマ:Block Memo」から「公式テーマ:Report」へ変更しました。選んだ基準は「シンプル」で「サイドバーが右にあるもの」。公式テーマ以外をインストールするのはちょっとハードルが高いのでまた今度で…。「Report」シンプルで可愛いですよね。f:id:toutsuki:20181104152533p:plain

変更方法はダッシュボード画面>デザインから。パレットマークの「デザイン」タブから好きなテーマを選んでクリック→「変更を保存する」ボタン。

 

②背景画像を変更

これまで単色の背景色だったのを、背景画像に変えてみました。ミントグリーンからモノクロ風に変更です。自分で画像をアップロードもできるんですね。でもあんまり派手なデザインにするつもりはないから、今後も既存のもので十分かな。f:id:toutsuki:20181104152534p:plain

変更方法は同じくダッシュボード画面>デザインから。スパナマークの「カスタマイズ」タブから「背景画像」を選んで好きな画像をクリック→「変更を保存する」ボタン。画像ではなく単色にしたい場合は背景色にしたい場合は、スパナマークの「カスタマイズ」タブから「背景色」を選んで好きな色をクリック→「変更を保存する」ボタン。 

 

③サイドバーに「カテゴリー」を追加

これはネットで調べました。

help.hatenablog.com

以下、上記記事を参考にしています。同じくダッシュボード画面>デザイン>スパナマークの「カスタマイズ」タブ>「サイドバー」。f:id:toutsuki:20181104152535p:plain

既存はこの5つで「カテゴリー」はないので、「+モジュールを追加」をクリック。

「カテゴリー」クリックするとどうやって表示するか選べるので設定して→「適用」ボタン。f:id:toutsuki:20181104152536p:plain

サイドバーに「カテゴリー」が増えて、プレビュー画面でも追加されています。おぉー。 

f:id:toutsuki:20181104152537p:plain

ついでにいらないサイドバーを削除&並び替えしておきます。サイドバーのところの「削除」をクリックすれば削除され、「三」みたいなマークをドラッグすれば並び替えができます。

f:id:toutsuki:20181104153736p:plain

こんな感じにしました。「カテゴリー」は見る人が多いと思うので上へ、「リンク」はいらないので削除しました「自己紹介」は「プロフィール」のタイトルを変更したもの。「最新記事」は「編集」ボタンから、記事のサムネイルを30×30picで表示するように変更しました。

 

④プロフィール文の修正

サイドバーの中に「プロフィール」があったので確認してみると…。

f:id:toutsuki:20181104152540p:plain

ありました!誤字の「・」!ずっとこれを修正したかったのです…。ここにあったんですね。せっかくなので文章も少し変えました。

 

ちなみに:「デザイン」画面はめちゃくちゃ重い

普段から「見たまま編集モード」で記事を書いているとたまにインターネットが固まる私のパソコン。「デザイン」画面はさらに重いらしく、こまめに保存しないと応答なし状態になって編集履歴がすべて飛びます。こまめな保存大切。

f:id:toutsuki:20181104152541p:plain

デザイン画面を操作していて応答なしになり、インターネットが強制終了したときのタスクマネージャー。メモリぎりぎりまで頑張って使っていたんだなぁ。

 

これから

今後もブログデザインは気が向いた時に変更していこうと思います。シンプルをベースに、ちょっとかわいいデザインがいいですね。

お読み下さりありがとうございました。

 

ーこれから変えたいor変え方を調べたいものー

・ブログトップに画像を載せる

スマホ画面の文字サイズ小→中へ

・カテゴリーを上に表示する

・公式テーマ以外のテーマ使用