自然でユルイライフスタイル

フリーランスとして活動するブログの先生がライフスタイルや雑記を気の向くままに、したたかに。結局のところ人間は美しさを求め、自然体を追求し、上手い飯を食う!それが一番幸せになれるんだ。そんなヒントをお届けできたらと思います。

初心者OK!はてなブログのフッタにサムネリンクを設置する方法

htmlのド素人がDIYする特集。はてなブログのフッタにサムネリンクを設置する方法です。
といっても、個々の記事をリンクするのではなく、カテゴリリンクをサムネで貼っつける方法ですが。
f:id:sunooo:20140608203814j:plain

ページ下端って、もしかしておいしい?

ちょっと前にサイドバーにサムネリンクが出来るようになったじゃないですか。でもやっぱり、記事を見ることをイメージすると、一旦下までスクロールして、スクロールが止まるページの下端。ココが最も美味しい部分だと思うんですよね。

いろいろ考えてみたところ、wordpressのように人気記事をずらっと出すのは難しいのですが、カテゴリリンクだったらhtmlの知識がなくても比較的カンタンにできることが発覚したので、晒してみます。

スポンサーリンク



やり方は以下の3ステップ。画像があれば5分でできるよ!

  1. 150px程度の画像を用意する
  2. 記事を書く画面で画像にリンクを貼る
  3. htmlをフッタにコピペ

こんだけです。画像さえ用意できればあっちゅうまです。では順番に参りましょう。

画像を用意する

アイコンになる画像をまず用意します。
なんでも良いので、私は手書きで。書き味が気に入っているLIFEメモに、D右衛門氏を描いてみます。
f:id:sunooo:20140608203804j:plain
書き終わったら、いい感じで正面からの絵を一枚撮り、お使いのPCに保存。
f:id:sunooo:20140608203844j:plain

ちなみに私が使っているNexus5。これで写真を撮ると、google+に自動で同期されるようになっているので、写真の取り込みが異常なほど楽。詳しくはこちらの記事で書いているので、気になる方はどうぞ。

iPhoneやめてNexus5に乗り換え15日。写真の取り込みもヤバかった - スノーボード カービングターン上達のまとめ!iPhoneやめてNexus5に乗り換え15日。写真の取り込みもヤバかった - スノーボード カービングターン上達のまとめ!

以前の記事に続けて、乗り換えて良かった点を続けてリリースします。iPhoneとNexus5の比較〜写真の取り込み編〜iPhone時代に衝撃を受けたiCloudで...

次に、アイコンっぽく大きさを整えます。私が使っているのはこちらの無料アプリ。


Evernote
Skitch(無料)
販売元:Evernote(20MB)
カテゴリ:Productivity
全てのバージョンの評価:★★★★☆(737件の評価)

画像の加工が超絶楽なので重宝しています。
まずは正方形にトリミングして、
f:id:sunooo:20140608204539j:plain
リサイズの後保存。大きさはお好みで。私はなんとなく150×150の大きさにしています。
f:id:sunooo:20140608204642j:plain

記事を書く画面で画像にリンクを貼る

あとはカンタン。
リンクさせたいURLをコピーします。今回はカテゴリのリンクをコピーしました。
もちろん、個別記事のリンクでもOK!
f:id:sunooo:20140608210034j:plain
記事編集画面で先ほどのサムネ画像をアップして、画像を選択した状態にし、リンクを設定。
※編集画面は、見たままモードです
f:id:sunooo:20140608211217j:plain
HTML編集に切り替えて、まるっとコピー
f:id:sunooo:20140608211249j:plain

htmlをフッターにコピペ

デザイン→カスタマイズ→フッタ→「HTMLを記述できます」にペーストするだけ!
サムネが複数ある場合は画像と画像の間のpタグを消し、代わりに空白を開けると良い感じに横に並んでくれます。
f:id:sunooo:20140608211407j:plain
仕上がりは、こんな感じ!
f:id:sunooo:20140608211519j:plain

どうでしょう!?サムネとタイトルで勝負ならぬ、イラストで勝負作戦。
これでいろんな記事を見ていただけると、pvアップにもつながって、さり気なく画像でボケれたりして面白いような気がします。

気になった方は試してみてください。

では!