ブログ運営

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. dueアプリ

    ブログ運営

    毎日ブログを更新するために工夫している2つのこと

    当ブログでは地道ながら2013年から毎日更新が続いています。正確には2…

  2. ブログ運営

    過去記事を読んでもらうために行った工夫

    ブログを続けていると、だんだんと読者が増えていきます。通常、読者が閲覧…

  3. ブログ運営

    FC2ブログのインデックスが行われない!Fetch as Googleも保留のまま。

    どうも最近のFC2ブログは不具合が多いようです。今まで全然気づきません…

  4. iphoneの文字入力

    ブログ運営

    iPhoneの文字入力で呼び出せるようにしておくと便利な記号たち

    iPhoneでブログを書いている時に多用する記号は決まっています。以下…

  5. ブログ運営

    「プロ・ブロガーの必ず結果が出るアクセスアップテクニック100」を購入!第2弾はアクセスにフォーカス…

    コグレマサトさんとするぷさん共著のブロガー向けの本「プロ・ブロガーの必…

  6. ブログ運営

    Livedoor Readerの購読者数を確認する方法

    Google Readerが廃止されて、Feedlyが一応主流のRSS…

コメント

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

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

カテゴリー

  1. igorpro

    Igor

    Igorの軸にµ(マイクロ)を記述する方法
  2. scansnap

    ScanSnap

    ScanSnap S1300のふた(紙受け皿)が外れたので自分で修理したら直った…
  3. kindle

    電子書籍

    iOSアプリのKindleでは既読位置を同期できるのが便利だと感じた
  4. ブログ用アプリ

    PHGのiTunesアフィリエイトの収益を確認するためのiPhoneアプリ「iR…
  5. smartever

    Evernote

    SmartEverのワンポイントな使い方
PAGE TOP