HOME > ブログ開発・収入 > FC2ブログ修正案メモ

FC2ブログ修正案メモ


このブログの最近について



デフォルトの状態からHTMLやCSSを改造したとは言え、まだまだ粗削りです。

目に余る粗い部分だけこの記事でメモしてあとでしっかり修正しようと思います。

修正したら項目の下に「○年○月○日修正」と書きます。

(なんか最近、記事を投稿するよりブログのソースを改造するのが楽しい気がするけど、気のせいだよね。うん。)

※○○行目の○○は私のCSS及びHTMLによるものなので、人によって違うことがあります。ご注意ください。






グリッド表示廃止



グリッド表示は小さく表示できるから、一度に大量の記事が目に入るメリットがあるけど、

記事のタイトルが長いと全部表示できない、
写真が大きすぎると記事のスペースからはみ出す
タグの表示が汚い

などの欠点があります。

リスト表示にはこれらの欠点はありません。

それから、今はリスト表示をデフォルトにしていますが、ページを表示する時に一瞬グリッド表示がちらつくことがあります。

おそらく、デフォルトのリスト表示になる前に、グリッド表示のjavascriptが実行されるからではないかと思っています。

なので、グリッド表示は廃止(javascriptのソースを削除)にしてリスト表示固定にします。



↓二段目以降タイトルが見切れている。
グリッド



2017年3月29日修正


javascriptのグリッド表示、リスト表示関係を根こそぎ削除して、
CSSのグリッド表示のクラスも根こそぎ削除、
そして、ヘッダのグリッドとリストの切り替えスイッチ関係(HTMLとCSS両方)も削除して、完成しました。


画面表示時にグリッド表示がちらつく原因はjavascriptのグリッド表示ではなく、CSSのグリッド表示設定に原因があったようです。

CSSのグリッド表示関係(/* grid_content以下)を全て削除すれば、ちらつきはなくなります。

キャプチャ




これでページ表示時にグリッド表示がちらつくこともなく、リスト表示で統一されきれいになりました。


 
↓スイッチ部分を削除
スイッチ



↓グリッド表示が廃止され、スッキリしている。
キャプチャ





記事下のデッドスペースの修正



リスト表示の際に記事下のデッドスペースがこんなにもあります。

このデッドスペースにより、見る側は無駄にスクロールしなければいけません

こういった使いやすさに関わる修正は早めにやっておくに越したことはありません。

おそらく、記事の表示枠が多めに取られているんでしょう。

この修正は数値を調節するだけみたいだし、簡単に終わると思われる。


↓無駄なデッドスペースのために無駄にスクロールをしなければならない

デッドスペース


2017年3月12日修正

予想通り、画像表示時に、最低限確保されるスペースが設定されていたようです。

それがこちら。


デッドスペースコード

CSSの425行目、min-heightが記事を最低限表示する枠サイズとして指定されている。

なので、これをコメントアウト。

無事デッドスペースを除去できました。


↓デッドスペースがなくなり、スッキリしている。
デッドスペース




画像表示の大きさの統一



画像の縦横比によって、画像が記事の枠からはみ出ることがあります。

縦横比に関係なく、一定の大きさを表示できれば良いんですけどねえ。



↓画像表示のサイズが統一されていない
サイズ



2017年3月12日修正


画像サイズ設定

CSSの416行目、"#main_contents .entry_body .entry_image img {"の部分を修正します。

まず、記事の画像のサイズを統一します。

max-widthとmax-heightのmaxを削除。

heightの値を150に修正します。


そして、画像の縁を削除します。

borderの行をコメントアウトします。それだけです。



それにより、全ての画像サイズは200*150に縮小、もしくは拡大され、画像の縁が無くなります


↓画像サイズは統一されたが、
縦長の画像は横長になる
ので、
アイキャッチに使う画像はしっかり選んほうが良いようだ。

画像




タグ、カテゴリの修正



現在、タグとカテゴリを使用して記事を分けていますが、
スマホ版だとタグの変数が使えないので、カテゴリを主流に使うように修正します。

スマホ版でタグの変数が実装されていないのはすごく痛いですね。

カテゴリだけだと一記事につき一つしか使えないですからねえ。



セカンドプラグイン廃止



ブログサイトの最下部にあるセカンドプラグイン、廃止しようかと思っています。

そもそも、セカンドプラグインって必要あるんですかねえ?

何を掲載しても、最下部だから大して見られないだろうし、あんまり意味なさそう。




タグを四角く囲う



タグを四角く囲って目立たせたいですね。

それで、マウスオーバー時に色を変えて更に目立たせたい

タグを囲うだけなら簡単だろうけど、タグの文字数に応じてぴったりなサイズにするのは難しそうだ。

タグの文字数がインプットされている変数があれば良いんですけどね。

それを使って囲いのサイズを調整する。

↓こんな感じにタグを目立たせる

タグ






2017年3月16日修正(?)


タグを四角く加工用にするとこんなふうになりました。

タグ2


どう設定しても、右端のタグの線が見切れます


なのでとりあえずタグの背景だけ塗っておきました。

タグ3


タグを目立たたせればいいだけだし。これでも良いかなって思う。



タイトルの画像を作る




そろそろブログのタイトルの画像を作っておきたい。

なんでプロフィール画像作っている段階で作らなかったんでしょうかねえ。

まあ急いで記事を書かないといけないって焦っていたんでしょう

大体の原案も決まっているので、時間が余っていればすぐに作ります。


関連記事、おすすめ記事の記事内表示




ある程度記事が書けたので、そろそろ記事内で別の記事を紹介したいです。

関連記事、おすすめ記事を紹介する枠の画像を用意してその中でリンクをつけるようにします。

色はやっぱり緑が良いな。

でもやっぱり、画像だとスマホ表示ではみ出るから、CSSを作って、ソースからdivで呼び出すようにします。



2017年3月15日修正


borderで枠を囲い、色々装飾して出来上がりました。

こんな感じです

関連記事


枠のタイトルと枠の部分は分離して作られています。

なので、枠のタイトル(関連記事の部分)は自由に文字を変えることができます
注目記事とか、引用元とかにも設定できます


↓ソースはこんな感じ
ソース




おすすめ記事のサイドバー表示



ある程度(100記事ぐらい)記事が投稿できたら、おすすめ記事をサイドバーにまとめて表示したいです。

要はフリーエリアのプラグインを改造します。

記事の画像と、記事タイトルが表示できれば十分かな。

後は、PVとかが表示できればなお良いかな。






シェアボタン

スポンサーリンク


関連記事