nipplelfsblog

nipplelf’s blog

1週間に1記事を目標にして、考えたことや描いた絵について書いてます。

よくわからなくてもはてなブログを少し見やすくしてみた その2

 あまり時間をかけずメンテナンスをして(その1)、記事の内容についてもちょっと弄った(この記事)ので、ものすごく基本的なことから書き、よくわからなくてもこの程度はできるを示しておこう思う。

(環境: OS windows10  ブラウザ Firefox

 

nipplelf.hatenablog.jp その1でブログ全体のレイアウトを少しメンテナンスして、なるべく見やすいように意識した形にした。少し整頓して、少しいい気分である。
 ただ、この整頓は読者の方がブログをどうやって見つけるかで変化し、場合によっては全く以前と変わらず、整頓が自己完結してしまうことがある。
 例えば、前回、基本的部分の調整をしたが、これはあくまでPCでこのブログを見た場合に綺麗に映るのであって、スマートフォンでブログを見た際には改善がほとんど反映されない。


 では、自分でスマフォを含めたページデザインをHTMLから見直すとなると、かなり面倒なので、やりたくない( ^ω^)・・・

 なるべく簡単に、もうちょっと見栄えをよくしようとすると・・・記事自体をほんのちょっといじることかなぁということになった。

 

 ということで、記事自体の改造が目的となり、アイキャッチの設定基本機能の利用記事内へバナーの追加を行うことにしました。

 

※目次※

 


弄る前の確認(基本)

記事作成画面の確認

 管理画面を開く記事についていろいろな方向から見ることができるが、今回は「☑記事を書く」を押して、記事のビュー変更部分とツールバー、編集オプションを主に使う。

f:id:nipplelf:20180211184900j:plain

また、管理画面の「設定」→「詳細設定」内の情報もちょっとだけ利用する。


自分の記事がどう映るか見てみる

 さっそくPCとスマフォから自分の過去記事がどう映るか見てみる。
「管理画面」→記事枠内の「編集」→スライダー内の「編集」を押していくと記事の変更ができるが、そこで、左上の「編集見たまま」→「プレビュー」にしてみる。
そうするとすぐ下に「PC」「スマートフォン」のボタンとそれぞれに対応した記事プレビューを見ることができる。

f:id:nipplelf:20180211190056j:plain

自分の記事の見え方が違って、記事のつくり方も違ってくるかも?

 


記事の外づらだけでもよくする

 記事には外装と内装があるといっていい。いくら内装に凝っても、外装が微妙だと記事を開く気にはならないだろう。
 自分は週一で絵を描いているので、それを頭に持ってくればどうにかなるが、記事が増えて絵が減ると、その記事だけ外装が極端に見すぼらしくなっていた。
そこで、それを埋める作業をする。

 

アイキャッチ画像の設定

 文字だけでは寂しい。でも、一々絵を描いたり、記事に関連する絵を拾ってきたりするのは面倒くさい。だから、記事を作成した際に、サムネイルとなる絵や写真を最初に登録しておけばいい。

 管理画面の「設定」→「詳細設定」で「アイキャッチ」の画像を登録する。

最後にページの一番下段の「変更する」を押す。

記事に関係なくとも、適当に目立つ画像を決めておけばいい。

f:id:nipplelf:20180211191544j:plain

 

 

記事への反映

 ↑の設定で、記事中に画像がなくとも、登録アイキャッチ画像がサムネイル画像になる。この外装は、当然記事ごとに変更できる。

 記事によっては写真や絵が何枚もあって、一番見せたいものがあるかもしれない。そこで、記事を書く際に、編集オプションのアイキャッチ画像の選択を用いてそれを選ぶ。URLさえ分かっていれば、別の場所からもそれを選択できる。

(試しにこの記事にない絵をこの記事のサムネイルにしてみた。記事編集中にも任意のURLを貼り付け、Enterを押して確認できる。)

f:id:nipplelf:20180211193754j:plain

 あらかじめストックを作っておくのも一つの手なのかもしれない。前回のヘッダにバナーを付けるで用いた方法を用いれば、はてな内に画像をすぐ登録できる。

 

 サムネイルでは画像と題名と短い説明文(PCなら全角90字、スマフォなら全角45字)で構成されているが、今回は画像を整えた。文字についても少しずつ意識するべきだろうが、今後の課題かなぁと思う。

 

 

記事内の見やすさを弄る

 いろいろ文字をピカピカさせたり、顔文字|д゚)や特殊記号🐈を入れるのもいいが、自分は文字の多い記事をシュッとさせたい。そこで、記事作成画面の機能をちゃんと使うことにした。(MSのWordに慣れていればなんてことない機能であるが、一応書いてみた。)

 

