星を匿す雲

星を匿す雲

主にコンシューマゲーム、アニメ、歴史漫画、史跡巡りについて。基本的にネタバレあり。

超初心者のブログデザインカスタマイズ備忘録

本記事には、このブログのHTML、CSSで手を加えたところをまとめました。
参考にさせていただいたWebサイトがある場合はリンクを掲載しているので、ソースを見たい・使いたいときはリンク先の分かりやすい記事でご確認ください。




全体

レスポンシブデザインのトップページ/アーカイブページを読みやすくする

トップページを読みやすくする……のは諦めた

ブログのトップページは各記事の「続きを読む」の前までのコンテンツを並べて作られています。
f:id:i14wander:20170819185055p:plain:w250
パソコンやタブレットではあまり気にならないけど、レスポンシブデザインにしてスマホで見るとごちゃごちゃしていてすごく読みにくい。しかも長い
そこで、いっそトップページはお客さんから見えなくして、多少は読みやすいアーカイブページにリダイレクトしようと考えました。

アーカイブページを読みやすくする

表示数を減らす
しかし、アーカイブページも一気に50記事表示されるというなかなかの謎仕様ですので、5つずつ表示される設定にしました。
下記サイトさんではトップページからアーカイブページへのリダイレクト設定と、アーカイブページの表示数を制御する設定の両方が紹介されています。

リンクを分かりやすく
さらに、アーカイブページは記事のタイトルとアイキャッチ画像にリンクが設定されていますが、ぶっちゃけ分かりづらいです。これ本当にリンクついてるの? って一瞬不安になります。
ですので「続きを読む」をくっつけてみました。
これでお客さんを不安にさせなくて済みますね!
f:id:i14wander:20170819155807j:plain:w200

デザインを綺麗に
デザインもCSSで微調整してみました。こちらは使っているテンプレート次第かと思います。

/* アーカイブページのデザイン */
/* 1. アーカイブページの記事タイトルの大きさを変更 */
.page-archive h1.entry-title {
font-size: 130%;
}
/* 2. アイキャッチ画像、meta description部分の余白を小さく */
.page-archive .archive-entry-body {
margin-top: 5px;
margin-bottom: 5px;
}
/* 3. meta description部分のデザイン修正 */
p.entry-description {
font-size: 0.9em; /* meta descriptionのフォントサイズ */
overflow: hidden; /* アイキャッチ画像の下に文字を回り込ませない */
}
/* 4. アイキャッチ画像を小さくする */
.page-archive .entry-thumb {
margin: 10px 10px 10px 10px;
width:80px;
height:80px;
float:left;
}
/* 5. 続きを読むボタンの前後と、次の記事までの余白を小さく */
.page-archive .entry-content {
margin-top: 0px;
}
.page-archive .archive-entry {
padding-bottom: 25px;
margin-bottom: 15px;
}


パンくずの表示・カテゴリの疑似階層化

パンくずは、最近はてなブログのカスタマイズ画面で実装されました。
しかし、カテゴリの下にさらにカテゴリを作る、いわゆる「カテゴリの階層化」は未だにできません。他のブログサービスでは普通にできるのでどうにかしてくれないものかと思いますが、とりあえず下記の記事でjsをお借りして疑似的に階層表示させています。

さらに、サイドバーの子カテゴリが親カテゴリのタイトル付きで表示されてしまうのを調整して見えなくしました。
前掲のサイトで親カテゴリのみ表示させる方法も公開されていますが、このブログは扱っているジャンルが無駄に多いため、子カテゴリも見えた方がよいかなと思いまして。
f:id:i14wander:20170902225239p:plain:w200
ちなみに、別々の親カテゴリの下に同じ名前の子カテゴリを作るとうまく認識してくれないみたいなので注意が必要です。私はどちらかの後ろにピリオドを付けるという原始的な方法でごまかしています。


目次の表示/非表示を切り替える

はてなブログには「目次記法」という見出しタグを拾って自動的に目次を生成する機能があります。アンカーリンクの設定や確認、コンテンツ更新後の変更などを手動で行わなくて済むので非常に便利です。
しかし、私の書く記事は基本的に長いので見出しも多くなり、目次の行数もものすごいことになります。もうスマホで読んでる人なんて目次を見るだけで読む気が失せそうです。
f:id:i14wander:20170805170920p:plain:w200f:id:i14wander:20170819155733j:plain:w200
ニューダンガンロンパV3発売前雑感 - 星を匿す雲

いっそ目次なんてつけない方がいいか。でも自分の興味のある項目だけ読んでさっさとおさらばしたいって人には目次がないと不親切だし、と悩んだ結果。
目次はデフォルトで非表示にしておいて、クリックで表示/非表示を切り替えられるようにしました。


サイドバーのメニューをタブで切り替える

サイドバーに人気記事、最新記事などのモジュールを並べていると、スマホで見たとき、記事が長いのも相まってスクロールバーが信じられないくらい長くなります
もはや目次を隠しただけでは焼け石に水。かといってどれかのモジュールを切るなんてことは私にはできない! そう思ったとき、前掲のサイトでサイドバーモジュールをタブメニュー化する方法を拝読しました。
感謝感激雨あられです。
Proでしか使えないかもとおっしゃっていますが、この通り無料ブログでもきちんと動作していますよ。
f:id:i14wander:20170819134423p:plain:w300


外部サイトへのリンクのみ別ウインドウで開く

はてなブログの「http記法」はリンクが全て同じウインドウ(タブ)で開く設定になっています。
この設定、自分のブログの別ページへのリンクをクリックされる分には構わないのですが、外部サイトへのリンク(はてなキーワードリンクAmazonのリンクなど)をクリックされるとちょっと困ります。別ウインドウで開いていればまだ思い出してくれる可能性がありますけど、同じウインドウだとブラウザバックするの超面倒ですから。99.9%戻ってこないです。

