Hatena::ブログ(Diary)

smartboyのWeb製作メモ帳 このページをアンテナに追加 RSSフィード

Webサイトの構築時に気づいたことのメモ帳です。
サイト構築に関するTIPSだけではなく、ブラウザのこと等ウェブ全般について書いていきます。

2016-01-27 DTI のホームページ容量を無料で倍にした

久しぶりの更新だが、今回は特定の条件を満たすごく一部の方にしか役立たないだろう。まあ、ブログのタイトルが「〜メモ帳」なのだから人様のお役に立つというよりは個人的なメモなので、その辺はご容赦願いたい。

DTIというプロバイダホームページスペースに作成しているホームページが容量オーバーでファイルをアップロードできなくなったので、容量を50MBから100MBに増やした。なんと容量追加は無料だった。

DTIのホームページ容量追加のページを見ると以下のように書いてある。

auひかり 各プラン、ひかりone Tタイプ各プラン、フレッツ光各プラン、ADSL各プラン、ダイヤルアッププラン、AIR-EDGEプラン、フレッツISDNプランは、初期費用・月額利用料金共に無料で容量追加をすることができます。 (追加申し込みをした同月内に解約をする場合も無料で行えます。)

私は自宅のFTTH回線に auひかり を使っていて、プロバイダは昔からのウェブサイトや電子メールアドレスの関係で DTI を使っているのだが、auひかりプランなので無料らしい。もっと早く気づけば良かったな。

というわけで DTI でホームページを運営していて上記条件に当てはまる方は容量を増やしてみましょう!

こないだから無駄なファイルを消したり、大きなサイズの画像を圧縮して軽量化したりといろいろとやっていたのだが、それでも追いつかなくなってきたので助かった。

まあ、ファイルを軽量化するということは、使っているホームページスペースの制限だけではなく、アクセスする人にとっても軽くて優しいページになるので、普段から心がけるべきことではあるけどね。みんながみんな高速光回線で見ているわけではないし、光回線が普及してきているとはいえ、スマホも普及してきていてモバイル回線で見てる人も増えてきてるのだから。

2014-04-13

WordPress の掲示板プラグイン bbPress でカラム落ちさせない方法

先日 WordPress を使ってウェブサイトリニューアルしたのだが、そこに掲示板を作ろうと思った。いろいろと調べたところ、 WordPress 上で掲示板を作るには、「bbPress」というプラグインが評判がいいらしい。そこで、bbPress を使って掲示板(フォーラム)を作ることとした。

ちなみに、私も勘違いしていたのだが ppsPress ではなく bbPress ね。

ppPress の設置方法は「WordPressで掲示板を作成する方法〜bbsPressの使い方」というサイトに詳しく書いてあるが、そこに書いているテーマ「Twenty twelve」を使用していても、サイドバーが下の方にカラム落ちしてしまう。そのページに書いてある通りにやってもうまくいかない。掲示板のページでうまくいっても、そのかわりトップページでカラム落ちしたりする。

色々と試行錯誤した結果、以下のようにすればうまくいったので、その方法を紹介しよう。

まず、前提条件としてテーマ「Twenty twelve」を使っていること。プラグイン bbPress のインストールまでは先ほど紹介したページ等を参考にしていただきたい。そのページの後半部分「カラム落ちの修正」が、その通りにやってもうまくいかないため、以下ではその部分のやりかたを紹介する。


ヘッダの修正

f:id:smartboy:20140413132809p:image

ヘッダー (header.php) の最後の方に

	<div id="main" class="wrapper">
		<div id="content" role="main">
			<div id="primary" class="site-content">

この2行を追加する。ここまでは先に紹介したサイトと同じ

サイドバーの修正

f:id:smartboy:20140413131203p:image

サイドバー (sidebar.php)の中にヘッダで追加したDIVタグを閉じるタグを追加する。

この時 id="primary" を閉じるタグは最初で良いが、id="#content" を閉じるダグは上図の様に最後に記述する。



そうすると、固定ページテンプレート (page.php)でコードが重複するので該当箇所を削除。ここは先ほど紹介したページと同じですね。

該当箇所は下の図を参照。

f:id:smartboy:20140413131204p:image

これでカラム落ちは発生しなくなりました。めでたしめでたし。

2013-12-29

意外と便利なCSS3の":nth-of-type"

 CSSで追加されたCSSセレクタ(擬似クラス)に":nth-of-type(n)"というのがある。

 「n番目に現れる要素にスタイルを適用する」というやつだ。

 最初見た時は「何だこれ?」と思ったが、意外と便利だ。例えばテーブルの3列目にだけ要素を適用したいのなら、


TR>TD:nth-of-type(3) { … }

 

という様に書く。"2nd-of-type" ではなく、"nth"の部分はそのまま"nth"と書いて、カッコの中の引数に数字を書く。念のため。

:nth-of-type(odd) ・・・ 奇数番目の要素に適用
:nth-of-type(2n+1) ・・・ 奇数番目の要素に適用
:nth-of-type(even) ・・・ 偶数番目の要素に適用
:nth-of-type(2n) ・・・ 偶数番目の要素に適用
:nth-of-type(3n) ・・・ 3,6,9,12…番目の要素に適用
:nth-of-type(3n+1) ・・・ 1,4,7,10…番目の要素に適用
:nth-of-type(-n+3) ・・・ 最初の3つの要素に適用
:nth-child(n+3) ・・・ 最初の3つの要素以外に適用 

