LinkWithin:関連記事を横に2つずつ並べる

イントロダクション

ブログ内の関連記事を一覧で表示してくれる「LinkWithin」というブログへ埋め込めるサービスがあります。

以前、LinkWithin にスタイルシート(CSS)を適用して、関連記事の一覧を一般的な横並びではなく、縦並びにしてみました。

LinkWithinの記事一覧を横ではなく縦に表示したい！CSS変更でやってみた！
http://upa-pc.blogspot.com/2015/02/linkwithin-css-posts-vertical.html
Dr.ウーパのコンピュータ備忘録

今回は、その時の知見を活かして、関連記事を横に 2 つずつ並べるように、CSS を適用してみます。

HTML/CSS/JavaScriptでタブコントロールを作ってみた(右タブ) - display:none方式

イントロダクション

前回は、選択されているタブの中身は表示、選択されていないタブの中身は非表示（CSS の display:none）とする仕組みにて、左にタブがあるタブコントロールを作成してみました。

HTML/CSS/JavaScriptでタブコントロールを作ってみた(左タブ) - display:none方式
http://upa-pc.blogspot.com/2015/05/html-tabControl-display-none-left.html


今回は、右にタブがあるタブコントロールを作成してみました。

HTML/CSS/JavaScriptでタブコントロールを作ってみた(左タブ) - display:none方式

イントロダクション

前回は、選択されているタブの中身は表示、選択されていないタブの中身は非表示（CSS の display:none）とする仕組みにて、下にタブがあるタブコントロールを作成してみました。

HTML/CSS/JavaScriptでタブコントロールを作ってみた(下タブ) - display:none方式
http://upa-pc.blogspot.com/2015/05/html-tabControl-display-none-bottom.html


今回は、左にタブがあるタブコントロールを作成してみました。

HTML/CSS/JavaScriptでタブコントロールを作ってみた(下タブ) - display:none方式

イントロダクション

前回は、選択されているタブの中身は表示、選択されていないタブの中身は非表示（CSS の display:none）とする仕組みにて、上にタブがあるタブコントロールを作成してみました。

HTML/CSS/JavaScriptでタブコントロールを作ってみた(上タブ) - display:none方式
http://upa-pc.blogspot.com/2015/05/html-tabControl-display-none-top.html


今回は、下にタブがあるタブコントロールを作成してみました。

HTML/CSS/JavaScriptでタブコントロールを作ってみた(上タブ) - display:none方式

イントロダクション

タブコントロールを使用すると、情報を整理するときにとても便利です。

タブコントロールはとても便利！何故便利なのか？
http://upa-pc.blogspot.com/2015/05/tab-control-is-useful.html


さて、以前、HTMLとJavaScriptでタブコントロールを作ってみました。

HTMLとJavaScriptでタブコントロールを作ってみた-タブ:上
http://upa-pc.blogspot.com/2014/05/html-tabControl-top.html
Dr.ウーパのコンピュータ備忘録

HTMLとJavaScriptでタブコントロールを作ってみた-タブ:下
http://upa-pc.blogspot.com/2014/05/html-tabControl-bottom.html
Dr.ウーパのコンピュータ備忘録

HTMLとJavaScriptでタブコントロールを作ってみた-タブ:左
http://upa-pc.blogspot.com/2014/05/html-tabControl-left.html
Dr.ウーパのコンピュータ備忘録

HTMLとJavaScriptでタブコントロールを作ってみた-タブ:右
http://upa-pc.blogspot.com/2014/05/html-tabControl-right.html
Dr.ウーパのコンピュータ備忘録

その時作成したタブコントロールでは、タブを切り替えるたびにタブの中身を生成する仕組みでした。
（タブの中身のデータを非表示(CSS の display:none)にしておき、タブコントロールの中にコピーする仕組み）

用途によっては、その方式が都合の良い時があります。
（タブを切り替えるたびに、内容を初期化したい場合など）


しかし、タブを切り替えるたびにコピー処理を実行するのは、処理対象のデータ量によっては処理の負荷がかかる場合があります。また、タブの中身に何らかの手を加えた場合に、タブを切り替えるたびに初期化されるのが望ましくない場合もあります。


そこで、今回は、タブの中身をコピーしてタブコントロール内に表示するのではなく、選択されているタブの中身は表示、選択されていないタブの中身は非表示（CSS の display:none）とする仕組みにて、タブコントロールを作成してみました。

