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

CSS

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

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

スペースのカバー画像のアイデアを検討してみました。 高さ128px X 幅960pxにして、画像左端に128*128の画像を置くと、
スペースのカバー画像のアイデアを検討してみました。 高さ128px X 幅960pxにして、画像左端に128*128の画像を置くと、 スペース一覧に並んだ時にちょうどアイコンっぽく表示できるという仕組みです(返信でもういっこ画像投稿します) けっこう試行錯誤したのですが、アウトプットする前に、ふと検索してみたら、ちゃん...

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

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

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

こちらをご覧ください。

巣の状態のスペース画像とスペース名表示

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

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

ここから先は、CSSのお話になりますので、kintoneのスタンダードコースの方向けです。

HTMLとCSSのおはなし

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

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

F12押したところ(GoogleChrome)

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

ちなみに、「Console」タブでは、kintoneに自分で仕込んだJavaScriptのエラーなんかも確認できますよ。

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

スペース名の文字はここ

カーソルを当てると、実際の表示部分も色がついて、どこの設定が選ばれているのかすぐにわかるようになってます。ほかの部分も見てみるとおもしろいですよ。

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

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

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

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

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

text-shadow - CSS: カスケーディングスタイルシート | MDN
text-shadow は CSS のプロパティで、テキストに影を追加します。文字列及びその装飾に適用される影のカンマで区切られたリストを受け付けます。

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

ぼくの辿り着いた濃いめのtext-shadow - Qiita
はじめに 前記事でこんなものを書いていました。 【前記事】ぼくの考えたさいきょうのCSSだけで2pxの縁取り文字 ☝上記記事を応用して出来ることが増えたのでまた記事を書きました。 text-shadowのドロップシャドウっ...

適当な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のシステム管理者権限が必要になりますのでご注意ください。

kintoneシステム管理画面

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

CSSファイルをアップロードして適用します

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

保存完了のメッセージ

適用した結果は…

CSSを適用後

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

左側が少しだけ欠けています

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

padding: 0 0 0 5px;

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

右に少しだけずらす
影もきれいに表示されています

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

ちなみに、CSSの適用クラス、1つ足りませんでした。「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 セレクタ 子孫」とかで検索かけてみると色々と参考サイトが見つかりますので参考になさってください~(*´з`)

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

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

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

スペース画像をアニメ化+文字を読みやすくカスタマイズ

今回の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でも実装できますよ~と教えていただきました。

ご意見いただきありがとうございます~!
(紹介が遅くなってしまってすみません…)

早速、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 様、ありがとうございました~(*^▽^*)

タイトルとURLをコピーしました