「チェックリスト」をトップ配置したマイページ / IE11版（ver.2018.10.06）

「Amebaトピックス」の変更に対応しました

このスタイルシートをIE11のユーザースタイルシートに設定すると、「マイページ」のデザインをユーザーライクなものに変える事が出来ます。

◎「チェックリスト」をマイページ先頭に配置、他の項目も上下配置を変更可

◎「新着・未読・既読」を示すマークと、未読/既読のタイトル文字色による区別

◎ ヘッダーのフロート表示（常時ウインドウ上部に表示する）

◎ メモ帳で再編集してカスタマイズが可能 （配色、不要項目やADの非表示など）

IE11でユーザースタイルシートを使う手順

初めての方は、以下のページを参照ください。

　　「チェックリスト」をトップ配置したマイページ / IE11版

「マイページ」のアレンジ用スタイルシート

以下のCSSは、2018.10.06 時点のものです。 アメーバブログの「マイページ」の更新に即して、更新される場合があります。

/* IE11版 アメーバブログ「マイページ」のアレンジ ver.2018.10.06 ***** */


/* マイページ 　ログイン画面に影響しない全体背景付け ***** */
#AppShellDesktop .Home_Main {
     margin-top: 72px !important;
     background:#c5d8e1;
     box-shadow: 0 0 0 1000px #c5d8e1; }


/* PCヘッダー *********************************** */
#AppShellDesktop > .PcHeader {
    position: fixed;   /* 背景付けの影響を防ぐ */
    top: 0;
    width: 100%;
    height: 60px !important;
    background: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.20);
    z-index: 2; }

#AppShellDesktop > .PcHeader > .PcHeader_Inner {
    width: 1060px !important; }


/* ヘッダーメニュー */
#AppShellDesktop .PcHeader_Nav_List.-center .PcHeader_Menu_Categories:before {
    left: 146px !important; }

#AppShellDesktop .PcHeader_Nav_List.-category .PcHeader_Menu_Categories:before {
    right: 170px !important; }

#AppShellDesktop .PcHeader_Nav_List .-button {
    font-size: 1.4rem !important; }


/* 設定・ログアウト */
#AppShellDesktop .PcHeader_Controls_Logout {
    margin-top: 12px !important; }

#AppShellDesktop .PcHeader_Controls_Logout .Tap_Transparent {
    font-size: 1.2rem !important; }

#AppShellDesktop .PcHeader_Control_Tap.Tap_Transparent:hover {
    opacity: 1 !important;
    font-weight: bold !important; }


/* 特別キャンペーンの背景割り込み 非表示 ************** */
.HomeMediaJack {
    display: none !important; }


