koikenote-loading
広告あり

部屋とCSSと私

ブログ運営
記事内に広告が含まれています

3日ほど前にブログのトップページをリニューアルしました。

トップページ自体は何度も非公開で確認をしてきたのですが、新しい「記事一覧」ページは自動作成のため、公開してみるまで問題ないか確認できなかったので切り替えはドキドキでした。

結果、CSSを少し修正しましたが特に不具合はなさそうで一安心です。
(一応、Safari、Firefox、Chrome、iPad、iPhoneで確認しました)

感想をくださったり不具合がないか見てくださった方、ありがとうございます!
ブログを継続していく大きな励みになりました。

トップページ作り、チャレンジしてみて良かったです!

スポンサーリンク

今回のリニューアルのポイント

今回はロゴや基本の色使いを変えず、トップページ以外はそのままです。

  • ヘッダーの下(アピールエリア的な場所)に一言ノート」を設置
    画像の上にテキストを重ねるCSSを追加しています。
    ノートの画像は自作で、うしろにいるのは不機嫌な猫。
  • スクロールダウン」のアニメーションを設置
    ヒューン、ヒューンって、下向きに線が動いている部分です。
    webサイト!って感じで憧れていたので実装できて満足。
  • 「新着記事」と「カテゴリー別のタブ切り替え」を分離
    Cocoon設定での新着記事一覧(タブ切り替え)が気に入っていたので、「カテゴリー別」の一覧をタブ切り替えにしました。

タブ一覧のHTMLとCSSのコードは、私にCocoonの可能性やカスタマイズの楽しみを教えてくださった、大好きなブロガーさんのカスタマイズ記事を参考にさせていただきました。
(参考というか、ほぼコピペです)

密かにこだわったところ
  • タブ切り替えの部分、モバイル表示した時の文字の改行位置をCSSで指定した
    (私のiPhoneで見ると成功しています)
  • 「VIEW MORE」ボタンに触れると文字が「もっとみる」に変わるようにした
    (単なる自己満足)

カスタマイズ沼への誘い

新しいトップページはHTMLとブロックを併用、CSSもいっぱい追加して作っています。
「Cocoonのカスタマイズ」に絞らず「HTMLとCSSでできる」をキーワードに調べました。

CSSについては最初の頃「触るの怖いなー」と、1箇所色を変更するだけでもドキドキしていたのですが、なかなか記事が書けないまま「外観だけでもちょっと工夫したいなー」とコツコツ触っているうちに、どんどんハマってしまいました。

恐ろしや、カスタマイズ沼。

なんというか、「ここの数値こうしたら、もしかして、この部分変えれるんじゃない?」からのパチーン!(バッチリ反映!)みたいな快感がたまりません。

ほんのちょっとのミスで「なんで反映されないのぉぉお??」ってパニックにもなるのですが。

まだカスタマイズやったことないけど、興味湧いてきたなぁって方がいらっしゃれば…ぜひ!

カスタマイズ沼
1文字欠けるだけでも反映されないCSS

「HTMLとかCSSって、何それ?」という方へ

家づくりに例える「webサイトの作り方」
  • まずHTMLと呼ばれる言語で「ここに家を建てます。表札をつけます。この部屋は子ども部屋です」みたいな指示をします。
  • そしてCSSと呼ばれる文字酔いしそうな言語で「外壁はタイルにするよ!」「表札はこの書体で!」「子ども部屋の壁紙はこの色!」のように、理想の見た目にするための細かい指示を追加します。
  • CSSを使って指示をすることで「この大きな部屋は間仕切りをして、隣り合った2部屋として使用する」「この部屋のこの部分だけ壁紙の色を変えておしゃれにする」「子どもの成長や人数に合わせて部屋の面積も自動的に広げる」なんてことも可能です。

(とんでもない思い違いをしている場合、ご指摘くだされば訂正します)