見出しと目次

 多くの人は記事を上から下まで読んではくれない。必要なところだけ読みたい人が大半ではないかと思う。そこで、「こんなこと書いてあるよ」という要旨とそこへジャンプするための見出し、目次機能を使う。

 まず、いくつか見出しとなる題名を作り、左下図のようにそれぞれの題名を見出しにする。その後、目次となる場所を選んで、その場所を選択したまま、目次ボタンを押せば完成。

f:id:nipplelf:20180212005219j:plain

 大中小の見出し選択は、まず「中」を選べばいいと思う。その上で、その章がさらに細かくなったら、「小」を追加し、まとめられるなら、項目ごとに「大」でまとめればよい。

 

リンク

 記事に興味を持ってくれた人は、もっと情報を欲しがるのかもしれない。また、この文章の裏打ちとなる参照情報にワンクイックで素早くアクセスしたいかもしれない。そこで、リンクを貼る。

 

リンクを貼りたい場所or文字を選択→リンクボタン押す→URLを貼る→挿入方法を選択→「選択した形式でリンクを挿入」ボタンを押す

 

で完了する。

 記事によっては参照した他者情報を多く引用したりするので、どの程度リンクの絵ずらを大きくするかが問題になるが、記事のボリュームを考えるとリンクは「埋め込み」がいいが、スリム化を狙うなら、文字に埋め込む「範囲選択」がいいと思う。
 

その他機能

  他にも便利機能はツールバーに実装されているが、とりあえずこれだけできれば、記事としてちょっと格調高いものになるので、それ以上は時間がある時に文字や段落を弄って、記事をデコッていけばいいのではないかと思っている。注釈機能→*1

 

 

記事で宣伝する

 スマフォ画面で記事を見ると、前回作ったヘッダのバナーはなくなるし、サイドバーもない。大体は記事の下段にしまわれてしまうので、とてもスリムだが、ちょっとこちらが伝いたい情報(自分の場合はエロ本売っているとか)が不足している。

 ブログのフッタを作るのも手であるが、見たところくしゃくしゃになるし、あまりたくさん表示するのもハレンチ?!なので、「バナー」「読者になりますボタン」記事の一番下に付けることにした。

 

バナーを貼る

 ヘッダにバナーを付けるで紹介したように、HatenaBlog(private)内にバナー絵とその情報が分かっている前提で話を進める。

 

①バナー絵のURLとリンクしたいサイトのURLを控えておく。

 

②「HTML編集」画面を開き、今回は記事の一番下に張るので、記事のコードの一番下に以下の コードをコピぺする。

 

<a href="https://www.URL.com" target="_blank">

<img src="https://cdn-ak.f.st-hatena.com/Picture.jpg" /> </a>

 

③次に

https://www.URL.com の部分をリンクしたいページのURLに変え、

https://cdn-ak.f.st-hatena.com/Picture.jpgの部分をはてな内に登録した画像のURLに変える。

 

④最後に「プレビュー」にて、ちゃんと画像とリンクが張られていることを確認して完成である。

読者になるボタンを貼る

 このボタンの情報の場所をまず探す。

 管理画面を開き、左サイトバーの「管理」→中央タブの「詳細設定」→ページ下段の項目「読者になるボタン」を見てほしい。

f:id:nipplelf:20180219190918j:plain

 

ここに <iframe src="https://blog.hatena・・・・・・・</iframe> というコードを見つけることができる(個別に違う)が、これが読者になるボタンの必要な情報となる。

 これをコピーしておき、記事作成画面の「HTML編集」画面の一番下に張り付ける。さらに、プレビュー画面で確認し、ボタンが作成と読者数が表示されていることを確認する。

 

※※※※※※※※※※※※

このようなバナーやいくつかの自分用広告情報があると思うので、その部分だけ下書きとして別記事を書いておき、本記事を書き終わった後、その下書き記事のHTML情報を本記事の一番最後に張り付けてしまうのが、楽なテンプレート化ではないかと思う。

※※※※※※※※※※※※

 

終わりに

 基本的なことをなるべくわかりやすく書いて、自分の復習用にも使える…を目標にした。記事を弄るのにはほとんど時間をかけていない。ほんのちょっとだけ、どう読者にみられるかを考えて、ちょっとだけ記事に手間を加えてみるという感じになる。

 だから、ちょっとだけ見やすくなって、ちょっとだけ読者が増えてくれればいいなぁと思った。

 

 本稿がほんのちょっと誰かの参考になれば・・・とても嬉しい。

 

 

 ☆エロ同人CG販売中

 

*1:こういう注釈機能なんかもいいなぁと思うが、下段まで飛ぶのでちょっと使いにくいなんて気もする。

COPYRIGHT Nipplelf ALL RIGHTS RESERVED.