HOME   »   ブログ運営  »  FC2ブログのスマホ版テーマ「basic_black_st」でのブログタイトルを全て表示する方法
RSSフィード
FC2ブログのスマホページのテーマは、「basic_black_st」を使用しています。シンプルで無難な色合いなので気に入っています。しかし不満点もありました。

それは、トップページでブログタイトルが全て表示されないことでした。

そこでCSSをいじって、要は以下のように変更してみました。格段に見やすくなりました。「basic_black_st」テーマを使用している方は参考にしてみて下さい。


スポンサーリンク

ブログタイトルがすべて表示されないと機会損失

個別記事を見てもらっている間は問題ないのです。

記事に興味をもってもらったあとが重要です。もっと記事を見たい場合、通常はトップページに移行します。

又、Twitter経由でブログにきてもらった場合も同様です。Twitterアカウントのブログ紹介URLは、当然ながらトップページです。

そこでタイトルが全て表示されていなかったら、本来は閲覧されたかもしれない記事が閲覧されません。

惹きつけるキーワードがタイトル後半に入っているかもしれません。そうなるとブログを見てもらう機会を損失します。

ようやく改善した

直すには、少しばかりのHTMLとCSSの知識が必要になってきます。しかし、コードを直そうとすると、泥沼に入ってしまう可能性があったので、大きく時間がある夏休みに行おうと思っていました。

ようやく夏休みに入ったので、修正に取り掛かりました。

修正したこと

今回修正した事を書きます。
  • タイトルのwhite spaceをnowrapからnormalに変更
  • それに伴い、バランスを調整するため文字サイズを小さくした
  • 同じくバランス調整のためにコメント数表示も消した
以上の3つです!

で、これだけだと知識がない方にはさっぱりだと思うので、スクリーンショットを交えて説明します。

とは言っても、コピペすれば同じように出来るので、難しくはありません!それでは紹介していきます。

Skitched 20130729 165205
▲FC2ブログのテンプレートの設定を開きます。

Skitched 20130729 165322
▲そしてスマートフォン用テンプレートのbasic_black_stの編集をクリックします。(もしもの時のために、この状態のコードをコピーしてどこかにメモしておくといいでしょう。複製してもいいでしょう。)

Skitched 20130729 165534
▲修正を加えるのは、「basic_black_stのスタイルシート編集」の方です。

Skitched 20130729 165846
▲その中で、#entry_list li .entry strong {と書かれている部分の中身を以下のように変えました。
  • font-sizeを18px→14pxにした
  • white-spaceをnowrap→normalにした
一応、この部分のコードを書いておきます。
#entry_list li .entry strong {
 overflow:hidden;
 display:block;
 font-size:14px;
 text-overflow: ellipsis;
 white-space: normal;
 margin-bottom: 3px;
 }

サムネイル部分に画像を表示させる方法

basic_black_stテーマでは、トップページの左側がサムネイルスペースとなっています。

サムネイルが挿入される条件としては、
  • 追記前にある写真
  • FC2にアップロードした写真
です。複数枚ある場合は、一番上にある写真です。

タイトルをきちんと全部表示したことだし、これからは意識的に毎記事にサムネイル用画像を挿入していこうと思います。

今までは気まぐれでした!!

修正した後の率直な感想としては、
  • ちょっとCSSを変更したことでこんなに見やすくなるとは...
  • これからはもう少しスマホの1人あたりのページビューが増えるかな!
という感じです。

改善したトップページをまだご覧になっていない方がいらっしゃいましたら、是非トップページにお越し下さい!→スマホトップページへ行く



関連記事

FC2ブログでコードを行番号つきで表示する方法

2013年5月版現在使用しているブログ用iPhoneアプリ13個

Macでブログを書くならばMarsEditだという理由を熱く熱く書く

FC2ブログで最新記事にサムネイルを付けてサイドバーを見やすく!

FC2ブログのスマホ版テーマ「basic_black_st」でのブログタイトルを全て表示する方法

FC2ブログで記事のタイトルにブログ名を含めない方法

モブログ必携アプリ「するぷろ」をFC2ブログと連携する方法

FC2ブログでPocket用ボタンを設置する方法とその利点

リピーター確保作戦!ブログにFeedly登録用ボタンを設置する方法

スポンサーリンク

過去記事セレクション

当ブログの過去記事の中で、オススメの記事25個をまとめたページを作成しました。500記事を超えた中から厳選していますので、どれもオススメできる記事となっています。もしも興味がありましたら、是非一度ご覧ください。
公開記事が500を超えたので、過去記事の中からオススメを25個セレクトしてみました



▼このカテゴリの最新記事
Relate Entry
Entry TAG
FC2ブログ   サムネイル  
Comment
Trackback
Comment form
スポンサードリンク
楽天
2014年7月現在使用しているブログ用iPhoneアプリ16個
iPhoneホーム画面
人気エントリー
先月の人気記事
第1位(→0)
iPhoneにある写真(画像)をセブンイレブンで現像する方法

第2位(→4)
総計290個以上掲載!iPhoneアプリのURLスキーム一覧

第3位(↗︎2)
【iPhone】秘密の質問を忘れたのでAppleのサポートに電話してリセットしてもらった

第4位(↘︎2)
理系大学生なら絶対覚えておくべきWordの数式のショートカット

第5位(↘︎1)
iPhoneのパスコードを10回間違えると再入力までに60分必要

第6位(↘︎1)
SoftbankのiPhone4s→iPhone5sへ機種変更した時の料金試算

第7位(↗︎3)
iPhoneの画面を録画できるMac・Windowsアプリ「Reflector」のインストール方法・使い方

第8位(↘︎4)
iPhone/iPadのパスコードロックを10回間違えた時のデータ消去機能を実行してみた

第9位(↗︎4)
xRecというiPhone画面を録画できるアプリが再び登場!

第10位(↘︎2)
【iPhone】秘密の質問を忘れて間違えすぎるとApple IDが8時間ロックされる

第11位(→0)
iPhoneの写真を1枚5円で現像出来るネットプリントジャパン!

第12位(→0)
パラメータ有りiPhoneアプリのURLスキーム一覧

第13位(↗︎30)
青春18切符で東京から大阪へ~東海道線を突っ走る旅(1日目)

第14位(↗︎55)
青春18切符を利用した旅行時に活躍したiPhoneアプリのまとめ

第15位(↗︎16)
セリアでiPhoneの防水ケースを購入!風呂場で使うときに便利!

全記事表示リンク
サイト内検索
プロフィール

nasimeya

Author:nasimeya
Twitterアカウント→@nasimeya
iPhone5S/iPad3/iPad mini/MacBookAir13inch/Nexus5を現在所持しており、アプリとか紹介を主にしています。LAMYなど文房具もちょくちょく。ブログは楽しく書くことを心掛けております。

日にの観察ブログの更新は停止しています。

新しいブログはこちら⇒なしめやブログ(http://nasimeyablog.com

2013年5月現在利用している主力iPhoneアプリ26個
iPhoneホーム画面
2013年5月現在利用しているブログ用iPhoneアプリ13個
iPhoneホーム画面
iPad mini用おすすめアプリ8選

PAGE TOP