へっぽこプログラマーの備忘録
プログラムを中心とした個人的なメモ用のブログです。 タイトルは迷走中。
内容の保証はできませんのであしからずご了承ください。
menu
keyboard_arrow_up
Top
search
close
home
ホーム
computer
PC一般
construction
開発環境・ツール
code
プログラミング
home
ホーム
computer
PC一般
construction
開発環境・ツール
code
プログラミング
Home
›
Blogger
›
Vaster2 の適用とカスタマイズ
2017/09/17
Vaster2 の適用とカスタマイズ
update
event_note
label
Blogger
ちょっと前に Blogger のテーマをレスポンシブ対応済みの日本語テンプレートとして無料で公開されている Vaster 2 に変更しました。 適用方法とカスタマイズについて簡単にまとめておきます。 (全てをまとめきれていませんが)
## ダウロード 以下で無料公開されているのでダウンロードします。 - http://toumaswitch.com/vaster2/ ## カスタマイズする前に ここは基本的にプログラマー向けのブログなので言っておきます。 必ずバージョン管理しておきましょう。 後で元に戻したくなったりとか、デザインを変えたくなった時にどこを変えればよかったんだっけ?と必ずなります。 Git がおすすめですが、SVN でも別に構いません。 ## 適用方法 1. Blogger のメニューから「テーマ」をクリックし、「HTMLの編集」をクリックします。 1. エディタの中身を全て消します。 1. `Vaster2-TD.xml` をテキストエディタで開き、中身を全てコピーします。 1. Blogger のエディタに貼り付けし、「テーマを保存」をクリックします。 ## モバイル用の設定を OFF にする Vaster 2 はレスポンシブ対応なので、モバイル用の設定は OFF にしておきます。 ## feedy の設定を変更 以下の箇所を探します。 ```html
Feedly
``` この中の「ブログのURL」と言う文字を、自分のブログのURLに置き換えます。 (http://やURLの最後に/は不要です) ## 画像がない場合にデフォルトのサムネイルを表示させる - https://pooh2roh.blogspot.jp/2017/07/vaster2-9.html ## 全体の背景色を変える 以下の箇所で変更できます。 ```css body{ font-family:Helvetica,"游ゴシック","Yu Gothic",sans-serif; background-color: #fff; /* 全体の背景色 */ margin:0; font-size:16px; line-height:1.6em; } ``` 場合によっては以下も変更する必要があります。 ```css .main-outer{ float:left; width:710px; background:#ffffff; box-sizing:border-box; } ``` ## ヘッダーの色とか大きさを変える 以下の箇所を探します。 ```css .Header{ width:100%; border-top:7px solid #008ec2; background-color:#fff; padding-bottom: 30px; } ``` - `border-top` で画面上部のボーダーを変更できます。 - `background-color` でヘッダーの背景色を変更できます。 - `padding-bottom` でヘッダーとページリストとの余白を調整できます。 テキストの色は以下の箇所で変更できます。 ```css .header-title a{ font-size:40px !important; font-weight:700; text-decoration:none; color:#000000; } .header-title a:hover{ text-decoration:none; } .header-title a:visited{ color:#000000; } /* ブログ説明 */ .header-description p{ font-size:13px; margin-top:5px; } ``` ## ページリストの色を変える 以下の箇所を探し、`background-color` で背景色を変更できます。 ```css .PageList{ width:100%; background-color:#4b99b5; } ``` テキストの色は以下の箇所で変更できます。 ```css .header-nav{ padding:0 !important; } .header-nav li{ float:left; list-style:none; font-size:14px; padding:0; } .header-nav a{ padding: 10px 20px; font-size: 14px; color: #fff; background: #4b99b5; text-decoration: none; display: block; transition:.3s; } .header-nav a:hover{ background-color:#008ec2; color:#fff; text-decoration:none; } ``` ## フォントの変更 以下の箇所で変更できます。 ***変更前*** ```css font-family:Helvetica,"游ゴシック","Yu Gothic",sans-serif; ``` **変更後*** ```css font-family: 'meiryo', 'メイリオ', 'ヒラギノ角ゴ Pro W3', 'MS Pゴシック', sans-serif; ``` ## 月別アーカイブのリストの上下の間隔を狭くする `archive-list ul` の `padding` を変更します。 ```css .archive-list ul{ padding:0 0 20px 10px; list-style-type:none; line-height:1.5em; } .archive-list ul a{ color:#2098a8; } .archive-list ul li{ padding-bottom:7px; } ``` ## 画像サムネイルの変更 デフォルトだとトップページの画像のサムネイルのアスペクト比が維持されず、拡大縮小も自動で行われてしまうので、以下のように変更します。 **変更前** ```css .article-list img{ float:left; width:300px; height:185px; padding-right:20px; } ``` **変更後** ```css .article-list img{ float:left; max-width:200px; max-height:200px; padding-right:20px; object-fit: cover; } ``` ## マークダウンで記事を書けるようにする [こちらの記事](https://kuttsun.blogspot.jp/2017/06/markdown-blogger.html) を参照してください。 Vaster 2 とは関係ありませんが・・・。 ## シンタックスハイライトを設定する [こちらの記事](http://kuttsun.blogspot.jp/2017/07/blogger-highlightjs.html) を参照してください。 Vaster 2 とは関係ありませんが・・・。
tweet
facebook
Pocket
B!
はてブ
LINE
chevron_left
chevron_right
Translate
Popular Posts
Docker for Windows の設定
TortoiseGit でコミットメッセージを変更する
image
NO IMAGE
smbclient で session setup failed: NT_STATUS_LOGON_FAILURE が表示される
TortoiseGit でブランチ間の差分を見る
image
NO IMAGE
マージ元ブランチとマージ先ブランチ
[Python] 文字列の判定で、None と空文字を同時に判定する
[Python] Tesseract で OCR を行ったら `UnicodeEncodeError: 'ascii' codec can't encode characters` のエラーが表示された
image
NO IMAGE
GitLab Runner でクローンする URL を変更する
[Python] matplotlib で plot する際に "Tcl_AsyncDelete: async handler deleted by the wrong thread" というエラーがでる
image
NO IMAGE
[JavaScript] コンストラクタで await したい
Labels
.NET Core
31
.NET Framework
17
.NET Standard
2
AdminLTE
1
AI
1
Apache
3
AppVeyor
2
AsciiDoc
3
ASP.NET Core
55
Atom
4
AWS
5
AWS Cloud9
4
blockdiag
1
Blogger
13
Bootstrap
3
C/C++
6
C#
106
CentOS
3
Chrome
1
Chronograf
3
chrony
1
Codecov
1
CSS
1
Docker
79
DokuWiki
4
Doxygen
1
draw.io
1
EasyTag
1
Electron
1
Electron.NET
2
Entity Framework Core
9
Excel
2
FFmpeg
3
Firefox
6
Flask
1
Git
19
GitBook
4
GitBucket
7
GitHub
7
GitLab
39
Go
1
Google
1
Google Cloud Platform
1
Grafana
13
GStreamer
2
HTML
5
IIS
8
InfluxDB
14
JavaScript
15
Jenkins
7
Linux
33
Log4View
1
MahApps.Metro
3
MaterialDesignInXamlToolkit
1
MkDocs
2
MongoDB
5
MVC
1
MVVM
6
nginx
3
NLog
3
Node.js
8
npm
1
NVIDIA
3
onvif
1
OpenAPI
2
OpenCV
4
OpenSSL
3
OpenVINO
2
ownCloud
2
pandas
1
Pine Script
1
PlantUML
5
Portainer
3
PowerShell
8
Prism
2
PySide
17
Python
85
PyTorch
1
RabbitVCS
1
Razor
3
Redmine
33
Redoc
1
remark.js
2
rocketchat
10
Ruby
3
scikit-learn
1
SignalR
1
Slack
1
Socket.IO
1
SonarQube
5
Sphinx
10
SQL Server
5
SQLite
1
StableDiffusion
1
Subversion
2
Swagger
1
Swarmpit
1
Syslog
3
Telegraf
6
Tesseract
3
TestLink
2
Tomcat
2
TortoiseGit
11
TortoiseSVN
2
Trading View
1
Traefik
3
Travis CI
1
Ubuntu
31
Visual Studio
39
Visual Studio Code
10
VSCode
8
Vue.js
8
Windows
62
Windows 10
5
Windows ADK
1
Windows API
2
Windows Embedded
4
wkhtmltopdf
2
Word
3
WPF
12
WSL
5
WSL2
5
Xamarin
1
xUnit
5
yaml
1
yolo
1
アプリケーション
1
デザインパターン
1
テスト
1
バッチファイル
2
プログラミング
4
ライセンス
1
暗号資産(仮想通貨)
1
英語
2
確定申告
1
機械学習
1
強化学習
1
雑記
1
書籍
1
数学
1
正規表現
1
Blog Archive
►
2024
(7)
►
3月
(1)
►
2月
(5)
►
1月
(1)
►
2023
(30)
►
12月
(3)
►
11月
(5)
►
10月
(2)
►
9月
(1)
►
8月
(2)
►
7月
(4)
►
6月
(2)
►
5月
(3)
►
4月
(2)
►
3月
(2)
►
2月
(3)
►
1月
(1)
►
2022
(106)
►
12月
(5)
►
11月
(1)
►
10月
(3)
►
9月
(6)
►
8月
(7)
►
7月
(6)
►
6月
(13)
►
5月
(9)
►
4月
(15)
►
3月
(11)
►
2月
(14)
►
1月
(16)
►
2021
(85)
►
12月
(11)
►
11月
(6)
►
10月
(4)
►
9月
(10)
►
8月
(8)
►
7月
(4)
►
6月
(18)
►
5月
(7)
►
4月
(8)
►
3月
(2)
►
2月
(2)
►
1月
(5)
►
2020
(56)
►
12月
(1)
►
11月
(3)
►
10月
(3)
►
9月
(3)
►
8月
(3)
►
7月
(7)
►
6月
(7)
►
5月
(2)
►
4月
(6)
►
3月
(6)
►
2月
(3)
►
1月
(12)
►
2019
(92)
►
12月
(13)
►
11月
(9)
►
10月
(3)
►
9月
(2)
►
8月
(3)
►
7月
(5)
►
6月
(11)
►
5月
(6)
►
4月
(17)
►
3月
(9)
►
2月
(6)
►
1月
(8)
►
2018
(100)
►
12月
(1)
►
11月
(11)
►
10月
(8)
►
9月
(6)
►
8月
(10)
►
7月
(10)
►
6月
(8)
►
5月
(9)
►
4月
(8)
►
3月
(14)
►
2月
(4)
►
1月
(11)
▼
2017
(117)
►
12月
(14)
►
11月
(20)
►
10月
(17)
▼
9月
(19)
GitLab Runner を docker-compose で動かす
PlantUML サーバーを docker-compose で動かす
Windows 10 の便利なショートカットキー
ASP.NET Core Identity を使わない認証
Docker for Windows のインストール
Surface Pro (2017) の Mini DisplayPort から音が出なくなった
.NET Core コンソールアプリケーションにおけるロギングや設定について
Blogger API を使用するための準備
Vaster2 の適用とカスタマイズ
ASP.NET Core における多言語対応
Log4View で NLog のログを閲覧する
Doxygen を使ってソースコードからドキュメントを作成する
.NET Core SDK 2.0 のインストール
SQL Server 2016 Express の暗号化
SQL Server にテーブルを作成する
SQL Server にデータベースを新規作成する
SQL Server 2016 Express のインストール
プログラミング・IT技術関連書フェアが Amazon で開催中
Visual Studio と Visual Studio Installer が起動しなくなった
►
8月
(10)
►
7月
(8)
►
6月
(3)
►
5月
(6)
►
4月
(5)
►
3月
(2)
►
2月
(8)
►
1月
(5)
►
2016
(91)
►
12月
(5)
►
11月
(9)
►
10月
(11)
►
9月
(9)
►
8月
(6)
►
7月
(14)
►
6月
(14)
►
5月
(11)
►
4月
(10)
►
3月
(2)
►
2015
(23)
►
12月
(4)
►
11月
(2)
►
10月
(8)
►
9月
(8)
►
7月
(1)
►
2013
(3)
►
11月
(1)
►
9月
(1)
►
7月
(1)
►
2012
(2)
►
7月
(1)
►
6月
(1)
►
2011
(1)
►
9月
(1)
►
2009
(1)
►
7月
(1)
►
2008
(2)
►
11月
(1)
►
7月
(1)
►
2007
(3)
►
10月
(3)