星を匿す雲

星を匿す雲

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

↑ ページ先頭へ

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

はてなブログにははてな記法をはじめさまざまな機能があってかなり使いやすいです。しかしそれでもデフォルトのままだと「う~んちょっとこれはw」と思う部分がいくつかあります。
そのため、HTMLとかCSSとか初心者オブ初心者ですが自分なりに日々カスタマイズしています。時間がかかっても自分の思い通りのデザインを作れたときは嬉しいですよね。

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




全体

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

はてなブログには「目次記法」という見出しタグを拾って自動的に目次を生成する機能があります。アンカーリンクの設定や確認、コンテンツ更新後の変更などを手動で行わなくて済むので非常に便利です。

しかし、私の書く記事は基本的に長いので見出しも多くなり、目次の行数もものすごいことになります。もうスマホで読んでる人なんて目次を見るだけで読む気が失せそうです。
f:id:i14wander:20170805170920p:plain:w200
ニューダンガンロンパV3発売前雑感 - 星を匿す雲

いっそ目次なんてつけない方がいいかな。でも自分の興味のある項目だけ読んでさっさとおさらばしたいって人には目次がないと不親切だしな~と悩んだ結果。

目次はデフォルトで非表示にしておいて、クリックで表示/非表示を切り替えられるようにしました。


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

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


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

はてなブログはリンクが全て同じウインドウ(タブ)で開く設定になっています。

この設定、自分のブログの別ページへのリンクをクリックされる分には構わないのですが、外部サイトへのリンク(はてなキーワードリンク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:20170805092124p:plain
読者数は表示されなくなりますが特に問題ないでしょう。人数の多寡で読者になるかどうか判断されるのもビミョーな気分ですし。


記事の中身に使う

枠で囲って目立たせる

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

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


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

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


YouTube動画を軽くする

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

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

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




その他

見出し

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





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

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

広告を非表示にする