マホトラのブログ

日々の生活や面白そうなことに注目してみるブログです!

『超初心者向け』はてなブログの見た目を変える方法について



はてなブログを続けているとブログの見た目を変えたくなってくる時期があります。でも調べると難しいですよね。貼り付けるだけと書いてあってもどこに貼り付けていいか分からない。そもそも専門用語が多すぎてサッパリ分からない。そんな人も多いのではないでしょうか?筆者も全然分かりません。基本的にコピーして貼り付けること以外出来ません。

 

そこで10時間以上悪戦苦闘してブログの見た目を変更した成果をできるだけ簡単にお話したいと思います。

※デザインの変更はスマホからはできませんのでご注意ください。

 

 

 

LV1:テーマの変更

テーマの変更とはブログ全体の見た目や構成を変えることです。

 

①はてなブログの管理画面から【デザイン】をクリックします。 

f:id:safet_driver_maybe:20180420220312j:plain

 

 

②一番下へスクロールさせると【テーマストアでテーマを探す】があるのでクリックする

f:id:safet_driver_maybe:20180420220635j:plain

 

 

③テーマストアで人気順にすると【Brooklyn】というテーマがあるのでクリックします。※人気が落ちた場合は探してください(汗

f:id:safet_driver_maybe:20180420221120j:plain

 

 

【プレビューしてインストール】をクリックして、テーマをインストールしてください。

f:id:safet_driver_maybe:20180420221458j:plain

 

 

⑤ブログの見た目が変わりました。

f:id:safet_driver_maybe:20180420222310j:plain

 

⑥絶対に忘れてはいけないのは

レスポンシブデザインにチェックを入れることです

 

管理画面の【デザイン】をクリックしたら、【スマートフォン】をクリックします

 

f:id:safet_driver_maybe:20180420223829j:plain

 

【詳細設定】をクリックすると【レスポンシブデザイン】というのがあるのでチェックを入れてください。入れないとスマホの画面でテーマの変更が反映されません。

f:id:safet_driver_maybe:20180420223843j:plain

 

(おまけ)ここで満足でしたら終了ですが、トップ画面を記事一覧表示にしたい場合は

設定➜詳細設定(上の部分にあります)から

・一覧表示

・トップページの記事数

をお好みで変更して

一番下に変更するというボタンがあるので必ずクリックしていください。

※変更するをクリックしないと反映されません。。

f:id:safet_driver_maybe:20180420222737j:plain

 

こんな感じになりました。

f:id:safet_driver_maybe:20180420223403j:plain

 

 

LV2:文字のフォントの変更

記事を書いていると字の大きさや間隔が気になることがあります。変更する場合は下記のソースコード(アルファベットの羅列)をCSSという所に貼り付けます。


.entry-content {
font-size:15px;
line-height:1.8em;

〇張り付ける場所は

【デザイン】➜【カスタマイズ】【{}デザインCSS】

赤の矢印のところにソースコードを貼り付けてください

f:id:safet_driver_maybe:20180420225748j:plain

 

font-sizeは字の大きさ表しています。15の数字をお好きな数字に変更すれば大きくなったり小さくなったりします。

 

line-heightは列の間隔です。1.8の数字をお好みで変更してください。

 

(例)

あいういえお

この間隔

かきくけこ

 

絶対に忘れてはいけないのは

変更を保存する

をクリックしてください。忘れると反映されません。

 

 

LV3:見出しと目次の変更

見出しとは下記のようなものです。

 

・見出しは見出しにしたい部分を左クリックでなぞり(青くなってるところ)

・左上の見出しをクリックして好きな大きさを選ぶ

・真ん中の矢印の【目次】をクリックすると:contentsというのが挿入される

(その場所に目次一覧が表示される)

f:id:safet_driver_maybe:20180420231410j:plain

 ↓こんな感じになる。↓

f:id:safet_driver_maybe:20180420231759j:plain

 

この見出しのデザインを変更したい場合は、LV2で紹介した【デザインCSS】のところに下記のソースコードを貼り付けます。

ちょっとわかりにくいですが、赤字の矢印のところに張り付けてください。

 

/</system setion・・・・・・・

 

↤この間に張り付けてください

(理由は自分もわかりません・・)

 

/</system>/

 

f:id:safet_driver_maybe:20180420233322j:plain

 


///*--------------------------------------
 見出しのカスタム
--------------------------------------*/
/* 見出しのリセット */
.entry-content h2,
.entry-content h2::before,
.entry-content h2::after {
background: none;
border: none;
border-radius: 0;
}


/* 見出しのリセット */
.entry-content h3,
.entry-content h3::before,
.entry-content h3::after {
background: none;
border: none;
border-radius: 0;
}

/* 見出しのリセット */
.entry-content h4,
.entry-content h4::before,
.entry-content h4::after {
background: none;
border: none;
border-radius: 0;
} 

.entry-content h2 {
padding: 4px 10px;
padding-bottom: .5em;
color: #111;
border-top: 2px solid #B01C1C;
border-bottom: 2px solid #B01C1C;
}
.entry-content h3 {
padding-bottom: .5em;
border-top: 1px solid #B01C1C;
border-bottom: 1px solid #B01C1C;
background-color: #fce9e9;

}

.entry-content h4 {
position: relative;
color: #111;
border-bottom: 4px solid #ccc;
padding: 8px 10px;
}
.entry-content h4::before {
position: absolute;
top: 100%;
left: 0;
width: 20%;
height: 4px;
background-color: #B01C1C;
z-index: 2;
content: '';
}

 

張り付けると

f:id:safet_driver_maybe:20180420233722j:plain

 

見出しのデザインが変わります。

ただしデザインが変わるのは大見出しだけです。筆者の技術力ではそこまでが限界です。申し訳ありません。。

見出しを参考にしたのは以下のサイトです。

コピペで簡単!CSSではてなブログの見出しをカスタマイズ! - NO TITLE

 

もし他のデザインに変更したい場合は

赤で線を引いた部分を他のソースに書き換えてください。

f:id:safet_driver_maybe:20180420234828j:plain

 

目次の変更は【デザインCSS】のところに以下のソースコードを貼り付けてください。貼り付け方は見出しと同じです。順番はどちら上でもかまいません。

 


///*--------------------------------------
  もくじ
--------------------------------------*/
ul.table-of-contents {
  font-size: 18px !important;/*文字サイズ*/
  border: 2px dashed #515 !important;
  padding: 1em 1.5em 1em 2.25em !important;
  color: #000 !important;
  display: inline-block;
}
ul.table-of-contents:before {
  content: "[  も く じ  ]"; /* お好きな文言に変更してください */
  display: inline-block;
  margin: 0.2em 0em 1em;
  padding: 0.2em 1em;
  font-weight: bold;
  background-color: #f5f5f5;
}
ul.table-of-contents a:after {
  display: none !important;
}
ul.table-of-contents li a,
ul.table-of-contents li a:visited {
  color: #000 !important; /* リンク文字の色 */
  text-decoration: none; /* リンクの下線あり・なし */
}
ul.table-of-contents li a:hover {
  color: #bac !important; /* リンクにマウスを重ねた時の色 */
}
ul.table-of-contents li {
  margin: 5px 0 10px 10px !important;
  line-height: 1.5;
  padding: 0;
  list-style-type: none !important;
}
ul.table-of-contents li:before {
  content: "▼"; /*お好きな記号に変更可能です*/
  position: absolute;
  left: 1.7em !important; /*左端からのアイコンまでの距離*/
  color: #fac;
}
ul.table-of-contents ul li,
ul.table-of-contents li ul {
  /* H1のみ表示させる */
  display: none !important;
}

 

f:id:safet_driver_maybe:20180420235557j:plain

目次が変わりました。もし他の目次に変更したい場合は、上のソースを書き変えてください。

 

 

LV4:テーマをカスタムする

テーマのカスタムとは自分が選択したテーマ(今回だとBrooklyn)

 を更にカスタムすることです。

実際にやろうとしましたが凄まじく難しかったのです。

下記のサイトを参考にして自分で少しだけ手を加えたらまぐれでできちゃった感じです。

www.foxism.jp

 

以下のソースコードを例のごとく【CSS】に貼り付けてください。

ただし、スマホ画面はわざと反映しないようにしています。なぜなら反映させようとすると画像が崩れてしまうからです。

ご了承いただいた方は参考にしていただけたらと思います。

 ※貼り付け場所が分からない方は目次のLV3を読んでください

 


//@media (min-width: 768px){
.page-index .archive-entry{
     position: relative;
     display: -webkit-flex;
     display: flex;
     -webkit-flex-direction: column;
     flex-direction: column;
     height:264px;overflow:hidden;
     background:#333333;
}
.page-index .archive-entry:nth-of-type(even){
     background:#3f51b5;
}

.page-index .archive-entry:nth-of-type(odd){
     padding:16px 16px 0px 296px;
}
.page-index .archive-entry:nth-of-type(even){
     padding:16px 296px 0px 16px;
}

.page-index .entry-thumb-link{
     -webkit-order: -1;
     order: -1;
}
.page-index .entry-thumb {
    width: 280px;
    height: 280px;
    background-position: center center;
    background-size: cover;
    background-repeat: none;
    margin:0 0 0 0;padding:0 0 0 0;
}
.page-index .archive-entry:nth-of-type(odd) .entry-thumb{
     position:absolute;top:0;left:0;
}
.page-index .archive-entry:nth-of-type(even) .entry-thumb{
     position:absolute;top:0;right:0;
}

.page-index .archive-entry-body{
     color:#fff;
}

.page-index  .archive-entry .categories{
     position: absolute;
     top: 0;
     z-index: 10;
}
.page-index  .archive-entry .categories a.archive-category-link{
     border-radius:0;
}
.page-index  .archive-entry .categories a.archive-category-link:last-of-type{
     margin-right:0;
}
.page-index  .archive-entry:nth-of-type(odd) .categories{
     left: 0;
}
.page-index  .archive-entry:nth-of-type(even) .categories{
     right: 0;
}
.page-index .entry-title{
     padding: 0.5em 0 0 0;
}
.page-index .entry-title a{
     color:#fff;
}
}

 

f:id:safet_driver_maybe:20180421001748j:plain

 

写真の画像が大きくなって記事の一覧に色をつけました。

色が気に入らない方はLV5にお進みくださいませ。

 

 

LV5:スマホの見た目も少し変更

LV4だとスマホの見栄えが全然変わらないので、色だけでもつけられるようにしました。色を変更すればパソコンの画面もスマホの画面も連動して変わります。

 

LV4で貼り付けたソースコード消して

下記のソースコードを張り付けてください。

 

 


///*--------------------------------------
  トップ画面のカスタム
--------------------------------------*/
@media (min-width: 768px){
.page-index .archive-entry{
     position: relative;
     display: -webkit-flex;
     display: flex;
     -webkit-flex-direction: column;
     flex-direction: column;
     height:264px;overflow:hidden;
}

.page-index .archive-entry:nth-of-type(odd){
     padding:16px 16px 0px 296px;
}
.page-index .archive-entry:nth-of-type(even){
     padding:16px 296px 0px 16px;
}

.page-index .entry-thumb-link{
     -webkit-order: -1;
     order: -1;
}
.page-index .entry-thumb {
    width: 280px;
    height: 280px;
    background-position: center center;
    background-size: cover;
    background-repeat: none;
    margin:0 0 0 0;padding:0 0 0 0;
}
.page-index .archive-entry:nth-of-type(odd) .entry-thumb{
     position:absolute;top:0;left:0;
}
.page-index .archive-entry:nth-of-type(even) .entry-thumb{
     position:absolute;top:0;right:0;
}

.page-index  .archive-entry .categories{
     position: absolute;
     top: 0;
     z-index: 10;
}
.page-index  .archive-entry .categories a.archive-category-link{
     border-radius:0;
}
.page-index  .archive-entry .categories a.archive-category-link:last-of-type{
     margin-right:0;
}
.page-index  .archive-entry:nth-of-type(odd) .categories{
     left: 0;
}
.page-index  .archive-entry:nth-of-type(even) .categories{
     right: 0;
}
.page-index .entry-title{
     padding: 0.5em 0 0 0;
}
}


.page-index .archive-entry{
     background:#FDF5E6;
}

.page-index .archive-entry:nth-of-type(even){
     background:#FBFCCD;
}

.page-index .archive-entry-body{
     color:#000000;
}

.page-index .entry-title a{
     color:#000000;
}

 

 

スマホの画面がほぼ筆者のブログと同じものになります。

f:id:safet_driver_maybe:20180421004122j:plain

 

もし色を変えたい場合は赤字のコードを変更してください。

色のコードは下記のサイトで調べることができます。

html-color-codes.info

.page-index .archive-entry{
background:#FDF5E6;
}

.page-index .archive-entry:nth-of-type(even){
background:#FBFCCD;
}

.page-index .archive-entry-body{
color:#000000;
}

.page-index .entry-title a{
color:#000000;
}

 

まとめ

プログラムなんて一切わからないので大変でした。たぶんブログをやっている人からしたら楽勝なのかもしれません。最初に10時間かかったとお話しましたが、ここまでカスタムするのに実際はもっとかかっているかもしれません。

 

できるだけ初めての人でも分かりやすいようにご紹介したつもりですが、分からない方がいらっしゃったら申し訳ありません。コメントをいただいたら時間があるときに直そうかと思います。

 

ただ難しいことを聞かれても一切分かりません。情けないですが本当に分かりません。きっと筆者のように「わからないよ~!!」と悲しくなった人がいるかと思ったので、見た目を変更する方法について一生懸命ブログに書いてみました。お役に立てたら嬉しいです。