vertical-blogthemeのブログ

走る縦線がポイントのブログテーマのサンプルです

アップデート情報: より見やすく調整しました

Vertical BlogTheme をご利用いただき、ありがとうございます。

より見やすくするために、 Vertical BlogTheme を更新しました。

現在利用しているユーザーは、レイアウト崩れや見えない文字が無いかご確認をお願いします。特に、下記の箇所をご確認いただくと幸いです。

  • 「続きを読む」リンク (ボタンのスタイルを適用しました)
  • サイドバーの「最近のコメント」 (ユーザー名と記事名が別行で表示されるようになりました)
  • フッター (ヘッダーと同じ背景色が付きました)

変更内容はキャッシュ等によってすぐに反映されない場合があります。しばらく時間を置いたりしてお確かめ願います。

変更内容

f:id:aokashi:20210129180607p:plainf:id:aokashi:20210129180621p:plainf:id:aokashi:20210129180631p:plain
定義リスト、最近のコメント、記事のタイトル

  • 「続きを読む」リンクにボタンのスタイルを適用
  • dt (定義リストのタイトル) 要素に下線が追加されるように調整
  • サイドバーの月別アーカイブで使用するアコーディオンメニューの三角印を少し小さく調整
  • サイドバーの「最近のコメント」でユーザー名とコメント先の記事名を別行で表示するように変更
  • 記事のタイトルの太さをより太く設定 (700 → 900)
  • 記事の内容の長い単語を折り返すように調整
  • フッターリンクの下線をカーソルにのせた場合のみ表示するように変更
  • フッターにヘッダーと同じ背景色を適用
  • 投稿のタイトル部分と内容部分にある線を投稿の領域全体にまで広げるように調整

ブログテーマをカスタマイズするには

右側サイドバーの背景を変更したい

このままデザインのカスタマイズ機能で、背景画像や背景色を変更すれば適用されます。

なお、背景画像や背景色は暗色をおすすめします。どうしても明色にしたい場合は、下記のスタイルシートを追加で割り当てることで、右側の文字が見やすくなります。

#box2 {
    color: (お好みの文字色);
}
#box2 a {
    color: (お好みのリンクの文字色);
}

左側コンテンツの外側の背景色を変更したい

下記のスタイルシートを追加で割り当てることで変更できます。

#blog-title,
.header-image-enable #blog-title,
#wrapper,
#footer {
    background-color: (お好きな色);
}

(スタイルシートセレクタは今後のアップデートで変更する可能性があります。もし変更の必要がありましたら、随時お知らせします。)

ヘッダーとフッターの背景色を変更したい

下記のスタイルシートを追加で割り当てることで変更できます。

#blog-title-inner,
#footer-inner {
    background-color: (お好きな色);
}

ヘッダーは #blog-title-inner 、フッターは #footer-inner になります。個別に変更したい場合はそれぞれに対応したセレクターのCSSを記述しましょう。

/* ヘッダーにのみ白色の背景を適用する場合 */
#blog-title-inner {
    background-color: #fff;
}

サンプル記事

段落

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

フォトライフ

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。


あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。


ブロック

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

大きい画像

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

罫線


h1見出し

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
ABCDEFGHIJKLMabcdefghijklm1234567890

h2見出し

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
ABCDEFGHIJKLMabcdefghijklm1234567890

h3見出し(*)

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
ABCDEFGHIJKLMabcdefghijklm1234567890

h4見出し(**)

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
ABCDEFGHIJKLMabcdefghijklm1234567890

h5見出し(***)

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
ABCDEFGHIJKLMabcdefghijklm1234567890

h6見出し

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
ABCDEFGHIJKLMabcdefghijklm1234567890

asin

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

「へんな会社」のつくり方 (NT2X)

「へんな会社」のつくり方 (NT2X)

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

リスト(ul,ol,dl)

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

  1. 大賞1名:Amazonギフト券5万円分
  2. 入選9名:Amazonギフト券1万円分
    1. 大賞1名:Amazonギフト券5万円分
    2. 入選9名:Amazonギフト券1万円分

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

大賞1名
Amazonギフト券5万円分
入選9名
Amazonギフト券1万円分

テーブル

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

名前 個数
りんご 1
みかん だいだい 2

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

PRE

.XXX {
  width:999px;
  height:999px;
}

.propA, .propB, .propC {
  width:999px;
  height:999px;
}

#YYY {
  width:9px;
  height:999px;
}