生活と映画と資格のログなど

生活にかかわるお金や格安SIM、3D映画を含むBlu-ray、保有資格などについての日記ブログです。

レスポンシブルデザインにはレ点を!と表示シンプル化まとめ

契約後に実施したこと備忘録

はてなブログ Perfect GuideBook はてなブログの解説本を使いました。

ただ、契約からドメイン取得設定までは、本のままにすすめました。

ただ、その後にやったことがありますのでまとめておきます。

テーマの選択

はてブロ初心者なので、なかなか用語になれませんが、サイトデザインのテンプレートのことです。ここが、公式テーマからユーザーが作成したテーマ(デザインテンプレート)と、多様なところが「はてなブログ」のよさだと思います。ココログではよいデザインは見つからず妥協の結果選んでいました。

人気順や新着順など、いろいろ探すと自分にはまずこれかなというのが見つかると思います。私は、スマホ(iPhone)、タブレット(iPad)でもインターネットのサイトを見るため、画面サイズに合わせて自動表示されるレスポンシブ(RESPONSIVE)から選択しました

レスポンシブデザインのテーマ使用時は、詳細レ点が必要!

レスポンシブデザインは、PCのブラウザでも、タブレット端末でも、スマホ端末でも、画面のサイズに合わせて表示できるというのが特色です。

テーマとしてレスポンシブデザインを選びさえすればいいんだと思っていました。

これ、勘違いです。ココログではPC用、スマホ用表示の設定項目がなかったのですが、はてブロにはそれぞれの設定項目があります。

はてなブログ管理者画面 ➡ デザイン ➡ (下の画面)スマホマーク ➡ 詳細設定 ➡ レスポンシブデザインにレ点 ➡ 変更を保存する

f:id:seikatsulog:20170729120432j:plain

 

レスポンシブデザインを選択した場合、上の設定を行わなければ下記のように、別々になってしまいます。

  • パソコンブラウザ用の表示
  • スマホブラウザ用の表示

本来は、両方をまとめるのがレシポンシブデザインなので意味がないですね。私は、自分のブログをスマホで表示したときに、初期状態だと〇のブログアイコンがどうしても出てしまうのですが、それの消し方を調べているときに知りました。

ちなみに、そのままスマホ表示される方で〇のところにアイコン画像や写真を載せないシンプルな形にしたくて、アイコン表示を消したい場合は、

スマホマーク➡記事上 に下記のドット以下から}までのコマンドを貼り付けるようです。

~~~~~~~~~~

.header-blog-icon { display: none; }

~~~~~~~~~~

レスポンシブ対応では上記のレ点を付け忘れると、選択したデザインの意味がなくなってしまいますので、皆様はお気を付けください。

テーマ決定後は、ブログデザインのシンプル化へ

私の場合は、シンプルな状態を目指しましたので、はてブロ用を含め、ヘッダーやフッダーなどの表示は、最低限のものにすることにしました。

テーマを決めた後は、下記の辺りを参考にして余計な部分を消しました。プロフィールなども最初の記事に書くこととして、欄からは消してしまいました。ほぼ全部を消すという辺りになるとID非表示系の記事が参考になりました。全消しは無理なようですが見た目でわからない感じにはいろいろとできるようです。

hukugyouhoukoku.hatenablog.com

レスポンシブではなく、通常のスマホデザインを使用していて、そちらをシンプル化したい場合はこちらが参考になります。

www.mataro1.com

レスポンシブデザインの場合は、PCトップページの表示変更を!

スマホデザインでは、ドメイン=トップページを表示させた場合は、通常一覧形式で記事が表示されるようになっています。

レスポンシブデザインの場合、PCの設定がそのまま全体に影響を与えます。

そのため、初期状態のままにすると、スマホでブログを表示したときに、長々と全文が複数記事も表示された状態になります。

Googleなどの検索サイトで直接そのページに行く場合はよいのですが、トップページに来た時にはわかりにくくなりますので、トップページの表示形式を変えることになります。

管理者画面 ➡ 設定 ➡ 詳細設定

の後に、上記の画面になります。ちなみに、はてな側での独自ドメイン設定はここだけですみます。

上記で全文表示のままにしていると、ひたすらトップページに記事の全文が表示されてしまいます。

1記事分だと全文表示でもよいかも知れませんが、トップページだと、どんな記事があるのかパッみえるように、私は一覧表示に変えました。

トップページにでる一覧の表示件数もここで設定します。ここは、続けていく中で買えるかもしれませんが、試しとして10記事にしてみました。

これで、トップページには一覧表示形式で、10個の見出しというか概要が並ぶことになります。

細かく言うと、一覧表示のすきま具合とかは気になるのですが、スタートとしてはここから始めたいと思います。

個別の記事では、一部を表示した後に「続きを読む」ボタンを設定することができますので、その辺りとの組み合わせも考えていきたいとも思います。

 

30記事書いて、ココログとのアクセスを比較する!

ココログで、1ヶ月30記事書いて、1ヶ月後でもひと月のアクセスが0~2だった、どうせならやってみたかったブログ移転とドメイン等の取得を実施したというのが、ここに至る流れでした。

既に「はてなブログ」を始めるうえでの備忘録で数記事費やしていますが、ここからはココログと同じようにすすめて1ヶ月後のアクセスはどうなるかという検証を個人的ではあるのですが始めたいと思います。

読みやすくなるように元記事に修正を加えるのはやむを得ないですが、1ヶ月前に書いていた自分の記事をだいたい毎日1つずつ転載していきます。

10日間隔位で、はてブロとの使い勝手や状況などの差にふれるまとめは入れていきます。時節が合わない記事はどうしても出るため、一部の記事は順番を入れ替え位は行います。格安SIMのキャンペーン記事とかは早めに転記しておかねばと。

業界最安級の格安スマホ「イオンモバイル」

UQモバイル
1,980円〜