/* メインコンテンツ ****************************** */
.Home_Main .Icon_User {
    border-radius: 4px !important;
    border: 1px solid #ccc !important; }


/* メインコンテンツ幅 */
.Home_Main.PcLayout {
    width: 1100px !important; }


/* 左列 **************************************** */
.Home_Main .PcLayout_LeftColumn {
    display: flex !important;
    flex-direction: column !important;
    width: 340px !important;
    margin-right: 20px !important; }

.Home_Main .PcLayout_LeftColumn > * {
    margin-bottom: 10px !important;
    padding: 20px !important;
    background: #fff !important; }


/* プロフィール *************************** */
.Home_Main .PcProfile {
    padding: 4px !important; }

.Home_Main .PcProfile.Tap_Transparent:hover {
    opacity: 1 !important;
    background: #e2eef0 !important; }

.Home_Main .PcProfile.Tap_Transparent:hover .TapText {
    text-decoration: none !important; }

.Home_Main .PcProfile_Image {
    border: 1px solid #ccc;
    background-color: #fff !important; }

.Home_Main .PcProfile_Image .Icon_User {
    border: none !important; }

.Home_Main .PcProfile_Name {
    margin: 0 !important; }


/* メッセージ・ペタ */
.Home_Main .PcProfile_Links {
    margin-top: 8px !important; }


/* あなたのブログ ************************* */

/* 項目 高さの不安定を抑止 */
.Home_Main .HomeBlogModule {
    min-height: 200px; }


/* ブログページのリンク */
.Home_Main .HomeBlogModule_BlogTitle_Link {
    font-size: 16px;
    padding: 6px 15px 4px;
    border: 1px solid #2196F3;
    border-radius: 5px;
    color: #fff !important;
    background: #2196F3 !important; }

.Home_Main .HomeBlogModule_BlogTitle_Link:hover {
    opacity: 1 !important;
    text-decoration: none !important;
    background: #077bd6 !important; }


/* アクセス表示 */
.Home_Main .HomeBlogModule_Access_Container {
    padding-left: 140px !important;
    border: 1px solid #aaa;
    border-radius: 5px; }

.Home_Main .HomeBlogModule_Access_Container::before {
    content: "\0055";
    font: normal 16px/22px AmebaSymbols;
    position: absolute;
    left: 15px;
    top: 24px;
    color: #2196f3; }

.Home_Main .HomeBlogModule_Access_Container::after {
    content: "ブログ管理";
    font: bold 16px Meiryo;
    color: #2196f3;
    position: absolute;
    top: 24px;
    left: 35px; }

.Home_Main .HomeBlogModule_Access {
    margin-bottom: 0 !important;
    margin-top: 4px !important; }

.Home_Main .HomeBlogModule_Access_Container.Tap_Transparent:hover {
    opacity: 1 !important;
    background: #e2eef0 !important; }


/* ブログを書く =共通= */
.Home_Main .ButtonSize_Medium {
    font-size: 16px !important;
    height: 36px !important;
    line-height: 36px !important;
    border-radius: 5px !important; }

.Home_Main .ButtonSize_Medium:hover {
    opacity: 1 !important;
    background: #e2eef0 !important; }

.Home_Main .HomeBlogModule_Link a {
    border-color: #aaa !important; }


/* 今日は何の日 */
.Home_Main .HomeBlogModule_Banner {
    padding: 4px 30px 4px 4px !important; }

.Home_Main .HomeBlogModule_Banner:hover {
    opacity: 1 !important;
    background: #e2eef0 !important; }

.Home_Main .HomeBlogModule_Banner_Icon {
    top: 8px !important;
    right: 4px !important;
    background: #fff; }


/* 左列AD 非表示*/
.HomeLeftAd {
    display: none !important; }


/* コメントした記事 ************************ */

/* 項目 高さの不安定を抑止 */
.Home_Main .HomeBlogComment {
    min-height: 300px; }

.Home_Main .PcArticle_Link {
    padding: 12px 0px 0px 4px !important; }

.Home_Main .HomeBlogComment_Collection .Tap_Transparent:hover {
    opacity: 1 !important;
    background: #e2eef0 !important; }

.Home_Main .HomeBlogComment_Collection .Tap_Transparent:hover .TapText {
    text-decoration: none !important; }

.Home_Main .PcArticle_Body {
    padding-bottom: 11px !important; }

.Home_Main .PcArticle_Name {
    margin-bottom: 8px !important; }

.Home_Main .PcArticle_Title {
    margin-bottom: 8px !important; }

.Home_Main .PcArticle_Meta {
    font-size: 1.1rem !important; }


/* もっと見る 左列 縦方向 */
.Home_Main .Collection_ReadMore.-SMALL .Collection_ReadMore_Button {
    font-size: 1.4rem !important;
    line-height: 30px !important; }


/* もっと見るボタン =共通= */
.Home_Main .Collection_ReadMore .Tap_Transparent:hover {
    opacity: 1 !important;
    color: #000 !important;
    background: #e2eef0 !important; }

.Home_Main .Collection_ReadMore .Tap_Transparent:active {
    border-color: #81d4fa !important; }


/* 右列 **************************************** */
.Home_Main .PcLayout_RightColumn {
    margin-right: -4px;     /* 右列の float崩れ防止 */
    display: flex !important;
    flex-direction: column !important; }

.Home_Main .PcLayout_RightColumn > section {
    margin-bottom: 10px !important;
    padding: 20px !important;
    background: #fff !important; }

.Home_Main .PcModuleHeader_Title {
    font-size: 2rem !important; }


/* メイントピックス ************************ */
.HomeMainTopics_Container {
    width: 740px;
    zoom: 0.94; }


/* チェックリスト ************************** */

/* 表示初期高さを指定 */
.Home_Main .HomeChecklist {
    min-height: 980px; }


/* リストを更新 */
.Home_Main .PcModuleHeader_Control_Icon {
    vertical-align: middle !important; }

.Home_Main .PcModuleHeader_Control .Tap_Transparent:hover {
    opacity: 1 !important;
    font-weight: bold !important; }

.Home_Main .PcModuleHeader_Control .Tap_Transparent:hover .TapText {
    text-decoration: none !important; }


/* スタッフブログ 更新ニュース */
.Home_Main .HomeChecklist_StaffBlog {
    padding: 0 !important;
    text-align: left !important; }

.Home_Main .HomeChecklist_StaffBlog > p {
    padding: 2px 15px 0 0 !important; }

.Home_Main .HomeChecklist_StaffBlog_Link {
    display: block !important;
    padding-left: 64px !important; }

.Home_Main .HomeChecklist_StaffBlog_Link::before {
    content: "";
    position: absolute;
    top: 1px;
    left: 4px;
    width: 40px;
    height: 40px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: URL(https://stat.profile.ameba.jp/profile_images/20180310/20/b3/7Q/p/o02000200p_1520680935160_szd2x.png);
    background-size: cover; }

.Home_Main .HomeChecklist_StaffBlog_Link:hover {
    opacity: 1 !important;
    color: #000 !important;
    text-decoration: none !important;
    background: #e2eef0 !important;
    box-shadow: 0 0 0 500px #e2eef0 !important; }


/* チェックリスト リスト全体 */
.Home_Main .HomeChecklist_Collection .Tap_Transparent:hover {
    opacity: 1 !important;
    background: #e2eef0 !important; }

.Home_Main .HomeChecklist_Collection .Tap_Transparent:hover .TapText {
    text-decoration: none !important; }


/* チェックリスト リスト項目 */
.Home_Main .HomeChecklist_Collection_Item {
    width: 100% !important;
    height: 80px !important;
    margin: 0 !important; }

.Home_Main .HomeChecklist_Article_Link {
    padding: 8px 4px !important; }

.Home_Main .HomeChecklist_Article_Body {
    flex: none !important;
    width: 610px !important;
    height: 64px !important;
    padding: 0 15px 0 0 !important; }


/* 新着マーク */
.Home_Main .HomeChecklist_Article_Unread {
    top: 4px !important;
    background: red !important;
    z-index: 1 !important; }


/* 新着マーク 既読 */
.Home_Main .HomeChecklist_Article_Link:visited .HomeChecklist_Article_Unread {
    background: #fff !important; }


/* 新着マーク 既読 フォバー */
.Home_Main .HomeChecklist_Article_Link:visited:hover .HomeChecklist_Article_Unread {
    background: #e2eef0 !important; }


.Home_Main .HomeChecklist_Article_Body .Author {
    display: block !important;
    width: 100% !important; }

.Home_Main .HomeChecklist_Article_Body .Author_Icon {
    top: 18px !important; }

.Home_Main .HomeChecklist_Article_Body .Author_PrimaryText {
    position: absolute !important;
    top: 22px !important;
    left: 62px !important;
    font-size: 1.4rem !important; }

.Home_Main .HomeChecklist_Article_Body .Author_SecondaryText {
    position: absolute !important;
    top: 2px !important;
    left: 180px !important;
    margin: 0 !important;
    font-size: 1.3rem !important; }


/* 記事タイトル */
.Home_Main .HomeChecklist_Article_Title {
    margin-top: 0 !important;
    margin-left: 60px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important; }

.Home_Main .HomeChecklist_Article_Title .TapText span {
    display: inline !important; }

.Home_Main .HomeChecklist_Article_Title span[aria-hidden="true"] {
    display: none !important; }


/* 記事タイトル 既読 */
.Home_Main .HomeChecklist_Article_Link:visited .HomeChecklist_Article_Title {
    color: #689cb5 !important; }


/* 投稿時刻 */
.Home_Main .HomeChecklist_Article_Meta {
    position: absolute !important;
    top: 2px !important;
    left: 62px !important;
    bottom: initial !important;
    font-size: 1.3rem !important; }


/* 未読マーク */
.Home_Main .HomeChecklist_Article_Link .HomeChecklist_Article_Meta::before {
    content: "";
    position: absolute;
    top: 2px;
    left: -62px;
    height: 8px;
    width: 8px;
    border-radius: 10px;
    background: #f90; }


/* 既読マーク */
.Home_Main .HomeChecklist_Article_Link:visited .HomeChecklist_Article_Meta::before {
    background: #fff; }


/* 既読マーク フォバー */
.Home_Main .HomeChecklist_Article_Link:visited:hover .HomeChecklist_Article_Meta::before {
    background: #e2eef0; }

.Home_Main .HomeChecklist_Article_Image {
    width: 64px !important;
    height: 64px !important; }

.Home_Main .HomeChecklist_Article_Image img {
    width: 100% !important;
    height: auto !important; }


/* もっと見る 右列 縦方向 =共通= */
.Home_Main .Collection_ReadMore.-LARGE .Collection_ReadMore_Button {
    font-size: 1.4rem !important;
    line-height: 30px !important;
    width: 20em !important; }


/* 最近見たブログ ************************** */
.Home_Main .HomeBlogHistory_Collection_Container {
    width: 700px !important; }


/* 新着トピックス ************************** */

/* 表示初期高さを指定 */
.Home_Main .HomeBlogFeed {
    min-height: 3200px; }


/* ジャンルを追加・編集 ********** */
.Home_Main .HomeBlogFeed_Genre_Button:hover {
    color: #000 !important;  }

.Home_Main .HomeBlogFeed_Genre_Icon {
    vertical-align: middle; }

.Home_Main .HomeBlogFeed_Genre_Button:hover .HomeBlogFeed_Genre_Icon {
    background-color: #e2eef0 !important; }

.Home_Main .HomeBlogFeed_Genre_Follows {
    margin-top: -10px; }


/* 新着トピックス 項目ヘッダー =共通= */
.Home_Main .HomeBlogFeed_Article_Header {
    margin-bottom: 20px !important;
    height: 1.8rem !important; }


/* もっと見る 右列 右方向 =共通= */
.Home_Main .HomeBlogFeed_Article_Header_Link:hover {
    opacity: 1 !important;
    font-weight: bold !important; }

.Home_Main .HomeBlogFeed_Article_Header_Link_Icon {
    vertical-align: middle !important; }


/* 新着トピックス タイル項目 ****** */
.Home_Main .HomeBlogFeed_Article_Card {
    margin-right: 43px !important; }

.Home_Main :last-child.HomeBlogFeed_Article_Card {
    margin-right: 0 !important; }

.Home_Main .HomeBlogFeed_Article_Card.-col_2 {
    margin-right: 23px !important; }

.Home_Main :last-child.HomeBlogFeed_Article_Card {
    margin-right: 0 !important; }


/* AbemaTV */
.Home_Main .HomeBlogFeed_Article_Feature {
    padding: 30px 10px !important; }


/* マイページ 表示項目 ユーザー設定オプション ****************** */

/* 左列項目 順位指定 ***************************** */

/* ユーザプロフィール */
.HomeUserProfile {
    order: 0; }


/* あなたのブログ */
.HomeBlogModule {
    order: 0; }


/* あなたのピグ */
.HomePigg {
    order: 4; }


/* コメントした記事 */
.HomeBlogComment {
    order: 3; }


/* ドットマネー */
.HomeMoney {
    order: 5; }


/* コイン */
.HomeCoin {
    order: 6; }


/* お得にGETする */
.HomeLuckyDarts_Navigation {
    order: 7; }


/* 右列項目 順位指定 ****************************** */

/* メイントピックス */
.HomeMainTopics {
    order: 3; }


/* チェックリスト */
.HomeChecklist {
    order: 1; }


/* 最近見たブログ */
.HomeBlogHistory {
    order: 2; }


/* 新着トピックス */
.HomeBlogFeed {
    order: 4; }


/* マイページ項目の表示順位（上下）のカスタマイズ方法 ***********

　● 項目の表示順位は、左列と右列で独立して指定します
　● 左列 (0～7) 右列 (1～4) の order値 の順に、項目が上から並びます
　● 各項目の order値 を書換えて、項目の表示順位をカスタマイズします
　● 左列「今日は何の日」の非表示は、下のCSS項(5行)を有効にします

　この Code の内容を書き換えて「保存」を押すことで、変更が反映します

***************************************************** */