Blogger:コメント入力欄を初期状態では非表示にしておき、「コメントを投稿」をクリックしたら表示するようにする(改良版)

イントロダクション

以前、Google のブログサービス「Blogger」のコメント欄を初期状態では非表示にしておき、「コメントを投稿」をクリックしたら表示するようにしてみました。

Blogger:コメント入力欄を初期状態では非表示にしておき、「コメントを投稿」をクリックしたら表示するようにする
http://upa-pc.blogspot.com/2014/05/blogger_19.html
Dr.ウーパのコンピュータ備忘録

前回は、Blogger のテンプレートの HTML を 2 箇所変更、CSS を追加するという合計 3 つの作業が必要でした。

特に、Blogger のテンプレートの HTML を編集する作業は、危険を伴う作業です。
そこで、今回はBlogger のテンプレートの HTML を編集することなく、HTML/JavaScript ガジェットにコードを追加するだけ（別途、CSSの追加は必要）で、「コメント入力欄を初期状態では非表示にしておき、「「コメントを投稿」をクリックしたら表示する」機能を実現できるようにしてみました。

ブログ:コピー&ペーストした文章に、元々の書式が適用されることを防ぐ方法

イントロダクション

ブログを書くときには、HTMLにて記述するよりも、文字への装飾がそのまま見えるモードで作業することが多いと思います。

ブログ：文字への装飾がそのまま見えるモードで編集

やっぱり、HTMLで書くのは面倒くさいですし、どんな見た目になるのかも直観的に分かりづらいです。


さて、そのような編集方法にてブログを書くときに結構問題になるのが、書式が設定された文章をコピーしてきて、ブログに張り付けると、そのままコピー元の書式まで張り付けられてしまうという点です。


例えば、このブログのタイトルをコピーして、張り付けた場合には、

Dr.ウーパのコンピュータ備忘録

という風に、書式も一緒に張り付けられます。
文字のサイズ、文字の色などがコピー元の装飾のままです。


本当は、ただのテキストとして張り付けたい（書式はいらない）というケースも多いはずです。


その時の対処方法について記載します。

トップページに、パネルのようなデザインのカテゴリ表示を設置

イントロダクション

このブログのトップページのナビゲーションを改善するために、トップページに次のような、パネルのようなデザインのカテゴリ表示を設置しました。

トップページに追加したカテゴリ表示

スタイルシートのtext-shadowでは、複数の影を指定できる!表現の幅が大きく広がります！

イントロダクション

「ブログの文字に影をつけたい!条件を設定すれば簡単に影付き文字を作れる「CSS3 Text Shadow Generator」が便利！」では、スタイルシートのtext-shadowの設定をマウス操作だけで作成できるWebサービスについてご紹介しました。

その時に、スタイルシートの text-shadow について詳しく調べていたのですが、この  text-shadow では、複数の影をまとめて指定できるのですね！

text-shadow - CSS | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/text-shadow

2/2 文字に影を付け、画像に重ねた文字を見やすくするCSS3 [ホームページ作成] All About
http://allabout.co.jp/gm/gc/384274/2/

text-shadow－CSS3リファレンス
http://www.htmq.com/css3/text-shadow.shtml

今までずっと、単一の影しか指定できないものだと思っていました。

ソースコード解説：スタイル付きテキストを、コピーでブログに張り付け

イントロダクション

スタイルシートによってスタイルを適用した文字を、コピーによってブログに張り付けることのできるサービスのソースコードの解説を記載しました。

スタイル付きテキストを、コピーでブログに張り付けすることのできるサービスを作成しました！
http://upa-pc.blogspot.com/2015/02/css-copy-to-blog.html


そのままのソースコードは、以下のページで公開しています。

ソースコード：スタイル付きテキストを、コピーでブログに張り付け
http://upa-pc.blogspot.com/2015/02/src-css-copy-to-blog-v1.0.html


なお、これは初版(Version1.0)のものであり、今後修正が加わる可能性があります。

ソースコード：スタイル付きテキストを、コピーでブログに張り付け

イントロダクション

スタイルシートによってスタイルを適用した文字を、コピーによってブログに張り付けることのできるサービスを作ってみました！

スタイル付きテキストを、コピーでブログに張り付けすることのできるサービスを作成しました！
http://upa-pc.blogspot.com/2015/02/css-copy-to-blog.html


そのソースコードをここで公開します。
なお、これは初版(Version1.0)のものであり、今後修正が加わる可能性があります。

