はてなブログ初心者が選んだ「見出し」がキレイになるデザインテーマ
設定の「デザイン」を変更するだけで「見出し」をキレイにカスタマイズしてくれるデザインテーマをいくつか選んでみました。
私と同じく超初心者の方の参考になるでしょうか？
【 目 次 】
この記事の対象は超初心者のみです(^^;
はてなブログ超初心者です。
そんな私がこの様な大それたテーマを扱って良いのかわかりませんが・・・(^^;
この数ヶ月の私の迷走の体験談をまとめてみました。
この記事を読む意味があるのは
☆でも「見出し」をキレイにしたい！！
と言った方のみでしょうか？(^^;
要は私とほぼ同じ状況の方が対象です。
それ以外の方は読む意味が無いと思うので笑って見逃してやって下さい(^^;
自己紹介？
今までずっとブログとは無縁だと思っていた私ですが『ブログに書きたい事』が出来てしまったので「はてなブログ」をいきなり始めました。
当然HTMLやCSSの知識なんて全くありません。
初期設定もそこそこに記事を書いて公開してみたのですが・・・
「なんか古いワープロみたい・・・」
と言う印象でした(^^;
大見出しや中見出しの設定はしているのですが文字が大きくなる程度で目立たず文章の区切りがはっきりしない。
見出しを太文字にしてみてもそれほど効果なし。
改行でスペースをあけて区切ると文章が間延びした感じになる。
「 ーーーーー」等で区切ってもPC版で見ると中途半端な長さになり微妙。
と言った感じでした・・・(^^;
デフォルトのテーマ「Smooth」 自体はシンプルで嫌いではないのですが・・・。
小説みたいな物を書くならちょうど良いのでしょうけど。
最大の欠点はPC版で見るとリンクの表示が「青色」ではなく「緑色」になっている事なのですが。違和感があります(^^;
そこで
「見出しだけでもカスタマイズして目立つ様にしたい！」
と思ったのですが・・・(^^;
私のブログ環境
実はPCが故障していまして記事は全て「スマホのブラウザのみ」で書いています。
アプリも使っていません。
全てスマホの「Chrome」で、PC版でしか出来ない事は「Chrome」の機能の「PC版サイト」で切り替えてやっています。
「PC版」では画面を拡大したり移動しないといけないのでかなり面倒ですが設定変更等は出来ます。
記事を書く等の文字入力の時は何故か勝手に画面がど～～～んとズームされてしまいますが・・・(^^;
はてなブログはスマホのブラウザだけでも出来るか事前に調べている時にこの現象が起きるケースがあると言う記事を見ていたので驚きはしなかったのですけどね。
それでも画面を縮小している間もカーソル位置は残ったままになってくれるので過去記事の貼り付けやハッシュタグの編集等はなんとか出来ます。
問題は・・・
「カスタマイズコードのコピペが出来ない」
と言う事です(^^;
カスタマイズコードを貼り付ける項目を押すと編集用の画面が出る様なのですが、「貼り付け」を表示する為に画面を押すと閉じてしまうんですよねぇ・・・私の所だけでしょうか？(^^;
結局「見出し」をキレイにするカスタマイズコードもコピペする事が出来ないのでこの方法は諦めました。
そこで次に考えたのが
「見出しのデザインが既にされているデザインテーマに変更する」
と言う方法です。
初心者が選んだデザインテーマ
前置きが長すぎてやっと本題になりますが・・・(^^;
正確には「私がお試しインストールしてみたデザインテーマ」と言うべきかもしれません。
選んだ基準としては
- 「見出し」がデザインされている
- レスポンシブデザイン対応
- インストール数が一定数以上ある
- 作者さんと連絡が取れそう
と言った所でしょうか？
テーマストアの人気ランキングは頻繁に変動している様なので私が見た時と順位が大きく変わって１ページ目に表示されなくなったテーマもあると思います。
レスポンシブデザインはせっかくデザイン変更するならスマホ版と統一したい。
インストール数の多さや作者さんとの連絡が取れそうかは後々自分でカスタマイズしたくなった時に情報を得られる重要な要素かと。
後は私がシンプルな物が好みと言うのが大きく影響してます(^^;
Brooklyn
ブラックとホワイトを基調としたシンプルなデザインのテーマです。
長年人気ランキング上位にあり続けるそうで、私の様な初心者が解説するのはおこがましいかと・・・。
そもそも私のブログ自体「Brooklyn」を使わせて頂いてますし(^^;
本当はデザインされたグローバルナビや読者になるボタン、シェアボタンも用意されているのですがコピペが出来ない私は使っていないので申し訳ないです(^^;
※私のブログは大見出しをh3からh2にHTML編集で変更しています。
▼ 見出しサンプル
ちなみに「Brooklyn」に更新日を表示するカスタマイズコードの記事も作りました ( 宣伝(^^; )
興味がある方はこちらをご覧ください。
Pallet ( パレット )
基本は白×黒のシンプルなデザインですが着せ替えコードでカスタマイズすると一気にカラフルなデザインに変えられる様です。
用意されているバリエーションが多彩ですのでお気に入りのデザインが見つかるかも？
▼ 見出しサンプル
「Pallet (パレット) 」に更新日を表示するカスタマイズコードはテーマの作者である「元CAバンビ」さんが記事にしています。
CONTENTS
「主役はコンテンツ」と言うコンセプトでトータルなデザインがされており、作り手はコンテンツ制作に集中出来ると言う事です。
見出しがデザインされているテーマについて色々と検索している時に最初に興味を持ったのがこのテーマでした。
ただ、太文字が赤蛍光マーカーになってしまうのが私には向いていませんでしたが。
スマホのブラウザで記事を書いているので強調する時は太文字が一番便利で多用しているので蛍光マーカーだらけになってしまって・・・。
カスタマイズで無効に出来る様ですが、前述の様にそのコピペが出来ないのが私の環境ですので・・・(^^;
▼ 見出しサンプル
デザイン変更する前に
ここまででデザイン変更に興味を持たれた方もいるかもしれませんが・・・
「まずは現在のブログのバックアップとテスト用ブログを作成する事を強くお勧めします」
私も色々なデザインを試していますが記事を公開した状態では気軽にお試しは出来ません。
一応デザイン変更の手順の中で「プレビュー」が出来るのですが確認出来るのは「PC版のブログ画面」のみです。
レスポンシブデザインに対応するテーマは「スマホ版 」のデザインも変えられますがそのプレビューはありません。
そこで現在のブログのバックアップを作成し、それをテスト用ブログ ( 非公開 ) にインポートしました。
その後はテスト用ブログ側でデザインを色々インストールして試しました。
この方法ですと「PC版」も「スマホ版」も記事毎に確認出来ますし、非公開なので気軽にお試し出来ます。
と、偉そうな事を書いていますがバックアップやテスト用ブログが作れる事を知るまで私もデザイン変更に踏み切れなかったんですけどね(^^;
テスト用ブログ作成は「スマホ版」でも出来ます。
バックアップの作成やインポートは「PC版」での作業になりますが、バックアップファイルはスマホに保存出来ます。
作業手順については私がお世話になったのはこちらです。
デザイン変更手順は・・・
私が書くより他の方のブログを見る方が良いと思うので・・・省略します(^^;
他力本願ですが画面のコピーで説明したり動画で説明している方もいらっしゃるのでそちらを見た方がよっぽど分かりやすいと思いますので(^^;
一応言葉だけで手順を書くと
「PC版」の「ダッシュボード」→ ( ブログ選択 ) →「デザイン」→ デザインをスクロールして一番下の「テーマストアでテーマを探す」→ お好きなテーマを選択 →「プレビューしてインストール」→ ブログを選択 → 気に入ったら 「このテーマをインストールする」
となるのですが・・・分かりづらいでしょ？(^^;
あと、レスポンシブデザイン対応のテーマで「スマホ版」のデザインも変更したい場合は
「PC版」の「ダッシュボード」→ ( ブログ選択 ) →「デザイン」→ 「スマートフォン」→「詳細設定」→「レスポンシブデザイン」にチェック
と言う手順も必要です。
スマホのみのユーザーの方向け
と言う事で私が説明するのは
「スマホだけではてなブログをやっていてPC画面を使った事がない方向け」
に『操作方法』だけにしておきます。
ただし、PCが使える環境があるのでしたらPCでやる方が絶対に楽です。
画面全体が分かりますし、スマホで拡大やスクロールする時に変な所を触って設定を変えてしまったりしないかヒヤヒヤしないで済みます。
なんかアプリが起動しようとしてしまう事もありますし(^^;
私がいつもやっている手順は
「Safari」や「Firefox」 をお使いの方はブログ選択後の画面最下部にある「PC版」を押すと操作方法のヘルプが表示されるのでそちらをご覧下さい。タブレットも同じみたいです。
これで「PC版」のダッシュボードに切り替えてPCでしか出来ない設定 ( デザイン変更やサイドバーの設定等 ) やバックアップ等をしています。
記事の編集画面では過去記事の貼り付けやハッシュタグの編集もやっています。
前述の様に勝手に画面がど～～～んと拡大される現象と格闘しながらですが・・・(^^;
「PC版」から「スマホ版」に戻りたい時は
- 画面右上の「ダッシュボード」を押す
( 無い場合は自分のIDを押すと表示)
PCの方が情報量が多いので少し待たないと項目が表示されない時もあります。
これで「PC版」のダッシュボードに戻ってからブラウザの「PC版」に切り替えた項目をオフにして「スマホ版」に戻します。
私の経験では記事の編集画面等では「PC版」に切り替えても上手くいかなかった事があったので今ではこの手順に落ち着きました。
テストブログの方で色々試しているとだんだん分かってくると思います。
ついでに「PC版」を使うのが初めての方はスマホでの「PC版」の操作の練習としてこちらの初期設定も見直すと良いかもしれません。
まとめ
はてなブログを予備知識無しで始めた超初心者＆スマホしか使えない状態なのでここ数ヶ月迷走していました・・・(^^;
デザインテーマの変更をした事で「古いワープロみたいな記事」が「少しはブログっぽくなったかな？」と自分では思っているのですが・・・(^^;
テーマストアには見出しがデザインされているテーマは他にも沢山あると思うので色々探して試してみて下さい。
お気に入りのデザインテーマが見つかるかもしれません。
はてなブログユーザーの中にもスマホアプリだけで使っていてデザイン変更をしていないとか「PC版」の設定をした事がない人がいるかも？と思ったので私の体験談をまとめてみました。
アプリを使っていないのでどの様な設定ができるのか知らず、全然的外れの事を書いているかもしれませんが。
アプリが更新されて機能が追加されるかもしれませんし。
その場合は笑って見逃してやって下さい(^^;
と言う事で、はてなブログ超初心者がデザイン変更に踏み切る迄の迷走の体験談とおすすめのデザインテーマでした。
どなたかの参考にでもなると良いのですが。
※ちなみにデザインテーマの作者の皆さんにリンクを張った事や見出しサンプルを使った事の許可取りはこれからだったりします(^^;
その為、記事の一部もしくは記事丸ごと消滅するかもしれませんので悪しからず・・・(^^;
【 追記 】
「Pallet ( パレット ) 」の作者の「元CAバンビ」さんから掲載の許可を頂きました。ありがとうございます。
「PlantesSucculentes」さんからリンクの許可を頂きました。ありがとうございます。
