2008年11月30日日曜日

Scribus で段組とガイドの設定

更新(2012/07/20)

1. 段組の列数とギャップの設定

Scribus (1.4.1) でテキストフィールドの段組を設定したい。

  1. 段組を設定したい「テキストフィールド」を右クリック > プロパティを選択する。
  2. テキスト > カラムとテキストの距離 における「列数」と「ギャップ」の値を設定する。

 

2. ガイドを使う

a. ガイドマネージャ

ページ全体に対して、段組を設定する場合、「ガイド」を使うことができる。

  1. メニューより「ページ > ガイド管理 」を選択する。
  2. ガイドマネージャの「行/列」タブにおいて、
    1. 「垂直線」の
      1. 番号を列数に応じて設定する。
      2. 「ギャップを使用」をチェックし、適当な値を設定する。
    2. 「全てのページに適用」ボタンを押す。

これにより、ページにガイドが表示される。

作成したガイドにテキストフレームを合わせるために、

  • メニューより、ページ > ガイドに合わせる

にチェックを付けた後、テキストフレームを配置すると良い。

 

b. 手動でガイド設定

ガイドとなる線は、手動で引くこともできる。

ガイドを引くには、ウィンドウ左側にある垂直の定規の適当な位置でマウスをクリックしたまま、右方向へドラッグする。

同じように、横方向のガイドを引きたい場合は、水平の定規の適当な位置でマウスをクリックしたまま、下方向へドラッグする。

 

関連記事

Scribus でテキストの回り込み

テキストの回り込み

画像A と テキストB がある。画像A はテキストB の上に重なっている。

081130-008

 

画像A を右クリック > プロパティ を選択。

形状 > フレーム回りのテキストの回り込み」にチェックを付ける。

081130-009

 

レベルの設定

このとき、画像がテキストよりも下に位置している場合、画像A を右クリック > レベル を使って、テキストB よりも上に配置されるようにする。

 

パディング

上記のままだとテキストと画像が少し近付きすぎてる感じがする。画像の周りにもう少し空間が欲しい。

 

画像を右クリック > プロパティを選択。

画像タブ において「自由倍率」を選択。倍率の値を適当に小さくした後、位置の値を画像が真ん中にくるように調整。

081130-010

 

もっと自由に変形させたい場合は、形状タブの「形状を編集」ボタンを押してフレームを変形させる。

Scribus で画像のサイズをフレームに合わせる

画像の挿入

image 「画像フレームを挿入」アイコンをクリックして、画像を挿入したい位置を指定する。

画像フレームを右クリック > 画像を取得 により画像を挿入する。

しかし、このときフレームの方が小さいと画像が入りきらない。

081130-006

 

大きさをフレームに合わせる

画像をフレームの大きさに合わせるには、画像を右クリック > プロパティを選択。

画像 タブの「フレームサイズに合わせる」のラジオボタンを選択する。

081130-007

Scribus でテキストの流し込み

一つのテキストフレームだけでは入力した文字を表示しきれないとき、別のテキストフレームを作成し、そこに表示しきれなかったテキストを流し込みたい。

 

テキストフレームの連結

テキストフレームにテキストを入力する。

入りきらなかったテキストを流し込むためのテキストフレームを新に作成。

テキストの入力されているテキストフレームを選択し、linktextframe「テキストフレームを繋ぐ」アイコンをクリックし、新しく作成したテキストフレームを指定。

以下のように連結された状態が矢印で示される。

081130-004

Scribus で日本語を表示する

1. 日本語の表示

  1. textframeテキストフレームを挿入」アイコンを使い、テキストを入力したい範囲を指定する。
  2. テキストフレームを右クリック > 「テキストを編集」 を選択すると、ストーリエディタが開く。
  3. 選択されたテキストのフォント」で日本語が表示可能なフォントを選ぶ。

081130-002

 

2. フォントの確認

  1. ストーリエディタのメニューより、「編集 > フォントプレビュー」を選択する。
  2. ウィンドウ下部の「テキスト」に日本語を入力して、設定ボタンを押す。
    081130-001
  3. フォント一覧にあるフォントを選択するとフォントが表示される。

