AdWords が「Google 広告」になりました。これまで AdWords としてご利用いただいていたサービスの名前が「Google 広告」に変わりました。検索ネットワーク、ディスプレイ ネットワーク、YouTube などを対象にあらゆる広告サービスを提供いたします。詳細

296 人が現在オンライン
296 人が現在オンライン
Google アナリティクスのアカウント設定、プロパティ、ビューやフィルタ設定などについて、ユーザー同士で意見交換ができます。解析を通して浮かんだ質問やアイディアを投げかけ合って、よりデータ分析の知識を高めていきましょう。
ガイドを表示
star_border
返信

投稿ページ内にあるURL(参照元)のスマートな表記方法

初級者 ✭ ✭ ✭

サイト等を参照したサイトの投稿ページの最後に、h3見出しで「参照元」の章を作っています。しかし、参照が多くなったりURLが長すぎたりすると、その章だけとても見栄えが悪くなります。

これをページ評価に影響させずに美しくしたいのですが、何か良いアイデアをお持ちの方はいらっしゃいますか?

ちなみに、私が考えついたのは以下。

・文字を小さくする
・タップして表示するようにする

以上、宜しくお願いします。

1 件の受理された解決策

受理された解決策
ベストアンサーのマーク済み.
解決策
トピック作成者Linnさんが付与
木曜日

Re: 投稿ページ内にあるURL(参照元)のスマートな表記方法

レジェンド

参照元のセクションは、GoogleAnalyticsのAPIやJavaScript等を用いて自動で表示しているわけではないのでしょうか?もしかして手動で入れていらっしゃいますか?

 

JavaScriptで入れているようでしたら、substring()という関数を使います。

String.prototype.substring()

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/substring

var url="http://abc.go2020.tokyo/aaa/bbb/ccc/ddd/eee/fff/ggg/hhh/iii"; //長いURLを代入
console.log(url.substring(0,40)); urlの1文字目から40文字目までをコンソールに表示

> "http://abc.go2020.tokyo/aaa/bbb/ccc/ddd/"

手動でしたら、単純にAタグで囲んだテキストを手動で詰めるだけですが、面倒でしたら、CSSだけで上記のようなテキストのトリミングが可能です。

CSS で指定幅を超えた文字列を切り取り「…」を付加する方法

http://monopocket.jp/blog/css/2866/

もし、参考になりましたら「いいね!」をお願いします。

Taishi Akiyama / フルスタックエンジニアのWEBマーケターです。とりえあえず検証してみるが信条。★や解決マークをくれるとモチベーションあがって回答の質があがるかもしれません

元の投稿で解決策を見る

Re: 投稿ページ内にあるURL(参照元)のスマートな表記方法

[ 編集済み ]
レジェンド

私だったら、文字の体裁もそうですが、長いURLは表示域よりも長そうなやつはトリミングして「http://xxx.com/aaa/bbb/c... 」

のようなリンク表記にするか、サーバーサイドかAjaxで参照元のHTMLのタイトル取得してこちらもトリミングして出しますね。どちらにせよサニタイズしっかりしてくださいね。

Taishi Akiyama / フルスタックエンジニアのWEBマーケターです。とりえあえず検証してみるが信条。★や解決マークをくれるとモチベーションあがって回答の質があがるかもしれません

Re: 投稿ページ内にあるURL(参照元)のスマートな表記方法

初級者 ✭ ✭ ✭
群馬県南牧村アンバサダー さん

ご返信ありがとうございます。URLのトリミングを挑戦してみたいのですが、何と調べれば出てきますか?当方、HTMLとCSSの知識しかありません。
ベストアンサーのマーク済み.
解決策
トピック作成者Linnさんが付与
木曜日

Re: 投稿ページ内にあるURL(参照元)のスマートな表記方法

レジェンド

参照元のセクションは、GoogleAnalyticsのAPIやJavaScript等を用いて自動で表示しているわけではないのでしょうか?もしかして手動で入れていらっしゃいますか?

 

JavaScriptで入れているようでしたら、substring()という関数を使います。

String.prototype.substring()

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/substring

var url="http://abc.go2020.tokyo/aaa/bbb/ccc/ddd/eee/fff/ggg/hhh/iii"; //長いURLを代入
console.log(url.substring(0,40)); urlの1文字目から40文字目までをコンソールに表示

> "http://abc.go2020.tokyo/aaa/bbb/ccc/ddd/"

手動でしたら、単純にAタグで囲んだテキストを手動で詰めるだけですが、面倒でしたら、CSSだけで上記のようなテキストのトリミングが可能です。

CSS で指定幅を超えた文字列を切り取り「…」を付加する方法

http://monopocket.jp/blog/css/2866/

もし、参考になりましたら「いいね!」をお願いします。

Taishi Akiyama / フルスタックエンジニアのWEBマーケターです。とりえあえず検証してみるが信条。★や解決マークをくれるとモチベーションあがって回答の質があがるかもしれません

Re: 投稿ページ内にあるURL(参照元)のスマートな表記方法

レジェンド
おはようございます。


こちらはgoogle analyticsに関する質疑応答のコミュニティでして、ご質問の内容はこちらではない所でされた方が良いかなと思います。

ちなみにURLが長すぎるのであれば、私もcssでトリミングするでいいかなと思います。

Re: 投稿ページ内にあるURL(参照元)のスマートな表記方法

初級者 ✭ ✭ ✭
ありがとうございます!

Re: 投稿ページ内にあるURL(参照元)のスマートな表記方法

レジェンド
お役立ちいただけましたでしょうか? 解決されたようでしたら、スレッドを閉じておいてくださいねー、
Taishi Akiyama / フルスタックエンジニアのWEBマーケターです。とりえあえず検証してみるが信条。★や解決マークをくれるとモチベーションあがって回答の質があがるかもしれません