本お問い合わせホームブログカスタマイズはてなブログをスマホで見たときのトップページ*簡単カスタマイズ方法【コピペOK】2019年12月3日ツイートシェアはてブLINEPocket最近HTMLとCSSの勉強を始めました。おかげではてなブログのカスタマイズ方法が大分わかるようになってきました。いうことで今回の記事では、自分が行ったブログカスタマイズを備忘録(2017.3現在)として、まとめます。ちなみに素人のカスタマイズデザインですので、カスタマイズに伴ったトラブルの責任は負いかねます。今回の記事ではスマホで見たときの画面カスタマイズです。「はてなブログPRO」会員でないとできないカスタマイズになると思われますので、ご注意ください。最初に、カスタマイズの基本を説明しておきます。管理画面の【デザイン】を選択してください。そこから【スマートフォン】を選択します。以下の画面からカスタマイズを行います。レスポンシブル(PCのデザインとスマホのデザインを同じものにする設定)は、私の場合はoffにしています。※もし一からはてなブログをやるのであれば、レスポンシブル設定にするかもしれません。現在は、はてなブログのテーマストアもデザイン性の高いテーマが多いです。試してみることをお勧めします。はてなブログのプロフィール欄をおしゃれにする方法【コピペOK・スマホ用】ちなみにカラー変更は、以下のカラーチャートを参考にするとよいです。>カラーチャート[HTMLカラーコード・カラーネームの一覧]参考にするのが面倒な場合は、英語名(whiteやblackやgrayなど)で覚えてしまうと楽です。2、一番上のバーを消す一番上についているはてなブログのバーの消し方です。これがあると、いかにもはてなブログというデザインになります。最初にカスタマイズする部分かと思われます。以下のコードを【ヘッダ】➡【タイトル下】の「HTMLを記述できます」というところにあるボックスにコピペして貼ってください。{padding-top:5px;}</style>これでバーが消えると思います。代わりの余白調整という部分は、バーが無くなった代わりに真っ白な余白を入れる設定です。自分のブログデザインに応じて「padding-top:」の後ろの数値を変えるとよいかと思われます。(数値を大きくすると、余白も大きくなります。逆もまた然り)3、下の色々と余分な項目を消す次に行いたいのは、下の図にあるような「記事を書く」や「はてなブログ開発ブログ」といった表記を消す作業です。以下のコードを【フッタ】➡【フッタ】の「HTMLを記述できます」というところにあるボックスにコピペして貼ってください。<!–余分なフッタ項目の非表示設定–!><style>.footer-action-wrapper{display:none}/*はてなブログを始めようの非表示*/.touch-item-list{display:none}/*はてなブログ開発ブログ等のリンクの非表示*/</style><!–非表示ここまで–!>これで、いらない項目を消すことが出来ると思います。4、トップに並んでいる記事の画像の大きさを変えるトップページに並んでいる記事紹介の画像部分のデザインを変更できます。以下のコードを【ヘッダ】➡【タイトル下】の「HTMLを記述できます」というところにあるボックスにコピペして貼ってください。好きな色;}</style><!–ここまで–!>画像を少し大きめに、周りの角を少し丸く設定している状態です。「好きな色」というところは、画像を囲む線の色を書いてください。囲み線がいらなければwhiteと書けばOKです。必要に応じて、数値を変えてみてください。角の丸みが強くなる➡「border-radius:」という部分の数値を大きくする角が丸くならない(直角)➡「border-radius:」の項目を全部消す画像が小さくなる➡「width:(幅)」「height:(高さ)」の数値を小さくする囲み線が太くなる➡「border:」の後ろの数字を大きくするなど、ちょっとしたカスタマイズが可能です。いったデザインコードを少しずつ覚えていくと、作業が楽になります。私は以下の設定で紹介文の文字を大きくしています。ものすごく微妙な部分なので、要らないという方は気にしないでください。気になる方は、以下のコードを【ヘッダ】➡【タイトル下】の「HTMLを記述できます」というところにあるボックスにコピペして貼ってください。.entry-content{font-size:100%;line-height:1.8}</style><!–ここまで–!>こちらの方が見やすいかなと個人的には思っています。細かな設定ですので、気になる方だけ参考にしてください。5、日付のデザインを変える次は日付のデザイン変更の仕方を紹介します。以下のコードを【ヘッダ】➡【タイトル下】の「HTMLを記述できます」というところにあるボックスにコピペして貼ってください。このままコピーすると上の図と同じデザインになると思います。Medium;padding:2px;}</style><!–日付のデザインここまで–!>必要に応じて、デザインを変えてみてください。「color:」の後ろを変える➡数字の色が変わる。」の数値を大きくする➡角の丸みが強くなる。丸くしたくないときは、項目を消す好みで、私は日付をやや斜めになるデザインにしています。気になる方は「font-style:italic;」という部分を消してしまってください。下に続く見出しのデザインを変更していきます。以下のコードをコピペして貼ると、上記のデザインになります。【フッタ】➡【フッタ】の「HTMLを記述できます」というところにあるボックスにコピペして貼ってください。15px;}</style><!–へッター見出しここまで–!>好みでデザインを変えていただいて、結構です。見出しは原理がわかると、自分で好きなようにカスタマイズできるようになります。下にポイントとなる部分を解説しておきます。(線の太さ)gray(色);基本的に見出しのデザインは「border」という部分の表記で好きなように変えることが出来ます。線の種類はsolid(実線)dotted(点線)double(二重線)などがあります。色;=上下左右に線を表示できる設定です。以下のようにそれぞれ個別に設定することもできます。参考になれば、幸いです。7、プロフィール画像のデザインの変え方スマホで見たときのはてなブログのプロフィール欄のデザインを変更します。下のコードをこのまま貼ると、以下のようなデザインになるかと思われます。二重線でアイコンを縁取るようなデザインです。以下のコードを【フッタ】➡【フッタ】の「HTMLを記述できます」というところにあるボックスにコピペして貼ってください。80px;margin:10px;border-radius:8px;}</style><!–プロフィールここまで–!>好みに応じて、デザインを変えてみても良いともいます。色の指定;となっています。線の太さの部分の数値を大きくすると、線が太くなります。線の種類は「solid」にすると実線になります。プロフィールに関しては、全部消してすべて自分で作ってしまうのもアリです。やり方は、下記事を参考にしてください。はてなブログのプロフィール欄をおしゃれにする方法【コピペOK・スマホ用】8、「次のページ」ボタンのデザインを変えるトップページの「次のページ」というボタンのデザインを変えます。デフォルトのデザインだと存在感が薄いので、以下のようなデザインにカスタマイズしてみました。以下のコードを【フッタ】➡【フッタ】の「HTMLを記述できます」というところにあるボックスにコピペして貼ってください。上の画像と同じデザインになるかと思います。{font-size:14px;border-radius:100%;background-color:#dfe5e7;}</style><!–次のページのデザインここまで–!>フォントサイズは写真のものよりも少し大きめに修正しました。自分の好みのデザインに変えても良いと思います。black;」を追加コピペでOK。色を変更したければ、カラーチャートを参考にしてblackの部分を変える色を変更するだけで、がらりとデザインが変わるかもしれません。9、注目記事の画像の大きさを変える凄く細かいデザインになりますが、個人的には重要な部分でした。デフォルトのままですと、はてなブログという感じでしたので、大きくしたかったんです。以下のコードを【フッタ】➡【フッタ】の「HTMLを記述できます」というところにあるボックスにコピペして貼ってください。上の画像と同じデザインになるかと思います。{width:90px;height:90px;border-radius:3px;margin:5px;}</style><!–大きさここまで–!>例によって、角を丸くしています。直角にしたい方は「border-radius:3px」という部分を消してください。画像の大きさも「height」と「weight」の数値で変更できます。10、「上へ」ボタンの位置を真ん中にするこれも地味な設定です。下の「上へ」というボタンの位置を真ん中にします。以下のコードを【フッタ】➡【フッタ】の「HTMLを記述できます」というところにあるボックスにコピペして貼ってください。{text-align:center}</style><!–ページ戻るボタンボタン–!>特に気にならない方もいらっしゃると思います。私は左利きのため、右にボタンがついていると大変使いにくいので、中央に配置をしました。11、下(フッター)の見出しを好きなように増やすカテゴリーを作成したように、好きな見出しを増やすことが出来ます。class=”hatena-module-title”>見出しのタイトル</div>内容を好きなように打ってOK例えば、私はこのような感じでプライバシーポリシーの明記を行っています。このようなコードを使っています。</a>応用すれば、なんでも項目を自由に作ることが出来ます。カスタマイズのポイント以上ではてなブログのスマホデフォルトのカスタマイズ方法を終えたいと思います。最後に、自分でカスタマイズを行う際に失敗しそうなポイントを補足しておきます。繰り返しますが、この記事のデザイン設定そのものが素人のお遊びのようなものですので、責任は負いかねます。うまくいかないということがありましたら、以下のポイントを確認してみてください。ポイント1抜けている記述がないかを確認する例えば、それぞれの記述項目の最後に「;」という記号が打ってあります。これは、非常に大事です。抜けていると記述が反映されません。同じように、時たま記述の冒頭に打ってある「.」も非常に大事です。勝手に消したり、コピペをする際に忘れていないかを確認してください。このような記述がコピペの際に抜けてしまうと、トラブルのもとになります。カスタマイズの際は、ご注意ください。個人的にはCSSとHTMLを学ぶのが一番手っ取り早いと思います。やみくもにネットで検索してコピペして、ごちゃごちゃと推測でいじるよりも、原理をしる方が早いです。私は以下の本を一冊やっただけです。HTMLとCSSの知識が身に付いたと感じております。RinkerKindleAmazon楽天市場Yahooショッピングもっと早く勉強していれば、時間を無駄にすることもなかったなあと後悔しています。参考になるサイトはサルワカです。HTML・CSSの素敵なデザインコードも紹介されていますので、手軽にカスタマイズをしたいブロガーさんに、おすすめです。1つおすすめなのはProgate(プロゲート)という無料のプログラミング学習サイトです。このHTML・CSSのコースの初級をやるだけで大分、知識が付くと思います。判りやすいうえにゲーム感覚で学ぶことができ、とてもおすすめです。Chromeの検証機能を使って、行いました。この機能を使えば、気に入ったブログやサイトのコードを見ることができます。Chromeを開きます。コードを知りたいページを開き「F12」ボタンを押します。コードを知りたい部分で、このボタンをクリック。すると、知りたい要素の名称を確認することが出来ます。あとはポイント2で得た簡単なHTMLとCSSの知識があれば、コードを参考にしてカスタマイズが可能になります。興味がある方は参考にしてください。まとめ|はてなブログのスマホから見たときのカスタマイズ以前からはてなブログのカスタマイズに興味があり、色々とやってきました。結局はきちんとHTMLとCSSを学んだ方が早いということに気づきました。毛の生えたばかりのヒヨコのような初心者の身ですが、もっと知識をつけて、思い通りのカスタマイズができるように成長していきたいところです。今回の記事は地味ではあるが、以前から私が知りたいと思っていたカスタマイズをまとめました。同じように困っている方の参考になれば、幸いです。WINGテーマ:SANGOドメイン:お名前.comを使用しています。ASPで一番愛用しているのは、旅行案件が多い「バリューコマース」さんです。無料登録はこちらから利用しているASP一覧はこちらになります。当ブログのデータが、ブログ初心者さんの参考になれば幸いです。:はてなブログこんな記事もあります関連記事も読んでみる?大満足*ココナラを使ってプロフィール用のイラストを書いてもらった感想たった3時間で引越し!はてなブログからワードプレスに移行する超簡単な方法SANGOのカスタマイズで役立った情報まとめ【ワードプレス初心者向け】はてなブログのデザインを手軽にお洒落に設定する方法【初心者ブロガー向け】はてなブログで横並びにスライドできる記事紹介を設置する方法はてなブログのプロフィール欄をおしゃれにする方法【コピペOK・スマホ用】この記事を書いた人ぱじゃねこwriter平成生まれのマイペースな旅好き。現在まで20か国、1人旅バックパッカー経験あり。国内・海外の旅行情報を含め、これから旅行に出かける人がわくわくするブログを目指しています。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。トラベルグッズ旅のノウハウバイク資格・語学レビューブログ恋愛コラムプロフィールぱじゃねこ平成生まれのマイペースな旅好き。旅行、ツーリング、読書、映画鑑賞など自分の好きなものを集めた雑記ブログ(月間最高22万PV)を気ままに運営中。愛用カメラはGRIIです。