あめみか

「雨はいつもわたしのみかた。」 … 思想・哲学・世迷言からイラストまで、多岐にわたってたいへんくつに綴っています。

初心者でもできる!わたしがお世話になった【はてなブログカスタマイズサイト】


お世話になったサイト

 以前「これからぼちぼち当ブログに施してきたカスタマイズをご紹介していこうかと…」というようなアナウンスを致しましたが、次から次へと気になることが降って湧いてきたり、なんとか相殺したい冠婚葬祭が不意に入ったりしましてなかなか手を出せません(先頃めんどうな町内会の組長さん当番がおわったのはありがたいところではありますが)。晴れの日の屋外で両手をあげた女性のシルエットにたくさんの英単語が書かれている

 

 そこでお詫びと申しましてはなんですが、とくにブログのカスタマイズに関するところで【おすすめ】のサイトを紹介したいとおもいます。

 ほんっとに参考になります。

 ほんっっとにお世話になりました。

 

MoonNote

続きを読むボタン & グローバルメニュー & パンくずリスト表示修正 & 記事幅

 まず筆頭にあげなければならないのは、やはりこちら『MoonNote』さんです。

 

 以前は【Written】のテーマを使わせていただいていて、ちょこちょこカスタマイズし、それで「(Written利用者をメインとした)カスタマイズを紹介していこう!」と思い立ったのですが、このようなことを知りまして、慌ててテーマを変えようと、あいなった次第でございます。

 それで「わたしのカスタマイズ日記」的なものがのびのびになっているのです。はい。

 

 それではどのテーマにしようかとあれこれ見て回りましたが、逡巡の結果【Innocent】にしようと決めました。【Innocent】のよさはネームとシンプルさだけではなく、初心者にはありがたいことにcssに「ここにフッターについて書いてあるよ」「ここは全体のレイアウトだよ」というのが(実際にはFooterやLayoutという表記ですけれども)書かれてあることです。

 その分ページの読み込みを気にするのであればcssの圧縮を要するところだとはおもいますが…。

 わたしアナログ人間なものですからcssをプリントアウトしたんですね。そうしたら2000行ほどにわたるコードが40枚の紙に印字されて出力されたんです。

 プログラムというものに触れだしたのがほんの2月ほど前のことですから、まずショック。それでも長く見ておりましたら徐々にこの辺にだいたいこんなことが書いてあるというようなことがわかってきました。

 

 css初学者もはじめはたじろぐかもしれませんが、勉強するにもよいテーマなのではないかと今はおもいます。ほかのcssコードをみたことがないので比較していっているわけではないですけれどもね。

 

Tiru's Life

見出し & 記事内の下線

 次にあげなければならないのは『Tiru's Life』さんです。

 

 【Innocent】を使っていて参考になるサイトがないかなぁ~と逍遥しておりましたところたどりついたのが『Tiru's Life』さんだったわけです。

 わたくし色感覚が残念なものですから配色センスのよいものに弱いのです。そしてまたはじめに拝見したページもよかった。

 カスタマイズについて記されているではありませんかっ。ありがたいことに!

 特にtiruさんのh2記事タイトルのところのチョコレート色とブラウンがかったエンジの配色が絶品。

 

 ほかにも配色や構成など、ここまでできたらおもしろいだろうなぁというものがありますが…

わたしには異次元。

 

カスタマイズ参考サイト

Yukihy life

シェアボタン & フォローボタン & グローバルメニュー表示

 TwitterもFacebookもやっていないのですが、わけもわからずそのまま設置しています。ただTwitterのフォローボタンは消しました。アカウントないと意味なさそうなので。いや知りませんけれどもね。ほかにもアカウントもっていないと意味のないものがあるのかもしれませんが、それは判明してからおいおい消していきます。

 

 カテゴリーをたくさん設けているとグローバルメニューでカテゴリーを表示させる設定めんどうなんですよねぇ。ひとつひとつURL打たなきゃいけなくて。

 グローバルメニューでカテゴリーを自動生成して階層化させて表示させる方法ってないんですかねぇ?

 

太陽がまぶしかったから

パンくずリスト

 流し読みしていたら見落としてしまいそうだったのですが

パンくずリストの本体はこの部分なので、本記述を行わないとGoogleから認識されません。

とありましたので、パンくずリストって大切なんですね。

 

あわせて読みたい

 はじめにこちらの「あわせて読みたいG」を使わせていただき、その後いくつかほかの記事下に関連記事を表示する方法を試してきましたが、やはりまたここに帰ってきました。

 こちらでは「あわせて読みたいG」の設置場所として【記事下】へ、となっておりますが、表示速度などを考えて【フッタ】に置かれている方もあるでしょう。【フッタ】に設置してもちゃんと表示されますが、そうしますとページ最後尾に横幅一杯に表示されます。

 スマホ表示であれば違和感ないとは思いますが、ブログデザインによっては、PC表示ではページ最後にまします重鎮のごとき圧迫感を醸し出すような浮いた感じになってしまう場合がありますので、そこのところはお試しになってデザインとご相談されるとよろしいかとおもいます。

 

チップの日常

あれこれ非表示

 はてなブログPro限定ですが、はてな関連の表示消したいなぁというときにはこれ!この方法が「はてなの規約に違反していないよはてなブログProならねっ」とアナウンスされているところも親切なところです。

 

ちむ!ちむちむ!ブログ!

Google Adsenseの横並べ & 記事本文直下に配置

 アドセンス広告を横一列に並べて表示するコードを紹介されている『USEFuLNOTES』さんと『チップの日常』さんで紹介されている「あれこれ記事本文直下に配置できるよ」コードとのフュージョン。合わせ技一本です。

 

雲の向こうはいつも青空

自動目次機能

 見出しをつけてはいても短文なものもありますので、わたしは今は見出しが5つ以上あったら表示してもらうようにしています。

 コピペしたデフォルト状態では見出し2つ以上で表示されます。

 

No Hack, No Life

トップへ戻るボタン

 【続きを読む】ボタンもそうですが【トップへ戻る】ボタンもすこし調べるとコードがあちこちたくさん紹介されていてどれにしようか迷ってしまいますよね?

 わたしは『PhotoshopVIP』で使われているくるくるくる~というようなものにもひかれましたけれども、今はこちらをすこ~し変えたものを使わせて頂いております。

 決め手は“わかりやすさ”。

 

はぴらき合理化幻想

見出しに番号

 長文で見出しもたくさんつけていると「今なん章分書き進めてきただろう?どのあたりまで読み進めたのだろう?前回はどのあたりまで読んだかなぁ?」と目安となるなにかしらの目印がほしくなってきます。

 また見出し文字の前になにかアイコンのようなものがあるとちょっと華やぐかなぁ~…というこの2点を満足させるのが、この「見出しに番号」でした。これならただのアイコンではなく意味あるアイコンとなり、合理的だとおもいます。

 

パクリサイト対策

 わたしは被害にはあっていませんし、このブログも日に20弱のPVですからパクられても実害はないのですけれども、一応用心のためにね。

 

すなばいじり

パクリサイト対策

 パクられても実害はないというのに二重に対策しています。二重にする意味あるのかな?と、わけもわからず対策中。

 

おわりに

 「わたしのおこなってきたカスタマイズ」的なものを書きますと、そこで紹介されているサイトはだいたいお馴染みのサイトで、みなさん一様に似通ったものとなってしまいます。

 ご覧のようにわたしもその例に漏れないわけですが、それほど先人たちの創意工夫が画期的だったのだなあと感じ入ります。

 

こちらもいかが?