test

以下のページで紹介されていた Materiapollo というテーマに変更しました。 - https://wrxsti-fan.blogspot.com/2020/06/blogger-materiapollo.html この記事にある項目以外でカスタマイズした点についてまとめておきます。 ## 前準備 ソフトウェアエンジニアならばこういうテーマのカスタマイズも 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";} ``` アイコンのコードは以下で調べられます。 - https://fonts.google.com/icons ## ボタンのテキストが大文字にならないようにする 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'> ``` ## その他 その他、以下のことをやっています。 ### マークダウンで記事を書けるようにする [こちらの記事](https://kuttsun.blogspot.jp/2017/06/markdown-blogger.html) を参照してください。 ### シンタックスハイライトを設定する [こちらの記事](http://kuttsun.blogspot.jp/2017/07/blogger-highlightjs.html) を参照してください。 ## 表示のテスト 以下マークダウンのテストです。 --- # 見出し１ ## 見出し２ ### 見出し３ #### 見出し４ ##### 見出し５ - リスト - test - test - test - test - test - test - test 番号付きリスト 1. リスト 1. test 1. test 1. test 1. test 1. test 1. test 1. test インラインコード`code`だよ <font color="red">赤文字</font>はHTMLで コードブロック ```csharp namespace hoge { class hoge { int hoge = 0; } } ``` テーブル |header|header|header| |---|---|---| |hoge|hoge<br>テーブル内の改行は`<br>`で|hoge| |hoge|hoge|hoge| ## 参考 URL - https://wrxsti-fan.blogspot.com/2020/06/blogger-materiapollo.html