1年位前に、FC2のブログで、小説を書いていたことがありました。

 

黒歴史です。

 

でも、さらっと、このブログのメニューにリンクさせています。

 

ふと、どんなのを書いていたんだっけなあと、思って、読んでみたら、時間が経っているのに、自分の好きな感じのままだったので、気が向いたら、また続きを書きたいなって思いました。

 

 

そういうわけで、心機一転、FC2の方のブログの外観も、カスタマイズすることにしました。

今回は、カスタマイズのビフォーアフター的なブログです。

 

 

ビフォー

 

名称未設定-1


 

こちらがカスタマイズ前のブログトップです。

テンプレートは、共有テンプレートの「mydiary]というものを、お借りしています。

デフォルトのままの状態です

 

今回の改善点は、4つです。

1、メニューバーの要らないリンクを消す。SNSのアイコンも

2、ヘッダーの画像とサイズを変えて、中央に。タイトルも中央に

3、メインコンテナと、サイドバーの幅を小さくして、真ん中によせる

4、フォントの種類、サイズ、行間を好みに変更する

 

 

アフター

 

名称未設定-2

 

テンプレートの編集画面で、CSSを少しいじれば、このくらいのカスタマイズはできます。

 

デザイン的に、それほど流行のものでなくてもいいし、難しいことはしたくない。

ただ、すっきりとシンプルで、みやすいテーマにしたい。

という方には、このくらいでちょうどいいと思います。

 

 

いじったところ

 

いちおう、どこをどういじったのか、記録しておきます。

よろしければ、ご参考になさって下さい。

 

①メニューバーの要らないリンクを消す。SNSのアイコンも


メニュー削除
トップナビ削除


 

まずは、この2つの部分です。

 

この部分に限っては、CSSではなく、HTMLをいじります。

 

いじるというか、要らない部分を消す作業です。

 

ぼくは、メニューにある、「HOME」以外は必要なかったので、「menu」の、「home」へのリンク以外は、すべて削除しました。

 

TwitterやFacebookへのリンクですが、これも、ぼくはTwitterだけでいいと思ったので、メニューと同じように、不要なものは消しました。

 

ちなみに、消してしまった部分は、元のコードがどうだったか忘れてしまって、復元できないので、メモ帳に元のコードを全部コピーして、保存しておくと安心です。

デフォルトに戻すだけなら、いっかいテンプレートを管理画面から消して、もう一度借りてくればおっけーです。

 
テンプレートの複製と言う機能もありますので、それを利用して、バックアップを取る方法もあります。
 

 

ではつぎに

②ヘッダーの画像とサイズを変えて、中央に。タイトルも中央に

 

これも簡単です。

CSSをいじくります。

ヘッダー変更

まずは、このように、ヘッダーの大きさと位置を指定します。

左の状態がデフォルトで、右が書き換えたものです。 

 

画面全幅が、100%という考え方で、数値を決めていきます。

ヘッダー画像の大きさを80%、両端の余白を10%ずつにすれば、合わせて100で、ぴったりです。

 

「margin」というのは、コンテンツの周囲の余白を指定するもので、4つの数字を指定する場合、「0 10% 0 10%」とすると、「上 右 下 左」と指定することになります。

これで、左右に10%の余白を指定出来ました。

 

「text-align」と「background-position」の値を、「center」として、画像と、タイトルのテキストを、中央に表示させます。

 

ちなみに、背景画像の変更は、管理画面で、画像ファイルをアップロードして、その画像のURLをコピーしておきます。

そして、上の画像の「background-image:url();」の()のなかに、そのURLを貼り付けます。

 

 

つづいて

③ メインコンテナと、サイドバーの幅を小さくして、真ん中によせる

 

人間って、目に見える範囲の、中央に注意が向きやすいので、ぼくは、なるべく中央にコンテンツをよせるのが、いいと考えています。

 

メインサブコンテンツ


 

こんなふうにします。

ここでも、それぞれ指定した幅の合計が、100%になるようにします。

 

で、このときに、メインとサイドのコンテンツ幅の合計が、80%になっているのがわかります。

②の、ヘッダーを調整するときにも、画像サイズを80%にしました。

 

なので、ちょうどいい具合に、幅がそろっています。

 

 

と、いいたいとこなんですが、

名称未設定-2

こんなかんじで、コンテンツ幅と、ヘッダーの幅が、ぴったりではないんです。

これの原因は、ぼくにはわかりません。

 

でも、このほうが、ちょっと型にはまってないかんじが、かっこいいなって思うので、今回はラッキーです。

 

 

最後に

④フォントの種類、サイズ、行間を好みに変更する

 

これは即行です。

 

フォントサイズ

 

「.blogpostp」というコードを見つけて、字の大きさと、行間を指定するだけです。

 

行間は「line-height」で指定します。

フォントサイズの2倍の大きさにすると、読みやすいです。

 

フォントの種類は、デフォルトのものを、気に入ったので、そのままにしてあります。

変更するのなら、「body」の{}の中に「font-family: ”フォントの名前”;」というように、指定してあげれば大丈夫です。

フォントは、どのブラウザでも見れるものが望ましいので、間違っても、拾ってきたオリジナルフォントを、指定しないでくださいね(´・ω・`)///

 

 

おまけ。プラグイン


ぼくは、RSSや、カテゴリも必要なかったので、管理画面の「プラグインの設定」から、不要なものを削除しました。

これは、公式プラグインに対応しているテンプレートでないとできません。 
公式のテンプレートなら、全て対応しています。

戻したいときは、プラグインの設定から、すぐにもどせます。

「プロフィール」「最新記事 」「月別アーカイブ」くらいあれば、ぼくの場合は足りるんです。
ずっと同じ小説しか連載しませんので、カテゴリはいちばん要りません。 

「アーカイブ」を消してしまうと、トップにおさまりきらない、過去の記事が表示できなくなるので、これは必要です。

 

 

おつかれさまです

 

はい!以上です!

 

どどどどうでした?

できました?

 

わかりにくいところなど、ご指摘くださいませー(*´ω`*)

 

つかれますよねえCSSの編集って…

 

ではまた!びしっ