どうも。
GWは行きたい所が何ヶ所かあるのですが、どこへ行っても混雑していると思うと出かける気力が無くなりますね。
お台場で開催の肉フェス2018は行きたい！
…ところがある事に気が付きました。
表示されているラベルですが、クリックしても無反応。
そんな事は無いだろうと思いながら、HTMLを確認…確かに<a>タグが無い。
Vaster2では、ラベルは表示されているだけでした。
パンくずリストが用意されているので、ラベルにリンクは不要としたのかも知れませんね。
しかし、ラベルにリンクが無いと意味が無いと感じ、リンクを付ける変更を先に行いたいと思います。
変更前のラベルはフィード取得したラベル情報からタイトルのみを利用していますが、urlについてもフィード取得した情報を利用して<a>タグを追加する変更を行います。
Bloggerの管理画面より テーマ＞＞HTMLの編集と進みテンプレートのHTMLを変更します。尚、変更については自己責任でお願いします。
max-results=10は、ラベルをクリックした結果一覧に表示される記事数になります。
以下の場合、記事を10件表示されます。（10件以上の場合は次ページに表示)
簡単方法としてはcssに.post-tag aを追加して色を変えれば良いと思います。
.post-tagを検索して、その直下に以下を追加します。
!importantの付与を忘れずに。
今回の変更に関してだけでは無いのですが、スクリプトでフィードより情報を生成している場合、Bloggerの設定で閲覧を限定しているとChromeの検証機能で確認したところ、エラーが検出されるようです。
当方も閲覧制限をしているブログのテスト環境で変更を適用していたのですが、上記のエラーが検出されました。
（動作については問題無い様に見えています。）
bloggerの設定>>基本にある許可の項目で、ブログの閲覧者を一般公開にする事でエラーは検出され無くなりました。
今回は、ラベルにリンクを付けただけになってしまいました。記事ページのレイアウト変更は次回に。
以上
GWは行きたい所が何ヶ所かあるのですが、どこへ行っても混雑していると思うと出かける気力が無くなりますね。
お台場で開催の肉フェス2018は行きたい！
Vaster2の記事ページに配置されているラベルはリンク無し
さて、Vaster2の記事ページについてレイアウトを変更をしたいと考えています。…ところがある事に気が付きました。
表示されているラベルですが、クリックしても無反応。
そんな事は無いだろうと思いながら、HTMLを確認…確かに<a>タグが無い。
Vaster2では、ラベルは表示されているだけでした。
パンくずリストが用意されているので、ラベルにリンクは不要としたのかも知れませんね。
記事ページのラベルにリンクを付ける
記事ページに表示されているラベルの表示場所を記事の最後したいと考えています。しかし、ラベルにリンクが無いと意味が無いと感じ、リンクを付ける変更を先に行いたいと思います。
変更前のラベルはフィード取得したラベル情報からタイトルのみを利用していますが、urlについてもフィード取得した情報を利用して<a>タグを追加する変更を行います。
HTMLとcssを変更
テンプレートのバックアップを取り、HTMLを変更していきます。Bloggerの管理画面より テーマ＞＞HTMLの編集と進みテンプレートのHTMLを変更します。尚、変更については自己責任でお願いします。
HTMLの変更
<!--記事ページの時-->を検索して、その下方にある<span class='post-tag'>〜</span>内に<a>タグ（以下の青字部分）を追加します。
<span class='post-tag'>
<i aria-hidden='true' class='fa fa-tag'/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' + "?max-results=10"'>
<data:label.name/>
</a>
</b:loop>
</span>
<i aria-hidden='true' class='fa fa-tag'/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' + "?max-results=10"'>
<data:label.name/>
</a>
</b:loop>
</span>
max-results=10は、ラベルをクリックした結果一覧に表示される記事数になります。
以下の場合、記事を10件表示されます。（10件以上の場合は次ページに表示)
cssの変更
本文のリンクのスタイル（文字の色）が優先的に設定されてしまうと思います。簡単方法としてはcssに.post-tag aを追加して色を変えれば良いと思います。
.post-tagを検索して、その直下に以下を追加します。
.post-tag a{
color:#ffffff !important;
}
テキストの色はcolor:#ffffffで好きな値を入れて下さい。color:#ffffff !important;
}
!importantの付与を忘れずに。
作業していて気付いた事
余談ですが、ラベルの情報はスクリプトでフィード情報を取得しています。今回の変更に関してだけでは無いのですが、スクリプトでフィードより情報を生成している場合、Bloggerの設定で閲覧を限定しているとChromeの検証機能で確認したところ、エラーが検出されるようです。
 |
| Chromeの検証機能でのエラー |
当方も閲覧制限をしているブログのテスト環境で変更を適用していたのですが、上記のエラーが検出されました。
（動作については問題無い様に見えています。）
bloggerの設定>>基本にある許可の項目で、ブログの閲覧者を一般公開にする事でエラーは検出され無くなりました。
今回は、ラベルにリンクを付けただけになってしまいました。記事ページのレイアウト変更は次回に。
以上
0 件のコメント:
コメントを投稿