- はじめに50代でも出来る、ブログサイトデザインについて
- 50代でも出来る、サイトリニューアル作業 （ＰＣ）
- 50代でも出来る、サイトリニューアル作業（スマホ）
- 50代でも出来る、ブログサイトデザインの作り方のまとめ
はじめに50代でも出来る、ブログサイトデザインについて
今日は、先日の記事で書きました50代からのブログライフの関連記事です。
ブログを始めてから記事を書くことが最も大事な事は良くわかっています。
しかし、色んなサイトを見ているとサイト作りにも力を入れられていて、自分のサイトがちんけに見えてしまい、これではいけないとリニューアルしてみようと、、、、
50代でも出来る、サイトリニューアル作業 （ＰＣ）
おしゃれでシックなイメージを決めてスタートです。
テンプレートをテーマストアから選別！
今までwebデザイン系の事は、全く勉強してこなかったのでチンプンカンプンで色んな方のサイトを参考にやりました。
良いなと思うテーマを選んでプレビューしてみるのですが、何故か細部でズレが生じたりで、難航しました。
最終的に決めたテーマはDUDEで落ち着きました。
説明には「超簡単」と記されていましたが、webデザイン素人のわたしには、結構な時間を費やす結果となりました。
まずプレビューしてインストールしてみると、背景画像部分は真っ白のまんまだし、以前の広告設定などが崩れてしまう事に、広告に関してもやり直し、作業多いなみたいな感じです。
注意書きに設定が変わる事は、ちゃんと書いてありましたけど（涙）
こちらを参考に頑張りました。
①タイトルを英語に変更、コードをコピぺしてデザインＣＳＳにと有りましたが、
タイトルを英語表記に変更は、ＳＥＯ的に良くないとの事で変更しない事に。
②次が大事、タイトルバー下の画像と紹介文表示。
これが、おしゃれで選んだテーマです。
ヘッダタイトル下にコードを貼りつけ。
コード内のサイト紹介分の入力、ＵＲＬ入力、最新記事３タイトル入力。
記事を更新する度に最新記事３タイトルのうち一つを消して、ＵＲＬとタイトルを
入力する作業が増えるわけです。
画像を表示させるコードをＣＳＳに貼りつけ。
コードも１行で、コード内に画像アドレスをコピペするだけなのですが、
この作業で半日以上かかりました。
画像入力しても、ぼやけてしまい何の画像かもわからないくらいです。
嫌気がさしてきましたが、色んな方法を試した結果、画像を右クリックで
リンクのアドレスをコピーの方でやってみたら、全くボヤケて無い！
こんな感じに仕上がりました。
結構長い作業になりましたが、出来上がると気持ちのいいものです。
③サイドバーをカッコ良くという事で、メニュータイトルを英語表記に変更。
④ソーシャルボタンをおしゃれに変更、ツイッターの鳥が飛んでいます。
こんな感じです。
以上で、ＰＣの設定は終わりました。
50代でも出来る、サイトリニューアル作業（スマホ）
次にスマホでも、ヘッダの画像挿入で時間かかりました。
①スマホでヘッダーのタイトル下html編集ボックスにCSSを記述するらしいのですが、手順としては、<style>●●●●<style>左記のようにstyleとの間にコードを記述していく 流れの様です。
②フォントをおしゃれにする。
先程①で作った<style>●●●●<style>黒丸の部分にコードを貼りつけ完了。
③記事中の見出しを変える。
やはり同じように<style>●●●●<style>黒丸部分にコードを貼りつけ完了。
これは、私の場合変化が有りませんでした。
④ヘッダーを変える
デフォルトでは、アイコン画像を除いて自由度が殆ど無いためデザイン性が乏しいのと、ヘッダーのスペースが大きくなり読者の余計なスクロール手間を省くために、デフォルトのヘッダー部分を消してしまい、新しいヘッダーデザインを作り画像を挿入する事で一気にオシャレ度はアップしました。
<style>●●●●<style>黒丸部分にコードを貼りつけ。
htmlのコードを貼りつけ<img>タグの中に画像のURLを貼りつけ完了。
ここでも出てきますが、ヘッダー部分消してしまうとＳＥＯ的にあまり良くないことのようです。
画像のURL貼りつけでも画像うがぼやけてしまい時間かかりましたが、リンクのアドレスをコピーしてやれば一発で綺麗な画像が挿入されます。
⑤トップページの記事一覧のデザインにメリハリをつける
トップページ記事紹介アイキャッチ画像に枠付、画像サイズ変更、日付デザインの変更で記事の魅力を伝えやすくなる様です。
<style>●●●●<style>黒丸部分にコードを貼りつけ完了。
全て完了、こんな感じに仕上がりました。
ＰＣ・スマホ共に時間はかかりましたが何とかリニューアルに成功です。
後、シェアーボタンのデザイン変更もやっていこうと思います。
50代でも出来る、ブログサイトデザインの作り方のまとめ
このような、設定変更を行なうと広告が表示されなかったりする事が有るので、ＰＣ・スマホの両方から細かくチェックした方がいいとの事です。
わたしも、何度もチェックを行なって、ようやく大丈夫かなという状態です。
デザインを変えるだけでテンションも上がってきますので、今後も少しづつ手を加えて自己満足の世界に行ってみようと思います。
５０代のwebデザイン超初心者でも、頑張ればサイトをカッコ良くすることもできます。
さあ、一歩前に踏み出しましょう！
５０代から始める、ブログライフ
おわり
「アフィリエイトに興味のある方は、チェックしてみてください。」
