ブログのテンプレートの幅を変えてみる

2017.12.02 (Sat)
P5109860.jpg

こんな話興味ないって人は下に紹介した音楽だけ聴いてもらってね


一回はまるとどうしても熱中してしまって、結局パソコン、プログラム関連の連載になってしまいました。南インド紀行、早く書き上げないともう一年になっちまう。
ということで、たぶん、今回で最後。せっかくやった作業なので何をどうしたのか簡単に書いておきます。参考になれば。

FC2でブログを始めて以来、共有テンプレート、『potar』さんが提供している grey_paisley というテンプレートを使わせてもらっています。シンプルで飾りがなく、何よりバックが真っ黒じゃなくて暗いグレーなところがいい。余談ですが真っ黒の画面だと文字がハレーションを起こして読むのに疲れてしまう。真っ黒なテンプレ使ってる人は読者の滞在時間にもかかわってくるらしいので再考したほうがいいかもしれません。でも、暗色系って写真がきれいに見えるんですよね。
ただ、このテンプレート、一つだけ不満なところが少々幅が狭くて狭苦しいところ。はなからプログラム改変なんてこの私に出来っこないと思ってたのでそのまま使わせてもらってました。

今回SSL対応ということでいろいろいじっているうちに、よっし、ついでにやってみようと思い立ってプログラムを開いてみたら、あれ、何となく読めるじゃん♪ 実は一度『Java』をかじったことがあるんです。で、やってみたら意外と簡単にできました。

それもこれも、製作者のプログラム記述がとってもわかりやすかったから。では、ブログの幅を広げるために今回何をやったのか、簡単に書いてみます。素人が書いてますからきっと誰でもわかる文章になると思ってね。





それでは、まずテンプレートの設定からプログラムの編集に入ります。このとき忘れずに複製をとっておいてください。そうしないと後でどこをいじったかわからなくなっちゃいますから。
で、開いたプログラムのどこを見ていけばいいかというとHTMLのほうではなくて『スタイルシート編集』のほうです。ブログのレイアウトや文字の大きさ、色なんかを決めてるところですね。
では、まずはどこから手を付けていくかというと、ページの全体、ブログ全体の幅から決めてゆきます。




元のプログラム

/*---------------------コンテンツ全体----------------------*/
#container{
width: 950px;   ☚ この部分
margin:0px auto;
text-align:left;
background: url(https://blog-imgs-55.fc2.com/p/o/t/potar/blackgrain-bg-paisley.png) center 5px fixed no-repeat;
}







コンテンツ全体、どこの箇所のプログラムなのか見出しで書いてもらっているので作業がとっても楽です。おかげで私のような素人でも簡単です。

さて、これを





改良後

/*---------------------コンテンツ全体----------------------*/
#container{
width: 1130px;      ☚ この部分
margin:0px auto;
text-align:left;
background: url(https://blog-imgs-55.fc2.com/p/o/t/potar/blackgrain-bg-paisley.png) center 5px fixed no-repeat;

}






950から1130に大きくしてみました。
値は任意ですが1000前後がいいようです。いろいろ試しながら変えてみてください。

全体の幅が決まったら次は、本文です。
考え方としてはサイドバーと記事部分の広さをページの広さ、“1130px”で分け合って割り振ればいいのですが、どういうわけだかうまくいきません。ブログ全体が右に寄ったり、記事とサイドバーが画面の左右にぴったりくっついて余白のない間延びしたレイアウトになってしまったり。なぜそうなるのかわからないけれど、何とかいい方法はないものかといろいろやってみます。ちなみに左に寄ってしまうのはプログラムではこの部分。



width: 1130px;                        
margin:0px auto;
text-align:left;       ☚ この部分




左にあわせて配置してねって書いてあります。
で、いろいろ試行錯誤しているうちに思い出しました。
そこで、試してみたのがこれ。




元のプログラム

/*---------------------記事表示部----------------------*/
#content{
margin: 0px;
padding: 0px;
width: 730px;      ☚ この部分
float: left;          
}






 これを






/*---------------------記事表示部----------------------*/
#content{
margin: 0px;
padding: 0px;
width: 80%;       ☚ この部分
float: left;
}






