こんにちはゆとり世代です

なんにもまとめていないし、役にもたたない

10000PV/月からレベルアップするためにブログデザインを変更する

どうも、ようやく月に10000PVを超えるようになった、楽して生きていきたい&お仕事辞めたい代表ゆとりです。

 

先月漸く10000PVという区切りを突破した当ブログ。

しかしどうせならもうちょっとアクセスが増えればなあ。

アクセスが増えればアドセンスの収益も増えて楽して稼げるにちょっと近付くのになあ。

そういうことを考えて過ごす中、ちょっとブログのデザインを変更しようと思いました。

このブログはやっぱり今のご時世 PC<スマホ なのでPC向けデザインよりもスマホ向けのデザインを考えた方がいいと思うんだけど、自分自身ブログはPCで書いているしそのままPCで確認することが多いので、とりあえずこちらのデザイン変更を行いたいと思います。

 

 

 

ちなみに現在のページはこんなかんじ

f:id:mimimicha:20180214223601p:plain

 

はてなブログのテーマストア現在1位であるMinimalismを使わせてもらっています。

文字通りまさにシンプル!

最近はやりなのはカード式というものみたいで、画面にそれぞれの記事の写真がどアップになっているもの。

 

f:id:mimimicha:20180214224254p:plain

 

うわあとってもオシャレ〜↑↑

 

な・ん・で・す・が。

わたしが添付しているのってお分かりの通りあほみたいに緩いイラスト。

それがずらあっと画面に並ぶなんて考えただけで精神年齢が削がれそう\(^o^)/

ちなみに4つ下の妹ちゃんは、わたしと話しただけでアホになりそう子供になりそう幼稚になりそうだと言われます\(^o^)/

と、いうことで、このカード式は断念致しました。

が。

わたしにはどうしてもやってみたいデザインがあるのです。

それがこれ。

 

f:id:mimimicha:20180214224745p:plain

 

みて!

この精神年齢がとっても若返りそうなイラスト!!!

幼過ぎて!!!こわい!!!!

 

まあどういうデザインにしたいかといいますと。

つまり、カテゴリーをバーンと表示させたいわけですよ。

一応今もサイドバーにカテゴリーというものはあるんですが、今一目立たない…。

このブログは雑記ブログで婚活とか仕事とかその他単なる自分の日記で、何かの分野に特化しているわけじゃないのです。

そうなると婚活記事目当てで来たのにそれが見つからない、あるいは検索からお仕事関係できたのに婚活記事ばっかり……となってしまっては、まあなんだかなあというか。

それにそこで折角見に来てくれた人を取りこぼしてしまうのは非常にもったいないのです。

というわけで視覚的デザインの問題&雑記ブログだからこそカテゴリーを分かりやすくしようと思い、今回はデザインを変更していきます!

 

して!いきます!!!

 

と、いってもね。

わたしプログラミングとかタグとか全く分からないので、ここは先人たちの知恵や素晴らしい知識をご披露くださっている先輩方に頼ろうじゃありませんか。

人任せ!他人の知識に乗っかるの大好き!!!

だからすべての事に消極的だし勉強もしないし出来ないしなんというか人間であることが申し訳ない\(^o^)/

そこでいくつか検索をしてみたらやっぱり色々出ては来るんだけど、皆さんお分かりですよね。

 

わたくしゆとり、頭が、弱い\(^o^)/

 

 

メニューバーを設置する

とりあえずこちらのサイトさんを参考に、頑張ってみることにしよう…!

maroom.hateblo.jp

 

とりあえずカテゴリーをどの順番で並べるのか。

現在(2018/2/17)カテゴリーは6個。

徒然日記→お仕事→婚活→感想→ブログ→美容

この順番にしようと思います。

雑記ブログだし、ゴミ記事しかないけどまあいっかあということで日記を一番先頭に、あとは需要のありそうなものから並べてみました。

というか、美容なんてカテゴリーがあったんだと今更びっくり。

美容のびの字すら語るのが申し訳ない程ずぼらだしファッションセンスもないしブスだし本当どうして女の子……

あ、アラサーが女の子とかいったら怒られるか。

どうして女性をやってるんだろうか。へへ。

 

カテゴリーは全部で6つ。

つまり6個の枠が必要になるのですが、参考にさせて頂いたブログはそのまんまのコピペだと4個用。

タグをコピー&ペーストして、自分に必要な個数分にしてしまいしょう!

ということで、作業中のものだけれどわたしのは今こんなかんじ。

 

f:id:mimimicha:20180217192626p:plain

 

赤丸で囲んだものがカテゴリー1つ分。

これをコピー&ペーストを繰り返して6個分作って、そのあとは自分のカテゴリーのURLを貼り付けていきましょう!

ひゃ~、ちゃんと出来るのかしら…!

URLのコピペとメニューバーに表示させるカテゴリー名を入力したのがこれ。

 

f:id:mimimicha:20180217195428p:plain

 

もうとっても疲れ切っている\(^o^)/

