WordPress の記事に矢印を入れる

最終更新日:2016-03-28

私自身がこのブログ内で使っている矢印の画像についての覚え書きです。ビジュアルモード上でマウスを使って直接、画像の大きさを調整できるようになったので、今が記事を書くタイミングかなと思った次第です。

Fullscreen-1

矢印の画像は inkscape で作成しています。

新規ドキュメント 1 - Inkscape

元データは以下のところに保存しています。

元データ 1 (2015-04-17現在、ちゃんとダウンロードできなくなっている?ことを確認済みです。)

いくつか色違いを作ってみました。 2

comemoarrowg3871

comemoarrowg3891

comemoarrowg3911

comemoarrowg3931

矢印のまわりに枠や影等がつく場合には、例えば、以下のような CSS を追加してみてください。

img[src*=comemoarrow] {
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
}

矢印の画像を貼り付ける方法はいろいろあると思いますが、私自身の場合は、Firefox のアドオン「Make Link」に以下のようなタグをあらかじめ登録しておき、 3


<img class="bordernone" style="background-image: none; padding-top: 0; padding-left: 0; display: inline; padding-right: 0; border: 0;" title="comemoarrow" src="https://comemo508.files.wordpress.com/2014/09/comemoarrowg3871.png?w=1100" alt="comemoarrow" border="0" />

以下のような感じで貼り付けています。

大きさは以下のような感じで調整できます。


  1. 自由にダウンロードしてください。著作権等はありません。ダウンロードするときには右上の「DOWNLOAD」をクリックしてください。 
  2.  自由にダウンロードしてください。著作権等はありません。 
  3. もし、このタグをお使いになる場合には、「src」のところの URL を自分が使っている矢印の画像の URL と差し替えて下さい。 

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。