2008年11月29日土曜日

PHP の開発環境を整える (2) – NetBeans

久しぶりに PHP の開発環境を整える。今年の 4 月の時点では、Eclipse がベースの PDT を利用した。

NetBeans 6.5 IDE - PHP Development によると、Netbeans でも PHP を扱えるようになったようなので試してみる。

 

前提となるツール

以下のツールがインストールされていること。

 

NetBeans のインストール

NetBeans IDE ダウンロード より、PHP のみをサポートしたものをダウンロード。

 

新規プロジェクトの作成

メニューより「ファイル > 新規プロジェクト」。

カテゴリから「PHP」を選択、プロジェクトから「PHP アプリケーション」を選択して、「次へ」ボタンを押す。

081129-001

プロジェクト名を適当につける。

ソースフォルダは、xampp のドキュメントルートにプロジェクト名と同じになるようにした。

( PDT で設定をするとき、ここでややこしいことになった。ドキュメントルートにソースを置けば、Apache の設定ファイルで指定しなくてもいいので楽。)

081129-002

プロジェクト URL が表示されるので確認。

081129-003

index.php にコードを書いて「プロジェクトを実行」ボタンを押すと、ブラウザが起動して結果が表示される。

081129-004

 

HTML ファイルの作成
  1. 081129-005メニューより「ファイル > 新規ファイル。」
  2. その他 > HTML ファイル を選択。

左側のペインには要素がツリー状で表示されている。 PHP のエディタと同じく、コードの横にはコードを畳むためのボタンがついていて便利。

 

Subversion の設定と使い方

メニューより「バージョン管理 > Subversion > チェックアウト」を選択したら、エラーが表示された。

予め Subversion の bin ディレクトリを指定することが必要。

081129-002

 

プロジェクトのインポート

上記で作成したプロジェクト PhpProjce1 で右クリックし、

  • Subversion > バージョン管理 > Subversion リポジトリにインポート

を選択。

081129-003

Subversion のリポジトリは C:\develop\svn に作ってある。メニューよりリポジトリの指定をする。

file:///C:/develop/svn

081129-005

リポジトリフォルダに PhpProject1 と指定。(以下の写真では PhpProject2 となってるけど ^^;)

メッセージを適当に書く。

081129-007

インポートされるファイルが表示されて完了。

081129-008

 

感想

何の苦もなく、簡単にできてしまった。^^ PDT ではなく、NetBeans でいいかも…。

2008年11月27日木曜日

サクラエディタで文字コードの変更

UTF-8 で開きたいファイルが SJIS で開かれてしまったとき、文字化けする。

サクラエディタで文字化けを直したいなら、

  • ファイル > 開き直す > UTF-8で開き直す

を選択。

081127-001

上記操作のショートカットキーは UTF-8

Ctrl + Alt + F8

と対応しているので覚えやすい。コマンドがある場所は、「ファイルを開き直したい」のだから、「ファイル」メニューにあると記憶しておく。

ところで、同エディタにおいて、文を「ウィンドウ幅で折り返す」とき、メニューの中でコマンドを探したけれど、なかなか見つけられなかった。

「あれ? 設定の中のどこにそういう設定項目があったかな?」

と迷ってしまった。 (cf. サクラエディタ、文をウィンドウ幅で折り返す)

日頃使ってないと本当忘れる…。この操作もそのうち忘れるかも ^^;

2008年11月26日水曜日

Drupal で PHP snippets (3) - テーブルで出力

前回「Drupal で PHP snippets - 最新のストーリーのタイトル一覧を表示」では結果をリストとして表示した。今回はこれをテーブルで表示したい。

 

theme 関数

Drupal では theme 関数を使ってテンプレートに即したデザインを出力することができる。前回、リストとして表示されたのは PHP snippets の以下の部分による。

theme('item_list', $items);

この辺りどういう仕組みか理解していないが、theme | Drupal API によると、

