読者です 読者をやめる 読者になる 読者になる

凛と柔く。

既婚/子なし/会社員/女(35歳)/ 日常を綴るブログ

「記事紹介ジェネレーター」のデザインをいじってみた

前回、はてな記事紹介ジェネレーターについて書きました。

いくつかそのジェネレーターを使用してリンクを作成したのですが、本文内に突然画像付きリンクが出てくるのが違和感アリアリで、さらに、元々のはてなの埋め込みリンクと雰囲気がちがうなって感じました。

 

そこで、ちょっと手を加えることに。

また、ご紹介したジェネレーターの進化版のようなものも発見しましたので、併せて書きたいと思います!

 

 ▼前回のエントリーはこちら

kocchi.hatenablog.com

 

 

さらに便利なジェネレーター

ジェネレーターを検索していた際、本家のジェネレーターとは別に、さらに便利な機能を備えたジェネレーターを発見。

それがコチラ。

 

記事紹介ジェネレーター | マネー報道 Webサービス記事紹介ジェネレーター | マネー報道 Webサービス 

 

サービスを作成してくださった方の該当エントリーがこちら。

 

moneyreport.hatenablog.com

 

このジェネレーターだと、画像サイズ、画像装飾の種類、target="_blank"の有無、rel="nofollow"の有無を選んでコードを作成できるのです!

 

ちなみに、画像サイズ100px×100px、画像装飾縁ありにしたのが下のリンク▼

 

記事紹介ジェネレーター | マネー報道 Webサービス記事紹介ジェネレーター | マネー報道 Webサービス 

 

target="_blank"、rel="nofollow"についてはコードなどに詳しくないのでよくわからないのですが、マネー報道さんの説明をお借りすると以下のようなことらしいです。

 

target="_blank"

画像リンクやテキストリンクをクリックした時に、別のウインドウで開くかどうかを選ぶ事が出来ます。
「有り」だと別ウインドウでリンク先を開き、「無し」だと現在開いているページから移動してリンク先を開きます。

 

rel="nofollow"

リンク先を『広告・有料リンク』としてGoogle等の検索エンジンに通知する機能になります。
「有り」だとリンク先は『広告・有料リンク』として定義し、「無し」だとリンク先は『ナチュラルリンク』として定義します。

 

うーん。

target="_blank"はわかったけど、rel="nofollow"がイマイチわからん。

とはいえ調べてみると、実は「有り」「無し」のほうがいいみたい。(詳しくはご自分でしらべて~。私もふわっとしかわからなかった。)

 

id:MoneyReportさんからコメントにてご指摘いただきました。rel="nofollow"の有無、誤って記載しておりました。通常は「無し」が正しいため、訂正しました。

 

ということで、このジェネレーターを使用するときは、各々デフォルトで行きます^^

 

 

ジェネレーターのデザインに枠線をつける

ジェネレーターで作成したコードを貼り付けたリンクは、はてなの埋め込みリンクと雰囲気が違って、ちょっとなぁ~って思いました。

なので、せめて枠線ぐらいつけようと、CSSとHTMLコードを付け加えました。

 

使用するコード

CSS

以下のコードを、カスタマイズのCSSに追加。

 

/* 記事紹介ジェネレータに枠線を付ける */
.generator-box {
border: 1px solid #ddd;
border-radius: 3px;
margin: 0.8em 0;
padding: 0.8em;
}

 

HTML

ジェネレーターで作成したコードにちょっとひと手間。

 

<div class="generator-box">ここに作成したコードを入れる</div>

 

この<div class="generator-box">~</div>のコードを、ブログ記事作成のHTML編集モードで必要な場所にペーストすればOK

 

こうなる

上記のようにリンクを作成したのがこちら。

 

 

うーん。

ちょっと引用の枠と同化してますね(笑)。

試しに、ラインを二重にしてみたのがこちら。

 

 

ああ、でもこうするとはてなの埋め込みと一緒にならない。どうしよう(;´・ω・)

二重ラインのCSSはこれです。

 

.generator-box2{
border: 4px double #ddd;
border-radius: 1px;
margin: 0.8em 0;
padding: 0.8em;
}

 

 

スマホの場合

スマホの場合は、カスタママイズの記事上に、以下のコードを入れました。

 

1本線の枠

<style type="text/css">
/* 記事紹介ジェネレータに枠線を付ける */
.generator-box {
border: 1px solid #ddd;
border-radius: 3px;
margin: 0.8em 0;
padding: 0.8em;
}
</style>

 

2本線の枠

<style type="text/css">
/* 記事紹介ジェネレータに枠線を付ける */
.generator-box2 {
border: 4px double #ddd;
border-radius: 3px;
margin: 0.8em 0;
padding: 0.8em;
}
</style>

 

<style>タグで囲んだだけ(・・;)

 

 

最後に

ということで、ちょっとデザインいじってみた話でした。

果たして正しいのかどうかは不明ですが、確認するとちゃんとできてるので良しとします。まったくこういったコードを知らない未熟者としては、上出来ではないかと。

ま、完全に自己満です(〃艸〃)

 

 

-----------

▼ランキングに参加中。
 クリックして応援していただけると更新の励みになります^^

ブログランキング・にほんブログ村へ  にほんブログ村 音楽ブログ 音楽のある暮らしへ