アリアハンでレベルアップ

日記です。岐阜で在宅勤務の個人事業主しています。

素人の僕が「はてなカスタマイズ」で参考にした記事まとめ。

僕には、CSS等の知識がありません。もちろん、SEOの知識もありません。はてなブログを始めるとき、いろいろと設定を変えたかったのですが、自力では何もできません。

やりたいことがいっぱいあるけど、いかんせん知識がない。これから紹介する記事のおかげで、僕でもなんとか形になりました。

紹介することで、感謝の気持ちを伝えたいと思います。ありがとうございます。

 

 

●テーマ

「innocent」です。モノクロデザインにしたかったので、イメージが近いこのテーマにしました。さらに、文字サイズや余白の使い方がいいなと思いました。

 

 

 

●続きを読むボタン

「4.マウスオーバーで中抜き」にしました。当初は「9.アイコンを表示・マウスオーバー時にアイコンをずらす」でしたが、シンプルにしようと思い、中抜きにしました。

 

 

 

●パンくずリスト

「パンくずリスト」って言うんですね。それすらも知らなかった。カテゴリーを階層表示をしたかったけど、わかりません。たどり着いたのがこの記事でした。

 

上記でパンくずリストの表示ができたのですが、サイドバーのカテゴリー表示欄には子カテゴリを含むすべてが表記されていました。そこで、こちらの記事も見ながら、親カテゴリのみを表示できるようにしました。

上下記事逆かな。合ってるのかな。

 

さらに、このテーマだけなのかはわかりませんが、「>」表記がうまくいきません。この記事でうまくいきました。

 

 

 

●アドセンス横並び

元々は、記事巾に対して、広告の巾が合わなくて、無駄なスペースが嫌でした。すると、横並びにすることができる。さらには、収益があがるらしい。とのこと。迷いなく導入しました。

 

※160226修正

横並びは止めました。巾が合わなかったためです。

 

 

 

こちらも、検討しましたができませんでした。こちらは再挑戦です。

 

 

●記事下のSNSボタン

SNSボタンも全てモノクロにしようとしていました。ドンピシャのものは見つかりませんでした。

さらに、数字表記はしないつもりでした。それは、僕自身、数字表記があると、数字が出るまで待ち、数秒たっても表示されない場合は離脱していました。拡散の数と、記事の評価が等しいはずがないのに、僕はそればかり気にしていた時があったからです。

SNSをシンプルにしたいと思ったら、はてなテーマ「Simple Gray」用のページに辿りつきました。アイコンは入れていません。テキストのみのバランスが気に入っています。

 

※160226修正

上記記事を参考に作り直しました。今はボタンがあります。モノクロに編集しています。

 

 

●Milliard導入 

こちらを参考に入れました。テキスト表示にしたかったのでこちらがドンピシャでした。スマホは入れないことにしました。

 

 

 

●サイドバーのフォローボタン

「3Dボタンで主張」にしました。ホントは「シンプルな某WordPressボタン」を編集して、通常時の色は黒とし、マウスオーバーでtwitterは水色、feedlyは緑にしたかったのですが、うまくいかずに断念しました。難しい。

 

 

 

●スマホ用表示を消す。

最初はレスポンシブデザインにこだわっていましたので、スマホはPCに準ずるつもりでした。しかし、分けた方が面白い。今では、スマホのほうが編集し甲斐があると思っています。

スマホで記事を確認するといろいろとついている。調べるとはてなの標準仕様のようでした。そこで、上記を参考にしました。でも、取捨選択は今も迷っています。

 

 

●日付表示

スマホでは日付表示等のメリハリがないと感じていました。こちらを参考に、日付表示を変更しました。ただ、日付とタイトルとの間について、PCやiphoneでは良いですが、andoroidではなぜか余白がなく詰まっています。これがよくわかりませんでした。

 

 

 

●スマホ下部の複合メニューバー

下段に入れました。色は紺色に変えました。

※160324追記

 

 

 

●パクリ対策

パクリは許しません。当ブログでもやっておきました。これだけでは足りないかもしれませんが、僕の理解を超えているのでやっていません。

 

 

 

今はやっていないけど、いつかやろうと思うこと。

まだ、記事が少ないので、やってもバランスが悪いのでやっていませんが、記事が貯まったらやろうと思っていることです。

●おすすめ記事リスト

●ナビゲーションツールバー

●カレンダー表記

この辺りは、初めからやることではないかと。

 

 

 

●ヘッダーとプロフィールアイコンとアイキャッチ

自作です。探すのがメンドクサイからです。作った方が早いと判断しました。アイキャッチについても、適切な画像を探す手間を今後続けるのがメンドクサイのとオリジナリティに欠けることを考え自作することにしました。

 

現在、Google Search ConsoleとBing ウェブマスターツールの設定で混乱しています。設定はできても、正しいのか確認する術がわからないからです。ツールに表示された数字が正しく返されているかがわからず苦戦しています。

 

 

 

さいごに

ブログは続けることがまず大事だと思っています。そのために、

・データが重くならないこと。

・管理が容易であること。

・シンプルなデザインであること。

をモットーに上記に辿りつき、希望通りのブログができたこと。感謝いたします。

皆様どうもありがとうございました。

 

 

いちばんやさしいHTML5&CSS3の教本 人気講師が教える本格Webサイトの書き方

いちばんやさしいHTML5&CSS3の教本 人気講師が教える本格Webサイトの書き方

  • 作者: 赤間公太郎,大屋慶太,服部雄樹
  • 出版社/メーカー: インプレス
  • 発売日: 2016/03/18
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログを見る