All requests for theme hooks must go through this function.

theme 関数がテンプレートを利用するための窓口になっているようだ。

Default theme implementations | Drupal API には、theme 関数の使い方の例が書かれていた。

For example, theme('table', $header, $rows); Additionally, the theme() function can take an array of theme hooks, which can be used to provide 'fallback' implementations to allow for more specific control of output. For example, the function: theme(array('table__foo', 'table'), $header, $rows) would look to see if 'table__foo' is registered anywhere; if it is not, it would 'fall back' to the generic 'table' implementation.

(太字は引用者による)

theme 関数の第1引数で表示の仕方を指定するようだ。その際、いろいろと細かな指定ができるようだけれど、それは横に置いておく。とにかく、

theme('table', $header, $rows);

というように記述することができる。前回との違いは、theme 関数の第1引数に指定している文字列が ‘item_list’ から ‘table’ に変化しいるところ。この ‘table’ というのが HTML の table 要素の出力に対応。

PHP snippets の中で、テーブルを出力する Display a table of node entries sorted by a start date taken from the event module の例を見ても、

print theme('table', array(…

というように第1引数に 'table’ と指定しているので、やはりこれがテーブルの出力に関与しているようだ。

 

theme_… 関数

Default theme implementations | Drupal API の関数の一覧の中に次の関数がある。

接頭辞 `theme_’ を取り除けば、上記で指定した item_list, table に対応。よくわからないが、この辺りを theme 関数が窓口となって呼出しているようだ。ソースを見るとそんな感じ。

 

前回は、リストの内容として「ストーリーのタイトルの一覧」を表示した。今回テーブルに表示する内容は、タイトルに加えて「コンテンツが作成された日付」も表示するようにしてみる。

テーブルとして表示するには、theme(‘table’,… とする。第2引数以降は、theme_table | Drupal API によると、

$header An array containing the table headers. …

  • "data": The localized title of the table column.

$rows An array of table rows. …
  • "data": an array of cells

02:モジュールのベース部分を作成 | Neoceed には、theme(‘table’ … の例が書かれていたので、これを参考にした。

    $header = array(array('data' => '氏名'), array('data' => '電話番号'), array('data' => '住所'));
    $result = db_query("SELECT * FROM {maddress}");
    while ($record = db_fetch_array($result)) {
        $rows[] = array(
            array('data' => $record["name"]),
            array('data' => $record["tel"]),
            array('data' => $record["address"])
        );

上記のドキュメントにあったように ‘data’ と対応させてテーブルの内容を指定しているのがわかった。

日付の出力にいては、Aggregator headline display with date の例を見たら、date 関数によって書式が指定されていた。これは PHP で用意されている関数なので PHP: date – Manual を参照。

 

コード例

<?php
$sql ="
	SELECT n.nid, n.title, n.created 
	FROM {node} n 
	WHERE n.type = 'story' 
	AND n.status = 1 
	ORDER BY n.created DESC
";

// テーブルのヘッダ
$header = array(array('data' => 'タイトル'),
				array('data' => '日付'));
// テーブルの内容
$rows = array();

// クエリの実行 
$result = db_query_range($sql, 0, 5);
// 各々のデータを取得
while ($node = db_fetch_object($result)) {
	$rows[] = array(
		array('data' => l($node->title, "node/$node->nid")),
		array('data' => date("Y/m/d", $node->created)));
}
if(count($rows)){
	return theme('table', $header, $rows);
}else{
	return 'ストーリーがありません。';
}
?>

今回は t 関数を使わずにソースに直接日本語を書いた。

Drupal の Views モジュールで最新のストーリーのタイトル一覧を表示

Drupal で PHP snippets - 最新のストーリーのタイトル一覧を表示 のつづき

1. View モジュールを利用する

前回は PHP snippets を使って

「最近投稿したストーリーの一覧」

を表示した。今回は、Views モジュールを使って

最近投稿したコンテンツタイプ「ストーリー」のタイトルの一覧のリスト

を表示させてみる。

 

2. Views モジュールのインストール

Views からダウンロードして解凍。

sites/all/modules

に views フォルダをアップロードした。

  • 管理セクション › サイトの構築 > モジュール

において Views を有効にする。

Advanced help モジュールもインストールしておく。

 

3. Views の設定

「管理セクション › サイトの構築 > Views」 を開く。

Advanced help モジュールが有効になっていると `Getting started’ が表示されるので、その説明の中にある

「Create a block of recent stories」

を参考にして設定した。

「Add」をクリック。

081125-002

View name には適当に `recent_story’ と入力した。

View type は「ノード」を選択し、Next ボタンをクリック。

081125-004

ここから、次の順序で設定した。

  1. Fields
  2. フィルタ
  3. Sort criteria

081125-007

 

a. フィールド

ここでは表示したいノードのフィールドを設定する。

まず、「Fields」 の右側にある `+’ をクリック。

下に Defaults: Add Fields というペインが表示されるので「ノード : タイトル」にチェックを付けて Add ボタンを押す。

081125-011

Label: フィールドを空にする。

Link this fields to its node にチェックを付けて、更新ボタンを押す。

081125-012

 

b. フィルタ

「フィルタ」の右側にある `+’ をクリック。

下に Defaults: Add filters が表示されるので、「ノード: タイプ」「ノード: 掲載」にチェックを付けて Add ボタンを押す。

081125-016

Defaults: Configure フィルタ ノード: タイプ の Node type において「ストーリー」にチェックを付けて更新ボタンを押す。

081125-026

Defaults:Configure ノード: 掲載 において、「掲載」にチェックを付けて更新ボタンを押す。

081125-017

 

c. ソート

Sort criteria の右側の `+’ をクリック。

下に Defaults: Add sort criteria が表示されるので、「ノード: Post date」をチェックして、Add ボタンを押す。

081125-013

Defaults: Configure sort criterion ノード: Post date の Sort order において Descending を選択して、更新ボタンを押す。

081125-014

 

d. Page の設定

上記の結果、次のように設定される。この設定がこの view において Default の設定となる。

081125-025

今回の目的は、最近投稿されたストーリーの一覧を表示するページを作成することだった。そのため、ページ用の設定をする必要がある。

左にあるセレクトボックスにおいて、Page を選択し、Add display ボタンを押す。

左側の Defaults の下に Page が追加されたので、それを選択。

表示された Page settings の「パス」をクリック。

The menu path or URL of this view フィールドに適当に `recentstory’ と入力して更新ボタンを押した。これがページの URL の一部になる。

081125-019

あ!忘れるところだった。 (+_+) Basic settings の Items to display で表示する数を調整。

これで全て設定が終ったので「保存」ボタンを押す。

 

4. Views リスト

Views のリストに今設定した view: recent_story が表示される。

Path: recentstory のリンクをクリックすると、最近のストーリーの一覧が表示される。

081125-021

 

5. ブロックとして表示

上記では、Page として表示されるように設定をした。これをサイドバーなどのページの一部の領域で表示したい場合、ブロックとしての設定を作成する必要がある。

先ほど設定画面において、セレクトボックスで Page を選択した。ここで「ブロック」を選択して新たに保存する。

「管理セクション › サイトの構築 > ブロック」 を開くと、`recent_story’ という名称のブロックが追加されているのがわかる。

2008年11月25日火曜日

Drupal で PHP snippets (2) - インターフェイスの翻訳

Drupal で PHP snippets - 最新のストーリーのタイトル一覧を表示 のつづき

1. 拡張子が .po であるファイル

Drupal の本体を日本語化するために、

を利用した。ファイルの拡張子が .po 。これは Locale: multi-language support によると、

These translations are available as GNU gettext Portable Object files (.po files for short).

詳しくは、Technical background on interface translations を参照。

 

2. t 関数

それに対して、前回のように PHP snippets で t 関数を利用して出力した文字列は、どうやって翻訳しておけばいいのだろうか?

前回 t 関数にておいて、次のように文字列を渡した。

 t('No nodes available.')

これに対応する日本語を表示させたい。

 

3. インターフェイスの翻訳

管理セクション › サイトの構築 › インターフェイスの翻訳」で「検索」をクリック。

「含まれる文字列」フィールドにおいて、'No nodes available.' を入力して検索。

081124-007

検索の結果、「文字列」が、前回作成した PHP snippets の node の URL の一部が表示された。

「編集」をクリック。

081124-008

オリジナルのテキストに対して翻訳を入力して保存。

081124-009

 

4. 疑問

これで日本語が表示されるようになったが、PHP snippets で、特に他の言語へ配慮する必要がないなら、直接日本語を表示するようにしてやった方が良かったんだろうか?

2008年11月24日月曜日

Drupal で PHP snippets - 最新のストーリーのタイトル一覧を表示

1. 標準で用意されている PHP snippets を利用する

Drupal で表示をカスタマイズするには、Views モジュールを使うのが良い。

今回、このモジュールを使わずに、標準で用意されている PHP をコンテンツの作成で埋め込む方法について調べる。

予め Drupal でコンテンツの作成において PHP コードを埋め込む ことができるように PHP filter モジュールを有効にしておく。これにより、コンテンツの作成において PHP を埋め込むことが可能となる。

には、PHP を利用してデータを表示するためのサンプルがいくつか載っている。

 

2. 予めチェックしておくドキュメント

PHP を利用してコンテンツを抽出・表示するには、

  1. SQL を記述
  2. データの取得
  3. 表示

という 3 つの手順を踏む必要がある。

Drupal では、コードの可搬性・セキュリティを考慮した

がある。この API を利用して DB にアクセスする。

DB にアクセスするには、データベースの構造を理解する必要がある。

には、代表的なテーブルの構造が説明されている。この中で重要なのは、

Drupal では、ノードに様々なコンテンツが保存される形になっている。

取得したデータを表示するには

を利用する。

 

3. 例題

最近投稿したコンテンツタイプ「ストーリー」のタイトルの一覧を、リストとして表示したい。

ただし、一覧に表示する数の上限は 5 つ。

 

4. コード例 1

PHP snippets にある、以下のコードを真似した。 (ただし、6.x では動かない。)

<?php
$sql ="
 SELECT n.title  
 FROM {node} n 
 WHERE n.type = 'story' 
 AND n.status = 1 
 ORDER BY n.created DESC
";
$result = db_query_range($sql, 0, 5);
if(db_num_rows($result)){
 return node_title_list($result);
}
return t('No nodes available.');
?>

 

a. node テーブル

ストーリーはコンテンツの一種であり、コンテンツは node テーブルに保存される。

を参照しながら SQL を作成する。

SQL 内でテーブルを参照するときに使われている { } は、Database abstraction layer によると、

Curly braces are used around "node" to provide table prefixing via db_prefix_tables().

同一の DB に複数のシステムをインストールしている場合、テーブル名に何らかの接頭辞を使うことが多い。上記の記述によってこれを補ってくれる。

 

b. データの取得 : db_query_range

DB にアクセスするには

が基本となる。SQL で LIMIT を書かずに関数のパラメータとして与えるのが

範囲を指定するには、第2、第3引数に数値を与える。

$from The first result row to return.

$count The maximum number of result rows to return.

 

c. node のタイトルをリンクへ : node_title_list

今回は、node のタイトルの一覧を取得したい。そのため、node モジュールの

関数を利用した。

を使うと、クエリの結果を一気に node のタイトルのリンクに変更できる。

 

d. 各言語で表示

は、各々の言語で表示する文字列を変化させるために用いる。

 

e. db_num_rows は 6.x で廃止

しかし、Remove db_num_rows() method によると、

The db_num_rows() method was removed from the database abstraction layer in 6.x core, as it was a database dependent method.

db_num_rows() メソッドが削除されているよ。上記のコードは 6.6 では動作しなかった。(+_+)

 

5. コード例 2

以下の PHP snippets を参考にして作成した。

<?php
$sql ="
 SELECT n.nid, n.title 
 FROM {node} n 
 WHERE n.type = 'story' 
 AND n.status = 1 
 ORDER BY n.created DESC
";
$items = array();
$result = db_query_range($sql, 0, 5);
while ($node = db_fetch_object($result)) {
 $items[] = l($node->title, "node/$node->nid");
}
if(count($items)){
 return theme('item_list', $items);
}else{
 return t('No nodes available.');
}
?>

 

a. データを一件ずつ取得 : db_fetch_object

によって node オブジェクトを取得。

Fetch one result row from the previous query as an object.

 

b. リンクを作成 : l

各々の node オブジェクトを取得し、

l メソッド

によって node へのリンクを作成する。

コンテンツは

http://XXXXX.xrea.jp/node/nid

という形式で参照できる。そのため、SQL においてタイトルだけではなく nid も取得した。

は、与えられた文字列と URL からリンクを生成してくれる。上記では、DB から取得した node のタイトルと、その node への URL からリンクを作成した。

 

c. 内容の表示 : theme

によって内容を表示する。引数の説明によると、

Parameters

$hook The name of the theme function to call.

この hook の辺り、どのような仕組みになっているのかわからない。 (+_+) 上記の場合だと、theme.inc に書かれている theme_item_list() が呼出されるということなのかな? QQQ

 

関連記事

Drupal でコンテンツの作成において PHP コードを埋め込む

PHP filter モジュールを有効化

管理セクション > サイトの構築 > モジュール」の「コア - 任意」

PHP filter
6.6
埋め込まれたPHPコードやスニペットが評価(実行)されるようにします。

をチェックして有効にする。

 

コンテンツの作成

例えば、「コンテンツの作成 > ストーリー」を選択し、「入力書式」を開くと、「PHP code」を選択することができるようになっているのがわかる。

081124-005


関連記事

Google スプレッドシートの ImportHtml 関数で HTML の table 要素を取得。気象庁の気圧データを抽出してみる。

1. Google スプレッドシートでウェブサイトからデータを取得する

気象庁のウェブサイトには、過去の気象データが表形式で公開されている。

Google スプレッドシートの importhtml 関数 を利用すると、このデータを簡単に表計算に取り込むことができる。

例えば、「気象庁の日ごとのデータ」から、

  • 「現地の気圧」
  • 「平均気温」

の列を抽出したいとする。

 

2. IMPORTHTML 関数の使い方

a. 対象の table 要素が何番目にあるか調べる

importhtml 関数では、HTML の table 要素を抽出できる。その際、対象の table 要素が何番目にあるか指定する必要がある。そのためには、

  1. データが表示されているページのソースを表示させる。(ブラウザとして Firefox を使っているなら、ページの適当なところで右クリック > 「ページのソースを表示」を選択。 )
  2. 抽出したデータを含む対象の table 要素が、ページの先頭から数えて何番目にあるか確認する。(`table’ で文字列の検索をするとよい。)
  3. Google スプレッドシート において、A1 セルを選択しておき、数式のアイコンをクリック > 「その他の数式」を選択。

081124-001

 

b. ImportHtml 関数の引数

数式を挿入するためのダイアログが表示されたら、

  • 081124-002Google > ImportHtml

を選択。その結果、A1 セルに次のように表示される。

=ImportHtml(URL, クエリ, 指数)

ここで指定する値は、

  • URL : 対象のテーブルがある URL
  • クエリ : “table”
  • 指数 : そのページ内の何番目のテーブルを対象とするか?

(cf. Functions : Functions for external data - Google Docs Help Center)

変更(2014/03/02)例題のデータがあるページのソースを調べたら、table 要素がいくつかあった。目的の table は 4 番目にあることが分ったので、セル A1 に以下のように入力する。

=ImportHtml("http://www.data.jma.go.jp/obd/stats/etrn/view/daily_s1.php?prec_no=44&prec_ch=%93%8C%8B%9E%93s&block_no=47662&block_ch=%93%8C%8B%9E&year=2008&month=11&day=&elm=daily&view=", "table", 4)

少し待つと、以下のような表が Google スプレッドシートに作成される。

081124-003

残念ながら、対象のページの文字エンコーディングが Shift_JIS だったので文字化けしてしまった。

 

3. 必要なデータの抽出

次に、シートを新しく追加し、上記の表のうち A 列と F 列のみを参照する。

上記の表があるシートの名前が `シート1’ であるとすると、新しく追加したシートの A1, B1 にはそれぞれ次のように入力。

  • A1 : ='シート1'!B5
  • B1 : ='シート1'!G5

必要なだけ連続データを作成して完了。

081124-004

 

4. 柔軟にデータを扱いたいなら、プログラミング言語を利用したほうが良い

このようなデータは、プログラミング言語を利用して必要な情報を抽出する方が良い。

しかし、Google スプレードシートを利用するとお手軽に抽出処理を行える。

2008年11月23日日曜日

Stylish で特定の文字列を含む「属性」を持つ要素を消す - CSS における属性を利用した要素の特定

Stylish で特定の要素を消す」の続き。

1. 要素の属性の値により指定したい

前回 Stylish で作成したスタイルに、新しくスタイルを追加する。

スタイルを新たに追加する方法は、

  1. Stylish のアイコンをクリックして、
  2. 前回作成したスタイルを右クリック。

(cf. Greasemonkey, Stylish で既存のスクリプトを素早く編集)

今回は、

a 要素の href 属性に `new/main’ が含まれる a 要素を消したい。

とする。

 

2. *=, ^=, $= によって属性を指定

広告をブロックするための、Stylish のスタイル 

を見ると、以下の記述がされている。

[alt*="Advertising"]

この書き方は Selectors によると、

E[foo*="bar"]
an E element whose "foo" attribute value contains the substring "bar"

要素 E の内、属性 foo の値として、bar を含むものを対象とすることができる。

つまり、上例の意味は、

alt 属性に Advertising という文字列が含まれている要素

を指定していることになる。

 

要素の属性に対する基本な指定方法

基本的な CSS による、要素の特定の仕方は、以下のものがある。

E[foo]
an E element with a "foo" attribute

要素 E の内、foo 属性を持つもの。

E[foo="bar"]
an E element whose "foo" attribute value is exactly equal to "bar"

要素 E の内、属性 foo の値が、bar であるもの。

 

要素の属性の値の一部に一致するか検査する

基本的な書き方以外に、正規表現の書き方に似た方法もある。

E[foo^="bar"]
an E element whose "foo" attribute value begins exactly with the string "bar"

要素 E の内、foo 属性の値の先頭が bar ではじまるもの。

E[foo$="bar"]
an E element whose "foo" attribute value ends exactly with the string "bar"

要素 E の内、foo 属性が bar で終わるもの。

E[foo*="bar"]
an E element whose "foo" attribute value contains the substring "bar"

要素E の内、foo 属性の値に bar を含むもの。

よって、今回は以下のようにして指定することができる。

 a[href*="news/main"] {display: none !important;}

 

3. 参考

4. 関連記事

Firefox でページに含まれるアンカーを表示させて URL をコピー – Show Anchors 4

1. ページの中に含まれる、アンカーのリンクを取得したい

引用したい場所にアンカーがある場合、それを利用してリンクを作成したいことがある。

これまでは、

  1. アンカーのありそうな位置を適当な範囲選択して
  2. 右クリック > 「選択した部分のソースを表示」

によって、アンカーを見つけていた。 (+_+)

 

2. アンカーを表示させるアドオン Show Anchors

SnapCrab_No-0232訂正(2013/05/22)Show Anchors 4 を使うと、アンカーがある位置に

「錨のアイコン」

を表示してくれる。

例えば、

を表示して、

  • 右クリック > Show anchors にチェックを入れる

と、次のように表示される。

081123-002

「錨のアイコン」の上にカーソルを合わせると、

  • Copy anchor

が表示されるのでクリックすると、その場の URL をコピーすることができる。

081123-003