池田町地域おこし協力隊~kuro隊員の活動日誌~

平成28年4月。30才目前にして、北海道池田町地域おこし協力隊として移住したkuro隊員の活動をダラダラ綴ります。

blogのデザインを色々いじっている話~html?css?~

こんにちは。

北海道池田町の地域おこし協力隊かつ駆け出しボルダラー、kuro隊員です。

f:id:kuroroman:20170306214806p:plain

無知なりにblogをカスタマイズ

この記事をPCから読んでいる方はお気付きでしょう。昨日~今日にかけて色々デザインをいじっています。

上の画像が旧デザインですが、顔に似合わず爽やかな水色を背景色に設定してごまかしごまかしで3か月半。

正直な話、デザインはやっつけ仕事です。というか真剣に取り組んでもたかが知れているド素人なので「まぁこれでいいや」なんて思ったりもしていました。

 

しかしアクセス数が伸びない今、聖域なき改革が必要。

いきなり全部改革しようとすると3日間くらいblog更新できないくらい手こずるので、ちょいちょい変わっていく当blogのデザインをお楽しみ下さいませ。

こんなに簡単だった目次の作り方

これは完全にサボってました。目次の作り方を調べもしていませんでした。

ただ単に:contentsと打ち込めばいいだけ※実際には[]で括ります。そのまま打ち込むとさらに目次が形成されちゃうので。

この目次を作っておくこともSEO対策になるとかならないとか。諸説はありますが、こんなに簡単ならやらない手はないですよね。所要時間3秒だもん。

もう一度言います。完全にサボってました。

とりあえずこれが改革その1です。

デザイン(テーマ)変更

はてなブログの機能を使えば、簡単にblogのデザインを変更できます。

今まで当blogが使用していたテーマは「report」

これに背景色の水色を組み合わせ何となく爽やかなイメージを演出していましたが、どうもアレだなと思いまして。名前通り腹黒いkuro隊員のイメージとはちょっと違うのかな、と。

騒がしくないテーマはちょっと前から探していたんですが、そのテーマによっては今まで設定した広告や文字の位置がズレたりします。それを修正する術を持っていないため、当初からのテーマに甘んじていた訳です。

しかし今回は聖域なき改革。多少色んなモノがズレようが、理想の「騒がしくなく落ち着いた色合いと装飾のテーマ」を探し、どうにかこうにか適応する覚悟で変更しました。

テーマ選びに2時間。かつ当blogの最下段に、池田町ふるさと納税の広告を貼っているんですが、それを中央寄せでバランスよく表示させるのに2時間。その他の部分の微調整に1時間。

これだけで5時間かかってます。

しかしよく見たら、右端のふるさと納税広告はちょっと上面が合ってない事に気付く。

気付いてないフリします...。これだから素人はツライ。

スマホ対応テーマ(レスポンシブ)

上記のテーマ変更はまだ解決していません。調整したのはあくまでPC上の表示画面。

PC上の調整を終え(5時間経過後)スマホでどう表示されるかチェックしてみると...。

f:id:kuroroman:20170306222702p:plain

とりあえず横長の広告がガッツリはみ出す笑

もう笑っちゃたよ。kuro隊員が費やした5時間はスマホ表示にあっけなく否定された訳ですよ。あぁやるせない。

さらにもう一つ問題↓

f:id:kuroroman:20170306222739p:plain

スマホ版ページの一番下の部分が縦並びの広告攻め3連発。

いくら池田町の地域おこし協力隊としてふるさと納税を応援しているとは言え、こんなに広告押しだったら逆に印象悪いわ。Google先生の検索評価も悪化しそう。

明日1時間割いて修正するのでどうかスマホ読者の方、本日~明日までは見辛いblogであることをご容赦下さい。

htmlもcssも勉強中

何となく理解できつつありますが、例えば正方形の画像や広告を横並びに表示するためにはtableを使うのかulを使うのかとか、全然わかりません。大げさじゃなく、本当に全くわからん。

とりあえず知ってる記法を打ち込んでは表示を確認して...を繰り返している作業なので、進まないしイライラが募る。

まぁそんな愚痴を吐いても仕方ないのでこの辺で。

最後に:聖域なきblog構造改革

デザインを変更したって、コンテンツ(記事の内容)がしっかりしなければアクセス数の向上とはならないのは百も承知。

いわゆる「ファーストビュー」(Webサイトを開いた時に最初に目にする画面)の改善と、今後、と言うか今日明日中にナビゲーションメニューを設置するにあたっての前段としてのデザイン変更です。

kuro隊員は一度に全て変更できないレベルだって事を曝け出した訳です。

 

良かれと思ってのデザイン変更ですが、読みにくい等のご意見はいつでも受け付けていますので、どうか率直な感想をお聞かせ下さいませ。

 

ではまた(^O^)/