【15】〇〇でもできる!写真アルバム・ギャラリーサイトの作り方

15. サーバーのファイルの閲覧・書き込み方法

サーバーの中のファイルを直接操作したい場合

何らかの理由で直接ファイルを見てみたい場合があるかもしれません。そのような場合、いくつかの方法があります。

「ファイルマネージャー」を使う方法

サーバーの「コントロールパネル」のメニュー「ツール」の「ファイルマネージャー」から見たり、ダウンロードしたりアップロードしたりすることができます。

CORE-Xの場合、ドメインを関連づけると「domains」というフォルダの中にそのドメイン名のフォルダが生成されます。ドメイン名のフォルダを開くと「public_html」というフォルダがあり、その中のものが一般に公開される部分となります。インストールしたワードプレスのプログラム群もこの中に入っています。

ワードプレスをインストールすると4つのフォルダができますが、そのうちの「wp-content」フォルダの中にプラグインやテーマや写真などのコンテンツが収納されます。

WordPressの「管理画面」から見る方法

ワードプレスの「管理画面」のメニュー「外観」の中の「テーマエディタ」から各種ファイルを見たり記入したりすることができます。

cocoonテーマを使用している場合は「Cocoon Child: スタイルシート (style.css)」が最初に出てきますが、ここにスタイルを指定するプログラムを記入して、細かい調整をすることができます。

例えば当ミュージアムの場合は以下のような記述を追加しています。

/*読みやすい文字を指定します*/
body .rbs-img-content
{font-family:"UD デジタル 教科書体 NK-B","GJ Jun 34","メイリオ", Meiryo, Osaka,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS Pゴシック", "MS PGothic", sans-serif !important;}

/*日付などの表示をまとめて消してしまいます*/
.page .date-tags,
.page .author-info {
    display: none;
} 

/*サイトタイトル部分に白い縁をつけて背景があってもよく見えるようにします*/
.site-name {
	text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
}

.tagline {
	text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
}

/*サイドバーのタイトル文字色を白くして見やすくします*/
.sidebar h3 {
  color: #fff;
	}
		
/*タグクラウドのデザイン*/
.widget_tag_cloud .tagcloud a{
 background:#fff;
 border:1px solid #bbb;
 color:#666;
 padding:6px;
 margin:3px;
 border-radius:1px;
 text-decoration:none;
 font-size:12px;
}
/*タグクラウドマウスオーバー時*/
.widget_tag_cloud .tagcloud a:hover{
 background:#ff870f; 
 color:#fff; 
 border:1px solid;
}

/*目次の背景に薄い黄色いグラデーションをかけてかっこよくします*/
.toc {
background: radial-gradient(rgb(242, 242, 242), rgb(242, 242, 242), rgb(249, 245, 220));
}

/*タイトルの下のメニューの色を設定します*/
#navi .navi-in a:hover{
	color: #000000!important;
	background: #FFCC66;
	transition: all 0s ease;
}

#navi .navi-in > .menu-header .sub-menu{
	background: #FFE98D;
}


.fz-18px{
	line-height: 157% !important;
}

/*カラムの隙間を0にするための調整*/

.content-in {
  justify-content: center;
}

@media screen and (max-width:1142px) {

  .sidebar {
    margin-left: 0;
  }

  .main {
    margin-right: 0;
  }

}

/************************************
** ブログカード(本文挿入)
***********************************/
.blogcard {
border: 0px solid whitesmoke;
border-radius:4px;
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.26);
}
a.blogcard-wrap.internal-blogcard-wrap.a-wrap.cf:hover{/*内部ブログカードのみhovershadowを非表示*/
box-shadow:none;
}
.internal-blogcard::after{
background-color:#8b968d!important;
}
.blogcard:before {/*ブログカード左上のアイコンを非表示*/
display:none;
}
.internal-blogcard::after{/** 続きを読む*/
content: "続きを読む \00bb"; /* 内部リンク右下枠の文言 */
position: absolute;
bottom: 0.5rem;
right: 0.7rem;
font-size: 70%;
background-color: #ffd242; /* 内部リンク右下枠の背景色 */
padding: .4em 3em;
font-weight: bold;
color: #fff;
border-radius: 2px;
}
.blogcard-date{
display:none;
}
.blogcard-title { /* タイトル */
font-size:1em;
padding:.2em .2em 0;
line-height:1.4em;
text-align: justify;
}
.blogcard-snippet {
padding:0em .5em .3em;
color:#7b7b7b;
text-align: justify;
}
.blogcard-content.internal-blogcard-content{/*ブログカードタイトルの枠を大きくする*/
max-height:20em;
}
@media screen and (max-width: 1023px){
.blogcard-title {
padding:.3em .3em 0em .2em;
line-height:1.5em;
}
.blogcard-snippet {
font-size:.9em;
margin-top:.3em;
}
}
@media screen and (max-width: 960px){
.blogcard-title {
padding:.3em .3em .2em .2em;
line-height:1.5em;
}
.blogcard-snippet{
font-size:.8em;
max-height:15em;
}
}
@media screen and (max-width: 834px){
.blogcard-title {
font-size:1.1em;
padding:.2em .3em .5em .2em;
}
.blogcard-snippet {
font-size:.9em;
}
}
@media screen and (max-width: 740px){
.blogcard-title {
padding:.3em;
}
}
@media screen and (max-width: 673px){
.blogcard-title {
padding:.3em .5em 1em .2em;
line-height:1.8em;
}
.blogcard-snippet {
display:none;
}
}
@media screen and (max-width: 480px){
.blogcard-title {
padding:.1em .4em 0em .1em;
line-height:1.5em;
}
.blogcard-footer{
margin-top:1em;
}
}

右側の列で他のファイルを選択できます。二番目にある「Cocoon Child: テーマのための関数 (functions.php)」もよく使います。当ミュージアムでは以下のように追加しています。

//svgファイルもアップロードできるようにします
function add_file_types_to_uploads($file_types){
 
    $new_filetypes = array();
    $new_filetypes['svg'] = 'image/svg+xml';
    $file_types = array_merge($file_types, $new_filetypes );
 
    return $file_types;
}
add_action('upload_mimes', 'add_file_types_to_uploads');

//投稿パンくずリストのトップテキストを「マップ」に変更します。
add_filter('breadcrumbs_single_root_text', function (){
  return 'マップ';
});

//固定ページパンくずリストルートテキスト
add_filter('breadcrumbs_page_root_text', function (){
  return 'マップ';
});
FTPソフトを使う方法

FTPソフトを使用してサーバーの中を操作することができます。有名なソフトとしては「FFFTP」があります。また、サーバーの中のファイルのパーミッションをサブフォルダの中も含めて一括変更したい場合などは、「FileZilla Client」を使うとそのような機能があります。