[kintone]スペース画像の文字を見やすくする

2021.09.12　修正加筆しました。
2021.10.13　加筆しました。

kintoneのスペース画像のいい作成方法について、キンコミで盛り上がっています。

403 Forbidden

kincom.cybozu.co.jp

なかじさんが投稿されたスペースカバー画像の作り方ノウハウの投稿です。
これによると、kintoneのスペース画像には最適なサイズというものがあって、左端の一部分が、ポータルなどで表示されるアイコンのマークとなるようです。ふむふむ。

この方法でスペース画像を作ると、ほどよい画像ができあがるわけです！私はいつも、なんかうまく表示されないナァとモヤモヤしていたので、すごく参考になる投稿でした。ありがとうございます。

ただ、画像がいい感じに調整できてくると、さらに贅沢を求めてしまうのが人の心というもの。

こちらをご覧ください。

文字が見づらくないですか！？
せっかく画像をいい感じにしても、文字が見づらいとちょっと悲しい(´Д｀)

だったら、文字も見やすくしてやろうじゃないの～！
というわけで少しばかり調べてみました。

HTMLとCSSのおはなし

この文字の部分は、そのまま、「文字」が表示されています。画像ではありません。
kintoneはブラウザで動いていますので、要はHTML記述なので、「勉強スペース」という文字列に色々と装飾をつけたり、配置場所を指定したりして表示しているということになります。
どんな風に処理されているかを知りたければ、その画面を開いた状態で「F12」（Chromeのとき）を押すと、そのページの内容が見れますので、興味がある方は一度見てみましょう。
EdgeはCtrl＋Shift＋Iです。

ここでも軽く触れておきますね。

こんな感じで、実際にどのような設定で表示がされているのかがわかるようになっております。右上の矢印にあるように、「Elements」のタブを見てくださいね。

スペース名の文字はここです。（最初は▶で隠れているので、クリックして▼にして広げましょう。）

HTMLやCSSの知識が多少必要にはなりますが、ここのタグは<a>が使われていて、表示形式の設定の名前として「class=”gaia-argoui-space-spacelayout-title“」というものが使われていることがわかります。
詳しくは省略しますが、要は、 “gaia-argoui-space-spacelayout-title” の設定を追加で加えてあげれば、表示方法を少し変えることができるということです！

（追記）これだけだと、うまくいかないところが出てきます。後ほど解説します！

どうやったら見やすくなるのか

スペース名の装飾をよくよく見てみると、白抜き文字にうっすらと影のようなものがモヤモヤ～っとついていて少し立体感のあるような表示になっていることがわかります。
背景画像はいろんな色や形であることが想定されるので、白抜き文字の色はそのままに、モヤモヤ～っとついている影の色を濃くすることで見やすくすることにします。
（他にも方法は色々あると思いますが、単純な方法でやってみます！）

影の付け方のCSSの書き方なのですが、「text-shadow」という要素を使います。

text-shadow - CSS: カスケーディングスタイルシート | MDN

text-shadow は CSS のプロパティで、テキストに影を追加します。文字列およびその装飾 (decoration) に適用される影のリストをカンマで区切ったリストで受け付けます。それぞれの影は、要素からの X および Y オフセット、影の明るさ、影の色のうちいくつかの組み合わせで記述します。

developer.mozilla.org

これは、文字に影をつける装飾の指定です。詳しく書くとごちゃごちゃしますので、ここは簡潔に私が試した内容をお知らせします。影の指定はこちら▼を参考にしました！（先人様、ありがとうございます。）

ぼくの辿り着いた濃いめのtext-shadow - Qiita

#はじめに前記事でこんなものを書いていました。【前記事】ぼくの考えたさいきょうのCSSだけで2pxの縁取り文字☝上記記事を応用して出来ることが増えたのでまた記事を書きました。#text-sh…

qiita.com

適当なCSSファイルを用意しましょう。
「test.css」というファイルを作ります。テキストエディタやメモ帳で作れます。

a.gaia-argoui-space-spacelayout-title
{
text-shadow: 
    black 2px 0px 2px, black -2px 0px 2px,
    black 0px -2px 2px, black -2px 0px 2px,
    black 2px 2px 2px, black -2px 2px 2px,
    black 2px -2px 2px, black -2px -2px 2px,
    black 1px 2px 2px, black -1px 2px 2px,
    black 1px -2px 2px, black -1px -2px 2px,
    black 2px 1px 2px, black -2px 1px 2px,
    black 2px -1px 2px, black -2px -1px 2px,
    black 1px 1px 2px, black -1px 1px 2px,
    black 1px -1px 2px, black -1px -1px 2px;
}

