flower border

愛愛日記~クローン病ブログ

難病クローン病を15歳で発病 3年絶食したもも姫のブログ。炎症性腸疾患(IBD)クローン病の症状や治療、食事療法、料理など愛の日記。 ピアノを弾いています。

スポンサードリンク

FC2ブログ テンプレート変更。サイドバーのリンク色変更などカスタマイズ..

Categoryブログのこと
ブログのテンプレート(デザイン)を変更してみました。

前のFC2ブログの薔薇柄のテンプレートは3年以上同じものを使用していました。
新しいのに変えたいなとずっと思っていたのですが、
他に気に入ったデザインのものがなくて長い間変えずに使っていました。

前の薔薇柄のテンプレートは柄は好きだったのですけど、
3カラムのテンプレートだったこともあり 記事を書く部分とサイドバーの幅が狭くて
もう少し幅が広いといいなと思っていました。
自分で幅を変えようとしたのですけどうまくいきませんでした…

今はFC2ブログのテンプレートでレスポンシブル対応のテンプレートが色々出ているので、
その新しいテンプレートのほうがいいかなと思い、
レスポンシブル対応のデザインに変えました。


ブログのテンプレートを変更する作業は結構大変でした。
そのまま変更するだけなら簡単にできますが、
新しく選んだテンプレートの中で変えたい部分がいくつかあり、
HTMLとスタイルシートを編集するのに時間がかかりました。
カスタマイズですね。

もも姫はパソコンに詳しくないので
カスタマイズのことを詳しく書かれているサイトを参考にしながら編集しました。

でも、ブログを5年書いていて
アメブロやライブドアブログでも書いていたことがあるので
その間に少しは勉強して 簡単なことならできるようになりました。

ブログのテンプレートを変更する時にHTML編集とスタイルシート編集で行ったことは、
まず、アクセス解析のタグをHTMLに入れること。

アクセス解析のタグを入れる部分は
新しいテンプレートのHTMLの中に親切に書かれていたのですけど、
その部分に入れるとブログ画面の上の色が剥げて変になってしまうので、
それよりも少し下側の部分に入れてみました。

下側に入れると それはそれでまた気になることがあったのですが、
でも上に入れるよりはマシだったので それでいいことにしました。
アクセス解析はほとんど見ていないのですが、一応入れておきました。

それから、
ブログ記事本文の文字やサイドバーの文字が小さくて読みにくい感じだったので
スタイルシート内を変更して大きくしました。
文字の大きさや色、フォント等はこれまでにも何度か変更したことがあり、
簡単に変えられました。

そして、リンクの色も変更しました。
リンクの色を変えたり色を決めるのには時間が多くかかりました。

全体のリンク色はすぐに変えられたのですが、
サイドバーのリンク色がどうしても変えられなくて、
スタイルシート内を色々変えて試してみたのですけどよくわかりませんでした。

サイドバーのリンク色は、すごく薄い色で見にくかったので
そこはどうしても変えたかったんです。

それで、ネットで調べて、
スタイルシート内のサイドバーの項にリンク色を変える文字を追加してみました。
そうしたら、サイドバーのリンクの色が変わり、
あ~やっと変えられた~と思って喜びました。

でも… テンプレートを更新変更する前にプレビューでよく見て確かめてみると、
一部のレイアウトが崩れていたので その方法はできませんでした。。

それで、サイドバーのリンク色変更について詳しく書かれているサイトの中で、
『スタイルシートの一番下に全体のリンク色を記入する』という方法があったので、
それをしてみたら ようやく
レイアウト崩れもなくサイドバーのリンク色を変えることができました。

サイドバーの色が濃くできなければ このテンプレートは使えないなと思っていたので
変えられて良かったです。

そのリンクの色を選ぶ時も、どの色がいいかなと色々試していて長く時間がかかりました。
青っぽい色でも緑が混ざったような青色があったり、
濃い色や薄い色、明るい色、暗い色と、すごくたくさんの色があるので
決めるのが難しかったですけど、とりあえずひとつの色に決めて、
あとで気になったら その時にまた変えることにしました。

   花ハート 2016.7.13ブログ

これまで3カラムのテンプレートだったのを2カラムに変えたのと
レスポンシブル対応のテンプレートに変えたので、
テンプレートを変更した直後にもいくつかしないといけないことがありました。

テンプレート変更後にしたことは
⚫︎個別ページの記事下の関連記事や広告を入れる場所の調整

関連記事の下にシェアボタンがあったので
関連記事の上にシェアボタンがくるようにHTMLを変更

⚫︎トップページに記事をいくつか並べて表示するタイプのテンプレートに変更したため、
パソコン画面でこれまで2つ表示にしていたトップページの記事数を10記事に増やす作業

⚫︎サイドバーの幅が広くなったので、広告サイズの変更

⚫︎3カラムから2カラムに変わり、スマホ版表示をしない設定に変えたので、
スマホ画面で見た時のことを考えながらプラグインの位置の調整をしました。

とりあえずこれだけして
あとまだ気になるところは これから少しずつ調整しようと思っています。

いま一番気になっていることは、
テンプレートの記事を書く部分の幅が大分広くなったので
これまで書いていたブログの文章の改行の仕方だと
パソコン画面で見た時に大分読みにくいところがあると思うので、
改行を変更しないといけないな~と思っています。

でも、パソコンで見て読みやすい改行にすると
スマホで読みにくくなってしまうような気がするので難しいです。。

パソコン画面でのテンプレートの記事を書く部分の幅が広すぎるのも
スマホで見た時と両方考えながら文章を書くと
改行をする場所が難しくてちょっと不便な感じが…

記事部分の幅が広すぎて
右のほうに余白がたくさんできてしまうことが気になります。
文字をもう少し大きくするといいかな~?とか考えたりしていますが、
また色々試しながら考えてみます。

これまで書いたブログの文章が
パソコン画面でかなり読みにくくなっている部分があると思いますが、
これから少しずつ 読みやすいように直していきたいと思います。

スマホ版のほうでは、
これまでよりも色々なことが見られるようになっていると思います☆

使ってみて初めてわかることがあるので、しばらくこのテンプレートを使ってみて
気になることがあれば またなにか考えることにします。

スポンサードリンク
[関連記事]
スポンサードリンク