そこで、外部サイトへのリンクのみ別ウインドウで開くよう設定しました。


キーワードリンクを控え目に表示

はてなブログには「キーワードリンク」という機能もあります。はてなキーワードに登録されている文言が文中で登場すると、その解説ページへのリンクを自動的に付与する機能です。
正直言ってはてなの文化に馴染みのない人にとってはかなり目障りではないかと思います。(はてなユーザーからもあまり良い評判は聞きませんけどね。)

一応「自動リンク停止記法」を使えば消せますが、私には使いこなせそうにありません。
また、リンクを完全に見えなくする方法もあるけれど、サーチエンジンに問題のあるページと判断されて検索結果に出なくなる危険性があるらしいです。
それにまあ、たまには役に立つこともあるかもしれないし。

妥協案として、キーワードリンクを控え目に表示するよう、以下のソースをCSSに入れてみました。

/* キーワード下線を控えめにする */
.keyword {
/* 下線の種類を選ぶ solid=1本線 dashed=破線 dotted=点線 */
border-bottom-style: dotted !important;
/* 下線の色を選ぶ */
border-bottom-color: #c0c0c0 !important;
}

これでキーワードリンクの付与されているところには薄灰色の点線がつきます。


シェアボタン

デフォルトのシェアボタンはすんごく重い上にちょっとダサいです。
f:id:i14wander:20170805024911p:plain:w250

以下のサイトを参考にデザインを変えたものを入れました。

この記事の上下にもありますがこんな感じになります。シャレオツや!


読者になるボタン

これもデフォルトのものはめちゃくちゃ重いしダサいです。
f:id:i14wander:20170805030155p:plain:w80

以下の記事を参考に変更しました。

こんな感じです。かっこいい!
f:id:i14wander:20170819134633p:plain
読者数は表示されなくなりますが特に問題ないでしょう。人数の多寡で読者になるかどうか判断されるのもビミョーな気分ですし。


ページ先頭へ戻るボタン

記事が長いと、かなり前に書いてあったことをもう一度確かめたくなることがありますよね。
そういうとき、特にスマホではスワイプで移動する他なく、とても面倒でイライラします。

せっかく来てくださったお客さんに不快な思いをさせるのは申し訳ないので、ページ先頭へ戻るボタンを設置してみました。

f:id:i14wander:20170819172057j:plain:w200
これを使ってページ先頭へ戻ってもらえれば、目次からもう一度読みたいところへ飛んだり、グローバルナビから別のページに飛んでもらったりすることができます。




記事の中身に使う

枠で囲って目立たせる

よくあるこういうやつ。私のブログの場合効果のほどは分かりませんが(笑)、記事にメリハリが出て楽しいですね。

以下の記事を参考にしました。


はてなブログ用のアイコンを使う

はてなブログの中で使われているアイコンのデザイン、結構気に入っているので利用させてもらっています。


YouTube動画を軽くする

はてなブログのデフォルトの機能を使ってYouTube動画を埋め込むと読み込みにすごく時間がかかるので、埋め込み方法を変えました。
ちなみにdata-videoのところの?autoplay=1を削除すると、自動再生は解除されます。

こんな感じになります。使用している動画はクラシカロイドというアニメの公式動画です。

【試聴動画】挿入歌集第1弾「クラシカロイド MUSIK Collection Vol.1」




その他

見出し

私はブログをはてな記法で書いていますが、はてな記法の見出し記号「*」は<h3>から始まっていて、<h2>に対応するものがありません
SEO的に良くない以前に<h3>始まりはなんか気持ち悪いですね。
そのため、はてな記法の一番のメリットを捨てに行っている気もしますが、「*」は使わず<h2>、<h3>、<h4>、<h5>を使うようにしています。


Google検索結果のスニペットの表示

検索上位に入ると、稀にスニペット下部にページ内の見出しへのリンクが出現します。
f:id:i14wander:20170902232241p:plain:w400
また、検索で記事内の特定のキーワードが引っかかると、そのキーワードをコンテンツに含んだ見出しにリンクされることもあります。(下記画像は「マドモアゼルモーツァルト サリエリ エロオヤジ」で検索した結果です。すまんなサリエリ先生。)
f:id:i14wander:20170902232701p:plain:w400
【紹介】マドモアゼル・モーツァルト:無垢な天才がもたらすめくるめく愛憎劇【ネタバレなし】 - 星を匿す雲

どうやって表示させているのかずっと不思議だったのですが、どうやら以下の記事で紹介されているように目次を作成する必要があるようです。
ソースを確認したところ、はてな目次記法は自動的にこの処理をしてくれているらしいので、はてなブログユーザーは目次記法さえ使っておけばOKです。

ただ未だに分からないのが、スニペット下部にページ内の見出しが表示される場合、きちんと表示されるものとそうでないものとがあること。色々試してみたのですが、結局自分の好きなように表示できるわけじゃないらしいんですよね。
記事内の目次で頻繁にクリックされる見出しのみ表示されるのか、コンテンツの情報の質とやらが関係しているのか。時間があったら検証してみたいと思います。
f:id:i14wander:20170902234305p:plain:w400
クラシカロイド第1シリーズ感想:キャラクターと好きな曲など - 星を匿す雲



まだまだ実装したい機能や直したい部分は山ほどありますが、私の知識と技術が不足しているのと、記事を必死で書いているのとで着手できておりません。ハコだけ完璧に作っても中身が少なくては意味ないですしね~。

この記事が少しでも皆様の参考になれば幸いです。

広告を非表示にする