カスタマイズの概要を書いてみたこの広告は、90日以上更新していないブログに表示しています。つぶやき系TwitterGooglePocketこんばんは。今回のリニューアルで行ったカスタマイズの概要を書いてみます。多すぎなので、今回は概要のみです(/ω\)各項目の詳しい説明は、またシリーズ化してお伝えします。最後にテーマは「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つまでに設定して、「記事一覧をもっと表示する」ボタンをクリックすると、次の記事一覧が表示されるようにしています。「続きを読むボタン」の色を調整トップページに表示される「続きを読む」ボタンの色を変えます。「ふい字」を設定こんな感じの可愛い文字が書けます。はてなスターのデザインをカスタマイズはてなスターのアイコン表示を丸くして大きくしました。「表」を設定(未完成)これはまだ途中ですが、表を表示できるように設定しています。これからやることブログの表示速度を速くするために、以下の項目を実施する予定です。́▽`*)画像を圧縮する方法これは以前紹介しましたね。全ての画像を貼り替えるのは気が遠くなります・・・(遠い目)wainorilabo.hatenablog.jp最後にこんなところだと思います。追加・訂正があるかもしれませんがご容赦ください。1テーマごとに書いていきたいと思います。最後にまとめる予定です。お楽しみに♪では今回もお付き合いいただきまして、ありがとうございました。schön♪】ブクマコメントDankeです♪こんにちは。GWに甥っ子たちが来るので大掃除をして疲れ果てて...2018-04-11【第9回】ブログ作成記録(ヘッダ画像編)こんばんは。この度ヘッダのタイトル画像...2018-04-10【第8回】ブログ作成記録(SNSボタン編)こんにちは。今回は、SNSボタンを設置し...2018-04-09【第8回】ブログ作成記録(読者ボタン編)こんばんわ。謎の咳に苦しんでいた、わいのり研究所です。今...2018-03-29「planetarian」今日はじっくり語りたい!『私は涙を流せません。»プロフィールid:wainori2199アニメなどについて語ります。マイブームは「咲-Saki-シリーズ」と「のんのんびより」です。「planetarian(プラネタリアン)」も大好きです。最近はブログのカスタマイズにハマってます。ばけーしょん』公式サイト配信・劇場アニメ「planetarian(プラネタリアン)」公式サイトのんのんびより応援中はてなブログをはじめよう!wainori2199さんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。