このブログで行ってきたカスタマイズのまとめをしようと思います。
ブログ開設当初はHTMLもCSSも全く分からなかったのですが、先人さんたちの知恵をお借りしてきたことで、初心者の私でも少しずつカスタマイズができるようになってきました。今でもまだ全然詳しくはないのですが、先人さんたちの優秀なサイトと説明のおかげでブログのカスタマイズがセルフでできるようになり、楽しい日々を送っています。
ブクマさせてもらったサイトが多くなってきたので、これからカスタマイズを始めたいと考えている方のためにも、自分自身が後からまた確認しなおせるためにも、記録を残しておこうと思います。
今回は、実際に私が利用させてもらったサイトさんをご紹介します。
初期設定
この記事を読みながら初期設定を行いました。
サーチコンソールを入れることで、どの記事が検索されているのか、どんなワードで検索されているのかがわかります。また、エラーが出てないかのチェックもできます。必須のツールだそうです。
グーグルアナリティクスって何？って状態でしたが、このやり方で設定を行いました。こちらも必須だそう。
記事関連
記事タイトル
デザインはシンプルだけどオシャレなものが好きです。うまくいかない場合の対処法がかかれているのも良かったです。
見出し
見出しができるとブログが一気にそれらしくなりました。
目次
見出しのついた記事が2つ以上あると、自動で目次を作ってくれます。
強調太文字を蛍光ペンにする
イエローマーカーを使わせてもらっています。
グローバルメニュー
グローバルメニューって、企業みたいなプロサイトにしかつけられないものだと思っていたので感動しました。Yukihyさんのサイトにはとてもお世話になっています。
記事下に関連記事を表示する
ここのサイトさんのやり方でさせてもらいました。
「文中にアドセンスを入れる」を自動化する
毎回打ち込むのはメンドイと思う私にピッタリです。その他、サイドバーに自動化できるコードとかも書かれています。
SNSのフォローボタンをカスタマイズする
完全にコピペさせていただいています。「いつ俺」さんのカスタマイズもオシャレで分かりやすいので、よくお世話になっています。
サイドバーにSNSのフォローボタンを設置する
フォローボタンがシンプルかつ可愛いので気に入っています。
トップページに戻るボタン機能を設置
以前は違うサイトさんからのものを使用していましたが、最近こちらから使わせてもらうようになりました。
トップに戻るボタンは、font awesomeからの記号だったんですね。それまでは、必死に上向き▲（三角）を検索しまくっていました(;'∀')
font awesome：
スマホのデザイン
自分はほぼPCからしかブログを見ないのですが、遊びに来てくれる方のほとんどはスマホからのアクセスであるようです。スマホのカスタマイズはとても大切であるようです。
その他
カラーコード
色のイメージがある場合はここから良さそうなのを選びます。
サイト内で気になった使われている色を調べる
気になったサイト内で使われている色に焦点を当てて、色コードを解析してくれるツールです。Chromeに埋め込めるのでそのまま使っています。
知りたがりさんには、このツールはイチオシです☆
大切なこと
大切なことは、それぞれ「必ず動作を確認する」ことです。コードが生きていないのか、ブログのテーマが違うので合わないのかはわかりませんが、うまくできないことがちょくちょくあるからです。
それと、CSSを変更する前に記録を残しておくこと。失敗経験ありです(;'∀')
おわりに
最近はCSSデザインにハマってきています。本屋さんに出かけては、CSSやHTMLについての本をチラ見することが趣味になりつつあります。数日前なんかは、カナダのとあるサイトで”ページのソースを表示”させて読んでいたら、文中に隠されたメッセージが浮き出てきて大興奮しました(*'▽')♪ 本気で勉強したいかもって思うほど楽しいです。
他にも思いだしたり、新たに追加してカスタマイズに使わせてもらうことになったら、都度サイトのリンクを追加していこうと思います。