カテゴリー
コミュニケーションズ

BloggerのテーマをContempoに変更など

※2019/02/19 14日にwordpressのRaindropsに移行しました。(現在はTwenty Nineteen)

私のこのサイトはGoogleのBloggerを使っていますが去年あたりに新しいテーマ(テンプレート)が数種類加わったのでその中の「Contempo」に変更してみました。

BloggerのテーマをContempoに変更 マジシャンのホームページ

Contempoの感想

なんかぱっとしませんね。
背景の写真はマジシャン的な物にしたいんですが横長なのでなかなかサイズを合わせるのが難しくて断念。

投稿表示になるとタイトルの表示位置が変わるところなどもいまいちです。

サイドバーには今の所何も入れてません。

現状、HTMLの編集で修正したいところが何箇所かあるのですがなかなか難しくってそこは諦めました。今後も少しずつ修正していく予定です。

トップページのURLを変更

もう一点、今までトップページを「ページ」で書いてトップからリダイレクトさせてたんですが重複のエラーが最近で出たのとやはり短いURLがシンプルなのでトップにガジェットで記載する方法に変えました。

読み込み速度の向上

テーマが新しいので読み込み速度も少し早くなっているようです。

PageSpeed Insights

PageSpeed Insights googleのスピードテスト
89%となっています。モバイルの方は98%です。
両方共少し早くなってます。

前のテーマだとGoogle Search Consoleに出る消せないエラーがあったのですが、こちらはそれが無くなったようです。

モバイル対応

今まではモバイル表示をOFFにしていたのですが今回のテーマでは強制的にONになるようです。今まではPCと表示がかなり変わるので止めていたんですが今回のはそれほど違わないので悪くないかなと思います。
これでモバイルユーザビリティーがフレンドリーになってよかったと思います。

Contempoのモバイル表示 マジシヤンのホームページ

HTMLの編集箇所

テーマ変更後HTMLを少し編集したので備忘録で記載しておきます。
変更箇所は赤字で記載。

○リンクに下線を付ける

noneからunderlineに変更

a{
<!– text-decoration:none; –>
text-decoration:underline;
color:$(body.link.color)
}

○上部の背景画像を削除して写真を追加

高さ指定を230pxに変更

<Group description=”Backgrounds”>
  <Variable name=”body.background.height” description=”Background height”
      type=”length”
      min=”230px”
      max=”640px”
      default=”480px”  value=”230px“/>

○サイドバーが表示されないようにサイドバーの幅を変更 

<Group description=”Widths”>
  <Variable name=”sidebar.width” description=”Sidebar width” type=”length”
            min=”100px” max=”1000px” default=”284px”  value=”320px“/>

○ホームにだけガジェットを表示

ホームの「マジシャン 出張 東京 マジックショー」の部分はガジェットで記載しているのでホームにだけ表示されるように変更

<b:if cond=’data:blog.url == data:blog.homepageUrl’>
  <b:include name=’widget-title’/>
  <div class=’widget-content’>
    <data:content/>
  </div>
</b:if>
</b:includable>

○投稿のタイトルをh3からh2に変更

    <h3 class=’post-title entry-title’>
      <b:if cond=’data:post.link or (data:post.url and data:view.url != data:post.url)’>
        <a expr:href=’data:post.link ?: data:post.url’><data:post.title/></a>
      <b:else/>
        <data:post.title/>
      </b:if>
    </h3>

○「その他の投稿」のフォントサイズ14から20へ変更

#blog-pager a{
color:$(attribution.link.color);
<!– font-size:14px –>
font-size:20px
}

○h2・h3・h4・h5の装飾

CSSの追加で

h2{
margin:20px 0 10px 0;
font-size:30px;
color:#444;
font-weight: bold;
}

h3{
padding-left:10px;
margin:20px 0 10px 0;
border-left:solid 5px #444;
font-size:24px;
color:#444;
}

h4{
margin:20px 0 10px 0;
font-size:24px;
color:#444;
}

h5{
margin:20px 0 10px 0;
font-size:20px;
color:#444;
}

リンク

マジシャン / マジシャン 出張 / マジシャン 派遣 / マジックショー / マジシャンを呼ぶ費用 / マジシャン 出前

作成者: えいち/H

マジシャンのえいち/Hです。
東京でプロマジシャン|出張、派遣をやってます。
記事の感想、コメント、質問などはTwitterにお願いします。
フォローも良かったらお願いします。
Instagram / YouTube / Facebook