マイページのアレンジをIE11で実現しました
「チェックリスト」の配置と「既読/未読の文字色区別」は、特に求められている事です。 Chrome / Firefox ではこれを実現しましたが、IE11環境で同様のアレンジを実現出来るスタイルシートを作りました。
但し、IE11はユーザースタイルシートを1個しか設定出来ません。 このため、既に何かのスタイルシートを使っている場合は、それと入替えとなりいささか不便です。
また、IE11の機能は適用サイトの制限が出来ない簡易なもので、他のページに誤修飾が生じる可能性がゼロとは言えません。 万一誤適用が生じてもデザインの問題だけで、心配する程ではありませんが、この点については、誤適用を極力避ける様にコードを工夫しています。
以上の様に、ユーザースタイルシートの環境は、IE11より Chrome / Firefox が推奨ですが、IE11から離れられない理由があり、どうしてもマイページを改善したい場合は、このアレンジデザイン試す価値があると思います。
IE11でユーザースタイルシートを使う手順
手順のあらましは、以下です。
▪このぺージのスタイルシートをメモ帳にコピー
▪それを「Mypage.css」のCSSファイルとして保存
▪IE11でそのファイルをユーザースタイルシートに設定
CSSコードをメモ帳にコピーし CSSファイルとして保存する
このページのCSSコード枠内の全コードをコピーします。 文字を残さない様にコピーするには、下の方法が良いと思います。
❶ コード先頭にマウスを置き、数行ドラッグしてコード先頭の一部を青反転させる。
❷ 反転を消さない様に、スクロールタブをドラッグしてコード末尾までスクロール。
（コード枠内をクリックすると先頭の青反転が消えて失敗します）
➌ コード末尾より下方を「Shift」キーを押しながら左クリック。
これで、コード枠内の全ての文字が青反転します。
➍ この青反転の状態で「Ctrl + C」キーを押します。
❺ デスクトップを右クリックし、「新規作成」→「テキストドキュメント」を押し、
デスクトップにテキストファイルを作ります。
❻ ファイルを開き、「Ctrl + V」キーを押してコードを貼り付けます。
コードが正しく貼り付けられたか、メモ帳の先頭と末尾を確認します。
❼ メモ帳のメニューで「ファイル」→「名前を付けて保存」を押します。
❽「ファイル名」枠に「Mypage.css」（半角英数字）と記入し「保存」を押します。
❾ デスクトップに「Mypage.css」のファイルが出来ます。
CSSコード
/* IE11版 アメーバブログ「マイページ」のアレンジ 2018.09.18 ***** */
/* マイページ ログイン画面に影響しない全体背景付け ***** */
#AppShellDesktop .Home_Main {
margin-top: 12px !important;
background:#c5d8e1;
box-shadow: 0 0 0 1000px #c5d8e1; }
/* PCヘッダー *********************************** */
#AppShellDesktop > .PcHeader {
position: relative; /* 背景付けの影響を防ぐ */
background: #fff; }
/* 特別キャンペーンの背景割り込み 非表示 ************* */
.HomeMediaJack {
display: none !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 .HomeBlogModule {
min-height: 200px; }
/* 左列AD 非表示*/
.HomeLeftAd {
display: none !important; }
/* コメントした記事 ************************ */
/* 項目 高さの不安定を抑止 */
.Home_Main .HomeBlogComment {
min-height: 300px; }
/* 右列 **************************************** */
.Home_Main .PcLayout_RightColumn {
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_FeatureList {
margin: 0 -20px 0 20px !important; }
.HomeMainTopics_Topic {
width: 220px !important;
overflow: hidden; }
/* チェックリスト ************************** */
/* 表示初期高さを指定 */
.HomeChecklist {
min-height: 980px !important; }
/* チェックリスト リスト全体 */
.HomeChecklist_Collection .Tap_Transparent:hover {
opacity: 1 !important;
background: #e2eef0 !important; }
.HomeChecklist_Collection .Tap_Transparent:hover .TapText {
text-decoration: none !important; }
/* チェックリスト リスト項目 */
.HomeChecklist_Collection_Item {
width: 100% !important;
height: 80px !important;
margin: 0 !important; }
.HomeChecklist_Article_Link {
padding: 8px 4px !important; }
.HomeChecklist_Article_Body {
flex: none !important;
width: 610px !important;
height: 64px !important;
padding: 0 15px 0 0 !important; }
/* 新着マーク */
.HomeChecklist_Article_Unread {
top: 4px !important;
background: red !important;
z-index: 1 !important; }
.HomeChecklist_Article_Body .Author {
display: block !important;
width: 100% !important; }
.HomeChecklist_Article_Body .Author_Icon {
top: 18px !important; }
.HomeChecklist_Article_Body .Author_PrimaryText {
position: absolute !important;
top: 22px !important;
left: 62px !important;
font-size: 1.4rem !important; }
.HomeChecklist_Article_Body .Author_SecondaryText {
position: absolute !important;
top: 2px !important;
left: 180px !important;
margin: 0 !important;
font-size: 1.3rem !important; }
/* 記事タイトル */
.HomeChecklist_Article_Title {
margin-top: 0 !important;
margin-left: 60px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important; }
.HomeChecklist_Article_Title .TapText span {
display: inline-block !important; }
/* 既読 記事タイトルをマーク */
.HomeChecklist_Article_Link:visited .HomeChecklist_Article_Title {
color: #689cb5 !important; }
.HomeChecklist_Article_Meta {
position: absolute !important;
top: 2px !important;
left: 62px !important;
bottom: initial !important;
font-size: 1.3rem !important; }
/* 未読マーク */
.HomeChecklist_Article_Link .HomeChecklist_Article_Meta::before {
content: "" !important;
position: absolute !important;
top: 2px !important;
left: -62px !important;
height: 8px !important;
width: 8px !important;
border-radius: 10px !important;
background: #f90 !important; }
/* 既読マーク */
.HomeChecklist_Article_Link:visited .HomeChecklist_Article_Meta::before {
background: #fff !important; }
/* 既読マークの反転 */
.HomeChecklist_Collection .Tap_Transparent:visited:hover .HomeChecklist_Article_Meta::before {
background: #e2eef0 !important; }
.HomeChecklist_Article_Image {
width: 64px !important;
height: 64px !important; }
.HomeChecklist_Article_Image img {
width: 100% !important;
height: auto !important; }
/* 最近見たブログ ************************** */
.HomeBlogHistory_Collection_Container {
width: 700px !important; }
/* 新着トピックス ************************** */
.HomeBlogFeed_Article_Card {
margin-right: 43px !important; }
:last-child.HomeBlogFeed_Article_Card {
margin-right: 0px !important; }
.HomeBlogFeed_Article_Card.-col_2 {
margin-right: 23px !important; }
:last-child.HomeBlogFeed_Article_Card {
margin-right: 0px !important; }
/* AbemaTV */
.HomeBlogFeed_Article_Feature {
padding: 10px !important; }
/* マイページ 表示項目 ユーザー設定オプション ****************** */
/* 左列項目 順位指定 **************************** */
/* ユーザプロフィール */
.HomeUserProfile {
order: 0 !important; }
/* あなたのブログ */
.HomeBlogModule {
order: 0 !important; }
/* あなたのピグ */
.HomePigg {
order: 4 !important; }
/* コメントした記事 */
.HomeBlogComment {
order: 3 !important; }
/* ドットマネー */
.HomeMoney {
order: 5 !important; }
/* コイン */
.HomeCoin {
order: 6 !important; }
/* お得にGETする */
.HomeLuckyDarts_Navigation {
order: 7 !important; }
/* 右列項目 順位指定 ****************************** */
/* メイントピックス */
.HomeMainTopics {
order: 3 !important; }
/* チェックリスト */
.HomeChecklist {
order: 1 !important; }
/* 最近見たブログ */
.HomeBlogHistory {
order: 2 !important; }
/* 新着トピックス */
.HomeBlogFeed {
order: 4 !important; }
/* マイページ項目の表示順位（上下）のカスタマイズ方法 ***********
● 項目の表示順位は、左列と右列で独立して指定します
● 左列 (0～7) 右列 (1～4) の order値 の順に、項目が上から並びます
● 各項目の order値 を書換えて、項目の表示順位をカスタマイズします
● 左列「今日は何の日」の非表示は、下のCSS項(5行)を有効にします
この Code の内容を書き換えて「保存」を押すことで、変更が反映します
***************************************************** */
〔追記〕2018.10.06
上記のIE11版には最新の更新版があります。 更新版は多くの部分をブラシュアップしているので、ぜひ下のページでCSSコードを入手してください。
「チェックリスト」をトップ配置したマイページ / IE11版（ver.2018.10.06）
「Mypage.css」をIE11のユーザースタイルシートに指定する
〔注意〕
IE11で「Mypage.css」が正しくユーザースタイルシートとして働くか、この段階でテストします。 満足の行く結果で今後も使用するなら、デスクトップ以外の決まった場所に「Mypage.css」を移動し、間違って削除しない様に扱います。 場所を移動した場合は、IE11で以下の指定をやりなおす必要がある事に注意してください。
❿ IE11の「 」マークのアイコンを押し「インターネットオプション」を押します。
⓫「全般」タブの「ユーザー補助」を押して、下図のダイアログを開きます。
⓬「ユーザースタイルシート」にチェックを入れ、「参照」を押してデスクトップ
の「Mypage.css」を指定します。 デスクトップ以外の場所に移動した場合は、そ
の場所の「Mypage.css」を指定します。
⓭ 上図の様に、スタイルシート枠の「Mypage.css」を確認して「OK」を押し、更に
「インターネットオプション」の「OK」を押して閉じます。
以上で、「Mypage.css」が IE11のユーザースタイルシートに設定されました。 IE11でアメブロのマイページを表示して見てください。
（適用の最初に一時的な表示崩れが生じる事がありますが、それ以降は安定します）
「Mypage.css」が適用された「マイページ」は、以下の様なデザインになります。
「Mypage.css」のオプション設定と再アレンジ
「Mypage.css」はメモ帳（テキストエディタ）で開いて、再編集が出来ます。
このアレンジスタイルは、マイページの項目（コメントした記事、チェックリスト、新着トピックス等）のページ上部からの表示順（位置）を指定できます。 このオプションは「Mypage.css」の末尾の「マイページ 表示項目 ユーザー設定オプション」で設定します。
設定は、このオプション部分の数字を書き換えて、「Mypage.css」を保存するだけの簡単なものです。 説明はCSSコード末尾に書かれているので、上の「CSSコード」をスクロールして最後の部分を参照してください。
また、CSSの扱いに慣れた方は、「display: none !important;」等の指定を項目内に書き込んで、項目自体を簡単に非表示にする事が可能です。 再アレンジに失敗してスタイルを壊してしまった場合は、再びこのページでCSSファイルを作れば、何度でもトライ出来ます。
