locked
Webパーツの埋め込みによるCSSの適用について RRS feed

 > 

  • 質問

  • Question
    サインインして投票
    0
    サインインして投票

    お世話になります。

    初歩的な質問で申し訳ないのですが、Webパーツの組み込みができずに困っています。

    詳しくは、

    ヘッダー部分のカスタマイズのために以下URLの『2.スタイル組み込み方法（1）』を参考にWebパーツを組み込もうと試みています。

    https://blogs.technet.microsoft.com/sharepoint_support/2014/08/14/sharepoint-css/

    手順の『4.下記のスタイルを指定・・・』までは問題ないのですが、いざCSSのコードを貼り付け適用しても内容が反映されません。

    Webパーツの組み込みでのCSS適用を実行したことがないので、この方法でどこが悪いのかよくわかりません。

    お分かりになる方、お力添えお願い致します。

    2016年4月25日 0:56

回答

  • Question
    サインインして投票
    0
    サインインして投票

    先の私のレスの (1) と (2) は確認してもらえましたか？

    【追伸】

    うまく CSS を設定できていれば（この例では display: none;）、F12 開発者ツールで当該 html 要素を選択すると、以下の画像のように右側のスタイル画面で display: none; が確認できると思います。

    ただし、上の CSS は手書きで .aspx ページに追記したもので、コンテンツエディタで Web パーツとして追加した場合とは CSS の位置は異なると思いますが。


    • 編集済み SurferOnWww 2016年4月25日 6:09 【追伸】追加＆誤字訂正
    • 回答としてマーク HIGETARO 2016年4月26日 6:00
    2016年4月25日 5:22

すべての返信

  • Question
    サインインして投票
    0
    サインインして投票

    SharePoint は知らない自分がレスするのは何ですが・・・　（SharePoint = IIS + ASP.NET + SQL Server + 独自拡張　と理解していますが、独自拡張の部分を知らないという意味です）

    > いざCSSのコードを貼り付け適用しても内容が反映されません。

    と言うのは、参考にされている記事の手順「6. [サイト] メニューが非表示になりました。」まで行っても非表示にならない（依然として表示されたまま）ということですよね？

    であれば、そこでもう一度 F12 開発者ツールを起動して、(1) Web パーツとして追加したはずの CSS、

    <style type="text/css">
#xxxxx
{
    display:none;
}
</style>

    が追加されているか、(2) 非表示にしたい html 要素の id が上の CSS の xxxxx と同一か、をチェックしてください。

    (1), (2) に問題なければ非表示になるはずです。

    なお、参考にされている記事では、上の CSS で xxxxx の部分は ctl00_ctl46_ShellSites となってますが、それは html 要素によって違います。また、id が付与されてない html 要素もあるので注意してください。

    • 編集済み SurferOnWww 2016年4月25日 3:02 一部修正
    2016年4月25日 2:51
  • Question
    サインインして投票
    0
    サインインして投票

    SurferOnWww様

    お返事ありがとうございます。

    ＞参考にされている記事の手順「6. [サイト] メニューが非表示になりました。」まで行っても非表示にならない（依然として表示されたまま）ということですよね？

    その通りです。

    CSSを適用する詳細な流れは、

    『2. コンテンツ エディタ Web パーツにて [Web パーツの編集…] をクリックします。』までは参考記事同様に進め、追加されたコンテンツエディタ内の『ここをクリックして新しいコンテンツを追加』をクリックします。

    この状態でリボンの『ソースの編集』をクリックし、『HTMLソース』にCSSを貼り付けて「OK」をクリック、コンテンツエディタで「適用」をクリック後「保存」で編集を終了しています。

    CSSで指定するidは事前に確認しており、参考ページと異なることも認識しております。

    私のCSSの追加方法が誤っているのでしょうか？

    少ない情報で申し訳ないですが、ご回答よろしくお願い致します。

    2016年4月25日 5:04
  • Question
    サインインして投票
    0
    サインインして投票

    先の私のレスの (1) と (2) は確認してもらえましたか？

    【追伸】

    うまく CSS を設定できていれば（この例では display: none;）、F12 開発者ツールで当該 html 要素を選択すると、以下の画像のように右側のスタイル画面で display: none; が確認できると思います。

    ただし、上の CSS は手書きで .aspx ページに追記したもので、コンテンツエディタで Web パーツとして追加した場合とは CSS の位置は異なると思いますが。


    • 編集済み SurferOnWww 2016年4月25日 6:09 【追伸】追加＆誤字訂正
    • 回答としてマーク HIGETARO 2016年4月26日 6:00
    2016年4月25日 5:22
  • Question
    サインインして投票
    0
    サインインして投票
    コンテンツエディタWebパーツではなくスクリプトエディタWebパーツではできませんか？
    2016年4月25日 6:18
  • Question
    サインインして投票
    0
    サインインして投票

    > コンテンツエディタWebパーツではなくスクリプトエディタWebパーツではできませんか？

    質問者さんが参考にされている TechNet Blog に書いてある手順（コンテンツエディタ Web パーツ利用と理解）では、

    <style type="text/css">
