アメブロをPC版・スマホ版ともにcssカスタマイズ 13の手順覚書。 2016秋
今日の内容は一般的に、なんのこっちゃ？な内容な気がします。
でも、アメブロの2016年の新cssを利用して、PCサイトだけでなく、スマホのサイトだってある程度見栄えいじれますよ～、その為にはこういう手順踏めばいいですよ~、という情報はきっと誰かの役には立つはず！
こちらの本を利用して
発行した電子書籍の紹介サイトを作っております。
が。
ある程度のページができた段階で、アメブロの方のデザインもちょっといじりたくなってきた。
今まではずっと、既存のデザインを選ぶだけ。なんか、「ぱっと見アメブロっぽくない」的な見栄えにしてみたいなぁと思い、週末じっくり、取り組みました。
アメブロPC＆タブレット・スマホ向けカスタマイズ手順
-
cssカスタマイズ
ここでパソコンサイト向けの表示を整えます。
-
サイドバーカスタマイズ
横におすすめ情報を、画像とボタンを配置してまとめることが出来ました。
１のcssを活用することができます。が、これがスマホ/タブレットでは全然出てこない！4へ。 -
ブログトップメッセージボードカスタマイズ
PC版ではトップ記事上に、スマホ版でもトップメニューから参照できるお知らせ画面の内容を整えます。
-
記事下に、サイドバーの情報をスマホ/タブレット向けに配置
サイドバーに入れていた情報を、タブレットやスマホの人には今後各記事の下に毎回配置することにします。
定型文を一旦配置してから、パソコンで見るとうるさかったので、@mediaのCSS設定でパソコンでは非表示に。 -
パソコン版 プロフィールページのカスタマイズ
サイドバーの文字制限で置けない情報を、相互にリンクを貼ってこちらに記載。
-
スマホ/タブレット（NEXUS7）での見栄えにがっくり
スマホで見たらCSSが全然きいとらんやんけ！という事で、外部CSSのリンク方法を採用してスマホの見栄えもいじることに。
-
スマホ版のブログトップメッセージボードのカスタイマイズ
hタグ、リンクボタンを中心に外部CSSに必要な情報を記載して見栄えを整える。
-
スマホ版のプロフィールページのカスタマイズ
hタグ、リンクボタンに加えてliタグを利用したボタンも外部CSSに必要な情報を記載して見栄えを整える。
-
スマホ版記事ページのCSS調整
これが一番大変だった。記事ページでは、既存の情報がアメーバの作る別cssに引っ張られてしまうので、ここを直すとあっちの色が変わる、を繰り返します。四苦八苦。
-
スマホ版chromeでソースを獲得
パソコンではそもそもスマホでの見え方を確認できないので、スマホ側から設定情報をコピー。
PCへと情報送り、保存した後にブラウザで開き、クロームで検証。 -
外部cssを携帯用に修正
適宜、FTPでアップしながら内容確認を繰り返しておりました。
-
PC・タブレット・スマホで見栄え確認
chrome、firefox、IEでみーるー
-
各設定データをバックアップ
PC用スタイルシート、携帯用スタイルシート、ブログトップメッセージボード内容、プロフィールページ内容、サイドバーフリースペース、スマホ用記事下定型文の内容をPCに保存。
スマホ用記事下定型文の内容は、毎回コピーして更新の予定。
PC版をつくってから、その情報を利用してプロフィール、メッセージボードを直して最後にスマホ用記事に取り掛かるという流れでした。
調べて参考にさせていただいた22ページをまとめさせていただきました。ありがとうございます。
サイトの閲覧履歴が流される前にまとめておくために、まとめを使うことが最近多いです。
調べた内容は、さっとまとめておくようにしています。
アメブロをPCだけでなくスマホ用画面もcssカスタマイズするための７ステップ 2016年秋 – NAVER まとめ https://t.co/cFnWssEFHz— ヒロセマリ (@hirosemari) 2016年9月25日
大変でしたけどー芸能系のサイトなのでもうアメブロ使うっきゃないんですよねー。。。
まぁ、読んで下さる方が一定数いる分野なので、これを機にちょいちょいこまめに書こうかと思います。
私、text-align決めて、ボタンをリンクをボタン化すれば、それでだいたい気持ちがすっきりするような気がしてきました。
ここのサイトの方も、電子書籍紹介サイトが出来たら、そのあたりいじりたい気持ちではおりますのよ。
この本読んでやっとこさサイトいじれるようになったのはtribes20のおかげ！
webスクールお探しの方には、ぜひおすすめ！