keitayoshida.com

Talk to us

Visual Composer ビジュアルコンポーザーの使い方 ヘッダーの作成方法

[vc_row full_width=”stretch_row” css=”.vc_custom_1516895987160{background-image: url(https://keitayoshida.com/creation/wp-content/uploads/2018/01/pexels-photo-1280-640.jpeg?id=2600) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}”][vc_column width=”1/2″][/vc_column][vc_column width=”1/2″][vc_row_inner][vc_column_inner][vc_custom_heading text=”CREATION” font_container=”tag:h2|font_size:50px|text_align:center|color:%23ffffff” google_fonts=”font_family:Arimo%3Aregular%2Citalic%2C700%2C700italic|font_style:700%20bold%20regular%3A700%3Anormal” css_animation=”bounceInRight” css=”.vc_custom_1517036641854{padding-top: 180px !important;}”][vc_custom_heading text=”GET ON THE BIG WABE!!!” font_container=”tag:h2|font_size:28px|text_align:center|color:%23ffffff” google_fonts=”font_family:Arimo%3Aregular%2Citalic%2C700%2C700italic|font_style:700%20bold%20regular%3A700%3Anormal” css_animation=”bounceInRight”][vc_column_text css_animation=”fadeInDown” css=”.vc_custom_1517036666824{padding-bottom: 100px !important;}”]

powered by keitayoshida.com

[/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row][vc_column][vc_custom_heading text=”How to use Visual Composer” font_container=”tag:h2|font_size:50px|text_align:center|color:%23909090″ google_fonts=”font_family:Arimo%3Aregular%2Citalic%2C700%2C700italic|font_style:700%20bold%20regular%3A700%3Anormal” css_animation=”fadeInUp”][vc_column_text]

当サイトでは、ビジュアルコンポーザーでヘッダー画像を作成する方法を動画で解説しています。

[/vc_column_text][vc_empty_space height=”30px”][vc_row_inner][vc_column_inner width=”1/2″][vc_video link=”https://youtu.be/x3Ng6SUp-F0″][/vc_column_inner][vc_column_inner width=”1/2″][vc_custom_heading text=”Vol.1″ font_container=”tag:h2|font_size:50px|text_align:center|color:%23909090″ google_fonts=”font_family:Arimo%3Aregular%2Citalic%2C700%2C700italic|font_style:700%20bold%20regular%3A700%3Anormal” css_animation=”bounceInRight”][vc_custom_heading text=”How to set the top image” font_container=”tag:h2|font_size:25px|text_align:center|color:%23909090″ google_fonts=”font_family:Arimo%3Aregular%2Citalic%2C700%2C700italic|font_style:700%20bold%20regular%3A700%3Anormal” css_animation=”bounceInRight”][vc_column_text css_animation=”fadeInDown”]ビジュアルコンポーザーで、ヘッダーの作成方法を解説していきます。今回はヘッダーに画像を背景にして設置する方法を解説します。

また無料で背景画像をダウンロードできるサイトを紹介していますので、ぜひご活用ください。[/vc_column_text][vc_btn title=”Vol.1 個別記事” style=”outline-custom” outline_custom_color=”#666666″ outline_custom_hover_background=”#666666″ outline_custom_hover_text=”#ffffff” shape=”square” align=”center” link=”url:http%3A%2F%2Fkeitayoshida.com%2Fcreation%2F2018%2F02%2F01%2Fvisual-composer-top-image%2F|title:http%3A%2F%2Fkeitayoshida.com%2Fcreation%2F2018%2F02%2F01%2Fvisual-composer-top-image%2F|target:%20_blank|”][/vc_column_inner][/vc_row_inner][vc_column_text]スポンサードリンク


[/vc_column_text][vc_row_inner][vc_column_inner width=”1/2″][vc_video link=”https://youtu.be/KeMtB1cKdlU”][/vc_column_inner][vc_column_inner width=”1/2″][vc_custom_heading text=”Vol.2″ font_container=”tag:h2|font_size:50px|text_align:center|color:%23909090″ google_fonts=”font_family:Arimo%3Aregular%2Citalic%2C700%2C700italic|font_style:700%20bold%20regular%3A700%3Anormal” css_animation=”bounceInRight”][vc_custom_heading text=”How to duplicate and delete elements” font_container=”tag:h2|font_size:25px|text_align:center|color:%23909090″ google_fonts=”font_family:Arimo%3Aregular%2Citalic%2C700%2C700italic|font_style:700%20bold%20regular%3A700%3Anormal” css_animation=”bounceInRight”][vc_column_text css_animation=”fadeInDown”]ビジュアルコンポーザーは要素が集まって、ウェブサイトを構成しています。要素は複製したり、削除したり、移動したりできます。

今回の講座の内容を習得することで、効率よくウェブサイトの作成ができるようになります。[/vc_column_text][vc_btn title=”Vol.2 個別記事” style=”outline-custom” outline_custom_color=”#666666″ outline_custom_hover_background=”#666666″ outline_custom_hover_text=”#ffffff” shape=”square” align=”center” link=”url:http%3A%2F%2Fkeitayoshida.com%2Fcreation%2F2018%2F02%2F01%2Fvisual-composer-copy-delete%2F||target:%20_blank|”][/vc_column_inner][/vc_row_inner][vc_column_text]スポンサードリンク


[/vc_column_text][vc_row_inner][vc_column_inner width=”1/2″][vc_video link=”https://youtu.be/XFy_UfWsclg”][/vc_column_inner][vc_column_inner width=”1/2″][vc_custom_heading text=”Vol.3″ font_container=”tag:h2|font_size:50px|text_align:center|color:%23909090″ google_fonts=”font_family:Arimo%3Aregular%2Citalic%2C700%2C700italic|font_style:700%20bold%20regular%3A700%3Anormal” css_animation=”bounceInRight”][vc_custom_heading text=”How to insert a character in a header” font_container=”tag:h2|font_size:25px|text_align:center|color:%23909090″ google_fonts=”font_family:Arimo%3Aregular%2Citalic%2C700%2C700italic|font_style:700%20bold%20regular%3A700%3Anormal” css_animation=”bounceInRight”][vc_column_text css_animation=”fadeInDown”]ヘッダー画像に、文字を挿入する方法を解説します。文字をスライドさせたり、動きのあるヘッダーが作成できるようになります。

[/vc_column_text][vc_btn title=”Vol.3 個別記事” style=”outline-custom” outline_custom_color=”#666666″ outline_custom_hover_background=”#666666″ outline_custom_hover_text=”#ffffff” shape=”square” align=”center” link=”url:http%3A%2F%2Fkeitayoshida.com%2Fcreation%2F2018%2F02%2F01%2Fvisual-compose-header-word%2F||target:%20_blank|”][/vc_column_inner][/vc_row_inner][vc_column_text]スポンサードリンク


[/vc_column_text][vc_row_inner][vc_column_inner width=”1/2″][vc_video link=”https://youtu.be/SXrewej6TiQ”][/vc_column_inner][vc_column_inner width=”1/2″][vc_custom_heading text=”Vol.4″ font_container=”tag:h2|font_size:50px|text_align:center|color:%23909090″ google_fonts=”font_family:Arimo%3Aregular%2Citalic%2C700%2C700italic|font_style:700%20bold%20regular%3A700%3Anormal” css_animation=”bounceInRight”][vc_custom_heading text=”How to make headers compatible with smartphones” font_container=”tag:h2|font_size:25px|text_align:center|color:%23909090″ google_fonts=”font_family:Arimo%3Aregular%2Citalic%2C700%2C700italic|font_style:700%20bold%20regular%3A700%3Anormal” css_animation=”bounceInRight”][vc_column_text css_animation=”fadeInDown”]スマートフォンやiPhoneに対応したヘッダー画像の作成方法を解説していきます。PCで見栄えの良いヘッダー画像を作成したとしても、携帯の画面で見るととんでもない表示をしていることがあります。

ビジュアルコンポーザーは、携帯に対応したヘッダーの要素もあるのですが、それだと自由度の高いヘッダーのデザインができません。

この方法なら、あなたのイメージに沿ったヘッダーが作成できますので、ぜひチャレンジしてほしい技術です。[/vc_column_text][vc_btn title=”Vol.4 個別記事” style=”outline-custom” outline_custom_color=”#666666″ outline_custom_hover_background=”#666666″ outline_custom_hover_text=”#ffffff” shape=”square” align=”center” link=”url:http%3A%2F%2Fkeitayoshida.com%2Fcreation%2F2018%2F02%2F01%2Fvisual-composer-header-iphone%2F||target:%20_blank|”][/vc_column_inner][/vc_row_inner][vc_custom_heading text=”Vol.5″ font_container=”tag:h2|font_size:50px|text_align:center|color:%23909090″ google_fonts=”font_family:Arimo%3Aregular%2Citalic%2C700%2C700italic|font_style:700%20bold%20regular%3A700%3Anormal” css_animation=”rotateInUpLeft”][vc_custom_heading text=”Comming Soon!!!” font_container=”tag:h2|font_size:25px|text_align:center|color:%23909090″ google_fonts=”font_family:Arimo%3Aregular%2Citalic%2C700%2C700italic|font_style:700%20bold%20regular%3A700%3Anormal” css_animation=”rotateInDownLeft”][/vc_column][/vc_row]