#ctl00_ctl46_ShellSites
{
    display:none;
}
</style>

    というような CSS をページに追加することはできないが、スクリプトエディタ Web パーツ（SharePoint には触ったこともない自分にはそれが何だか分かってないですが）であれば望むように CSS を追加できると言われてますでしょうか？
    2016年4月25日 9:31
  • Question
    サインインして投票
    0
    サインインして投票

    先ほどは動作検証ができなかったので改めて検証してみましたが、コンテンツエディタWebパーツでもできましたね…。

    何点か確認していただければと思います。

    1. スクリプト機能は有効になっているか
      https://support.office.com/ja-jp/article/1F2C515F-5D7E-448A-9FD7-835DA935584F
      （コンテンツエディタWebパーツを追加できているので有効になっているとは思いますが…）
    2. コンテンツエディタWebパーツの中にCSSが記載されているか
      コンテンツエディタWebパーツの外の領域にはCSSを記載できません。その場合、保存後自動的に消えてしまいますので、再度開いてみてCSS部分が残っているか確認いただければと思います。
    3. ほかのCSSの記述は有効かどうか
      例えば、body { background-color: red; } などと記載して適用されるかどうかを確認してみてください。それでできるようであれば、IDの記載が誤っているということだと思います。

    なお、Technetのサンプルに挙がっている「サイト」の部分を削除したいというのが本来の目的であれば、SharePoint管理センターの設定で非表示にできます。こちらも併せてご確認ください。

    https://support.office.com/ja-jp/article/d5e8dc9a-73f8-45e4-93b4-8e55b546a5af

    2016年4月25日 12:01
  • Question
    サインインして投票
    0
    サインインして投票

    コンテンツエディタのソースの編集で適用出来ました。
    勿論手順は参考サイトと同様の手順で行っております。
    下記ソースをページに配置することで、右上の「フォーカスをコンテンツに移動」ボタンを消すことが出来ました。
    適用されなかった場合、ソースとは別の原因があるかと思われます。

    <style type="text/css">
#fullscreenmode
 {
    display:none;
 }
</style>

    2016年4月25日 12:07
  • Question
    サインインして投票
    0
    サインインして投票

    html 要素に CSS で display: none; を設定すると非表示になるというのは、SharePoint（= IIS + ASP.NET + SQL Server + 独自拡張）とは全く何の関係もない html + CSS + ブラウザの世界の話です。そこをきちんと分けて考える必要があるのではないでしょうか。

    「スクリプト機能は有効になっているか」とか言われてますがそれも関係ないのでは？

    2016年4月25日 12:54
  • Question
    サインインして投票
    0
    サインインして投票

    > SurferOnWwwさん

    質問者さんが

    > CSSで指定するidは事前に確認しており、参考ページと異なることも認識しております。

    と言われている通り、CSSには問題ないと思いますよ。実際に見たわけではないのでわかりませんが。
    その上で、SharePointの設定方法に問題があるのではないかと理解していますがいかがでしょうか。

    2016年4月25日 14:04
  • Question
    サインインして投票
    0
    サインインして投票

    > SharePointの設定方法に問題があるのではないかと理解していますがいかがでしょうか。

    「SharePointの設定方法に問題がある」のかは SharePoint には触ったこともない自分には分かりません。

    SharePoint で実際に検証することができるのであれば、質問者さんが参考にされている TechNet Blog の通りにやってみて、どうなるのか書いていただきたいと思います。

    前にも書きましたが、html 要素に CSS で display: none; を設定すると非表示になるというのは、SharePoint（= IIS + ASP.NET + SQL Server + 独自拡張）とは全く何の関係もない html + CSS + ブラウザの世界の話です。

    F12 開発者ツールで見てどうなっているかを書いていただけると幸いです。

    2016年4月25日 14:22
  • Question
    サインインして投票
    0
    サインインして投票

    今回行おうとしているのは、ブログ記事と同じく「サイト」を非表示にするということでしょうか？もしも別のことが目的の場合は、そちらをお教えいただければと思います。

    手元にある SharePoint Server 2013 の検証環境で確認したところ、ブログの記事や、返信で HIGETARO さんが記載の手順で「サイト」を非表示にすることができました。

    ちなみに、私の環境では、ブログ記事と同じ ID 「#ctl00_ctl46_ShellSites」で「サイト」を非表示にできました。

    なので、やはり ID の指定が間違っている（スペルミスなど）か、目的とは異なる要素の ID を指定してしまっているかなども考えられますね。ちなみに、今はどのような ID を指定していますか？試されている記述をお教えいただけると、さらに何か分かるかもしれません。

    また、気づきとしては、「HTML ソース」のダイアログを「OK」で閉じた時点で、記述した CSS は適用されているようですので、この時点で意図通りの動作になっていない場合は、記述に誤りがあるのではないでしょうか？？

    2016年4月26日 1:39
  • Question
    サインインして投票
    0
    サインインして投票

    SurferOnWww様、Takashi Shinohara様、sttks様

    いろいろありがとうございます。

    sttks様からアドバイス頂いた

    ＞右上の「フォーカスをコンテンツに移動」ボタンを消す

    に関しては、コンテンツエディタ・スクリプトエディタともに可能でした。しかし『サイト』を非表示にはできませんでした。

    開発者ツールを見てみると以下のように表示されていました。


    これはcover15.cssへのリンクがうまくいっていないのでしょうか？

    ちなみに、今更で申し訳ないのですが、SharePointServer2013（sp1適用無し）、ADは別サーバ、SQL2012使用です。

    何かとご面倒を言いますが、お返事よろしくお願い致します。

    2016年4月26日 3:03
  • Question
    サインインして投票
    0
    サインインして投票

    > これはcover15.cssへのリンクがうまくいっていないのでしょうか？

    違うと思います。

    質問者さんは html と CSS に関する知識をお持ちでしょうか？　そうでないと話が通じにくいとは思いますが、一応説明します。

    アップされた画像を見ると、

    <a class="ms-core-suiteLink-a" id="ct100-ct154-ShellSites" href="xxx.aspx">xxx</a>


    という a 要素を非表示にすると言うことのようですが、そうするためには CSS の ms-core-suiteLink-a クラスで display:inline-block; と定義されているプロパティを display: none; に上書きする必要があります。

    そのために、以下の CSS を追加するというのが参考にされている記事の「2. スタイルの組み込み方法 (1) コンテンツ エディタ Web パーツ について」の手順で行うことのはずです。（SharePoint を実際に操作できないので 100% の自信はないですが）

    <style type ="text/css">