なんてこともできる。

 「テーブルの特定の列だけにスタイルを適用したい」といった場合、CSS2の書き方だと全行の TD タグにクラス名を設定して、クラスに対してスタイルを適用するという書き方になるが、それだとソースが肥大になり、しかも見づらい。(特定の「行」に対してなら TR タグにクラスを付けておけばいいのでまだラクなんだけどね。)

 それが、nth-type-of を使うと HTML のソースがシンプルに書けることになる。

 私が管理しているとあるページでも、 class タグが大量に設定された読みづらいTABLEのHTMLソースを書き換えて、以下の様なCSSを定義してみた。

TR>TD:nth-of-type(2) {font-size:8pt;}
TR>TD:nth-of-type(n+3){@extend .small;}
TR>TD:nth-of-type(-n+4) {white-space: nowrap;}

 ちなみに2行目はSassというものを使っているので、普通に書いただけじゃ動かない。SassとはCSSを記述するための言語(メタ言語)の一つであり、同言語で記述したファイルをCSSファイルへ変換するソフトウェアである。@extend とは別に定義されているスタイルを継承するものであり、今回はもともとクラスに対して使っていたスタイルをそのまま用いた。Sassも便利なものだが、詳しい紹介は気が向いたらということで。

 今回は nth-type-of を紹介したが、某所にある「意外と知らない!?CSSセレクタ20個のおさらい」というページで、旧来のものも含めて色々と載っており、非常に参考になる。意外と忘れてるセレクタもあるんだよな。というわけで、興味のある方はそちらのページもどうぞ。

2012-03-06

複数のアカウントを1つのTwitterアカウントと紐付ける方法ってある?

このブログサブアカウントにしているのですが、Twitterアカウントとの連携を再設定したら「既にそのアカウントは別のidと連携しています」みたいなエラーが出てきて連携できなくなりました。

以前はメインとサブの両方のアカウントとTwitter連携できていたのですが、設定しなおしたら1つのアカウントしかできなくなってしまいました。

複数のはてなアカウントを1つのTwitterアカウントに連携する方法はないものでしょうか? > 教えてはてなダイアリー

2012-02-02

箇条書きのアイコンはCSSを使って指定するのが便利

箇条書きをする時に文字の左にアイコンを置きたい時に最も楽な書き方は、

 <img src="hogehoge.gif" height=11 width=11> テキスト 

みたいにIMGタグを使って書く方法です。(height、width属性は省略可能だが付けないと表示が遅くなるので付けたほうがいい。)

1個だけならこれで十分ですが、これを何個も書きたい時はすべての要素にいちいちIMGタグを付けていると面倒だし、ソースの可読性も良くありません。

そこでリスト形式(UL)にして、リストの各要素の先頭の画像を指定する方法があります。

<ul style="list-style-image: url('hogehoge.gif')">
<li>要素1</li>
<li>要素2</li>
<li>要素3</li>>
</ul>

これで画像ファイルを指定するのは1箇所ですがリストの全ての要素の左側にアイコンを表示することができます。

しかし、これでは画像は1種類しか使えません。「要素のタイプごとに違うアイコンを使いたい。」こんな場合にはこの方法では実現できません。

たとえば、次の様に要素のタイプごとにアイコンを変えたい時はどうすればいいのでしょうか?

要素赤1

要素青1

要素赤2

要素赤3

要素青2


上の例みたいに要素のタイプごとにアイコンを変えたい場合はスタイルシートを使うのが便利です。以下にその方法を記述します。

<head>
<style type="text/css">
<!--

/* この例では画像ファイル以外の属性は全てまとめて指定 */
.red,.blue {background-repeat: no-repeat;background-position:2px center;padding-left:24px;}
/* 画像ファイルはクラス毎に指定 */
.red{background-image: url('red.gif');}
.blue{background-image: url('blue.gif');}
 -->
</style>
</head>
<body>
:
<div class="red">要素赤1</div>
<div class="blue">要素青1</div>
<div class="red">要素赤2</div>
<div class="red">要素赤3</div>
<div class="blue">要素青2</div>
:
</body>

つまりスタイルシートで背景画像としてアイコンを使用するのです。CSSの"background-repeat"属性を"no-repeat"に設定してアイコンが1つの要素につき1つしか表示されない様にしています。"background-position"では画像の表示位置を指定しています。上の例ではブロックの左から2pxのところ、縦位置は中央になるように指定しています(左側をインデントする必要がなかったら1つ目の値は"left"で構いません)。それだけだと画像とテキストが重なってしまうため"padding-left"を使用してテキスト要素の開始位置をずらしています。この値はアイコンの大きさによって適宜変えて下さい。

上記のサンプルではHEADタグの中にCSSを記述しましたが、もちろん外部スタイルシートファイルを使用してもOKです。

この方法を使うと要素ごとにIMGタグを使用する必要がなく、またある要素のタイプが変更になった場合もクラス名を変えるだけで済むのでメンテナンス性という意味でも便利です。


私の運営している一口馬主のページ我が一口馬主人生でもこの方法でテーブル内の左側の項目に付けているアイコンを指定して見ました。そのページでは上記の例のようにDIVタグではなくTABLEタグの子要素のTDタグでその方法を使用しています。今まではIMGタグを使って一つ一つアイコンを設定していたのですが、数が増えてくるとソースが長くなり、また、見づらくなってきたのでこの方法を試して見ました。