発達障害もどきです、おはこんばんちは。
今回はアウトプットということで、僕がはてなブログを開設してからずっとお世話になってる CSSについて、ごく簡単なものについて一部ご紹介していきたく思います。
そもそも CSSって何ぞやって人はまずググって下さい。ここでは一方的に僕が記事を通じて書いていくだけなので、調べない人は何も分からないで終わると思います。
/* 文字を大きくする */
.entry-content p {font-size: 16.2px;}
その名の通り、記事内で使われる文字の大きさを変えるための CSSになります。はてなブログの記事はデフォルトだと文字があまりも小さいので、虫眼鏡を使わないと見えないんですよね。文字の大きさは 16px が適当とされています。
この CSSは本当に便利ですので、ブログのカスタマイズに微塵も関心がないという人でも、騙されたという気になってぜひ一度試してみて下さい。
/* 写真を中央に表示 */
.hatena-fotolife, .http-image {
display: block;
margin: 0px auto;
}
はてなブログの記事に写真を載せるとき、基本的に左上を起点に設置されてしまうのですが、その位置を中央にするという CSSになります。
せっかく写真を載せたというのに、なんで左上が起点になってんだよ!!! こっちは真ん中にしたいんだよ!!!!!
って人、おそらく多いと思います。ですがこの CSSを使えば簡単に解決することでしょう。
/* 引用デザインを変更する */
.entry-content blockquote {
position: relative;
padding: 25px 55px;
border: 0px;
font-style: oblique;
color: #2b2b2b;
background: #f7f6f5;
}
.entry-content blockquote:before{
display: inline-block;
position: absolute;
top: 0;
left: -10px;
content: "“";
font-family: serif;
color: #dcdcdc;
font-size: 100px;
line-height: 1;
}
.entry-content blockquote:after{
display: inline-block;
position: absolute;
bottom: -50px;
right: 20px;
content: "”";
font-family: serif;
color: #dcdcdc;
font-size: 100px;
line-height: 1;
}
.entry-content blockquote cite {
position: relative;
padding: 10px;
z-index: 3;
display: block;
text-align: right;
color: #888888;
font-size: 0.9em;
}
他所のサイトや書籍から気に入った文章を引用したい人、いらっしゃるんじゃないですか？
この CSSを使えば引用部分をおしゃれに彩ることができます。
/* 記事が書かれてからの日付を消す */
display: none;
}
これは…、まぁ必要ないかと思います。気になる人はコピペしてみたらいいんじゃないですか？
上記の CSSはここに記述しよう！
PC から設定していくかたちになります。スマホしか持っていない人、ここでサヨナラです。
はてなブログのデザイン設定からこの画面まで飛び、その後「デザインCSS」をクリックします。
はい、こちら。ウィンドウが表示されるので、その画面内に先ほど紹介した CSSを打ち込んでいきます。打ち込み終わったら最後に「変更を保存」します。
ちなみに見出しの /* */ についてですが、要するにメモのようなもので、CSSに何かしらメッセージを残しておきたい場合に使用します。まぁ見ての通り CSSって英単語や数字の羅列で見づらさ MAXですからね。/* */ で文字や数字を囲っておくと、囲っている部分が CSSに反映されないので何かと便利です。HTMLには使えません。
まとめ
こういうガジェット＆ツールみたいなことしてみたかったんですよ。
ですがやってみたところ、めちゃくちゃ面倒くさいと思いました。もうやりたくないです、マジで。
今回の記事は、はてなブログを通して HTML とか CSS について気になってはいるものの、ハードルがあまりにも高すぎて手が出せないという人向けに書いてみました。
どんなに難題であっても、ハードルを低くすれば何にだって挑戦できるんですよ。どうしても下げられないものは知らんですけど。
はい、今回はいつもと違い、少し調子に乗って新ジャンルの記事を作ってみました。この記事を閲覧した人が、はてなブログを通じて HTML や CSS に関心を持って下されば幸いです。
