プログラムを中心とした個人的なメモ用のブログです。 タイトルは迷走中。
内容の保証はできませんのであしからずご了承ください。

2021/06/01

デザインを Materiapollo に変更しました

update2021/06/02 event_note2021/06/01 13:57

当ブログのテーマを Materiapollo というテーマに変更しました。

このテーマについて、カスタマイズして点についてまとめておきます。

前準備

ソフトウェアエンジニアならばこういうテーマのカスタマイズも Git を使って管理しましょう。

ウィジェットのアイコンを追加

私はサイドバーに翻訳ウィジェットとかも表示しているので、それ用のアイコンを追加します。

変更前

.sidebar .widget.BlogArchive h2:before{content: "\e02f\00A0";}
.sidebar .widget.Label h2:before{content: "\e54e\00A0";}
.sidebar .widget.PopularPosts h2:before{content: "\e39f\00A0";}

変更後

BlogSearch Translate ContactForm を追加しました。

.sidebar .widget.Translate h2:before{content: "\e8e2\00A0";}
.sidebar .widget.BlogSearch h2:before{content: "\e8b6\00A0";}
.sidebar .widget.BlogArchive h2:before{content: "\e02f\00A0";}
.sidebar .widget.Label h2:before{content: "\e54e\00A0";}
.sidebar .widget.PopularPosts h2:before{content: "\e39f\00A0";}
.sidebar .widget.ContactForm h2:before{content: "\e0be\00A0";}

アイコンのコードは以下で調べられます。

ボタンのテキストが大文字にならないようにする

Material-UI ではボタンのテキストは全て大文字になってしまうのですが、これを解除します。

READ MORE と ラベルの二カ所について以下のように修正します。

変更前

<a class='btn col m12 right' expr:href='data:post.url' style='font-weight:600;'>Read more <i class='material-icons medium chevron_r'></i></a>
<a class='btn left post-per-page' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/><b:if cond='data:showFreqNumbers'>

変更後

<a class='btn col m12 right' expr:href='data:post.url' style='font-weight:600;'>Read more <i class='material-icons medium chevron_r'></i></a>
<a class='btn left post-per-page' style='text-transform: none;' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/><b:if cond='data:showFreqNumbers'>

テーマの色を変更

ヘッダーの色は #00acc1、ナビゲーションバーの色は #00bcd4 なので、これで検索したら修正箇所が見つかると思います。

ヘッダーの色とテキストの配置

変更前