これをkintoneに適用します。kintone全体に適用しようとすると、kintoneのシステム管理者権限が必要になりますのでご注意ください。

ここのカスタマイズ→JavaScript／CSSでカスタマイズを選びます。
PC用のCSSカスタマイズに、先ほど作ったCSSファイルをアップロードします。
上の方の適用範囲が「適用しない」になっていると、せっかく指定したCSSが反映されませんので、「すべてのユーザーに適用」もしくは「kintoneのシステム管理者だけに適用」を選びましょう。

設定したら、左上の[保存]ボタンを押します。
画面上部にメッセージが出たらOKです。

適用した結果は…

影がはっきりしたので、白抜き文字がくっきり見えますね！成功！
しかし…！よくよく見ると、左端の文字が少し欠けているのがわかります。
…わかりますか？

惜しい！
どうしてこうなったかというと、白抜き文字の位置はそのままに、まわりの影だけ太くしたので、太くなった分が表示しきれなかった、という感じです。
なので、少しだけ右側にずらした位置から文字を表示させるように変更します。

padding: 0 0 0 5px;

これを追加します。文字の左側に5pxだけ間を空けますよ、という指定です。
（当初20pxにしていましたが、ずらしすぎだったので小さくしました。実際の様子を見ながら調整してくださいね～）
さてさて、どうなるか？

いいですね！太くなった影の分までしっかりと表示されています。

ちなみに、CSSの適用クラス、１つ足りませんでした。「a.gaia-argoui-app-titlebar-content」という要素にも同じ指定が必要です。
違いは、
a.gaia-argoui-space-spacelayout-title がスペースポータルスペース内アプリ一覧画面の指定。
a.gaia-argoui-app-titlebar-contentがスペース内アプリ詳細画面表示時の指定。
ということのようです。（↑間違ってたので修正しました）

（追記）これではだめでした…以下、追加内容です！

スペース内アプリと、ポータル直下アプリでCSSの指定が違う！？

よしよし、うまく表示できたぞ～と満足していたのですが、ポータルに置いているアプリを開くと逆に読みにくくなる現象が発生しました。（先に気づけよ…と猛反省(/ω＼)

改めて、kintoneのHTMLとにらめっこしたんですが、この位置に表示されるのが、

• ポータル直下のアプリなら、アプリ名
• スペース内アプリなら、スペース名

が表示されることがわかりました。（今まで意識してなかった…）
ちょっとややこしい話にはなるのですが、CSSのクラス名自体は間違えてなかったのですが、CSSの特性といいますか、指定の優先順がありまして、うまく指定が機能しないパターンがあったようです。

Chromeを開発者モードにして、CSSと格闘した結果、ポータル直下アプリでも指定が効くようになりました～(´ω｀*)ヨカッタ。（ソースは最後に！）
ポータル直下のアプリ名の文字色が黒なので、文字色を黒から白に変える指定が必要でした。めんどくさいので関係するすべての指定で文字色を白にしちゃいました。

