kohki
コミュニティバッジ
| WEB 編集メンバー | concrete5 のヘルプドキュメント編集を手伝っていただいている方です。どなたでも参加できます。詳しくはconcrete5 コミュニティ活動のお誘いへ。 |
| ローカルグループリーダー | concrete5 ローカルグループのまとめ役をしている方です。勉強会やイベントを開催していただけるのであれば誰でもなることができます。詳しくはconcrete5 コミュニティ活動のお誘いへ。 |
投稿
|
151から160までを表示 (計279) |
|---|
Re: フッターのリンクについておおっと、これはかなり高度な内容ですね(^_^;)
と書きます。 リロードしてみると、サイト名が真ん中に寄っているのがわかるでしょうか。 次に、ロゴ画像をアップします。 管理画面に入り、ファイルマネージャという項目を選択します。 ここは、ローカルや他のサーバーから画像などのファイルをconcrete5の中へ入れる窓口です。 「ファイルを選択」からローカルの画像を選んで、「ファイルをアップロード」すれば、concrete5の管理画面で扱える画像ファイルとしてアップすることができます。 次に、トップページに戻ります。 アドミンバー左上にある「編集」ボタンを押して、編集モードに入ります。 サイト名の書かれているブロックをクリックし出てきたドロップダウンメニューの一番最初にある「編集」を押します。 すると、編集画面が出てきますので、とりあえずサイト名の文字をBackspaceキーなどで削除しましょう。 次に、空のフィールドになった欄の上にある水色のバーがありますが、その左端「画像を追加」をクリックします。 すると、先ほど使用したファイルマネージャが立ち上がります。ここで、先ほどアップロードした画像をクリックし「選択」を押します。 これで、ロゴ画像が入ったかと思います。ブロック編集ダイアログの右下にある「保存✓」を押して、編集を完了してください。その後、アドミンバー左端にある「編集中」をクリックし、「この編集を公開」を押して編集モードを終了します。（編集モードを正しく終了しないと、編集内容は反映されませんので注意してください） これで、ロゴが真ん中に寄ったかと思います。 ◆グローバルナビを中央揃えにする お示しのワイヤーフレームとは少し趣きが違うかもしれませんが、ナビゲーションを中央揃えにしてみます。 typography.cssの最後に、次のように追記します。
ブラウザをリロードしてみてください。どうでしょうか。少し思ってたのと違うかもしれませんが、とりあえずは真ん中に揃ったと思います。 ◆ロゴの右脇に、電話番号と文言を入れる。 再び編集モードに入ります。「サイト全体のSite Nameに追加する」をクリックし、記事ブロックを追加してください。 追加後、記事ブロック編集画面となりますから、ここで文言と電話番号を書き込みます。 文言と電話番号を選択肢、右揃えのボタンを押してください。 Microsoft Officeと同じようなボタンです。 右揃えになったら、保存ボタンを押し、編集モードを終了します。 このままだと、 ロゴ ↓ 文言・電話番号 ↓ グローバルナビ の順にならび、それぞれが高さを持つため、ロゴとグローバルナビの間に隙間が出来ていると思います。ちょっとこれは不格好ですね。 文言・電話番号の記事ブロックを上にずらし、その分グローバルナビを上に近づけてみます。 再び編集モードに入り、文言と電話番号の書かれた記事ブロックをクリックします。 するとドロップダウンメニューの下から2つ目に「デザイン」という項目があるので、クリックしてください。 このブロックの体裁を調整するダイアログが出てきますから、「余白」というタブをクリックし、「マージン」の「上」に「-100px」と入力します。 あとは、右下の「保存」ボタンを押し、編集モードを終了して、編集内容を確定させてください。 するとどうでしょうか？ 記事ブロックが右上にずれた分、グローバルナビとロゴの隙間が小さくなったと思います。 なお、次に編集モードに入る時は、文言・電話番号のブロックは高さが非常に低くなり、一見すると消えてしまったかと思いますが、これはマイナスの値を与えてしまったことによる編集モード時だけの見た目です。ブロックの背の高さは低いのですが、クリックして編集すれば、きちんと中身は保存されていますし、編集しても反映されます。 ◆ここまでの総括 ここで使っている技術は、HTMLとCSSのテクニックです。上記コードではfloatを解除していますが、CSS初学者の方は最初につまづきやすいところでもあります。また、余白タブにマイナスを打ち込んでいるのは、CSSでいうところのmargin-top: -100px;と同義です。これはネガティブマージンという手法で、どちらかといえば、力技というか、高度なテクニックです。 また、このように、concrete5はcssをファイルに書くだけでなく、編集モードや管理画面から制御する方法もあります。 というわけで、ここまで手順通りにやってこられたのであれば、比較的すんなりレイアウトの変更は出来たと思います。 しかし、そのためには、CSSの基本知識と、どこをどのように修正すれば思い通りのレイアウトに描画されるか、という知識に基づく推測力が必要です。 ◆グローバルナビの枠組みレイアウトについて おそらく、コンテンツの横幅いっぱいに、ページヘのリンクの個数ごとに、ボタンの幅を均等に割り付けたいのだと思いますが、これはかなり高度なテクニックです。 おっしゃるとおり、CMSではページ数の増減があるため、割付には、ページに応じて幅を割り出すコーディングをしなければなりません。 最近までは、CSSだけでこれをするのは無理でしたが、IE8以前を無視してもいいのであれば、以下の記事のようにすれば、対応できます。 http://www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/ 英語の記事ですが、コードを読むだけでも勉強になります。途中にHTMLとCSSを自由に編集して、見た目がリアルタイムに確認できる「Code pen」というサービスが貼ってあるので、そこで自由に編集してみれば、挙動がわかるでしょう。 ◆フッターを下辺に固定する 色々やりかたはありますが、確実なのは、JavaScriptを使う方法です。 http://blog.webcreativepark.net/2007/11/16-012253.html 以上のことを行えば、お示しのワイヤーフレームのようなレイアウトになります。 このように、concrete5といえど、自分の臨むデザインを実現するには、少なからずHTMLとCSSの知識が求められます。 他のテーマも探されたということですが、もし仮に一番気に入ったテーマがあってそれをインストールしたとしても、絶対に細かいところで不満が出てきて、それを修正するためにHTMLやCSSの知識が必要となります。 5年前に勉強しようとしてそのままになっているということですが、ぜひこの機会に、もう一度勉強されてみることをオススメします。
Posted on 6月 29, 2015 at 7:13 午後
|
Re: フッターのリンクについてそういうことです。
Posted on 6月 29, 2015 at 1:08 午後
|
Re: フッターのリンクについてでは、FTPでサーバーにアクセスできるということ前提でお話します。
という記述を
とし、HTMLのコメントアウトにします。 いきなり消してもいいのですが、何か不具合があったらまずいので、一旦コメントアウトにしてください。 次に、FTPソフト上で /【concrete5がインストールされているディレクトリ】/themes/ というディレクトリにアクセスしてください。 これの中身は空っぽだと思いますが、次のようにディレクトリを作ります。 /【concrete5がインストールされているディレクトリ】/themes/greek_yogurt/elements/ footer.phpをダウンロードしてきたディレクトリと構成が良く似ていますが、/concrete/ディレクトリではないところがポイントです。 最後に、ローカルで編集したfooter.phpを、この新しく作ったディレクトリにアップロードします。 この作業が済んだら、おつくりになったconcrete5のサイトURLにブラウザでアクセスして、再読み込みをします。 再読み込みしても変化がない場合は、管理画面でキャッシュのクリアをしてください。 テーマのカスタマイズをしている最中は、キャッシュをオフにするのがお作法です。 コメントアウトして正常に表示が消えたら（他の体裁崩れなどがなければ）、footer.phpの27行目を削除しても構いません。 ◆フッターの水色を他の色に変える 同じ要領で、 /【concrete5がインストールされているディレクトリ】/concrete/themes/greek_yogurt/typography.css というファイルを、ローカルに保存します。 次に、変えたい色を決めます。単純に色名を表す英単語を入力するか、微妙なニュアンスの色を使う場合は、16進数の色コードを決めます。 英単語表記にしたい場合は、以下のURLを参考にしてください。 http://blog.livedoor.jp/html_color/archives/50716737.html 16進数でやるなら、以下のURLを参考にしてください。 http://html-color-codes.info/japanese/ 次に、typography.cssを開き、最後の行に以下のように追記してください。
#dddのところを、色名の英単語か16進数のコードにします。#dddは、明るいグレーを意味します。 最後に、ローカルで編集して保存したtypograpy.cssを、 /【concrete5がインストールされているディレクトリ】/themes/greek_yogurt/ にアップロードして保存します。 ブラウザを再読み込みして、変化しているか確認してください。 ヘッダー左上のロゴを画像にして中央揃えにするのは、これが終わってからにしましょう。
Posted on 6月 29, 2015 at 11:17 午前
|
Re: jQuery UIのresizableが編集画面で競合する？テーマは自作のものですか？
Posted on 6月 28, 2015 at 11:26 午後
|
Re: フッターのリンクについてブロックの赤枠で囲まれていない部分は、HTMLやCSSの知識がないと修正できません。
Posted on 6月 28, 2015 at 8:31 午後
|
Re: Re: FAQブロックが作成するbIDと挙動についてありがとうございます。
Posted on 6月 25, 2015 at 3:24 午後
|
FAQブロックが作成するbIDと挙動についてFAQブロックをカスタマイズして、DCPもどきを作ろうとしています。
Posted on 6月 24, 2015 at 8:28 午後
|
Re: デバイスによってデザインテーマを切り替えを5.5系は使ったことないのですが5.6系からモバイルテーマ機能がありますので、それで対応するのはいかがですか？
Posted on 6月 24, 2015 at 3:24 午後
|
Re: DesignerContentで作成したオリジナルブロックで作成したフォームの型を後から変更する現在、こちらを参考に修正中です。
Posted on 6月 23, 2015 at 4:37 午後
|
DesignerContentで作成したオリジナルブロックで作成したフォームの型を後から変更するWYSIWYGの入力黒目を作りたかったのですが、間違えてテキストエリアで作ってしまいました。
Posted on 6月 23, 2015 at 4:08 午後
|