#ct100-ct154-ShellSites
{
    display: none;
}
</style>

    そうすると、id セレクタ (#ct100-ct154-ShellSites) はクラスセレクタ (.ms-core-suiteLink-a) より優先されるので、以下の画像のように上書きされて非表示になるはずです。

    なので、何が原因でうまく行かないかと言うと、(1) 上の display: none; と上書きする CSS が追加されてない、または (2) id が間違っているかのいずれかだと思います。そのあたりをチェックしてください。(1), (2) いずれも F12 開発者ツールで調べられるはずです。

    2016年4月26日 3:55
  • Question
    サインインして投票
    0
    サインインして投票

    SurferOnWww様

    早速のお返事ありがとうございます。

    CSSの適用については、「フォーカスをコンテンツに移動」ボタンを消すCSSを適用し、このボタンが消えたことを確認後にスタイルを上書きして『サイト』ボタンを消すように試みていますので、CSS自体の適用はされていると思います。

    開発者ツールで確認した場合、idは間違っていないのですがスタイルは適用されておらず　display:inline-block;のままです。

    上記内容がらご指摘くださった（1）、（2）の条件は満たしていると思うもですが、やはり『サイトボタン』は非表示になりません。

    ちなみに『ニュースフィード』・『SkyDrive』ボタンも非表示にはなりません。

    SharePointDesignerなどを使用してボタンの非表示が可能か調べてみたいと思います。

    ご協力して下さった皆様、ありがとうございました。

    2016年4月26日 4:39
  • Question
    サインインして投票
    0
    サインインして投票

    > CSS自体の適用はされていると思います。

    「思う」だけでは確認にならないのではないですか？ 　

    一番最初のレスと直近のレスで (1) CSS が追加されているかと (2) id が一致しているかを F12 開発者ツールで見て確認するよう 2 回お願いしているのですが・・・

    できない事情があれば教えてください。

    2016年4月26日 5:03
  • Question
    サインインして投票
    0
    サインインして投票

    SurferOnWww様

    お返事ありがとうございます。

    私の書き方が悪かったようで申し訳ありません。

    上記返信にて記述しましたように、

    『開発者ツールで確認した場合、idは間違っていないのですがスタイルは適用されておらず　display:inline-block;のままです。』

    開発者ツールで確認し、CSSは適用されておりませんでした。この時idも再度確認して誤りが無いことも確認しております。

    以上です。

    2016年4月26日 5:18
  • Question
    サインインして投票
    0
    サインインして投票

    OTA Hirofumi さん＞

    質問者さんが参考にされている TechNet Blog の「2. スタイルの組み込み方法 (1) コンテンツ エディタ Web パーツ について」の手順どおりに作業して、期待通り非表示にできることを確認されたと伺いました。

    もしできましたら、そのときの表示を F12 開発者ツールで見て、html ソース上で Web パーツがどこにどのように追加されているか、非表示にした html 要素のスタイルがどのようになっているかを教えていただけないでしょうか？

    2016年4月26日 5:38
  • Question
    サインインして投票
    0
    サインインして投票

    解決しました。

    ローカルで使用しているエディタを変えてスタイルコードをコピペして適用することで『サイト』ボタンを非表示にすることが出来ました。

    詳細な情報を下さったSurferOnWww様、また多くのヒント・アドバイスを下さったakashi Shinohara様、sttks様、OTA Hirofumi様

    ありがとうございました。本当に助かりました。

    2016年4月26日 6:00