わいのりLABO

わいのりLABO

☆漫画・アニメ・ゲームなどについてつぶやきます☆

わいのりLABO

カスタマイズの概要を書いてみた

f:id:wainori2199:20180421183325p:plain

 

こんばんは。

無事リニューアル出来て満足気な、わいのり研究所です♪

 

今回のリニューアルで行ったカスタマイズの概要を書いてみます。

多すぎなので、今回は概要のみです(/ω\)

 

各項目の詳しい説明は、またシリーズ化してお伝えします。

 

 

テーマは「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の動画を軽くする方法

今日検証しました。

なかなかうまくできなかったので苦労しました・・・(泣)

 

これが出来たときは感動しましたよ!(*´▽`*)

 

画像を圧縮する方法

これは以前紹介しましたね。

全ての画像を貼り替えるのは気が遠くなります・・・(遠い目)

 

wainorilabo.hatenablog.jp

 

最後に

こんなところだと思います。

追加・訂正があるかもしれませんがご容赦ください。

 

1テーマごとに書いていきたいと思います。

最後にまとめる予定です。

 

どうぞお楽しみに♪

 

では今回もお付き合いいただきまして、ありがとうございました。