スタイル付きテキストを、コピーでブログに張り付けすることのできるサービスを作成しました！

イントロダクション

ブログを作っているときに、本文の一部の文字の装飾を変えたい場合があります。

文字の色や大きさ、太字・斜体・下線・取り消し線といった標準出来な文字の装飾は、ブログサービスが標準的に用意していて、ブログ編集画面中のボタンを押すだけで適用することができます。


しかし、ブログのような Web ページでは、スタイルシートを使ったもっと多彩な装飾が可能です！

そんなとき、ブログの編集画面で、わざわざ HTML による編集に切り替えて作業を行うのは面倒です。


そこで、スタイルシートによってスタイルを適用した文字を、コピーによってブログに張り付けることのできるサービスを作ってみました！

ブログの文字に影をつけたい!条件を設定すれば簡単に影付き文字を作れる「CSS3 Text Shadow Generator」が便利！

イントロダクション

ブログを書いていると、文字に影をつけて目立たせたいことってありますよね？


そんな時、一昔前なら、画像処理ソフトウェアを使って、文字に効果を付けたものを画像として読み込んでいました。

しかし、今のブラウザなら、文字にスタイルシート(CSS)を適用することで、影を付けることができるのです！


しかし、影を付けるために、スタイルシートについていろいろと調べるのは面倒です。

そんなとき、とても便利なのが「CSS3 Text Shadow Generator」です！

CSS3 Text Shadow Generator - CSS3gen
http://css3gen.com/text-shadow/

LinkWithin:関連記事のURLが直リンクのように見えるのに、LinkWithinのページを経由する理由

イントロダクション

このブログでは、各投稿の関連記事をリストアップして、ユーザへ提示するのに、LinkWithin というサービスを使用しています。

LinkWithinのフォントサイズを変える！cssのfont-sizeを強制適用

イントロダクション

「LinkWithinのフォントを変える！cssのfont-familyを強制適用」では、LinkWithin の関連記事のタイトルに使用されている標準のフォントを変更し、ブログで使われているフォントと同じものを適用するスタイルシートを作成しました。

今回は、LinkWithin の関連記事のタイトルの文字の大きさを、LinkWithin が指定する標準のサイズから、ブログで使用しているフォントのサイズに変更してみたいと思います。

LinkWithinのフォントを変える！cssのfont-familyを強制適用

イントロダクション

「LinkWithinの記事一覧を横ではなく縦に表示したい！CSS変更でやってみた！」では、スタイルシートを作成して、LinkWithin の関連記事一覧を標準の横方向の表示から、縦方向の表示への変更してみました。

そうして縦方向に表示した LinkWithin の関連記事の一覧表示は次のようになりました。

LinkWithinの関連記事一覧を階段状に表示できた！？偶然の産物です

イントロダクション

LinkWithin の関連記事一覧を標準の横方向の表示から、縦方向の表示への変更するためのスタイルシートを、以下の投稿にて作成してみました。

LinkWithinの記事一覧を横ではなく縦に表示したい！CSS変更でやってみた！
http://upa-pc.blogspot.com/2015/02/linkwithin-css-posts-vertical.html


その過程でいろいろなスタイルシートの設定を試していたところ、偶然にもLinkWithinの関連記事を階段状に表示するスタイルシートを作り出すことが出来ました。

LinkWithinの記事一覧を横ではなく縦に表示したい！CSS変更でやってみた！

イントロダクション

手軽にブログ内の関連記事の一覧を表示できる「LinkWithin」ですが、標準では関連記事の一覧は横方向に表示されます。

Bloggerデザイン：インデックスページで複数の記事の本文の高さを揃える。そして本文はスクロールによって見る

イントロダクション

Blogger のインデックスページ（トップページ、年アーカイブページ、検索ページ、ラベルページ）で複数の記事を表示した時に、各記事の長さが異なることで、極端にページが長くなったり、極端にページが短くなったりすることがあります。

そこで今回は、インデックスページで複数の記事の本文の高さを揃えてみようと思います。記事の高さを揃えた時に、表示できない部分はスクロールによって表示させます。

JavaScriptでスタイルシートを操作するときに参考になるページまとめ

JavaScriptでスタイルシートを操作するときに参考になるページをまとめました。

JavaScript側からスタイルシートを見るとどのように見えるかや、スタイルシートへのスタイルルールの動的な追加・削除をするときなどに役立つ情報が満載です！