うみブログ

主に旅行記や、映画の感想などの雑記ブログ

CSSやHTMLに弱い私でもデザイン変更が出来た!情報提供してくれるブロガーさんて凄いね~!

🔸本サイトには、アフィリエイト広告が含まれます🔸 ※案件は一切ありません

こんにちは、かたせうみです。

こんにちはと書いていますが、実はもう深夜です。

土日や連休は、アクセス数が落ちて悲しい位になるので、今週末は、記事の下書きやブログデザインの充実を図ろうとしていました。

 

f:id:kataseumi:20170820005800j:plain

 

ナビゲーションメニューに挑戦!

 

以前から「ナビゲーションメニュー」をつけたくて、色々サイトも見たんですが、ちょっと良く分からない・・・・。

このデザインの作者さんが、ナビゲーションメニューのHTMLを書いておいてくれたので、挑戦してみる事に。

 

最初にデザイン変更したら

 

以前のデザインは気に入っていたんですが、もう少しシンプルなのにしようと思って、変更を決めました。

皆さん、素敵なデザインをアップしている。しかも無料。

後光が差します。

色々見ていると、あっという間に時間がたっている・・・びっくりするな~、もう~。

そして、テーマを決めてインストール。

すると、CSSもリセットされてしまった!!きゃー!

そうだよね・・・・。

カエレバのボタン設定も消えたので、再びサイトに行ってコピペしました。ふぅ~。

 

そして、ナビ用のテキストを貼ると「ぱっ」とメニューは設定されたけど、HTMLやCSSの知識がほぼ皆無の私には、リンクのさせ方がいまいち分からず。

色々いじっていると、見出しはすぐに変えられた。

しかし、リンク先のURLをどこに貼りつければいいのやら・・・・?

ビール飲んじゃってるから分からないや~・・・・(#^.^#)。

お酒って怖いね。

ちょっと休憩して、よく説明読んだら何となく分かったので、貼ってみる。

成功!!よっし!よっし!

 

しかしちょっとした問題が

 

はりきってナビゲーションメニューつけたものの、事業やサロン経営してるわけじゃないので、自分のHPもないし、サブブログもない。

一体何を貼りつければいいの??

これじゃ宝の持ち腐れでしょ?!何とかしなくては!!

・・・、とりあえず、リンク先はプロっぽく『プライバシーポリシー』と『お問い合わせ』にしてみました。

これからちょっと増える予定です。

なので、「MORE」の所にカーソル合わせると『準備中』という恥ずかしいテキストが浮かび上がります。(-_-)

 

    f:id:kataseumi:20170820013017j:plain 

 

シェアボタンもチェンジ

 

ブロガーさんが装備しているシェアボタン・・・・かっこいい・・・。

ずっと憧れていたんです。

そこで、ついに私も挑戦する事に!!

まとめサイトで確認し、実装したいデザインのページへGO!

まずは、説明通りに進めていきます。 

headにコードの張り付け・・・大丈夫かな・・・。

カウントさせるコードの貼り付け。オススメ通りに貼っていきます。

CSSのテキスト貼りつけ。

ちゃんとなっていれば、次の画面では変化が起こっているはず。

・・・  ・・  ・・・・・・・・。

嘘、すごくかっこよくなってる、凄い!

 

   f:id:kataseumi:20170820230527j:plain

 

 

調子に乗って、ツイッタフォローボタンもやってみる

 

何だか、行ける気がしてきた。コピペしてるだけなんだけど。

よし、フォローボタンも変えてみよう。

もう、ここまで来ると、整形中毒のおばさんです。

だって綺麗になるんだもん!!

headに貼りつけるコードは、シェアボタンを作った時と同じコードだったので省略。

そして、指示どおりにコードを貼りつけていきます。

 

新たな問題

 

親しい知り合いがいるので、ツイッタ―以外の「フェイスブック」や「インスタ」は削除。

・・・出来た。

テキスト例は、デザイナーさんのIDとURLになっているので、指示どおりに自分のURLに変更していく。

出来たはず、ボタンを押してみる。

 

ちが~う!!いくらやっても、デザイナーさんのアカウントへ行ってしまう!!

 

・・・・苦しい・・・

 

直す所は数か所、英語がちょっとくらい読めても、仕組みを理解していないので、いたずらに時間だけが過ぎていく。

・・・・・苦しい・・・・

 

    f:id:kataseumi:20170820005801j:plain

 

しかし、諦めない。家族は寝静まっている・・・ちゃ~んす。

何度もテキストを読み返していると、何だか文字が語りかけてくる。

 

ここだ!!

 

まだ、IDとURLを変更していない箇所がありました。直す。

ボタンクリック・・・・・やった・・私のアカウントだ!!嬉しい!!デザイナーさんありがとう(:_;)

 

実は、この時点ではまだ「フォローする」の文字がかぶってしまっていたんです。

でも、アドバイス通りじーっとテキストを見て、ちょっと変えてみたら、希望の文字サイズになりボタンの大きさも、文字がかぶっている所も直りました。

一連の作業、休憩や家事をしながら1日がかりでやり遂げました。(偉そう)

 

年のせいもあると思うんですが、始めから『わけわかんない』と思ってやると、全く頭に入ってきませんね。

 

今も分かってるわけではないけれど、こうして、先入観や挑戦を放棄する事で『年を取ると新しい物についていけなくなる』のかなと思った出来事です。

時間はかかったけど、私が出来たので、きっと誰でも大丈夫。

でも・・・・つかれたぁ~・・・・・けど、達成感あったなぁ。

人のふんどしで相撲しただけですが(^_^;)

 

   f:id:kataseumi:20170820005804j:plain

 

 最後に

 

こんなに素晴らしい知恵や才能を、惜しげもなく、しかも無料で開放してくれるブロガーさんて凄いなぁ。

しかもコピペや解説付き。

もう、私は足を向けては寝られません。

次は、ナビゲーションにリンクさせるページに悩みそうです。

色々参考にさせて頂いたブロガーさん達、この場を借りてお礼申し上げます。

有難うございました。

読んでいただいた方、有難うございました。