header{height:200px;background-color: #00acc1; overflow: hidden; color: #fff; text-align: center;}
#headerleft{margin:0;}
.headerleft h1{padding-top: 85px;}

変更後

header{background-color: #212121; overflow: hidden; color: #fff;}
#headerleft{margin:0;}
.headerleft h1{padding-top: 15px;}

ナビゲーションバーの色

変更前

nav{background-color: #00bcd4;}

変更後

nav{background-color: #757575;}

ドロップダウンリストの色

変更前

nav.npin .dropdown-content li > a, .dropdown-content li > span {
    color: #00acc1;
}

変更後

nav.npin .dropdown-content li > a, .dropdown-content li > span {
    color: #212121;
}

パンくずリストの色

リンクの色と合わせました。

変更前

.breadcrumbs.card a {color: #00acc1;}

変更後

.breadcrumbs.card a {color: #2196f3;}
.breadcrumbs.card a:hover {color: #64b5f6;}

CSS の追加

見出しをはじめ、全体的にコンテンツ内のデザインが素っ気なかったり、一部デザインが崩れていたりしたので、以下の CSS を追加しました。

.marked は後述するマークダウンを適用している範囲を指定しています。

見出し

.marked h1, .marked h2, .marked h3, .marked h4, .marked h5, .marked h6 {
  margin: 1em 0;
  font-weight: bold;
  /* font-family: 'Material Icons' */
}

.marked h2 {
  padding: 0.4em;
  background: #eaf3ff;
  border-bottom: solid 3px #424242;
}

.marked h3 {
  padding-bottom: 0.4em;
  border-bottom: dotted 1px black;
}

リスト

リストのマーカーは全てなしになっているのをデフォルト状態に戻しています。

.marked ul > li {
  list-style-type: disc;
}

.marked ul > li > ul > li {
  list-style-type: circle;
}

.marked ul > li > ul > li >  ul > li {
  list-style-type: square;
}

.marked ul {
  padding: 0 0 0 40px;
}

.marked li {
  padding: 0px;
  margin: 0 0 4px 0;
}

.marked ol {
  padding: 0 2.5em;
  margin: .5em 0;
  line-height: 1.4;
  list-style-type: decimal;
}

デフォルト状態に戻したいだけなのに結構面倒です。
以下のページが参考になりました。

コードブロック

.marked pre {
  margin: 0.5em 0 1.5em 0;
  border-radius:10px;
}

.marked p > code {
  padding: 0.1em 0.3em;
  color: palevioletred;
  background: ghostwhite;
  border: 1px;
  border: solid 1px darkgray;
  border-radius: 5px;
}

テーブル

.marked table{
  border-collapse: collapse;
  width: 100%;
}

.marked table tr{
  border-top: solid 1px #d0d0d0;
  border-bottom: solid 1px #d0d0d0;
  cursor: pointer;
}

.marked table tr:hover{
  background-color: #eaf3ff;
}

.marked table th{
  padding: 15px;
  text-align: center;
  font-weight: bold;
}

.marked table td{
  padding: 15px;
}

デフォルトの画像を追加

記事中にある最初の画像がトップページに表示されますが、画像がない記事の場合は何も表示されず寂しいので、NO IMAGE と表示されるようにします。
ちなみに、画像ではなくマテリアルアイコンと文字列で作成しています。

ホーム画面の NO IMAGE

変更前

<b:if cond='data:post.firstImageUrl'><div class='md-thumb col s12 m5 l5' style='text-align: center;'><a expr:href='data:post.url'><img expr:src='data:post.firstImageUrl'/></a></div></b:if>

変更後

<div class='md-thumb col s12 m5 l5' style='text-align: center;'>
  <a expr:href='data:post.url'>
    <b:if cond='data:post.firstImageUrl'>
      <img expr:src='data:post.firstImageUrl'/>
    <b:else/>
      <div class="noimage">
        <i class="material-icons large">image</i><br/>
        <span>NO IMAGE</span>
      </div>
    </b:if>
  </a>
</div>

人気記事の NO IMAGE

変更前

<b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
  <div class='item-thumbnail' style='position: absolute; top: 15px; left: 15px;'>
     <b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 72, "1:1") : data:post.thumbnail' var='image'>
       <img alt='' border='0' expr:src='data:image' style='width: 42px; height: 42px; padding-right: 0 !important; border-radius:4px;'/>
     </b:with>
  </div>
</b:if>

変更後

<div class='item-thumbnail' style='position: absolute; top: 15px; left: 15px;'>
  <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
    <b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 72, "1:1") : data:post.thumbnail' var='image'>
      <img alt='' border='0' expr:src='data:image' style='width: 42px; height: 42px; padding-right: 0 !important; border-radius:4px;'/>
    </b:with>
  <b:else/>
    <div class="noimage-small">
      <i class="material-icons small">image</i><br/>
      <span>NO IMAGE</span>
    </div>
  </b:if>
</div>

CSS

あとは上記に合わせて以下の CSS を追加します。

.noimage {
  color: #bdbdbd;
  font-size:30px;
  font-weight:bold;
}

.noimage-small {
  color: #bdbdbd;
  width: 42px;
  font-size:6px;
  font-weight:bold;
  text-align: center;
}

その他

その他、以下のことをやっています。

マークダウンで記事を書けるようにする

こちらの記事 を参照してください。

シンタックスハイライトを設定する

こちらの記事 を参照してください。

投稿日時と更新日時の表示

以下のページを参考にさせていただきました。

テーマ適用後にやったこと

  • ウィジェットの追加(翻訳など)
  • フッターのウィジェットを削除
  • 人気記事のスニペットを非表示にした
  • 記事の作成者とコメント数を非表示にした

表示確認

以下、表示の確認です。


見出し1

見出し2

見出し3

見出し4

見出し5
  • リスト
    • test
    • test

インラインコードcodeだよ

赤文字はHTMLで

コードブロック

namespace hoge
{
  class hoge
  {
    int hoge = 0;
  }
}

テーブル

header header header
hoge hoge
テーブル内の改行は<br>
hoge
hoge hoge hoge