ブログ運営

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

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人あたりのページビューが増えるかな!

という感じです。

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

スポンサーリンク
スポンサーリンク

関連記事

  1. ブログ運営

    iPhoneはタッチパネル式。モブログするのに便利なんだなこれ。

    iPhoneでブログを書くことが多いのですが、その理由について今までは…

  2. ブログ運営

    PC版サイドバーに全記事タイトル表示プラグインを導入しました!

    FC2ブログのプラグインには、全記事表示プラグインというものがあります…

  3. facebook

    ブログ運営

    Facebookのソーシャルプラグイン(Like Box)をFC2ブログのサイドバーに設置する方法

    前回の記事(ブログ用に、実名非表示のFacebookページを作成した)…

  4. googlechrome-要素の検証

    ブログ運営

    ブログデザインの微調整は、Google Chromeの「要素の検証」で行っている

    ブログのデザインを微調整する時には、Google Chromeの「要素…

  5. ブログ運営

    AppHtmlをAppStoreHelperと同じようなスタイルにしてみた

    アプリの紹介には今までMac上からAppStoreHelperを利用し…

  6. ブログ運営

    毎日ブログを更新するモチベーションがどこから湧くのか

    ブログを始めてから1年と3ヶ月が経ちました。Macを購入してから、ブロ…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

カテゴリー

  1. 勉強

    当ブログの大学生向けページまとめリンク集
  2. Evernote

    iOSに続いてMac版のEvernote 5も公開!
  3. iPhoneアプリ

    パスワード管理アプリの1PasswordがiOS版Mac版ともに50%オフ!
  4. LAMY

    LAMY2000 プレミエ ステンレスが2012年10月から発売!
  5. Evernote

    MoveEverのアップデートでアプリ内でのノート閲覧時の文字が最適化された!
PAGE TOP