しかしまだまだ終わりではありません。参考にさせて頂いたサイトさんからの引用なんですが、

 「target="_blank"」は新しいタブ(または新しいウィンドウ)で開くために入れてあるものなので、同一タブ(または同一ウィンドウ)で開くようにしたい場合は削除して下さい。

 と、ある。

わたしは個人的に新しいタブがやたらめったらに増えていくのがあんまり好きじゃないので、このコードは削除することに。

 

でも~これで~終わりじゃないのよ~!!

 

 今度はCSSってやつの設定をしなくちゃあいけないのよ。

ひいひい、もう、もう、わたしは疲れちゃってるのだ……!

でもここは、一気にやってしまいましょう。

失敗する可能性もあるしね…。

後々やり直しとかは面倒だしね……。

そしてCSSについてはまたこれも引用なんですが、カテゴリーを増やしたから弄らないといけないところもあるのです。

また、メニューバーに載せるコンテンツを増やしたい場合は、HTMLタグに「<li>~</li>」を追加し、CSSの「#menubar li」の「width:25%;」を変更して下さい。

<li>の幅(width)は、全体の幅=100%を4で割って25%にしているので、例えば5つに増やすなら100÷5で20%、6つなら100÷6で16%、となります。小数点以下は切り捨てて下さい。

 

 わたしの場合は6個なので、ここも16%に変更をしなくちゃならねえ!

よっしゃ、変更しちゃう!!!

 

そして作成したコードをそれぞれコピーしてブログを確認したところ…

 

出来てるー!!!

できて…

でき……

 

f:id:mimimicha:20180217201902p:plain

 

なんだこの間は!!!!

いったいどうした!!!!笑

 

なんだかブログだけが仲間外れになっちゃってるぞ…。

しかしちょっとこれ、心当たりがあるんですよねえ。

と、いうのも。

カテゴリーのURLをコピーした際、他のカテゴリーのURLとは長さが圧倒的に違っていたのです。

 

f:id:mimimicha:20180217202342p:plain

 

お分かりいただけただろうか?

他のカテゴリーのURLは赤線で引いた通りなんですが、このブログのカテゴリーだけ何故か2行に跨っちゃっているのです…!

どう考えてもおかしい。

ということで、もう一度やり直してみましょう。

 

ということで、やり直したんですが直らない\(^o^)/

URLが長かった理由は、恐らくカテゴリー名が長かったから。他は徒然や婚活と言う風に大体2文字なのに対して、ブログカテゴリーはブログ・アフェリエイトとかなり長い名前だったのです。

それに他のカテゴリーのURLを貼り付けてみても、この謎の空間現象は解消されない。

つまり。

 

失敗した

 

コードをみてもどこが違うのか分からないので、もうここは潔く諦めて他サイトさんのものを参考にしよう…。

 

と、思いましたが。

結構心が折れてしまった\(^o^)/ので\(^o^)/

ここはとことん振り切ってやりましょう。

 

 

 

改めてメニューバーを設置する

メニューバーカスタムの方法を記載してくれているブログデザインに変更!

そしてそのブログデザインを作った人の言う通りにメニューバーを作成する!!

これぞ正当な方法!確実!間違いない!

 

というかこんなんしてしまうと今までのこの時間なんだったんだよってかんじですが、それはそれ、これはこれ、わたしの頭が悪いということでね。頭が悪いのは仕方ない。Yes、脳みそ、つっるつる!

今回はブログデザインをテーマストアで2位のBrooklynに変更。

そしてそちらでメニューバーカスタムの方法について学ぼうではないか。

 

www.notitle-weblog.com

 

ということでデザインした人の言う通りにカスタマイズした結果がこれ

f:id:mimimicha:20180217211619p:plain

 

一瞬で出来とるやないかーい\(^o^)/

 

それもHTMLタグだけで。CSSなんていらんかった。

でもね、でもね、贅沢をいうと。

色を変えたい。

折角描いてもらったヘッダー画像もあることだし、どうせならかわゆい水色に変えたいのだ…!

ということで、ちょっくら検索をしたところ早速発見…!

www.style-yry.com

メニューバーだけでなく、さまざまな色変更のカスタマイズをご紹介されています。

これも早速弄った結果。

 

f:id:mimimicha:20180217214408p:plain

 

 

めちゃくちゃおしゃれやないかーい\(^o^)/

 

ちなみにスマホでみたかんじだとこんなん。

f:id:mimimicha:20180217214937p:image

これでちょっとでもPVが増えてくれることを願って。

 

 

 

明日は日曜。

月曜日って憂鬱だなあと、もう今から考えちゃってるんですが、そこはもう仕方ない。

諦めて、がんばって、憂鬱な人生を生きていきましょう。

 

うへえ。

 

f:id:mimimicha:20180203203348p:plain

 

 

ツイッターもやってます↓

 

 

ランキング参加中↓

他のブログ探しにもどうぞ☺

にほんブログ村 恋愛ブログへ