こうしてみました。広さの数値ではなく割合で割り振るわけです。
さて、本文記事が80%ならば当然サイドバーは・・・・







元のプログラム

/*---------------------サイドバー----------------------*/
#sidebar{
width:200px;       ☚ この部分
margin: 6px 0 0 0;
padding:0px 0px 20px;
float: left;

}




 これを




/*---------------------サイドバー----------------------*/
#sidebar{
width:20%;        ☚ この部分
margin: 6px 0 0 0;
padding:0px 0px 20px;
float: left;
}




80%と20%で100ですね。
うまくいきました。左右にしっかり余白もできてきれいになりました。どうしてそうなるのかはわかりませんが結果オーライです。

ちなみにこのやり方、コンテンツ全体でも適応できます。





/*---------------------コンテンツ全体----------------------*/
#container{
width: 90%;        ☚ この部分
margin:0px auto;
text-align:left;
background: url(https://blog-imgs-55.fc2.com/p/o/t/potar/blackgrain-bg-paisley.png) center 5px fixed no-repeat;
}





ようは、ブラウザーの画面の横幅、9割をブログで埋めますよってこと。で、なんで100にしないかというと数値割り振りで書いたような現象、100%と記入すると記事とサイドバーがそれぞれ左右に引っ付いて間延びしてしまったからです。90%にして一割左右に余白をとったというわけです。
ただ、このやり方、一見よさそうに思えるのですが、ブラウザー画面を細く、小さくしたりしたときに本文とサイドバーが重なり合って読めなくなってしまいます。画面の大きさに対して90パーセントで表示しようとするのでそうなってしまうようです。さらに、スマホからPCサイトを覗いたときはどうなのでしょう?。画面が小さいからやっぱり読めなくなっちゃうのでしょうか。スマホ持ってないから確認のしようがありませんが心配ですからこの方法は今回不採用です。

蛇足ですが前回までのSSL対策で修正した部分は今回のスタイルシートではなく『HTML編集』のほうです。httpをhttpsに片っ端から変えました。




Beautiful Chinese woman

どうでしょう、参考になりましたでしょうか。ただし、何度も言うように私は専門家ではありません。あくまでやってみてうまくいったという程度なので参考にされるならば自己責任でトライしてみてくださいね。

httpsでSSLのお話 FC2ブログ
httpsでSSLのお話 FC2ブログ②








Jessie J - Price Tag ft. B.o.B



ジェシー・J (Jessica Ellen Cornish )
かっこいいなぁ、歌うまいし。と思って手に入れた一枚。実はキャリアも長いたたき上げの超有名ミュージシャン。私はそんな世間の評判なんて全く知らづに長い間愛聴しておりました。きっとぽっとでのマイナーな新人さんなんだろうなと。イギリスのシンガーソングライター。他ミュージシャンに多くの楽曲を提供しヒットを飛ばし続ける実力派です。
田舎野山の中に独りで住んでいるとやはり情報には疎くってインターネットがなかったら一体彼女がだれなのか未だに知らないまま一人ひっそりと彼女の歌声に耳を傾けていたことでしょう。





関連記事
スポンサーサイト

トラックバックURL
https://pygmysunfish.blog.fc2.com/tb.php/235-4143e7ae
トラックバック
コメント
Sukunahikonaさん、こんにちは。

すごい難しいことをされたのですね。
ブログテンプレートの幅をかえられたなんて。
私も一度挑戦したことがあるのですが、レイアウトが崩れちゃって断念(^-^; 
仕事でも少し携わっていたんだけれど…。
ダメですね、最近は離れているのでサッパリわかりません。

それにSSL対応もまだなんですね。
そのうちになんて思っていいるのだけれど。

冷凍SANMA | 2017.12.03 12:32 | 編集
冷凍SANMA さん

ほめていただいて光栄です。でも、専門家から言わせると突っ込みどころ満載なんでしょうね。
多分、まぐれだと思います。なんてったってどうしてこうなるのかは全く理解してませんから。こういうのってやり始めるときりがないですね。どうせやるならお金になることで一生懸命になればいいのですけど。
sukunahikona | 2017.12.03 18:07 | 編集
管理者にだけ表示を許可する
 
back-to-top