カスタマイズの概要を書いてみた
こんばんは。
無事リニューアル出来て満足気な、わいのり研究所です♪
今回のリニューアルで行ったカスタマイズの概要を書いてみます。
多すぎなので、今回は概要のみです(/ω\)
各項目の詳しい説明は、またシリーズ化してお伝えします。
- テーマは「Innocent」で!
- タイトル下に注目記事を表示
- グローバルメニューを設置
- カテゴリを追加・整理
- フォント関係
- 配色関係(水色大好き♪)
- タイトル画像を幅いっぱいに表示
- トップページをarchiveに転送する
- archiveのスター表示を消してシンプルに
- プロフアイコンを調整(大きさ、丸み)
- 記事画像、サイドバー画像の丸みを調整
- サイドバーに「フォローするボタン」を設置
- 記事の上下に「シェアボタン」を設置
- 記事下に「読者になるボタン」を設置
- 関連記事を記事下よりも下に設置
- カテゴリの表示を調整
- パンくずリストの表示を調整
- 各種デザインを調整
- 「上へ戻るボタン」を設置
- スマホで「記事一覧をもっと表示するボタン」を設置
- 「続きを読むボタン」の色を調整
- 「ふい字」を設定
- はてなスターのデザインをカスタマイズ
- 「表」を設定(未完成)
- これからやること
- 最後に
テーマは「Innocent」で!
テーマを決めるのに一番時間がかかりました・・・(汗)
というのは、有料限定のテーマだったり、やりたいカスタマイズが出来なかったりするからです。
なので、サブブログで検証しながら、あーでもない、こーでもないと試行錯誤していました。
そして最終的には「Innocent」に決定しました。
一番の理由は次項の「タイトル下に注目記事を表示」できるからです。
しかも「Innocent」は、この注目記事を自動で抽出してくれます。
これは「Innocent」独自のカスタマイズのようでして、私が調べた限りでは、他のテーマではできないみたいです。(できないというより、カスタマイズすれば実現可能なのかもしれません。詳しくなくてごめんなさい。)
あと、ほかの理由は、カスタマイズがしやすいからです。
制限がないというか、いろいろカスタマイズできる自由度があると思います。
私としては、その方が自分で好きに追加・削除できるのでいいかなと思いました。
タイトル下に注目記事を表示
テーマを「Innocent」に決めた一番の理由がこれです!
私的には、この機能は外せなかったです。
「注目記事」はサイドバーにも表示できますが、これはタイトル下に表示してくれるので、非常に目立ちます。
また、自分としても、よく読まれている記事が一目でわかるので面白いです。
グローバルメニューを設置
「Innocent」用のグローバルメニューもありますが、今回私が採用したメニューはスマホで2列に表示できるのでカッコいいと思いました。
特にこだわらない方は「Innocent」用のメニューがいいと思います。
記述がラクです。
カテゴリを追加・整理
上記のグローバルメニューは、スマホ表示だと親階層までの表示(子階層は表示できない)なので、親階層(1階層目)用のカテゴリを作って追加する必要がありました。
私のブログを、PCとスマホで見比べていただくと分かると思います。
PCでは「アニメ系」や「つぶやき系」の子階層まで表示できますが、スマホでは、親階層の「アニメ系」や「つぶやき系」までしか表示できません。
スマホでは、子階層のカテゴリは表示できないので、親階層のカテゴリを新たに作って、そこに記事を入れるようにする必要があったわけです。
フォント関係
デフォルトでは改行したあとの行間が広くて見づらいので、行間を調整しました。
あとは、字の大きさを大きめにしました。(自分が見づらいので・・・)
フォントの種類も変えています。
配色関係(水色大好き♪)
水色が好きなので、水色で統一しました♪(*´ω`*)
背景を水色グラデーション
これは「haruni」のグラデーションを参考にしました。
最初は「haruni」にしようと思ったのですが、上記の「注目記事」の理由で「haruni」を諦めました・・・(泣)
「haruni」っぽくできてうれしいです♪
はてなヘッダーを水色グラデーション
「Innocent」は黒ですが、これも「haruni」っぽくグラデーションにしました。
字も白くしています。
はてなフッターを水色グラデーション
これも「haruni」っぽくしました。
archiveタイトルを水色グラデーション
これも「haruni」っぽくしました。
記事タイトルを水色グラデーション
これも「haruni」っぽくしました。
サイドバータイトルを水色グラデーション
これも「haruni」っぽくしました。
タイトル画像を幅いっぱいに表示
これは結構苦戦しました・・・(泣)
また、タイトル画像の下に余白が出来てしまいます。
これを一気に解決してくれた方法があるので、またお伝えします。
これは感動でした!
画像サイズも調整できますよ。
トップページをarchiveに転送する
トップページにアクセスしてもarchiveページに転送するようにします。
archiveは一覧表示なので、この方法だと、有料じゃなくても一覧表示にできます。
ただこの方法はGoogleの評価を下げるらしいです。
(検索の上位になれないということらしいです・・・?)
archiveのスター表示を消してシンプルに
「Innocent」のarchive表示だと「スター」が表示されます。
ですが、スターを消すことで、archiveの余白がなくなり、記事一覧がスッキリします。
私はスター残したい派だったのですが、悩んだ末、記事に表示されるし、archiveの見た目がスッキリするからいいかと思い、消すことにしました。
私のトップページ(archive)結構スッキリしていませんか?
プロフアイコンを調整(大きさ、丸み)
サイドバーに新たにプロフ用HTMLアイテムを作成しました。
そこでアイコンの大きさなど調整ができます。
記事画像、サイドバー画像の丸みを調整
この設定で、記事やサイドバーの画像がデフォルトで角丸になります。
角を取って、丸みをつけるということです。
サイドバーに「フォローするボタン」を設置
サイドバーに「読者になるボタン」や「Twitter」などのフォローボタンを設置します。
これは、ご自身のSNSのIDを設定する必要があるので、カスタマイズの際には注意が必要です。
記事の上下に「シェアボタン」を設置
「はてなブックマーク」や「Facebook」などの「シェアボタン」を設置します。
私は、カウント数が見えるタイプにしています。
記事下に「読者になるボタン」を設置
上の「フォローボタン」と同じですが、記事下にもあった方が押してくれるかなと思いまして・・・(/ω\)
関連記事を記事下よりも下に設置
デフォルトだと記事の直下で、シェアボタンよりも上にきてしまうので邪魔ですから、それよりも下に設置するようにします。
カテゴリの表示を調整
カテゴリのタグ?の表示を調整します。
サイドバーのカテゴリ表示を調整
私のブログでは、角を丸くして、薄い水色にしています。
記事上(ヘッダ?)のカテゴリ表示を調整
記事タイトル直下のカテゴリ表示も水色で丸くしています。
パンくずリストの表示を調整
記事タイトルの上に表示されるパンくずリストです。
これも水色で、角を丸くしています。
各種デザインを調整
いろいろなデザインを設定しました。
見出しのデザイン・色を調整
タイトルの見出しです。いろんな種類があります。
ボックスのデザイン・色を調整
背景を塗りつぶしたり、枠で囲って協調したいときに使うボックスです。
これもいろんな種類があって迷いました。
引用のデザイン・色を調整
これもいろいろデザインがあります。
下線の色を調整
私は代表的な、ピンク、緑、黄、水色にしました。
目次のデザインを調整
この目次は気に入ってます♪(*´ω`*)
作者の方、ありがとうございます。また紹介しますね。
「コメントを書くボタン」の色を調整
コメントを書いてもらいたいので、目立つようにしました(/ω\)
「次の記事」「前の記事」の表示を調整
「Innocent」の場合、デフォルトは英語表記だったので分かりづらいですから、「新しい記事」、「過去の記事」という表示に変更しました。
「上へ戻るボタン」を設置
下へスクロールしていくと、右下に「上へ戻るボタン」が表示されます。
瞬時に一番上へ戻れるので便利です。
スマホで「記事一覧をもっと表示するボタン」を設置
私の場合は、スマホ表示のとき、記事一覧の表示を7つまでに設定して、「記事一覧をもっと表示する」ボタンをクリックすると、次の記事一覧が表示されるようにしています。
「続きを読むボタン」の色を調整
トップページに表示される「続きを読む」ボタンの色を変えます。
「ふい字」を設定
こんな感じの可愛い文字が書けます。
はてなスターのデザインをカスタマイズ
はてなスターのアイコン表示を丸くして大きくしました。
「表」を設定(未完成)
これはまだ途中ですが、表を表示できるように設定しています。
これからやること
ブログの表示速度を速くするために、以下の項目を実施する予定です。
YouTubeの動画を軽くする方法
今日検証しました。
なかなかうまくできなかったので苦労しました・・・(泣)
これが出来たときは感動しましたよ!(*´▽`*)
画像を圧縮する方法
これは以前紹介しましたね。
全ての画像を貼り替えるのは気が遠くなります・・・(遠い目)
最後に
こんなところだと思います。
追加・訂正があるかもしれませんがご容赦ください。
1テーマごとに書いていきたいと思います。
最後にまとめる予定です。
どうぞお楽しみに♪
では今回もお付き合いいただきまして、ありがとうございました。