縦棒グラフ 横変換は困難・ヘッダーアイコン等を変更 / Ameblo Management

新アクセス解析の縦棒グラフ

新アクセス解析のアクセス数の縦棒グラフ、どうも好きになれないが...

これを横棒にすると、1週間分なら良いが、1ヵ月や24時間の表示では縦幅が増えます。 これでは、アクセス数の下側の表示が、期間を切替えると下に追いやられる事になります。 デザイナーがこれを嫌い、切替えで高さが変化しない縦棒にしたのでしょう。 以前は横棒で縦幅が大きく変化していたが、別ページ表示で問題にならなかったのですね。

だがしかし、縦棒グラフは都合が良いが、1週表示は間が抜けてます。 (xx);

そんな時に他ユーザーの記事を漁っていると、横棒グラフのハードコピーがありました。 別バージョンあるのかと驚いたが、これはスマホ版の表示ですね。

 

このスマホ版のCSSを利用すれば、PC版で横棒グラフ化の近道になると DevTools でCSSコードを拾い、PC表示に流入して調整して行きました。 結局判った事は、縦棒の値・横棒の値は、システムが直接HTMLに書き込み、CSSで簡単に置き換える事が出来ません。 出来るとすれば「transform」で表示されたバーを横倒しにする程度。

ああのこうのと苦戦の末、少し形になりましたが、左端のレベル表示はアレンジが困難。 良い結果にならない予感がして、このアレンシは途中で置きました。

覚書きに、コードを載せておきます。

/* カウント数グラフ 縦横変換（試案） */

.p-barChart__content {
    left: 100px; }

.p-barChart__list {
    position: relative;
    padding: 10px 0;
    display: initial; }  /* 縦横変換 */

.p-barChart__list::before {
    top: 0; }

.p-barChart__list::after,
.p-barChart__list::before {
    position: absolute;
    display: block;
    box-sizing: border-box;
    width: 72px;
    height: 10px;
    content: '';
    border-right: 1px solid #e2e2e2; }

.p-barChart__list::after {
    bottom: 0; }

.p-barChart__list--week .p-barChart__item {
    width: auto; }  /* 縦横変換 */

.p-barChart__item {
    display: block;   /* 縦横変換 */
    height: 28px; }

.p-barChart__link {
    height: 100%; }

.p-barChart__selectArea {
    height: 48px;
    top: 18px; }

.p-barChart__date {
    float: left;
    position: relative;
    left: -45px;
    top: -60px;
    box-sizing: border-box;
    width: 90px;
    height: 100%;
    padding: 15px 0;
    border-right: 1px solid #e2e2e2; }

.p-barChart__editIcon {
    font-size: 18px;
    vertical-align: top;
    color: #858585; }

.p-barChart__iconArea {
    float: right;
    box-sizing: border-box;
    width: 30px;
    height: 100%;
    padding: 15px 0; }

.p-barChart__list--short .p-barChart__barContent {
    padding-right: 40px; }

.p-barChart__barContent {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    height: 100%;
    height: 10px;
    padding: 0px 0px; }

.p-barChart__barWrap {
    position: relative;
    display: table; }

.p-barChart__bar {
    /* position: relative; */
    width: 100%;
    /* display: block; */
    transform: rotate(90deg) scale( 1,100);
    right: initial;
    margin: 0; }

.p-barChart__count {
    top: -5px;
    right: -5px;
    width: 0;
    text-align: left;
    white-space: nowrap;
    opacity: 0; }

ヘッダーアイコンのhover時のデザイン

小変更ですが、ヘッダー部の「マイページ」「プロフィール」「ブログ」のアイコンをマウスでポイントした際、つまり「:hover」時の反応が判り難いので、改めました。

「:hover」時の背景色をブルー、アイコンは白の反転表示で、とても明瞭になっています。 これまではアメブロの緑を継承したのとコードの節約が失敗です。 右隅の3つのアイコンは「ガイド表示」でこれまでのスタイルでOKとしました。

下は、ヘッダー部のアイコンにマウスを乗せた様子です。

また、アレンジ範囲に「Ameba検索ページ」を追加しました。 

ブログページ上の検索窓から検索すると、自分の過去記事やアメブロ内の記事を検索対象範囲とした「ブログ内検索」が出来ます。 この検索結果ページの表示を、「管理メニュー」各ページと同様の基準で、最小ページ幅を800px以下に抑えました。 また、ページの表示基準フォントに「メイリオ」に改めています。

「Ameblo Management」を利用するには

更新したスタイル「Ameblo Management」は「UserStyles.world」にアップロードしています。

このアレンジスタイルを利用する手順は、以前のページの末尾 を参照ください。