それから、ポータル直下のアプリの場合は、CSSを少し上の階層から指定してあげる必要がありました。なのでソースにちょいと追記しております。
もしこのあたりの細かい内容が知りたい場合は、「CSS　セレクタ　子孫」とかで検索かけてみると色々と参考サイトが見つかりますので参考になさってください～(*´з`)

なかじさん直伝、動くスペース画像にもぴったり！

記事の最初で紹介した、キンコミで盛り上がったスペース画像について投稿されていたなかじさんが更なるカスタマイズとしてスペース画像にアニメーションをつけるという技を披露されてました！！

ふと思いついて試したところで #kintonecafe 内で反響のあった #kintone の動くスペースカバー画像。5MBまでのアニメーションGIFなら行ける模様。ハンバーガーメニューと、スペースカバー画像は動く。ポータルのスペースがアイコン化したところは動かないかな？ pic.twitter.com/IfNJO4fgzM

— なかじ@業務改善職(🍖雑食🥦) (@nakaji32) September 11, 2021

動く画像の上の文字だと文字が読みにくいので、今回の文字を読みやすくする方法がぴったりかと思います！一応試してみたのですが、うまく動画状態の画像が録画できませんでした(-_-;)
苦肉の策で、Twitterにあげたものをそのまま貼っておきます！

もうちょいかわいさをアップさせてみた pic.twitter.com/RDfYPya4g5

— Hiromi Hori（ほりさん） (@hiromihori4) September 12, 2021

今回のCSS内容

.contents-actionmenu-gaia .gaia-argoui-app-titlebar h2 a,  /*ポータルアプリのアプリ名一覧画面*/
.contents-actionmenu-gaia .gaia-argoui-app-titlebar-has-icon h2 a,  /*ポータルアプリのアプリ名一覧画面*/
.container-gaia .gaia-argoui-app-titlebar h2 a, /*ポータルアプリのアプリ名詳細画面*/
.no-navimenu-gaia .gaia-argoui-app-titlebar h2 a, /*ポータルアプリのアプリ名詳細画面*/
.no-actionmenu-gaia.gaia-argoui-app-titlebar h2 a, /*ポータルアプリのアプリ名詳細画面*/
a.gaia-argoui-space-spacelayout-title, /*スペース内アプリ一覧画面のスペース名*/
a.gaia-argoui-app-titlebar-content /**スペース内アプリ詳細画面のスペース名*/
{
color: white;
padding: 0 0 0 5px;
text-shadow: 
    black 2px 0px 2px, black -2px 0px 2px,
    black 0px -2px 2px, black -2px 0px 2px,
    black 2px 2px 2px, black -2px 2px 2px,
    black 2px -2px 2px, black -2px -2px 2px,
    black 1px 2px 2px, black -1px 2px 2px,
    black 1px -2px 2px, black -1px -2px 2px,
    black 2px 1px 2px, black -2px 1px 2px,
    black 2px -1px 2px, black -2px -1px 2px,
    black 1px 1px 2px, black -1px 1px 2px,
    black 1px -1px 2px, black -1px -1px 2px;
}

よかったら、こちらのCSSソースをお持ち帰りいただきまして、ご自分の環境で試してみてくださいね～(´っ･ω･)っ

さらに追記。もっとシンプルなCSS

2021.10.13　加筆しました。

この記事をTwitterで紹介したところ、もっとシンプルなCSSでも実装できますよ～と教えていただきました。

セレクタの部分ですが構造的に全てh2の直下のaでしたので

h2>a{
//内容
}

でも同じ様に出来ました！☺
shadowのBlackを少し明るくしても見やすかったです(自分は#737373で試してみました)

— chunky@kintoneカスタマイズ (@Dango_pg) September 13, 2021

ご意見いただきありがとうございます～！
（紹介が遅くなってしまってすみません…）

早速、CSSを変更してみました。
ついでに、黒指定も少し薄く。
ただ、ポータル内アプリではやはりうまくCSSが作用しなかったため、個別指定で文字色whiteは健在です(笑)もっとスマートに指定出来たらいいんだけど…力尽きました。

h2>a{
padding: 0 0 0 5px;
text-shadow: 
    #737373 2px 0px 2px, black -2px 0px 2px,
    #737373 0px -2px 2px, black -2px 0px 2px,
    #737373 2px 2px 2px, black -2px 2px 2px,
    #737373 2px -2px 2px, black -2px -2px 2px,
    #737373 1px 2px 2px, black -1px 2px 2px,
    #737373 1px -2px 2px, black -1px -2px 2px,
    #737373 2px 1px 2px, black -2px 1px 2px,
    #737373 2px -1px 2px, black -2px -1px 2px,
    #737373 1px 1px 2px, black -1px 1px 2px,
    #737373 1px -1px 2px, black -1px -1px 2px;
}

.contents-actionmenu-gaia .gaia-argoui-app-titlebar-has-icon h2 a,  /*ポータルアプリのアプリ名一覧画面*/
.contents-actionmenu-gaia .gaia-argoui-app-titlebar-content h2 a,  /*ポータルアプリのアプリ名一覧画面*/
.container-gaia .gaia-argoui-app-titlebar h2 a, /*ポータルアプリのアプリ名詳細画面*/
.no-navimenu-gaia .gaia-argoui-app-titlebar h2 a, /*ポータルアプリのアプリ名詳細画面*/
.no-actionmenu-gaia.gaia-argoui-app-titlebar h2 a /*ポータルアプリのアプリ名詳細画面*/
{
    color: white;
}

結果はこちら。

Black＝真っ黒で指定するより立体感が出ているような気がします！
くっきりしたのが好みの場合はBlackでもいいかもしれません。
自分の好みのグレー具合を探してみてくださいね(´▽｀)
（モノトーン以外は背景との相性が難しいと思うのでおススメしません）

情報提供してくださった chunky 様、ありがとうございました～(*^▽^*)