心に火を、指先にペンをスマートフォン用の表示で見るスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。実際にやってみたらこうなったブログブログ-はてなブログカスタマイズTwitterGooglePocketLineはてなブログカスタマイズの人柱です。熱心にこのブログを読んでいる人はいないと思いますが、もしかしたら気づいている人はいるかもしれません。このブログがコツコツと改造されていることを。僕が記事更新を怠っている間(←!!!)時々やっていたのはカスタマイズです。日々はてなブログのカスタマイズ系の記事を見たり、魔改造されているブログを見れば「このカスタマイズを教えてくれ」と悶々とし、Wordpressのブログを見れば「あ、このブログおシャンティーやな」と羨みつつ、自分の拙い知識では無理なので先達の叡智をちょいちょい試し続けておりました。やりたいことは道半ばなんですけど、放っておくと忘れそうなので自分が試したカスタマイズと参考記事を紹介していきます。ちなみに超イケてるカスタマイズの参考記事まとめは以下にまとめております。心に火を、指先にペンをdefender-21.hatenablog.com自分で言うのもなんなんですがこの記事超役立ちます。僕も大体この記事に戻って参照記事にお邪魔してうんうん言っております。僕がこの記事を一番見ています爆。まとめるの大変だったけど今自分に役立ってるで笑。長文なのでお気をつけてカスタマイズで最優先で考えるべきはモバイルである先に言っておきますが、僕はPCもカスタマイズしていますけど常に考えているのはモバイルです。モバイルの見え方ばかり考えております。理由はシンプルでアクセスの大半がモバイルだし、今後も比率は上がることが想定されるからです。書くのはね、PCの方が便利ですけど閲覧はやっぱりモバイルでしょう。横スクロールとかまだ残っているページもあるけど極力修正していますしYoutubeの貼り付けにも超気を使っています。心に火を、指先にペンをdefender-21.hatenablog.comYoutubeを貼り付ける人はお気をつけて。直近僕がやってきたカスタマイズをどうぞ。はてなブログに「ぱんくず」と「グローバルメニュー」をつけよう「ぱんくず」と「グローバルメニュー」の完成イメージ上の青いバーで「BLOG」「BOOK」「FILM&MUSIC」「ESSAY」ってなってるのがグローバルメニューです。小説」ってなってるのがパンくず。Googleに階層を伝えてるらしいです。太陽がまぶしかったからbulldra.hatenablog.comまずはパンくずを「太陽がまぶしかったから」の記事で。この記事は前半、後半あるうちの後半です。最初気付かずに前半の記事を読んで作業していたのですが後半の記事を見て愕然としました。スクリプトが短くなってたんです。この世の果てブログkonoyono.hateblo.jp大変参考になりました。同期のYukihyさんは先にカスタマイズを色々試してくれているので助かっています爆。「カテゴリ」精査からこのへんもねYukihyさんの記事にわかりやすく書いていますがまずはカテゴリ精査をしましょう。同じような話題のカテゴリをガチャンコします。それでもカテゴリ数が多いなら「親カテゴリ」「子カテゴリ」を作ります。僕の場合は「マンガ」と「小説」の親カテゴリとして「本」を作りました。「親」「子」の関係を作る。「子カテゴリ」の書き方は「親カテゴリ-子カテゴリ」と書きます。僕の場合は「本-マンガ」でした。記事のカテゴリに「親カテゴリ」「子カテゴリ」を両方セットする。つくったカテゴリを「パンくず」としてGoogleに認識させようカテゴリ精査が終わったらパンくずを認識させる記述を書きます。記述が4つありますが上の3つだけでも大丈夫です。4つ目を入れるとサイドバーに表示されるカテゴリが「親カテゴリ」のみになるらしいです。charset="utf-8"></script>スマホにはカテゴリは表示されていないの上3つのみです。PCとSP共に以下の記述を追加して下さい。id="breadcrumb"></div>これで完成。記事下に入れるのがコツです。記事上にいれるとカテゴリの遷移が2つ並んでしまいました(僕の場合)。none;}</style>僕の場合はPCは6つ、SPは4つ設定しています。親カテゴリ名はそのままいれなくてもいいです。僕の場合は親カテゴリは「本」なんですけど「BOOK」って入れてます。アドセンスより上に記述しないと「アドセンス」→「グローバルメニュー」というような見え方になるので気をつけて下さい。そのまま貼ると僕の同様に青色になります。Webサイトここ見て好きな色に変えましょう。「引用」をもっとオシャレにカスタマイズ「引用」カスタマイズ後の完成イメージ背景色ついて「"」がついてます。これで真っ白なはてなにメリハリが付きます。NOTESwww.task-notes.com引用はこの記事をベースに「PC」と「Mobile」で少し変更して作成しました。書評というか漫画について書くことが多いのであらすじを書くときに引用のは多用するので重宝しています。記事を見てくださいでもいいのですが、スマホはちょっといじる方法あるので記載しておきます。0;}これは元記事まんまですね。0;}</style>スマホにはデザインCSSをいじる欄がないのでフッタで対応することになります。</style>で囲む必要があるようです。「オシャンティーな画像付きおすすめ記事」完成イメージ画像とタイトルのオシャンティーな関連記事です。はてブ数の多い記事を持ってくるみたいですね。はてなブログの人気記事を画像付きで表示させる方法。#ChiroruLabchiroru.hatenablog.com一気におしゃれになります。スマホに合うようにフォントの大きさとかをいじりました!すげえ応用効きそうって思ってますが知識がないのでできていません。ちなみに僕はPCは設定していません。デフォルトのサイドバーを使っているのですが画像を大きくすることができるのでそれを「120*120」にしました。});}google.setOnLoadCallback(initialize);</script>これでHTMLとJavascriptを書いたみたいですがなんのこっちゃわかりません。コピペするしかないでしょう。CSSを記載しないといけないです。0px;}</style>もうね、何がなんだかわかりません笑。</style>で囲んでスマホで対応できるようにしました。編集後記コード貼り付けたからとはいえ長すぎするやろ!超疲れた。これでカスタマイズは今僕がすぐ出来そうなものは一旦終わりました。他にもやりたいことはあるんですけど、時間かかりそうなのでおいおいやっていく感じですかね。2015年3月のアクセス数推移。絶対に面白いおすすめ漫画!人気の話題作から殿堂入りの名作までブログで稼ぐ方法|アクセスアップとマネタイズの方法を全部書くブログのアクセス&収益が上がるリライトのコツブログのアイコンを変えた。Blog|ブログを報告する。