ズボラ主婦の戦闘記録

ブログ運営から家計や育児のこと、主婦の戦闘記録を残していきます。

【初心者向け】これさえやっておけば大丈夫!はてなブログproのデザインcssの簡単設定

今回はデザインcssをいじっていきます。
ここを変えていくことで見出しをおしゃれにしたり、文字の大きさを変えられたり、自由にブログをカスタマイズできるようになります。これも、色々調べすぎて頭痛くなったズボラ主婦ですが、とりあえず、これさえやっておけば、ブログ見やすくなるよ!ってやつを、今回は載せていきます。

大元のデザイン設定がまだだよ!って方はこちらから読んでみてください↓

あわせてよみたい


デザインcssを変更する方法

そもそも、どうやって変更するの?って話ですよね。以前は、私も携帯からなんとかデザインcssを変更するのを試みましたが、残念ながら、ペーストできず、断念。前記事でも書いたように、結果的に、実家のパソコンでデザインcssを変更しました。

デザインcssの場所

携帯からでは無理!と分かったところで、気を取り直して、パソコンで「はてなブログ」を開いてログイン。自分のアイコンのマークをクリックして、ダッシュボード→デザイン→スパムのマークをクリックすると、1番下に「デザインcss」があるので、そこをクリック。


プログラミング 変更方法

デザインcssを押すと、最初はこんな感じのプログラミング が書いてあります。

ここから、いろんなコードを今から書き足していきたい訳ですが、私は、え?これ消していいの?それともダメなの?なんか怖い!とビクビク。。結論、この下にどんどんコードを追加していけば大丈夫です。

例えば、こんな感じ。5-9行目が新たに追加したものですが、このように、使いたいコードを下に足していけば、問題なく動きます。


デザインcssに追加したコード紹介

では、ここからは私が実際に追加したコードを紹介していきますね。とりあえず、これらをいれとけば、格段にブログは進化します。どれも簡単なやつを選びました。ズボラですから。。

タイトルを見栄えよくするコード

私はデザインをMinimmlismを使っているため、このデザインを作った方のブログを参考に、このコードを追加しました。

@media screen and (max-width: 640px){
#blog-title #title {
font-size: 21px !important;
}
}

このコードを貼り付けることで、タイトルの見栄えが良くなった気がします。
引用:シンプルで美しいはてなブログの新テーマ「Minimalism」を公開しました。 - ひつじの雑記帳


文字の大きさを変えるコード

文字の大きさって大事です。このMinimmlismだと少し文字が小さくて、読み辛いため、文字を大きくするコードを追加。

.entry-content p {font-size: 16px;}
@media screen and (max-width: 480px){.entry-content p {font-size: 16px;}}

引用:「うわっ…はてなブログ、読みにくすぎ…!」最大の原因はコレ - オークニズム

このコードでは大きさを「16」に設定してありますが、私は気持ち1つ大きめに「17」で設定しました。16の数字のところを17に変更すればできます。


見出しをおしゃれにするコード

見出しはこちらのサイトがデザインもお洒落で豊富なので、ここからコードをコピーしました。
大見出しはh1をh3に変更し、中見出しはh1をh4に変更して、デザインcssに貼り付けたらうまくいきました。


ボックスが使えるようになるコード

ボックスというのは、

こんな感じのことです。文を強調するのに使いやすそうですね。

これもデザインはこちらのサイトで探して、コードをそのまま貼り付けました。


マーカー文字が使えるコード

マーカー文字というのは、こんな感じのことですこちらも便利かなと思い、コードを追加しました。

article u{
text-decoration: none;
background: linear-gradient(transparent 50%, #ffff00 50%);
}

引用:はてなブログでアンダーラインを蛍光ペン風にする方法 - Random Life Blog


コードをスマホから使う場合

設定の変更

まずは設定の変更が必要になります。これをしなければ、どんなにコードを変更しても、反映されません。設定の変更の仕方は、簡単です。アプリを開いて、左上の「設定(ギザギザの工具みたいなボタン)」→「編集モード」→「はてな記法」に変更。
これで設定は完了です。余談ですが、パソコンから記事を書く人は「HTML編集」で書けばいいみたいです。

コードを使って記事を書いてみる

例えば、マーカー線を引きたい場合は、

と書くことで、あいうえおー。となります。他のコードも同様に、各サイトから選んだコードに対応するコードを記事に書けば、大丈夫です。


まとめ

私はパソコン超初心者なので、最初は追加コードはこれぐらいにしましたが、これだけでも、結構ちゃんとした記事になります(ドヤ)。本当はタイトル画面の色とか変えたかったんですが、これはなぜかうまくいかず、諦めました。。また、慣れだしたらカスタマイズしようと思います。さぁ、次はいよいよ、独自ドメインを取得してきます!


さらに利便性を高めるために、追加したコードはこちら↓

あわせてよみたい


応援クリックしてくれたら、
泣いて喜びます!!↓

にほんブログ村 ブログブログ ブログ活用法へ
にほんブログ村