しつこく家づくりに例える「私のブログができるまで」
  • 私の場合、ConoHa町に土地(サーバー)を借りて、WordPressという工法で家(ブログ)を建てました。
  • Cocoonという、無料なのに機能的で丈夫な造りが好評のメーカーさん(テーマ)に極シンプルな家を建ててもらって、内装はコツコツと自分でDIYします。
  • Cocoonさんが建ててくれた家には必要な設備は全て揃っているので、何の不自由もなく生活しながら新しい玄関(トップページ)を増築することにしました。
    元の玄関はそのまま使えるので、来客があっても大丈夫。
  • 仕事のあと毎晩コツコツ作業して、新しい玄関が完成!
  • 元の玄関ドアは封鎖して、新しい玄関に表札を付け替えました。
    (イマココってやつです)

高いか安いか、土地(サーバー)代は年間約1万円です

こんな方はカスタマイズを楽しめる!

4ヶ月間ブログ運営者の目線からいろんなブログを見て感じたのは、デザインについては「有料だからできる、無料だからできない」ということはなさそうだということ。

カスタマイズの手間を楽しめるかどうか、それだけです。たぶん。

私が思う「カスタマイズを楽しめる人」
  • DIYや模様替えが好きな方
  • コツコツ黙々と作業することが苦痛ではない方
  • とことん調べることが大好きな探偵気質の方

そんなに意識していなかったことでも「あなた向いているよ」って言われると気になりませんか?

お時間がある時にどこか1カ所ずつでもチャレンジしてみてください。

で、たくさんの解説記事が見つかります。
先輩ブロガーさん達に感謝!!!

実際に私はそういった記事のコピペ可コードを使って見出しを変えるところからスタートしました。

記事の中の見出しを変えることができたら、今度はサイドバーの見出し、あと目次もつけてみよう!
どこにつける?ウィジェットで並び替えも簡単!って感じです。
(Cocoonの場合)

「自分でちょっとだけ前髪切ってみたんだけど、誰か気づくかな?」
みたいなノリでコツコツやってみよう

そういえばアイキャッチはそのままなのか問題

アイキャッチについては過去の記事を含め一新して公開しようと思っていたのですが、とりあえずそのまま公開しちゃいました。

Twitterでいただくご意見では、やはりアイキャッチを気に入ってくださる方が多い様子。
イラストのベースはフリー素材ですが、使い方を褒めてもらえるのはとても嬉しいです。

カフェラテさん、引き続きお世話になります。

ヘッダー下にまず自作イラストを使ったことと、これまで白かったイラストの背景を透明にしてみたら思ったより良い感じに馴染んだことで、以前よりもオリジナル感高められたのでは?と自分では思っています。

過去のアイキャッチとも調和する汎用アイキャッチを作成したり、イラスト素材のアレンジを増やしつつ、徐々にオリジナルの割合を増やしていきたいところです。

記事の中の挿絵も時々描いてみたいなと思います。
(今回はカスタマイズ沼を描きました)

「シンプル」なブログの裏側で

そうそう、ちょっと言っておきたいんですが……

「部屋がぐっちゃぐちゃなんですよ!」

CSSなどの下調べ期間を含め、先月からは自宅で過ごす夜のほとんどをカスタマイズに捧げてきたので部屋が荒れています。

あれ?デジャブ?前にもこんな言い訳をした気がします。
Twitterでかな?きっとしていますね。
そしてブログやる前からしょっちゅう荒れていました、私の部屋。

いやほんと数時間早送りしてもびくともしていないくらいPCを睨みつけて作業していたもので。

ブログの外観は「シンプル」だと言ってもらえてめちゃくちゃ嬉しいのですが、整っているのはブログの外観だけなんです。

なんならデスクトップも「何月何日HTML保険」「何月何日CSS保険」的なデータでいっぱい。

もっと見せれる部屋だったらどんどん記事も増えてると思うんですよね、写真撮れるし。

トップページ作業はいったん落ち着いたので、片付けますね。

目指せ!真のシンプルおしゃれ!

今後、修正・挑戦したいこと
  • トップページとそれ以外のページの処理の統一(間隔や細部の処理)
  • 自己紹介ページをもう少し工夫したい
  • 記事を増やしつつカテゴリーを再編する

\ この記事へのコメント /

スポンサーリンク