どうも、ブロガー理容師三浦正弘（masa12m3d）です。
WordPressでのブログはかれこれ4年くらい・・・一応2つ作って運営やってます。すべて独学でやってるのでサクラダファミリアみたいにいつまでも完成しなさそう・・・笑
それで、とりあえず今回とあるサイトでCSSとHTMLの基礎を勉強して、当ブログを少しだけいじったので忘れないように綴りたいと思います！
今回やったこと
- 記事本文の幅を変える
- フォントを変える
- 記事下に載せるサロン情報Boxの作成
- 箇条書きリストのCSSでカスマイズ
- トップページのレイアウトなど変更
かな。テーマを変えたりとかがっつり作業ではなく、さりげないデザイン変更をしました！Web知識があるわけではないので、常に調べて作ります。なので、これだけでも時間がかかっちゃいました。見やすさわかりやすさUPや他のブログサイトというよりホームページに近いちょっと違う感じを目指してます！
記事本文の幅を変える
ブログを書いて公開した後にいつも本文が横幅いっぱいなのがとても気になってて、ググってみました！そしたら簡単に出来た！
追加CSSにコードを書き込みます。それだけ
Web知識のない素人目線で書くのでよろしくどーぞ！
まず、記事ページの本文のみを指定する為に【main p】って記述します。その後に幅をコントロールしてくれるであろう【width】を記述してレスポンシブにするため％で数値を指定します。今回は【85％】にしてみました！
でもこれだけだと文全体が左寄りになってしまうので中央寄せを指示するために【magin : 0 auto】も記述しました！
見出しは幅いっぱいですが、本文が少し狭くなってスッキリしました！
フォントを変える
フォントは【Font-Family】をいじりましたがサイトを少し上品にしたかったのです明朝体ベースで構成してます。
のちに紹介する『サルワカ』さんのFont Family メーカーが非常に使いやすいです！
記事下にサロン情報Boxを付け加える
Barber Miuraは理容メディアを中心としたブログなんですが、集客も目指しています。なのでサロンに直結する情報を記事の最後に入れたいな〜とはずっと考えてて、今回Boxを使ったサロン情報を作成することにしました！まだまだ改良していきますがとりあえずはOKです。
プラグインAdd Quick tagで１発挿入
挿入方法はいろいろ考えましたが、プラグイン【Add Quick Tag】にHTMLを登録しておいて、記事作成毎に記事下に挿入できるようにしてます。これならサロン情報を入れたくない時は入れないという分け方も出来ていい感じです。
箇条書きリストをカスタマイズ
たまーに使う箇条書きリストですが、ちょっとCSSをいじってみました！
- こんな
- 感じ
- です。
こちらも追加CSSへの記述でカスタマイズしてます。何通りか作っておいてこれも【Add Quick Tag】で１発挿入出来るようにしておこかと思ってます。
トップページのレイアウトなど変更
実はうえの4つをカスタマイズしてブログを書き始めた後にどうも走り出したら止まらない的なやつが発動して、ブログ書いてる途中からトップページのレイアウト変更に手を出してしまいました笑（なので更新が遅れてます）
各項目画像の作成・統一
新着記事・人気記事・プロフィールなどをわかりやすくするバナー？なのかな・・・その画像をiPad Pro12.9インチで作成してみました！
これはページの編集から画像をアップロードするだけなんで簡単ですね。
ランキングの追加とカスタマイズ
トップページにランキング記事が今までなかったので定番のプラグイン【Wordpress poplur posts】で記事ランキングを作成しました！ショートコードを貼り付けるだけなので簡単です。
ググりながら少しCSSでカスマイズしてます！
プロフィール欄追加
こちらも今までなかった項目です。様々なブロガーさんのサイトを見るとトップページにプロフィール載せてるんですよね〜。サイドバーには載せてるんですが僕のサイトトップページは1カラム構成にしてるのでトップページにはサイドバーのプロフィールが表示されない！これは良くない！！と思って追加しました。
Instagram Feed
今までもInstagramのフィードは載せてたんですが、もっとInstagramらしいものにしようと思いあらたにプラグイン【Instagram Feed】を導入！
余計なCSSが影響してそれを取るのに手こずりましたがなんとかなりました！Instagram Feedについては後日まとめようと思います！
今回参考にした神サイト
自分メモ用なのでざっくりしてますが、いろいろカスタマイズしてみました！こんなんでも参考にしてくれる人がいたら感動します！
そして今回、そんな僕を感動させてくれたのが神サイト【サルワカ】です。
猿でもわかるをコンセプトにWeb デザインやワードプレス知識などなど凄くわかりやすく！そして見やすく！書いています！
実は今回Webデザインの基礎を学ぶ為にAmazonで参考書などを探してたんですが【サルワカ】サイトで基礎の部分はほぼ理解できました！まじで、神サイト。
やっぱり何事も基礎って大事なんだね。
コメント