Weekly TodaysPhoto (模索中)

 昨日リリースした記事はあまりにも見づらいと思う。もうちょっと模索したい。

 まず、ツイートを埋め込むのは止めた方が良さそうだ。
 大きさや形、フォント等が変えられず場所を喰う割には大して見やすくない。写真もさほど大きくないし。
 そこで、試しにツイッターに上げてる写真を直リンクして表示して、キャプションを付けてみることにする。また元ツイへもリンクさせてみる。


 うーん、これはこれで場所を喰うなあ。

 じゃあ試しに、サムネイルサイズの画像を直リンクしてみたらどうじゃ。

 大分コンパクトではある。
 このサムネイルサイズの画像はツイッターにアップロードすると自動で生成されるらしい。アップロードすると、ツイッターの中でいくつかのサイズの画像を生成して必要に応じて切り換えてるっぽい。よく知らないけど。

 しかしこれだと右側にスペースが空くのがイマイチだなあ。テキストを回り込むようにしてみっか。つーことで新しくCSSを書いてみた。
.tweet_quote {
border-radius: 5px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;

background-color:#ddd;
border: 1px #66c solid;
}

.tweet_quote img {
float: left;
margin: 0px 10px 0px 0px;
}

.tweet_quote:after {
content: "";
clear: both;
display: block;
}

.tweet_quote a:hover {
text-decoration: none;
}
 あと、一々キャプションを書くのは面倒なので、ツイートの文をコピペしてみた。

 そしたらこーなった。↓
 なかなか良い感じじゃないですか。

 しかし、ただテキストを回り込みするようにしただけでは、文が長くなったときに画像の下側にテキストが表示されて見た目がよろしくないなあ。↑はたまたま大丈夫だけど。

 ここは思い切ってテーブルにしてみるか。
#TodaysPhoto #film #monochrome #street #pigeon

#Konica #Autorex P (half)
KONICA HEXANON AR 135mm F3.2
Ultrafine Extreme 100
現像とスキャニングは #トイラボ さんです。

 大分理想に近づいた。この場合は元ツイへのリンクは画像だけに仕掛けてある。この表示にたどり着くのに意外と時間がかかった。ウェブリブログのテンプレのCSSが色々絡んでなかなか思う通りの表示が出来ず、結構悩んだ。(;´Д`)

 最終的に、以下の如くCSSを追記したら何とか出来た(border-collapse は無くても大丈夫かも)。
.tweet_quote table {
border-collapse: collapse;
width: 100%
}

.tweet_quote td {
background-color: #ddd;
padding: 0px;
}


 それにしてもテーブルは面倒くさい。どうしてHTMLの作者はこんな面倒な仕様にしたのか。若干怒りすら湧いてくる(;^ω^)
 さらにウェブリブログの謎仕様で、見やすくしようと改行しながら書くと、<br>タグが挿入されてページが大変なことになる。さらに面倒くさいではないか。

 お手軽なのはテンプレを作っておいてコピペする方法だけど意外とミスる可能性があったりする(粗忽者なので…)。
 また何か適当な言語でスクリプトを書いて、コピーしたテキストをペーストしたらサクっとHTMLを出力する、みたいなユーティリティを作るか~?

続きます)

ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 0

この記事へのコメント