アメーバブログのテンプレート編集画面を使いやすくカスタマイズしてみる

アメブロのCSS編集画面を、余計な機能を削除して入力しやすくカスタマイズします。入力欄をウインドウ幅まで広げるので視認性が向上します。

関連記事：FC2ブログのテンプレート編集画面を使いやすくカスタマイズしてみる

変更点

  • スキン用画像アップロードはデザインの都合で削除しています。画像をアップロードするときはCSSをオフにしてください。
  • Source Code ProをGoogle Fontsから読み込んで適用させています。不要な場合は削除してください。
  • #contentsForm textareaのheightで入力欄の高さが決まります。お使いのモニターサイズに合わせて変更してください。

CSS

今回は、Google Chromeの拡張機能を用いて、サイトにCSSを適用させます。

有名どころには、StylishやStylishなどがあります。お好きな拡張機能でCSSを適用させてください。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Code Pro'), local('SourceCodePro-Regular'), url(https://fonts.gstatic.com/s/sourcecodepro/v6/mrl8jkM18OlOQN8JLgasDy2Q8seG17bfDXYR_jUsrzg.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Code Pro'), local('SourceCodePro-Regular'), url(https://fonts.gstatic.com/s/sourcecodepro/v6/mrl8jkM18OlOQN8JLgasD9V_2ngZ8dMf8fLgjYEouxg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}


#ucsHeader,
.ucs-sidemenu-area,
#ucsMainRight,
h1,
#notes,
#contentsForm h2,
#contentsForm p,
#contentsForm .infoArea,
.autoHeight,
#footerAd,
#globalFooter{
    display:none;
}

#ucsContent,#ucsMain {
    background: none;
    border:0;
}

#ucsContent {
    width: 100%;
	padding: 0 3%;
    box-sizing:border-box;
}

#ucsMainLeft {
    margin: 0;
    width: 100%;
}

#subContentsArea {
    display: flex;
    flex-direction: column-reverse;
}

#contentsForm textarea {
    display: block;
    width: 100%;
    height: 43em;
	font-size: 15px;
    box-sizing:border-box;
    font-family: 'Source Code Pro';
}

CSSの適用先は下記のURLに設定してください。

https://blog.ameba.jp/ucs/editcss/srvcssupdateinput.do

CSSだけで文章を折りたたむ（続きを読む）その1

今回はHTMLとCSSのみでコンテンツの開閉、いわゆる「続きを読む」を再現してみます。

CSSだけでクリックイベントを扱うには、主にtargetを使う方法とチェックボックスを使う方法がありますが、今回は:targetの方を掘り下げてみたいと思います。

パターン1（原型）

普段は非表示にしておいてターゲットになったら表示させる、という最も基本的な形です。

開閉するときに画面がガタつくという弱点があります…(´・ω・`)

デモ

続きを読む▽

ここに内容
ここに内容
ここに内容
閉じる△

ソース

CSS 

1
2
3
4
5
6
.more1 {
  display: none;
}
.more1:target {
  display: block;
}

HTML 

1
2
3
4
5
6
7
8
9
<a href="#more1">続きを読む▽</a>
<div class="more1" id="more1">

ここに内容
ここに内容
ここに内容

<a href="#close">閉じる△</a>
</div>

パターン2（ガタつき修正版）

パターン1の開閉時のガタつきが残念なので改良してみます。

コンテンツの前にdivをもう一つ挟み、間接セレクタを使ってCSSを適用させます。間のdivには、position: fixedで画面に固定させることにより、無理やりですがきれいに開閉できます。

デモ

続きを読む▽

ここに内容
ここに内容
ここに内容
閉じる△

ソース

CSS 

1
2
3
4
5
6
7
8
9
10
.more2{
  display: none;
}
.morefix2:target + .more2{
  display: block;
}
.morefix2{
    position: fixed;
    top: 0;
}

HTML 

1
2
3
4
5
6
7
8
9
10
<a href="#more2">続きを読む▽</a>
<div class="morefix2" id="more2"></div>
<div class="more2">

ここに内容
ここに内容
ここに内容

<a href="#close">閉じる△</a>
</div>

パターン3（アニメーション付き）

最後はやっぱりアニメーション！ということで、開閉時のアニメーションを付け足してみます。

高さ0からautoにはtransitionが効かないので、max-heightで無理やりアニメーションさせています。これはもう少し賢いやり方があるかもしれない…。

デモ

続きを読む▽

 
ここに内容
ここに内容
ここに内容
閉じる△

ソース

CSS 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.more3{
    max-height: 0;
    transform: scaleY(0);
    transform-origin: center top;
    transition: .3s ease;
    transition-property: transform,max-height;
}
.morefix3:target +  .more3{
    max-height: 99999px;
    transform: scaleY(1);
}
.morefix3{
    position: fixed;
    top: 0;
}

HTML 

1
2
3
4
5
6
7
8
9
10
<a href="#more3">続きを読む▽</a>
<div class="morefix3" id="more3">&nbsp;</div>
<div class="more3">

ここに内容
ここに内容
ここに内容

<a href="#close">閉じる△</a>
</div>

まとめ

今回は、コンテンツを折りたたむという動作をCSSだけでやってみました。HTMLが煩雑になってしまうのが弱点ですが、JavaScriptが書けない無料ブログサービスなどもあるので、そのような場所では重宝すると思います。

現在は、<details>タグという使い勝手のいいタグがあるので、正しくマークアップ出来るのであればそちらの方も便利です。

参考：HTMLだけでコンテンツを開閉できる<details>を試してみる
CSS

Hexoのアーカイブページの設定まとめ

Hexoのアーカイブページの設定方法のまとめです。アーカイブページはhexo-generator-archiveというプラグインで生成されています。

hexo-generator-archiveはデフォルトでインストールされているプラグインですが、_config.ymlには設定の記述がないので、自分で追加します。

設定

config.yml

1
2
3
4
5
6
archive_generator:
  per_page: 10
  yearly: true
  monthly: true
  daily: false
  order_by: -date
項目 説明
per_page 1ページあたりに表示する記事数（0でページネーションをオフ）
yearly 年単位のアーカイブページを生成
monthly 月単位のアーカイブページを生成
daily 日単位のアーカイブページを生成
order_by 記事の順番（デフォルトは降順）

URL例

年アーカイブ

https://example.com/2019/

月アーカイブ

https://example.com/2019/04/

日アーカイブ

https://example.com/2019/04/01