ブログで手を入れてみたとこ備忘録
自分のブログをいじっているうちに「ああいうデザインにしたいな」「こういう使い方ができたら便利だな」と思うことが細々と出てきました。
ネットで調べたり、手法を公開してくださってる先人の方にならったり、あるいは身近で詳しい人に尋ねたりと、試行錯誤しながら進めています。
それに伴いブログに関する備忘録を記録するようになり、それも自分のブログ上で見られると（自分が）扱いやすいなと思ったので、箇条書きでまとめてみました。 ブログカスタマイズtipsと言うよりも、ブログを形作るにあたって手を入れたところのほぼ全てに関する備忘録です。
自身が見直すための備忘録としてまとめているため、細かい説明など省いてる箇所が多くあります。また、自分自身ブログカスタマイズについて学習中のため、混み入ったご質問等はご容赦ください。
各項目で、参考にさせていただいたサイト様へのリンクを貼らせていただいます。わかりやすく教えてくださる先達の方々からの情報にいつも助けられており、とてもありがたいです。
外部ファイルの呼び出し
CSSの外部化
画像ファイルの外部化
アイコンフォントの利用
FontAwesomeの利用手順。詳細
jQueryの利用
head内に呼び出しのためのコードを追加する。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
初期設定、基本設定
記事のnoindex化
必要のないページが、検索にかからないようにする設定。詳細
はてなブログ専用設定
テーマの設定
レスポンシブ対応テーマにする場合は、
デザイン＞スマートフォン＞詳細設定＞レスポンシブデザインにチェック。
カテゴリの階層化
親・子・孫カテゴリを作り、サブメニューのカテゴリ欄にも折りたたみ式で表示する方法。 詳細
トップページの一覧表示化
はてなブログでは、トップページを一覧表示にするには有料会員登録が必要。ただ、トップページのURLからアーカイブページへ転送することで、見かけ上トップページが一覧になっているように表示することはできる。詳細
aboutページ
設定＞基本設定＞aboutページから編集。自由記述欄はhtmlを直接書き込める。
プロフィール欄
はてなIDの非表示化
完全に消すことはできない。はてなの良いところはSNS的な機能があることなので、非表示にこだわる人は別サービスのほうが良いのかも。 詳細
本体デザインCSS
テキスト、見出し、リストなどのデザイン変更
ブログタイトルを2段にする
トップへ戻るボタン
ハンバーガー型ドロワーメニュー
テーマ「マテリアルぽっぷ」用
メイン/サブカラー配色変更
テーマ作者さんの解説ページ >> 配色の変更方法 - マテリアルぽっぷ
カラム数変更とサイドバー設置
アーカイブページのカード整形
縦長タイル型のカードが横に2～3列並ぶデザインを、横長タイルが1列で並ぶデザインに変更。カード内のサムネイルや文字の位置も調整した。 詳細
記事修飾用CSS
アイコンフォント付きボックス
FontAwesomeのアイコンをワンポイントに付けたボックス。2タイプで、色・角の丸み・アイコンを自由に変更できる。 詳細
見出しサンプル
執筆用サンプルコード
よく利用するFontAwesomeアイコン集
はてなで使えるMarkdown記法まとめ
アイコン付きボックス
FontAwesomeを利用して、任意のアイコンを組み込めるボックス。
できること
- アイコンフォント部分を任意に変更できる
- 枠線タイプ、背景色タイプを選べる
- 色を変更できる
- 角が丸いタイプ、そのままのタイプを選べる
応用で、仕様を固定にした（毎回指定しなくても良い）専用ボックスも作れる。
CSSコード
/***** アイコン付きボックス *****/ .iconbox { position: relative; margin: 0 5%; padding: 1.2em; box-sizing: border-box; color: #666666; /* 文字色 */ border-left: solid 100px #aaa; /* デフォルト枠色 */ background: #eee; /* デフォルト背景色 */ min-height: 50px; } /* 枠線タイプ */ .iconbox .bd-red { border: solid 3px rgba(255,136,136); /* 上右下の枠線 */ border-left-width: 100px; /* 左の枠線 */ background: #fff; } .iconbox .bd-blue { border: solid 3px rgba(138,184,255); border-left-width: 100px; background: #fff; } .iconbox .bd-green { border: solid 3px rgba(148,242,148); border-left-width: 100px; background: #fff; } .iconbox .bd-yellow { border: solid 3px rgba(255,224,104); border-left-width: 100px; background: #fff; } /* 背景色タイプ */ .iconbox .bg-red { border-left: solid 100px rgba(255,136,136); /* 枠線左のみ */ background: rgba(255,136,136,0.5); color: #777; } .iconbox .bg-blue { border-left: solid 100px rgba(138,184,255); background: rgba(138,184,255,0.5); color: #777; } .iconbox .bg-green { border-left: solid 100px rgba(148,242,148); background: rgba(148,242,148,0.5); color: #777; } .iconbox .bg-yellow { border-left: solid 100px rgba(255,224,104); background: rgba(255,224,104,0.5); color: #777; } .iconbox .kakumaru { border-radius: 30px; /* 角の丸み */ } .iconbox i { /* アイコンフォントの共通設定 */ display: inline-block; position: absolute; top: 50%; left: -76px; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); font-family: "Font Awesome 5 Free"; color: #fff; font-size: 54px; line-height: 1; font-weight: 900; }
使い方
【基本】
<div class="iconbox 枠&色指定 角丸指定 "> <i class="アイコンフォント指定"></i> <p>コンテンツ本文</p> </div>
指定項目は省略可
アイコンの変更
FontAwesomeのアイコンフォントコード<i class="～"></i>を変えたいコードに入れ替える。
<div class="iconbox">
<i class="far fa-tired"></i>
<p>コンテンツ本文</p>
</div>
<i class="far fa-tired"></i>
<p>コンテンツ本文</p>
</div>
枠線タイプor背景色タイプ、色の変更
アイコンボックスの要素にbd-色またはbg-色のclassを追加する。
- bd=border
- bg=background
角を丸くする
アイコンボックスの要素にkakumaruのclassを追加する。
仕様を固定したボックス
毎回アイコンや色を指定しなくても良い。
/* 注意BOX */ .tyuui-box { position: relative; margin: 0 5%; padding: 1.2em; box-sizing: border-box; color: rgba(255,136,136); /* 文字色 */ border: solid 3px rgba(255,136,136); /* 枠色 */ border-left-width: 100px; min-height: 50px; } .tyuui-box:before{ display: inline-block; position: absolute; top: 50%; left: -76px; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); content: "\f06a"; /* アイコン */ font-family: "Font Awesome 5 Free"; color: #FFF; font-size: 54px; line-height: 1; font-weight: 900; }
<div class="tyuui-box">
<p>コンテンツ本文</p>
</div>
<p>コンテンツ本文</p>
</div>
参考元
いつもありがとうございます。
アーカイブページのカード整形
はてなブログ用テーマ「マテリアルぽっぷ」のカスタマイズ例。
「マテリアルぽっぷ」は記事一覧ページ（＝トップページ）のカードをタイル状に並べた、レスポンシブデザインのテーマ。
その名の通りポップで見やすく使いやすい！
ただ、文章メインのブログなので、トップページは縦型カードより、タイトル文を強調できる横に長いカードを置けたらいいなと思っていた。
そこでアーカイブページ内のカードの形状や並べ方を調整。
Google Chromeの検証機能を使って確認しつつ、手直しした。
目的・目指すもの
- PCブラウザでは横型カードを縦1列に並べたい。
- 横型カードは左半分にサムネイル、右半分に記事タイトルを入れたい。カテゴリ名の表示位置も調整したい。
- スマホや小さめのブラウザでは、「マテリアルぽっぷ」デフォルトの縦型カードで並べたい。
- 「マテリアルポップ」デフォルトの、レスポンシブルにカードの大きさが調整される機能は残したい。
出来上がり
ブラウザ横幅が1200pxを超える
メインカラムに横型のカードが縦1列に並び、その右にサイドメニューが表示される。
「ブラウザ横幅＞1200px」でサイドメニューを表示する方法は、テーマの解説ブログで製作者さんが公開してくださっている。
ブラウザ横幅が1200～560px
メインカラムに横型のカードが縦1列に並ぶ。サイドメニューはブログ下部。
ブラウザ横幅が560px以下
カードが縦型（デフォルトデザイン）に変化する。
CSSコード
以下をCSSに追加。
/* =============== TOPページ・Archivesページ =============== */ /* 大ブラウザではサムネ・タイトルが左右に並ぶ横型カード */ @media screen and (min-width:561px) { .page-archive .archive-entry { position: relative; box-shadow: 0 0 4px 0 rgba(0,0,0,.15), 0 3px 4px 0 rgba(0,0,0,.25); border-radius: 8px; display: -webkit-flex; display: flex; flex-direction: row; background: #fff; } .archive-entry-header { /* 記事タイトル表示スペースをカードの右半分に置く */ order: 1; color: #FFF; width:50%; height:100%; padding: 40px 15px 40px; } .page-index .enable-top-editarea .page-archive .categories,.page-archive .categories { /* カテゴリを左上に固定 */ position: absolute; top:5px; left:10px; height: 24px; z-index: 100; background: #4f8299; border-radius: 8px; padding: 0 10px; font-size: 80%; font-weight: bold; } .entry-thumb-link { /* サムネをカードの左半分に置く */ order: 0; color: #FFF; width:50%; height:100%; } .archive-entry-body { order: 2; } } /* 小ブラウザではサムネ・タイトルが上下に並ぶ縦型カード */ @media screen and (max-width:560px) { .page-archive .archive-entry { position: relative; box-shadow: 0 0 4px 0 rgba(0,0,0,.15), 0 3px 4px 0 rgba(0,0,0,.25); border-radius: 8px; display: flex; flex-direction: column; background: #fff; } .page-index .enable-top-editarea .page-archive .archive-entry:hover,.page-archive .archive-entry:hover { transform: translateY(-5px); box-shadow: 0 0 3px 0 rgba(0,0,0,.15), 0 2px 3px 0 rgba(0,0,0,.25); transition: .3s ease-in-out; } .page-archive .entry-thumb { position: relative; top: 0; width: 100%; height: 15vw; } .page-archive .entry-thumb { background: no-repeat center center; background-size: cover; border-radius: 8px 8px 0 0; } } /* カードサイズ調整 */ @media screen and (min-width:1201px) { .page-archive .entry-thumb { min-height: 280px; } } @media screen and (max-width:1200px) { #content { width: 95vw; } .page-archive .entry-thumb { height: 25vw; } } @media screen and (max-width:768px) { .page-archive .entry-thumb { height: 35vw; } } @media screen and (max-width:560px) { .page-archive .entry-thumb { height: 45vw; } }
【アンデッドアンラック】能力予想！ニコ・フォーゲイル編
記事中の考察には、第20話までのネタバレが含まれます。
アンデッドアンラック（アンデラ）の未登場能力予想、ニコ編です！
予想のための「基本ルール」や、能力名の予想一覧は前記事に記載してあります。
「ミステリと言う勿れ」はミステリか？ 感情と主観で推理する、変わり者大学生の事件簿
ここしばらく、各所で噂を聞くようになった漫画「ミステリと言う勿れ」。
月刊フラワーズで連載中で、作者は「7SEEDS」や「BASARA」で著名な田村由美氏の新作です。
「このマンガがすごい！2019オンナ編」２位受賞、「マンガ大賞2019」２位受賞などで、一気に有名になりました。
タイトルを見た瞬間「妙なタイトルのミステリだな…」と思った人も多いはず。
作品の概要を簡単に説明すると「変わり者の大学生が、事件に巻き込まれ、優れた記憶力や洞察力、推理力を駆使して問題を解決する話」。
これを聞いて「言う勿れ、といいつつやっぱりミステリなんだな」と思う人も、きっとかなりの数いるはず。
はい、自分がまさにそうでした。
でも読んでみると…これ、ミステリか？ミステリじゃない…ような。
じゃあなんだ？
当記事はネタバレなしの感想・考察です。
未読の人にも向けた内容ですが、書籍紹介程度のあらすじや内容にも触れています。
【アンデッドアンラック】キャラクター考察＆能力予想！フィル編
アンデッドアンラック（アンデラ）の未登場能力予想・フィル編です！
予想のための「基本ルール」や、能力名の予想一覧は前記事に記載してあります。
記事中の考察には、第17話までのネタバレが含まれます。
【アンデッドアンラック】キャラクター考察＆能力予想！タチアナ編
アンデッドアンラック（アンデラ）の未登場能力予想・タチアナ編です！
予想のための「基本ルール」や、能力名の予想一覧は前記事に記載してあります。
記事中の考察には、第20話までのネタバレが含まれます。
【アンデッドアンラック】キャラクター考察＆能力予想！ビリー編
「アンデッドアンラック」の未登場能力予想・ビリー編です！
予想のための「基本ルール」や、能力名の予想一覧は前記事に記載してあります。
記事中の考察には、第20話までのネタバレが含まれます。
