どうも。自分をほめてやりたい近所です(´･ω･｀)
前のデザインをスクショしてました。
ね？左右に余白あるでしょう…。
※ お知らせ ※
こちらは裏話編となります。
余計な御託はええわ！って方は使用したCSSだけをまとめた物がありますのでそちらをどうぞ
スマホの方はヘッダーが変わったぐらい？と大きな変化はないですがPC画面はもう同じブログとは思えないほどに変わりました。
その裏話や苦労した所なんかをお話ししたいと思います。
ホントは昨日作るつもりだったんですが、所々様子がおかしい部分があって微調整したりしてたら面ｄ…時間がありませんでした(´･ω･｀)
そもそも自作デザインってどーすんの？
他の人に配布はしないと言う大前提でそのやり方。
何でもいいのでブログ作成(非公開で)
→大元のデザインテーマインストール
→デザインCSSに入っている(数字の羅列.css)と言うURLをコピー
→アドレスバーに貼り付け
するとズラズラっと良くわからん文字列が出てきます。
これがCSSの全部ですのでこれをコピーして、作ったブログのデザインCSSに貼り付け
あとは該当の場所を弄ったり欲しいデザインを付け足して完成したらテーマストアにアップロードします。
この際必ず非公開でアップしましょう。
(初期はチェックボックス外れてるので要注意)
欠点としては手直ししたい場合テーマストアへ行き投稿したテーマを選択し編集と手間が掛かり、その場でプレビューが出来ないという事でしょうか。
デザイン変更の決意に至るまで
思いっきりデザインを変えたからにはそれなりの理由がありまして。
１：CSSを付け足しまくると重い…らしい
定かではない(検証してない)のですが、デザインCSSに付け足しまくるとそれを読むのに時間がかかる…そうです(´･ω･｀)
CSSは原則上から読んでいくらしく、デザインテーマの大元CSS→付け足したCSSと処理するので記事幅とかを変えるのは処理が2回になるから…らしい。
例えば大元の文字の色は黒ですが、文字色を赤に変えるCSSを突っ込んだ場合、処理上は一度文字を黒にして赤に変える作業が行われる…イメージでしょうか。
この辺は全然詳しくないのですが、言われてる理屈は分かるのでそんなら大元を変えた方がいいじゃないという事で。
あと付け足しまくると自分でもどこに何あるか見にくいし。
２：見やすさを求めて
以前のタイプだと記事もサイドバーもキュッと真ん中に寄せて合って、ノートPCとかで見る分にはさほどでもなかったんですが、デスクトップだと余白が多くて見にくかった。
そこでとにかく余白を小さくしつつも画面の大きさに合わせて変化するようにしたい…と思いました。
あと収益化を目指し始めたので広告を貼ることも考えて大きく取りたかったんで。
その為横幅はメインもサイドバーもピクセル指定ではなく%指定で設定しています。
この数値は元々のデザインで既にメインが%指定でサイドがピクセル指定だったんですが、まず両方%指定にしてさらにその幅を自分で色々探って変更しています。
３：広告収入を少しでも上げたい
最後は思いっきり私欲です。
作り込みがあまりで来てないブログの広告ってちょっと躊躇するけど、デザインがキレイに整ってるブログだったら気になったら押してしまうなぁ…。
と言う個人的な思い込みで整った物を目指しました。
一番アクセスのあるスマホはほとんど見た目変わんねーですけどね(´･ω･｀)
この大元テーマがレスポンシブ対応なんだからしてもいいんですけど、試してみたかったダブルレクタングルが規約的にアウトなのでレスポンシブはスルーしてます。
スマホの機種で大きさがまちまちなので○○px以下で非表示に指定が難しいので、しばらく様子見て効果なければレスポンシブにしようかと思ってます。
特に苦労したとこ
１：様々な幅の調整。
先ほどの２で触れてますが記事幅の指定とか空白の指定。
…軽く言ってますがコレが最初の難関でした。
当たり前ですがそんなピンポイントなCSSなど落ちてるわけも無く。メインとかサイドバーの大きさを変えるにはどこを変えればいいのか手探り。
#container、#contentってなんやねん…(´･ω･｀;)
#mainと#contentとか.entryと.entry-contentと#contentどうちゃうんや…
と言うレベルからのスタート。
よー直接弄ろうと思ったな( ﾟДﾟ)
もっと言うと1から作ろうとしてた自分を助走をつけてぶん殴りたい。
※ 一応解説 ※
#containerと言う大枠の中に#contentがありまして、
そのさらに中に#mainがありまして、
さらにさらにその中に.entryがありまして、
さらにさらにさらにその中に.entry-contentがあります。
マトリョーシカのイメージで
#container > #content > #main >.entry > .entry-contentって感じです。
ぶっちゃけ今でもはっきりとは分かってません(´･ω･｀)感覚的にこの部分はこれかな？ぐらいです。
逆に言うとそれぐらいでもこんな感じには仕上がります。
２：空白を思い通りに操る。
空白を開けるにはpaddingとmarginと言う2種類がありまして…コードではこんな風に書かれてます
.entry-header {
padding: 0 0 10px 0;
margin: 20px;
border: 1px solid #dddddd;}
padding＝内側の空白 margin＝外側の余白と言う意味。
数字は 上 左 下 右を意味してますので上のコードでは
「.entry(記事)のヘッダーの内側は下側のみ空白を10ピクセル、
さらにその外側は全ての方向を20ピクセル空白にし、
1pxのボーダーを入れる」
と書いてます。
paddingを20px 20px 30px 20pxにしたらええやんけ！
と、思いますがボーダーはpaddingとmarginの間に来ると言う特徴があるため表示が崩れます。
この辺をやり始めると一つの記事になりそうなのでこれはまた今度。
３：ヘッダーのデザイン
これは何度かネタにしていて、今も掲げてるのでお察しの通り非常にクオリティの低い物になっております(´･ω･｀)
色々なソフト入れて頑張ったんですが、結局Photo Scape1本でドシンプルに作りました。
風船に見立てて中に文字入れようかとかやったんですが、すっごい子供っぽくなってしまい…。色のバランスも難しかったのでワントーンで作りました。
しっかりとした収益化が叶えばプロの方にお願いします。
まとめ
ほんとに習うより慣れよ。更新さえしなければどうにでも出来るのでトライ＆エラーでとにかくチャレンジあるのみですね。
あ、需要あるかわかりませんがさっきちょこっと出ましたが、誰でもわかるようなコードの解説記事は作ろうと思ってます。