「JOUNAL」の導入とカスタマイズ（備忘録）
ブログをはじめるにあたり、テーマを導入して少しだけカスタマイズしました。
四苦八苦したわりにすでに忘れかけてるので、覚えていることだけでも備忘録的に残そうと思います。この記事は随時更新していきます。
使用したテーマ「JOUNAL」
かわいい。それが決め手です。
「JOURNAL.」をインストールしたら、はじめに設定する4つのこと を、まずは手順通りに実施しました。
テーマ以外のカスタマイズ
かわいいんだけど、ちょっとかわいいがすぎるのと文字が薄くて読みにくい……。
なのでいろいろなブログの記事を参考に、以下のカスタマイズをしました。
フォントを変える
デザインCSSに以下をぶち込んでフォントを変更。
body{
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; /*フォントの種類*/}
（コードブロックが見たまま編集では入れられないので引用で囲ってみました）
こちらの記事を参考にさせていただきました。
文字色、文字サイズを変える
/* 記事タイトル */
.entry-title a{
font-size: 22px; /* 文字サイズ */
line-height: 1.6; /* 行の高さ */
}/* 本文 */
.entry-content {
color: #333; /* 文字の色 */
font-size: 15px; /* 文字サイズ */
line-height: 2.0; /* 行の高さ */
font-family: "blogicon";
}/* 段落 */
.entry-content p {
margin: 0px 0px 0px 0px; /* 周囲の余白 上右下左の順 */
}/* 目次 */
.table-of-contents a {
color: #333333; /* 文字の色 */
font-size: 14px; /* 文字サイズ */
}
先ほどと同じページのこちらを参考にさせていただきました。段落の設定はいらないかもしれません。
グローバルメニューを別のものに変える
ヘッダ下にある帯状のグローバルメニューを、横スライド式からトグル式に変更しました。PCで見る分にはほぼかわりありませんが、画面幅が狭いスマホなどで見るときにメニューを格納してくれます。
コードが長すぎるのでリンク先ご参照ください。
記事が増えてサブカテゴリを作りたくなったらプルダウン式に差し替えたいと思います。
備忘録
きっととんでもなく初歩的なものも含まれますが、cssってなんだ……？ レベルの私がためになったと思う記事と小ネタです。随時追記していきます。
アイコンWEBフォントをつかう
蛍光マーカー風アンダーラインをつかう
本文に罫線を入れる
HTML編集で<hr/>を入れる。見たまま編集のどこかにありそう……？
最新記事一覧に画像を表示する
デザイン ⇒ カスタマイズ ⇒ サイドバー ⇒ 最新記事(デフォルトの)場合 ⇒ 編集
⇒ 「サムネイル画像を表示する」にチェックを入れる
本文に入れたWEBアイコンが斜めになるんだけど…？
<i>ではなく<span>をつかう。
本文に入れたWEBアイコンが消えた
HTML編集でコードを入力する際に、<span></span>の間に など空欄を入れると表示されるようになります。
たとえば[ はてなブログ]と入力するには、HTML編集で[ ]の間に以下を入力します。
<span class="blogicon-hatenablog"> </span>はてなブログ
は.(ドット？)に変換されますが問題ありません。
見たまま編集には反映されないので、プレビューで確認します。
HTML編集をするときはこまめに下書き保存をするようにしましょう（自戒）
残りのカスタマイズ、やることリスト
いつかやる。
h1～h6の見出しのカスタマイズ
太めのアンダーラインに変更したい。
コードブロックのやり方を覚える
気が向いたら……。
プロフィール画像をつくる
５億年ぶりにiPadでお絵描きする。
カテゴリを階層化する
その段階までたどり着きたい。
この記事は随時更新していきます。
