1ページのみのHPを作りたい
-
色々なHPのまとめとして、
1枚のページに画像をいくつか載せ、画像にリンクを貼って、
外部HP(マルチサイトで作成したHP)に飛ばしたいと思っています。理想としては、ポートフォリオのように、ただただ画像が何枚か表示されて、
カーソルを合わせると説明が出るような、何かアクションがあればいいなと思っています。オススメのテーマがありましたら、
そのテーマ名と、簡単な使い方(画像の挿入方法やアクションの設定方法)を教えて頂けないでしょうか。見た目の好みとしては、【Thumbs Portfolio】【Webart】【Gripvine】あたりが近いかと思って、
インストールしたのですが、トップページへの画像の貼り方もわからない状態です。
(お試し用としていくつかメディアは追加してあります。)
-
Nishikiはいかがでしょうか?
WordPressテーマ Nishiki で「アイテム追加」機能を使う方法で似たようなことができると思います。
問題はあなたがデザインに納得いくかどうかですが、試してみるといいかもしれません。
>カーソルを合わせると説明が出る
画像リンクにtitle属性をもたせてはいかがでしょうか?ありがとうございます。
ひとまず使ってみて、自分がやりたいことが出来る事を確認致しました。
基本情報から、横幅の設定が出来るのは確認しましたが、
フロントページのセクションの縦幅を設定することは出来ないのでしょうか。
写真とボタンだけの表示で、セクション1と2の間が空きすぎている印象です。また、質問なのですが、通常は個別ページを作成しないと写真が貼れないのでしょうか。
【Thumbs Portfolio】【Webart】【Gripvine】【Espied】【FolioPress】
等は、画像リンクから固定ページに飛ぶしかない、ということでしょうか。>フロントページのセクションの縦幅
結論のみいいますと子テーマ or カスタムCSS等を使って調整することは可能です。
Google Chrome をお使いの場合はF12を押すことで開発ツールを起動でき、
それを参照しながらmarginやpaddingを調整すると良いでしょう。Nishikiテーマには専用のサポートフォーラムがあるようなのでそちらで相談してみると良いと思います。
>通常は個別ページを作成しないと写真が貼れない
そんなことはないと思います。画像はメディアライブラリから読み込むようですし、
リンク部分は普通に http:// からはじまるリンクを入力すれば良いと思います。>【Thumbs Portfolio】【Webart】【Gripvine】【Espied】【FolioPress】
Nishikiを含めて私はこれらのテーマについて詳しくありませんが、
仮に、あなたがHTMLやCSSに詳しいのであればあなたの望むとおりにできると思います。Nishikiは例の機能を実装するのを簡略化する機能を備えているだけで、
Nishikiが書き出すHTMLやCSSを参考にすれば同じようなフォーマットでページを作ることが可能でしょう。Rick様
色々とありがとうございます。
今回始めてwordpressを触ったどころか、
webデザインすら初めての状況で、勿論HTMLやCSSに詳しくありません。載せさせて頂いたテーマですと、TOPページに画像だけを貼るやり方すらわからなかったので、
私には難しいということですね…
見た目が気に入っていただけに残念です。因みに、NISHIKIでは、ボタンでリンク先に飛ばすようになっていますが、
ボタンを表示せずに写真から飛ばす設定は簡単に出来ますか?教えて頂いたサポートフォーラムを見ていますが、探しきれませんでした。
>因みに、NISHIKIでは、ボタンでリンク先に飛ばすようになっていますが、
>ボタンを表示せずに写真から飛ばす設定は簡単に出来ますか?カスタマイザー上での設定では画像をリンクにすることはできなさそうです。
P.S.
前回の回答で【サポートフォーラム】という言葉を使いましたが正しくは【ユーザーコミュニティ】でした。
文言を間違えたことを深くお詫び申し上げます。ユーザーコミュニティには最低でも無料会員登録をしないとアクセスできなかったと思います。
なので会員登録してとりあえずユーザーコミニティに相談してみることをおすすめします。P.P.S.
【この投稿は自動化システムにより承認待ちとなっています。】
というシステムにひっかかってしまったので再投稿しました。ちなみに画像にリンクをつける際は
<a href="(リンク先)" target="_blank" title="(リンク先の説明)"> <img src="(画像のURL)" alt="画像の説明"> </a>
とすれば、画像にカーソルをもっていけばリンク先の説明文が表示されます。
<a href="(リンク先)" target="_blank"> <img src="(画像のURL)" alt="画像の説明"> <p>リンク先の説明</p> </a>
とすれば画像と説明文の両方をリンクにする事ができます。
今回は画像とリンク先を用意していないので画像は表示されずリンクは無効ですが、
雰囲気はわかっていただけると思います。これらを横並びにしたい場合はこれからのCSSレイアウトはFlexboxで決まり!あたりが参考になると思います。
-
この返信は6年、 2ヶ月前に
DRILL LANCERが編集しました。
-
この返信は6年、 2ヶ月前に
DRILL LANCERが編集しました。
Rick様
ユーザーコミュニティ参加の為、無料登録をしてみました。
ありがとうございます。
また、画像にリンクの貼るやり方までご丁寧にありがとうございます。
画像が拝見出来ません…
参考にさせて頂きたいのですが、どうすれば見られますでしょうか。また、もしかするとですが、作ろうとしている、
まとめの為の1枚HPは、打ち込みで作ってしまった方が楽なのでしょうか…
HTMLもCSSもかなり初心者ですが、勉強がてらにそれもありかなぁと思い始めましたが、
やはり初心者には無謀でしょうか。
写真を8枚ほど並べて、教えて頂いた、【画像にリンクを貼る方法】で、
各HPに飛ばしたいのですが…Rick様
すいません、先程、画像が見られないと申しましたが、
意味がわかりました。こういう風に作れるよ、ということですね、
何もわからず、エラーだと思ってしまいましたすいません。>また、もしかするとですが、作ろうとしている、
>まとめの為の1枚HPは、打ち込みで作ってしまった方が楽なのでしょうか…Nishikiテーマではこういった機能の需要があったからつけたようですが
他のテーマにこういう機能がついているとは限りません。こういうことができるテーマを探す時間を浪費するよりは、
自分で挑戦してやってみたほうが時間短縮につながる可能性があります。
それに挑戦することでスキルが身につき、そのスキルがが後々に利いてくることもあるでしょう。どうしても自分でやるのが嫌ならば誰かに頼むという手もありますが、
相手に完成予想図をしっかり伝える必要があるので何度もやり取りをする必要がでてくるでしょう。
また、場合によっては妥協をする必要があるかもしれません。そう考えると自分でやったほうが楽だと私だったら考えます。
このあたりはあなたの性格や考え方次第だと思います。>HTMLもCSSもかなり初心者ですが、勉強がてらにそれもありかなぁと思い始めましたが、
>やはり初心者には無謀でしょうか。何事も挑戦あるのみだと思うので挑戦してみることをおすすめします。
また、サイトのURLを貼っていただければアドバイスする側としても
アドバイスしやすいのでその点も検討してみてください。また、bootstrapベースのテーマを使ったり(初心者向け)、
bootstrapをテーマに導入したり(中級者向け?)して
それをベースに構築するのもありかもしれません。bootstrapはhtmlにクラスを適用するだけである程度のデザインを施せるもので、
CSSにあまり詳しくない人には重宝されるものです。このコードを記述するとこうなるといったドキュメント(Layout以下)も充実しているので完成予想図を想像しながらサイトを構築できます。
>写真を8枚ほど並べて、教えて頂いた、【画像にリンクを貼る方法】で、
>各HPに飛ばしたいのですが…画像8つを横並びにするのはちょっと無謀と思います。
せいぜい4行×2列か2行×4列でレイアウトするのがよろしいかと。-
この返信は6年、 2ヶ月前に
DRILL LANCERが編集しました。
-
この返信は6年、 2ヶ月前に
DRILL LANCERが編集しました。
Rick様
今の所、4×2の8個で考えています。
(9個になってしまったら3×3にしようと思っています。)そうですね、挑戦してみようと思います。
bootstrapベースのテーマというのを検索した所、
【Work】というテンプレートが近いような気がしました。
>それをベースに構築
とのことですが、HPからDownloadして使う、ということでしょうか?
https://freehtml5.co/work-free-html5-template-bootstrap/>また、サイトのURLを貼っていただければアドバイスする側としても
>アドバイスしやすいのでその点も検討してみてください。
こちら、本当に助かります。
基礎の基礎を作成した時点で載せさせて頂きます。>bootstrapベースのテーマというのを検索した所、
>【Work】というテンプレートが近いような気がしました。
えーとこれはWordPress用のテンプレートではないようです。
しかもBootstrapのバージョンが古いです。(最新は4.1.3)Bootstrapが搭載されたWPテーマはここから検索できます。
個人的にはLightning、Liquid(Liquid Pressも含む)、Habakiriあたりが作者が日本人のためおすすめです。
1カラムでよいのであればtsumugiなども面白いかもしれません。ただし、Liquidの作者は有料テーマ(一部の試用版は無料)に力を入れているようで、Habakiriの作者も他のテーマに力をいれているのが現状です。
Lighteningは頻繁に更新されるのでこれが一番オススメできるかもしれません。-
この返信は6年、 2ヶ月前に
DRILL LANCERが編集しました。
-
この返信は6年、 2ヶ月前に
DRILL LANCERが編集しました。
そうなのですね;
搭載されたテーマを一通り見てみました。
Lightningは、前任が使っており、私も修正等で色々と触ってみました。
わかりやすく、使いやすいですが、私がやりたいと思っていることとはちょっと違うかな、
という気がします。
究極を言えば、ヘッダーもフッターもメニューもいらないくらいに思っています。
(極力薄いヘッダーで、ロゴを入れるくらいでいいと思っています。)
画面いっぱいに写真を何枚か配置して、画像クリックで新規ウィンドウで開ければ、というのが理想です。
イメージとしては、こんな感じでしょうか
https://sanographix.github.io/illustfolio4/docs/
これに、カーソルを合わせたら、何かアクションを起こして、
簡易的な説明文が表示されれば一番いいのですが。。。もうちょっと内情をお話させていただきますと、
現在LinghtningでHPを持っており、色々なカテゴリーの情報がごちゃまぜになってしまっているので、
各カテゴリーごとにマルチサイト機能を使ってHPを新しく作成するつもりです。
その、親サイト?として、今回のような質問をさせて頂いた次第です。
各カテゴリーのHPを作る方が先だと言われてしまうかもしれないのですが、
ひとまず練習のつもりで、一番情報量の少ないサイトから手を付けた、という感じです。親サイトが出来たら、ひとまずは今あるLightningの固定ページに飛ばす予定です。
>現在LinghtningでHPを持っており、色々なカテゴリーの情報がごちゃまぜになってしまっているので、
>各カテゴリーごとにマルチサイト機能を使ってHPを新しく作成するつもりです。マルチサイトを使うよりはサイトごとにWordPressをインストールしたほうがメンテナンスしやすいのでおすすめです。
マルチサイトの場合、1つがだめになったら他のも巻き込まれてダメになるリスクがあったり、意外と管理しづらいので私なら絶対避けますね。>究極を言えば、ヘッダーもフッターもメニューもいらないくらいに思っています。
>(極力薄いヘッダーで、ロゴを入れるくらいでいいと思っています。)メニューは設定で無効化できますし(メニューを作成しなければいいだけのこと)、
メニューがなければヘッダにはタイトル or ロゴ画像と説明文くらいしか残らないと思います。
(SNSへのリンクがあるものも有効化・無効化の設定ができますし。)
フッターもウィジェットを使わなければブログ情報のみのものがほとんどです。(提供元は表示されるかも)
ヘッダ部分に画像がどーんとあるものは大抵の場合カスタマイザーで有効・無効が可能でしょう。そう考えれば私としてはぶっちゃけどれでも良さそうな気がします。
しいて言えば1カラムに対応しているか否かで選ぶくらいですかね。(サイドバーも不要な場合)>画面いっぱいに写真を何枚か配置して、画像クリックで新規ウィンドウで開ければ、というのが理想です。
>カーソルを合わせたら、何かアクションを起こして、簡易的な説明文が表示されれば一番いいのですが。。。単に画像のみが並んでいるだけの見た目のサイトだと、
ただただ写真を貼っているだけのサイトと誤解され、
ユーザーがあなたの本丸のサイトを見に来てくれない可能性があります。
やはり画像と説明文(とサイトタイトル)はセットにして並べたほうが良いと思います。私だったら固定ページを作成し、カードレイアウトを使ってこれらをいくつか横並びにして記事を作成しその記事を固定フロントページに設定します。
Rick様
流石といいますか、的確なアドバイスをありがとうございます。
それもそうですね、初心者過ぎて、デザインにばかりこだわっていることに気が付きました。最初に教えて頂いた、NISHIKIで練習してみます。
ヘッダーの高さを低くしようと、テーマの編集を見ていますが、
どこにヘッダーの設定があるのかもわかりませんでした。追加CSSで、
#header {
height:〇〇;
}
ではだめなのでしょうか。何も変わりませんでした。Google Chromeの場合、サイト上の気になる部分を右クリックして「検証」をクリックすると
その部分のhtmlソースとCSSを見ることができます。<div class="class1">
の記述がある場合、CSSのクラスは
.class1{(略)}
といった感じで書かれています。親の要素の影響を受けている場合もありますので
付近のHTMLソースとCSSを検証してみるとよいでしょう。値の変更もできますので色々ためした上で納得行ったものを
追加CSSだの子テーマのCSSだのに追加するといいかもしれません。Nishikiの場合、ヘッダ部分はたいしたことはないのですが、
メインビジュアルがかなりの高さをいるため、新たなメインビジュアル上の画像を作成して
メインビジュアルに設定するのがいいかもしれません。もしくは、NISHIKIのユーザーコミュニティでNISHIKIのメインビジュアルを無効化するカスタマイズが行えるよう頼んで見るのも手かもしれません。
-
この返信は6年、 2ヶ月前に
- トピック「1ページのみのHPを作りたい」には新たに返信することはできません。